feat(ui): add cancel and clear all as toggleable app feature

Author: psychedelicious

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -27,7 +27,8 @@ export type AppFeature =
   | 'bulkDownload'
   | 'starterModels'
   | 'hfToken'
-  | 'retryQueueItem';
+  | 'retryQueueItem'
+  | 'cancelAndClearAll';
 /**
  * A disable-able Stable Diffusion feature
  */

invokeai/frontend/web/src/features/queue/components/CancelAllExceptCurrentButton.tsx

@@ -0,0 +1,32 @@
+import type { ButtonProps } from '@invoke-ai/ui-library';
+import { Button } from '@invoke-ai/ui-library';
+import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXCircle } from 'react-icons/pi';
+
+type Props = ButtonProps;
+
+export const CancelAllExceptCurrentButton = memo((props: Props) => {
+  const { t } = useTranslation();
+  const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();
+
+  return (
+    <>
+      <Button
+        onClick={cancelAllExceptCurrent.openDialog}
+        isLoading={cancelAllExceptCurrent.isLoading}
+        isDisabled={cancelAllExceptCurrent.isDisabled}
+        tooltip={t('queue.cancelAllExceptCurrentTooltip')}
+        leftIcon={<PiXCircle />}
+        colorScheme="error"
+        data-testid={t('queue.clear')}
+        {...props}
+      >
+        {t('queue.clear')}
+      </Button>
+    </>
+  );
+});
+
+CancelAllExceptCurrentButton.displayName = 'CancelAllExceptCurrentButton';

invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx

@@ -1,33 +1,89 @@
 import { IconButton, useShiftModifier } from '@invoke-ai/ui-library';
+import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
+import { PiTrashSimpleBold, PiXBold, PiXCircle } from 'react-icons/pi';
 
 import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog';
 
-export const ClearQueueIconButton = memo((_) => {
+export const ClearQueueIconButton = memo(() => {
+  const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
+  const shift = useShiftModifier();
+
+  if (!shift) {
+    // Shift is not pressed - show cancel current
+    return <CancelCurrentIconButton />;
+  }
+
+  if (isCancelAndClearAllEnabled) {
+    // Shift is pressed and cancel and clear all is enabled - show cancel and clear all
+    return <CancelAndClearAllIconButton />;
+  }
+
+  // Shift is pressed and cancel and clear all is disabled - show cancel all except current
+  return <CancelAllExceptCurrentIconButton />;
+});
+
+ClearQueueIconButton.displayName = 'ClearQueueIconButton';
+
+const CancelCurrentIconButton = memo(() => {
   const { t } = useTranslation();
-  const clearQueue = useClearQueueDialog();
   const cancelCurrentQueueItem = useCancelCurrentQueueItem();
 
-  // Show the single item clear button when shift is pressed
-  // Otherwise show the clear queue button
-  const shift = useShiftModifier();
+  return (
+    <IconButton
+      size="lg"
+      isDisabled={cancelCurrentQueueItem.isDisabled}
+      isLoading={cancelCurrentQueueItem.isLoading}
+      aria-label={t('queue.cancel')}
+      tooltip={t('queue.cancelTooltip')}
+      icon={<PiXBold />}
+      colorScheme="error"
+      onClick={cancelCurrentQueueItem.cancelQueueItem}
+    />
+  );
+});
+
+CancelCurrentIconButton.displayName = 'CancelCurrentIconButton';
+
+const CancelAndClearAllIconButton = memo(() => {
+  const { t } = useTranslation();
+  const clearQueue = useClearQueueDialog();
 
   return (
     <IconButton
       size="lg"
-      isDisabled={shift ? clearQueue.isDisabled : cancelCurrentQueueItem.isDisabled}
-      isLoading={shift ? clearQueue.isLoading : cancelCurrentQueueItem.isLoading}
-      aria-label={shift ? t('queue.clear') : t('queue.cancel')}
-      tooltip={shift ? t('queue.clearTooltip') : t('queue.cancelTooltip')}
-      icon={shift ? <PiTrashSimpleBold /> : <PiXBold />}
+      isDisabled={clearQueue.isDisabled}
+      isLoading={clearQueue.isLoading}
+      aria-label={t('queue.clear')}
+      tooltip={t('queue.clearTooltip')}
+      icon={<PiTrashSimpleBold />}
       colorScheme="error"
-      onClick={shift ? clearQueue.openDialog : cancelCurrentQueueItem.cancelQueueItem}
-      data-testid={shift ? t('queue.clear') : t('queue.cancel')}
+      onClick={clearQueue.openDialog}
     />
   );
 });
 
-ClearQueueIconButton.displayName = 'ClearQueueIconButton';
+CancelAndClearAllIconButton.displayName = 'CancelAndClearAllIconButton';
+
+const CancelAllExceptCurrentIconButton = memo(() => {
+  const { t } = useTranslation();
+  const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();
+
+  return (
+    <IconButton
+      size="lg"
+      isDisabled={cancelAllExceptCurrent.isDisabled}
+      isLoading={cancelAllExceptCurrent.isLoading}
+      aria-label={t('queue.clear')}
+      tooltip={t('queue.cancelAllExceptCurrentTooltip')}
+      icon={<PiXCircle />}
+      colorScheme="error"
+      onClick={cancelAllExceptCurrent.openDialog}
+    />
+  );
+});
+
+CancelAllExceptCurrentIconButton.displayName = 'CancelAllExceptCurrentIconButton';

invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx

@@ -27,6 +27,7 @@ export const QueueActionsMenuButton = memo(() => {
   const { t } = useTranslation();
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
+  const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
   const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();
   const cancelCurrent = useCancelCurrentQueueItem();
   const clearQueue = useClearQueueDialog();
@@ -71,15 +72,17 @@ export const QueueActionsMenuButton = memo(() => {
             >
               {t('queue.cancelAllExceptCurrentTooltip')}
             </MenuItem>
-            <MenuItem
-              isDestructive
-              icon={<PiTrashSimpleBold />}
-              onClick={clearQueue.openDialog}
-              isLoading={clearQueue.isLoading}
-              isDisabled={clearQueue.isDisabled}
-            >
-              {t('queue.clearTooltip')}
-            </MenuItem>
+            {isCancelAndClearAllEnabled && (
+              <MenuItem
+                isDestructive
+                icon={<PiTrashSimpleBold />}
+                onClick={clearQueue.openDialog}
+                isLoading={clearQueue.isLoading}
+                isDisabled={clearQueue.isDisabled}
+              >
+                {t('queue.clearTooltip')}
+              </MenuItem>
+            )}
             {isResumeEnabled && (
               <MenuItem
                 icon={<PiPlayFill />}

invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable i18next/no-literal-string */
 import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
+import { CancelAllExceptCurrentButton } from 'features/queue/components/CancelAllExceptCurrentButton';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { memo } from 'react';
 
@@ -12,6 +13,8 @@ import ResumeProcessorButton from './ResumeProcessorButton';
 const QueueTabQueueControls = () => {
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
+  const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
+
   return (
     <Flex flexDir="column" layerStyle="first" borderRadius="base" p={2} gap={2}>
       <Flex gap={2}>
@@ -25,7 +28,8 @@ const QueueTabQueueControls = () => {
         )}
         <ButtonGroup w={28} orientation="vertical" size="sm">
           <PruneQueueButton />
-          <ClearQueueButton />
+          {isCancelAndClearAllEnabled && <ClearQueueButton />}
+          {!isCancelAndClearAllEnabled && <CancelAllExceptCurrentButton />}
         </ButtonGroup>
       </Flex>
       <ClearModelCacheButton />

invokeai/frontend/web/src/features/ui/components/AppContent.tsx

@@ -141,7 +141,7 @@ export const AppContent = memo(() => {
         )}
         <Panel id="main-panel" order={1} minSize={20} style={panelStyles}>
           <MainPanelContent />
-          {withLeftPanel && <FloatingParametersPanelButtons panelApi={leftPanel} />}
+          {withLeftPanel && <FloatingParametersPanelButtons togglePanel={leftPanel.toggle} />}
           {withRightPanel && <FloatingGalleryButton panelApi={rightPanel} />}
         </Panel>
         {withRightPanel && (