From aa3e96deb5176f55f06ab306be29fc80dc4da931 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 19 Sep 2024 12:46:18 +1000
Subject: [PATCH] feat(ui): show alert on viewer when staging on canvas

Also update the verbiage for the alerts:
- "Sending to Canvas" -> "Staging Generations on Canvas"
- "Sending to Gallery" -> "Sending Generations to Gallery"
---
 invokeai/frontend/web/public/locales/en.json  |  4 ++--
 .../CanvasAlerts/CanvasAlertsSendingTo.tsx    |  7 +++++-
 .../CanvasAlertsStagingButOnViewer.tsx        | 23 +++++++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsStagingButOnViewer.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 59db81d2d2..76674ad831 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1727,8 +1727,8 @@
         "referenceImage": "Reference Image",
         "regionalReferenceImage": "Regional Reference Image",
         "globalReferenceImage": "Global Reference Image",
-        "sendingToCanvas": "Sending to Canvas",
-        "sendingToGallery": "Sending to Gallery",
+        "sendingToCanvas": "Staging Generations on Canvas",
+        "sendingToGallery": "Sending Generations to Gallery",
         "sendToGallery": "Send To Gallery",
         "sendToGalleryDesc": "Pressing Invoke generates and saves a unique image to your gallery.",
         "sendToCanvas": "Send To Canvas",
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
index 1064c4d40f..b8ba97680e 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
@@ -11,6 +11,7 @@ import {
 } 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';
 import {
   selectCanvasRightPanelGalleryTab,
   selectCanvasRightPanelLayersTab,
@@ -82,7 +83,11 @@ const ActivateCanvasButton = (props: PropsWithChildren) => {
 export const CanvasAlertsSendingToCanvas = () => {
   const { t } = useTranslation();
   const destination = useCurrentDestination();
+  const isStaging = useAppSelector(selectIsStaging);
   const isVisible = useMemo(() => {
+    if (isStaging) {
+      return true;
+    }
     if (!destination) {
       return false;
     }
@@ -92,7 +97,7 @@ export const CanvasAlertsSendingToCanvas = () => {
     }
 
     return true;
-  }, [destination]);
+  }, [destination, isStaging]);
 
   return (
     <AlertWrapper
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsStagingButOnViewer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsStagingButOnViewer.tsx
new file mode 100644
index 0000000000..bdfeabd1c7
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsStagingButOnViewer.tsx
@@ -0,0 +1,23 @@
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectPreserveMask } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasAlertsPreserveMask = memo(() => {
+  const { t } = useTranslation();
+  const preserveMask = useAppSelector(selectPreserveMask);
+
+  if (!preserveMask) {
+    return null;
+  }
+
+  return (
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content" alignSelf="flex-end">
+      <AlertIcon />
+      <AlertTitle>{t('controlLayers.settings.preserveMask.alert')}</AlertTitle>
+    </Alert>
+  );
+});
+
+CanvasAlertsPreserveMask.displayName = 'CanvasAlertsPreserveMask';