feat(ui): add confirmation dialog box to clear queue button

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",

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>
   );
 };
 

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;