From 1c38cce16d0ad74ce5e04d147cee5b1aecfc5c39 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 20 Sep 2023 22:39:54 +1000
Subject: [PATCH] feat(ui): add confirmation dialog box to clear queue button

---
 invokeai/frontend/web/public/locales/en.json  |  2 ++
 .../queue/components/ClearQueueButton.tsx     | 35 ++++++++++++-------
 .../queue/components/common/QueueButton.tsx   |  2 +-
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index d69015fbdc..f979c91247 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -239,6 +239,8 @@
         "cancelItem": "Cancel Item",
         "cancelBatchSucceeded": "Batch Canceled",
         "cancelBatchFailed": "Problem Canceling Batch",
+        "clearQueueAlertDialog": "Clearing the queue immediately cancels any processing items and clears the queue entirely.",
+        "clearQueueAlertDialog2": "Are you sure you want to clear the queue?",
         "current": "Current",
         "next": "Next",
         "status": "Status",
diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
index 1cf7665983..8f727c3a8a 100644
--- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { FaTrash } from 'react-icons/fa';
 import { useClearQueue } from '../hooks/useClearQueue';
 import QueueButton from './common/QueueButton';
-import { ChakraProps } from '@chakra-ui/react';
+import { ChakraProps, Text } from '@chakra-ui/react';
+import IAIAlertDialog from 'common/components/IAIAlertDialog';
 
 type Props = {
   asIconButton?: boolean;
@@ -15,17 +16,27 @@ const ClearQueueButton = ({ asIconButton, sx }: Props) => {
   const { clearQueue, isLoading, queueStatus } = useClearQueue();
 
   return (
-    <QueueButton
-      isDisabled={!queueStatus?.queue.total}
-      isLoading={isLoading}
-      asIconButton={asIconButton}
-      label={t('queue.clear')}
-      tooltip={t('queue.clearTooltip')}
-      icon={<FaTrash />}
-      onClick={clearQueue}
-      colorScheme="error"
-      sx={sx}
-    />
+    <IAIAlertDialog
+      title={t('queue.clearTooltip')}
+      acceptCallback={clearQueue}
+      acceptButtonText={t('queue.clear')}
+      triggerComponent={
+        <QueueButton
+          isDisabled={!queueStatus?.queue.total}
+          isLoading={isLoading}
+          asIconButton={asIconButton}
+          label={t('queue.clear')}
+          tooltip={t('queue.clearTooltip')}
+          icon={<FaTrash />}
+          colorScheme="error"
+          sx={sx}
+        />
+      }
+    >
+      <Text>{t('queue.clearQueueAlertDialog')}</Text>
+      <br />
+      <Text>{t('queue.clearQueueAlertDialog2')}</Text>
+    </IAIAlertDialog>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
index e165967936..29a94e9725 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
@@ -7,7 +7,7 @@ type Props = {
   label: string;
   tooltip: ReactNode;
   icon: ReactElement;
-  onClick: () => void;
+  onClick?: () => void;
   isDisabled?: boolean;
   colorScheme: ThemeTypings['colorSchemes'];
   asIconButton?: boolean;