From 829bc1bc7d548505df3efa32e06cec96f7eff13c Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:38:52 -0800 Subject: [PATCH] feat(ui): progress alert config setting - Add `invocationProgressAlert` as a disable-able feature. Hide the alert and the setting in system settings when disabled. - Fix merge conflict --- .../frontend/web/src/app/types/invokeai.ts | 3 +- .../CanvasAlertsInvocationProgress.tsx | 30 +++++++++++++++---- .../ImageViewer/CurrentImagePreview.tsx | 1 - .../components/SettingsModal/SettingsMenu.tsx | 2 +- .../SettingsModal/SettingsModal.tsx | 6 ++-- .../web/src/services/events/stores.ts | 2 +- 6 files changed, 31 insertions(+), 13 deletions(-) diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts index bee61eb49a..8ec968e269 100644 --- a/invokeai/frontend/web/src/app/types/invokeai.ts +++ b/invokeai/frontend/web/src/app/types/invokeai.ts @@ -25,7 +25,8 @@ export type AppFeature = | 'invocationCache' | 'bulkDownload' | 'starterModels' - | 'hfToken'; + | 'hfToken' + | 'invocationProgressAlert'; /** * A disable-able Stable Diffusion feature diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx index 387f5c2ef3..3368b45713 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx @@ -1,17 +1,17 @@ import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppSelector } from 'app/store/storeHooks'; +import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { selectSystemShouldShowInvocationProgressDetail } from 'features/system/store/systemSlice'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { $canvasProgressMessage } from 'services/events/stores'; +import { $invocationProgressMessage } from 'services/events/stores'; -export const CanvasAlertsInvocationProgress = memo(() => { +const CanvasAlertsInvocationProgressContent = memo(() => { const { t } = useTranslation(); - const progressEventMessage = useStore($canvasProgressMessage); - const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail); + const invocationProgressMessage = useStore($invocationProgressMessage); - if (!shouldShowInvocationProgressDetail || !progressEventMessage) { + if (!invocationProgressMessage) { return null; } @@ -19,9 +19,27 @@ export const CanvasAlertsInvocationProgress = memo(() => { {t('common.generating')} - {progressEventMessage} + {invocationProgressMessage} ); }); +CanvasAlertsInvocationProgressContent.displayName = 'CanvasAlertsInvocationProgressContent'; + +export const CanvasAlertsInvocationProgress = memo(() => { + const isProgressMessageAlertEnabled = useFeatureStatus('invocationProgressAlert'); + const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail); + + // The alert is disabled at the system level + if (!isProgressMessageAlertEnabled) { + return null; + } + + // The alert is disabled at the user level + if (!shouldShowInvocationProgressDetail) { + return null; + } + + return ; +}); CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx index 768691ad48..ea682485b2 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx @@ -58,7 +58,6 @@ const CurrentImagePreview = () => { pointerEvents="none" alignItems="flex-start" > - diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx index 44effa4144..343f937b94 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx @@ -77,7 +77,7 @@ const SettingsMenu = () => { {t('common.hotkeysLabel')} - + }> {t('common.settingsLabel')} diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index df90176adf..3117a39a8e 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -26,6 +26,7 @@ import { SettingsDeveloperLogLevel } from 'features/system/components/SettingsMo import { SettingsDeveloperLogNamespaces } from 'features/system/components/SettingsModal/SettingsDeveloperLogNamespaces'; import { useClearIntermediates } from 'features/system/components/SettingsModal/useClearIntermediates'; import { StickyScrollable } from 'features/system/components/StickyScrollable'; +import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { selectSystemShouldAntialiasProgressImage, selectSystemShouldConfirmOnDelete, @@ -58,7 +59,6 @@ type ConfigOptions = { shouldShowResetWebUiText?: boolean; shouldShowClearIntermediates?: boolean; shouldShowLocalizationToggle?: boolean; - shouldShowInvocationProgressDetailToggle?: boolean; }; const defaultConfig: ConfigOptions = { @@ -66,7 +66,6 @@ const defaultConfig: ConfigOptions = { shouldShowResetWebUiText: true, shouldShowClearIntermediates: true, shouldShowLocalizationToggle: true, - shouldShowInvocationProgressDetailToggle: true, }; type SettingsModalProps = { @@ -108,6 +107,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps) const shouldEnableModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions); const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession); const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail); + const isInvocationProgressAlertEnabled = useFeatureStatus('invocationProgressAlert'); const onToggleConfirmOnNewSession = useCallback(() => { dispatch(shouldConfirmOnNewSessionToggled()); }, [dispatch]); @@ -233,7 +233,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps) onChange={handleChangeShouldAntialiasProgressImage} /> - {Boolean(config?.shouldShowInvocationProgressDetailToggle) && ( + {isInvocationProgressAlertEnabled && ( {t('settings.showDetailedInvocationProgress')} (null export const $progressImage = computed($lastProgressEvent, (val) => val?.image ?? null); export const $hasProgressImage = computed($lastProgressEvent, (val) => Boolean(val?.image)); export const $isProgressFromCanvas = computed($lastProgressEvent, (val) => val?.destination === 'canvas'); -export const $canvasProgressMessage = computed($lastProgressEvent, (val) => { +export const $invocationProgressMessage = computed($lastProgressEvent, (val) => { if (!val) { return null; }