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

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

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx

@@ -1,27 +1,45 @@
 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;
   }
 
   return (
     <Alert status="loading" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
       <AlertIcon />
       <AlertTitle>{t('common.generating')}</AlertTitle>
-      <AlertDescription>{progressEventMessage}</AlertDescription>
+      <AlertDescription>{invocationProgressMessage}</AlertDescription>
     </Alert>
   );
 });
+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 <CanvasAlertsInvocationProgressContent />;
+});
 
 CanvasAlertsInvocationProgress.displayName = 'CanvasAlertsInvocationProgress';

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx

@@ -58,7 +58,6 @@ const CurrentImagePreview = () => {
         pointerEvents="none"
         alignItems="flex-start"
       >
-        <CanvasAlertsInvocationProgress />
         <CanvasAlertsSendingToCanvas />
         <CanvasAlertsInvocationProgress />
       </Flex>

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -77,7 +77,7 @@ const SettingsMenu = () => {
                 {t('common.hotkeysLabel')}
               </MenuItem>
             </HotkeysModal>
-            <SettingsModal config={{ shouldShowInvocationProgressDetailToggle: false }}>
+            <SettingsModal>
               <MenuItem as="button" icon={<PiToggleRightFill />}>
                 {t('common.settingsLabel')}
               </MenuItem>

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,15 +59,13 @@ type ConfigOptions = {
   shouldShowResetWebUiText?: boolean;
   shouldShowClearIntermediates?: boolean;
   shouldShowLocalizationToggle?: boolean;
-  shouldShowInvocationProgressDetailToggle?: boolean;
 };
 
 const defaultConfig: ConfigOptions = {
   shouldShowDeveloperSettings: true,
   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}
                       />
                     </FormControl>
-                    {Boolean(config?.shouldShowInvocationProgressDetailToggle) && (
+                    {isInvocationProgressAlertEnabled && (
                       <FormControl>
                         <FormLabel>{t('settings.showDetailedInvocationProgress')}</FormLabel>
                         <Switch

invokeai/frontend/web/src/services/events/stores.ts

@@ -11,7 +11,7 @@ export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(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;
   }