feat(ui): canvas send-to alerts are not dismissable

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

@@ -1,14 +1,4 @@
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Button,
-  Flex,
-  Icon,
-  IconButton,
-  Spacer,
-} from '@invoke-ai/ui-library';
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Button, Flex } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useBoolean } from 'common/hooks/useBoolean';
 import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
@@ -18,13 +8,11 @@ import {
 } from 'features/controlLayers/store/ephemeral';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useCurrentDestination } from 'features/queue/hooks/useCurrentDestination';
-import { selectShowSendingToAlerts, showSendingToAlertsChanged } from 'features/system/store/systemSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { AnimatePresence, motion } from 'framer-motion';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { PiXBold } from 'react-icons/pi';
 
 const ActivateImageViewerButton = (props: PropsWithChildren) => {
   const imageViewer = useImageViewer();
@@ -112,18 +100,11 @@ const AlertWrapper = ({
   description: ReactNode;
   isVisible: boolean;
 }) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const showSendToAlerts = useAppSelector(selectShowSendingToAlerts);
   const isHovered = useBoolean(false);
-  const onClickDontShowMeThese = useCallback(() => {
-    dispatch(showSendingToAlertsChanged(false));
-    isHovered.setFalse();
-  }, [dispatch, isHovered]);
 
   return (
     <AnimatePresence>
-      {(isVisible || isHovered.isTrue) && showSendToAlerts && (
+      {(isVisible || isHovered.isTrue) && (
         <motion.div
           initial={{ opacity: 0 }}
           animate={{ opacity: 1, transition: { duration: 0.1, ease: 'easeOut' } }}
@@ -147,17 +128,6 @@ const AlertWrapper = ({
             <Flex w="full" alignItems="center">
               <AlertIcon />
               <AlertTitle>{title}</AlertTitle>
-              <Spacer />
-              <IconButton
-                variant="link"
-                icon={<Icon as={PiXBold} fill="base.50 !important" />}
-                tooltip={t('common.dontShowMeThese')}
-                aria-label={t('common.dontShowMeThese')}
-                right={-1}
-                top={-2}
-                onClick={onClickDontShowMeThese}
-                minW="auto"
-              />
             </Flex>
             <AlertDescription>{description}</AlertDescription>
           </Alert>

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

@@ -24,7 +24,6 @@ import { useRefreshAfterResetModal } from 'features/system/components/SettingsMo
 import { SettingsDeveloperLogIsEnabled } from 'features/system/components/SettingsModal/SettingsDeveloperLogIsEnabled';
 import { SettingsDeveloperLogLevel } from 'features/system/components/SettingsModal/SettingsDeveloperLogLevel';
 import { SettingsDeveloperLogNamespaces } from 'features/system/components/SettingsModal/SettingsDeveloperLogNamespaces';
-import { SettingsShowSendingToDifferentViewAlerts } from 'features/system/components/SettingsModal/SettingsShowSendingToDifferentViewAlerts';
 import { useClearIntermediates } from 'features/system/components/SettingsModal/useClearIntermediates';
 import { StickyScrollable } from 'features/system/components/StickyScrollable';
 import {
@@ -182,7 +181,6 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
                       <FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
                       <Switch isChecked={shouldConfirmOnDelete} onChange={handleChangeShouldConfirmOnDelete} />
                     </FormControl>
-                    <SettingsShowSendingToDifferentViewAlerts />
                   </StickyScrollable>
 
                   <StickyScrollable title={t('settings.generation')}>

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

@@ -1,28 +0,0 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectShowSendingToAlerts, showSendingToAlertsChanged } from 'features/system/store/systemSlice';
-import type { ChangeEvent } from 'react';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export const SettingsShowSendingToDifferentViewAlerts = memo(() => {
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-
-  const isChecked = useAppSelector(selectShowSendingToAlerts);
-  const onChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      dispatch(showSendingToAlertsChanged(e.target.checked));
-    },
-    [dispatch]
-  );
-
-  return (
-    <FormControl>
-      <FormLabel>{t('system.showSendingToAlerts')}</FormLabel>
-      <Switch isChecked={isChecked} onChange={onChange} />
-    </FormControl>
-  );
-});
-
-SettingsShowSendingToDifferentViewAlerts.displayName = 'SettingsShowSendingToDifferentViewAlerts';

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -19,7 +19,6 @@ const initialSystemState: SystemState = {
   logIsEnabled: true,
   logLevel: 'debug',
   logNamespaces: [...zLogNamespace.options],
-  showSendingToDifferentViewAlerts: true,
 };
 
 export const systemSlice = createSlice({
@@ -57,9 +56,6 @@ export const systemSlice = createSlice({
     setShouldEnableInformationalPopovers(state, action: PayloadAction<boolean>) {
       state.shouldEnableInformationalPopovers = action.payload;
     },
-    showSendingToAlertsChanged: (state, action: PayloadAction<boolean>) => {
-      state.showSendingToDifferentViewAlerts = action.payload;
-    },
   },
 });
 
@@ -73,7 +69,6 @@ export const {
   shouldUseNSFWCheckerChanged,
   shouldUseWatermarkerChanged,
   setShouldEnableInformationalPopovers,
-  showSendingToAlertsChanged,
 } = systemSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -108,4 +103,3 @@ export const selectSystemShouldAntialiasProgressImage = createSystemSelector(
 export const selectSystemShouldEnableInformationalPopovers = createSystemSelector(
   (system) => system.shouldEnableInformationalPopovers
 );
-export const selectShowSendingToAlerts = createSystemSelector((s) => s.showSendingToDifferentViewAlerts);

invokeai/frontend/web/src/features/system/store/types.ts

@@ -39,5 +39,4 @@ export interface SystemState {
   logIsEnabled: boolean;
   logLevel: LogLevel;
   logNamespaces: LogNamespace[];
-  showSendingToDifferentViewAlerts: boolean;
 }