From d2155e98efcbec441f7389efc2665a33b694d72d Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 4 Jun 2025 16:36:27 +1000 Subject: [PATCH] feat(ui): remove clear queue ui components --- .../queue/components/ClearQueueIconButton.tsx | 33 +------------------ .../components/QueueActionsMenuButton.tsx | 24 +------------- .../components/QueueTabQueueControls.tsx | 13 +++----- .../components/FloatingLeftPanelButtons.tsx | 23 ------------- 4 files changed, 6 insertions(+), 87 deletions(-) diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx index 348dd38ada..9f7a4290fa 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx @@ -1,28 +1,17 @@ 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, PiXCircle } from 'react-icons/pi'; - -import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog'; +import { PiXBold, PiXCircle } from 'react-icons/pi'; export const ClearQueueIconButton = memo(() => { - const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll'); const shift = useShiftModifier(); if (!shift) { - // Shift is not pressed - show cancel current return ; } - if (isCancelAndClearAllEnabled) { - // Shift is pressed and cancel and clear all is enabled - show cancel and clear all - return ; - } - - // Shift is pressed and cancel and clear all is disabled - show cancel all except current return ; }); @@ -48,26 +37,6 @@ const CancelCurrentIconButton = memo(() => { CancelCurrentIconButton.displayName = 'CancelCurrentIconButton'; -const CancelAndClearAllIconButton = memo(() => { - const { t } = useTranslation(); - const clearQueue = useClearQueueDialog(); - - return ( - } - colorScheme="error" - onClick={clearQueue.openDialog} - /> - ); -}); - -CancelAndClearAllIconButton.displayName = 'CancelAndClearAllIconButton'; - const CancelAllExceptCurrentIconButton = memo(() => { const { t } = useTranslation(); const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog(); diff --git a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx index 42b8d704bd..be1ebeedc7 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx @@ -2,7 +2,6 @@ import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@in import { useAppDispatch } from 'app/store/storeHooks'; import { SessionMenuItems } from 'common/components/SessionMenuItems'; import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog'; -import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { QueueCountBadge } from 'features/queue/components/QueueCountBadge'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor'; @@ -11,15 +10,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { memo, useCallback, useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import { - PiListBold, - PiPauseFill, - PiPlayFill, - PiQueueBold, - PiTrashSimpleBold, - PiXBold, - PiXCircle, -} from 'react-icons/pi'; +import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiXBold, PiXCircle } from 'react-icons/pi'; export const QueueActionsMenuButton = memo(() => { const ref = useRef(null); @@ -27,10 +18,8 @@ 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(); const { resumeProcessor, isLoading: isLoadingResumeProcessor, @@ -72,17 +61,6 @@ export const QueueActionsMenuButton = memo(() => { > {t('queue.cancelAllExceptCurrentTooltip')} - {isCancelAndClearAllEnabled && ( - } - onClick={clearQueue.openDialog} - isLoading={clearQueue.isLoading} - isDisabled={clearQueue.isDisabled} - > - {t('queue.clearTooltip')} - - )} {isResumeEnabled && ( } diff --git a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx index 7e679caf74..17c3ed104f 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueTabQueueControls.tsx @@ -5,7 +5,6 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; import ClearModelCacheButton from './ClearModelCacheButton'; -import ClearQueueButton from './ClearQueueButton'; import PauseProcessorButton from './PauseProcessorButton'; import PruneQueueButton from './PruneQueueButton'; import ResumeProcessorButton from './ResumeProcessorButton'; @@ -13,23 +12,19 @@ import ResumeProcessorButton from './ResumeProcessorButton'; const QueueTabQueueControls = () => { const isPauseEnabled = useFeatureStatus('pauseQueue'); const isResumeEnabled = useFeatureStatus('resumeQueue'); - const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll'); return ( - {isPauseEnabled || isResumeEnabled ? ( + {(isPauseEnabled || isResumeEnabled) && ( - {isResumeEnabled ? : <>} - {isPauseEnabled ? : <>} + {isResumeEnabled && } + {isPauseEnabled && } - ) : ( - <> )} - {isCancelAndClearAllEnabled && } - {!isCancelAndClearAllEnabled && } + diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx index bbd10d868c..f80a956319 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingLeftPanelButtons.tsx @@ -4,7 +4,6 @@ import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser' import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { selectCanvasSession } from 'features/controlLayers/store/canvasStagingAreaSlice'; import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog'; -import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { useInvoke } from 'features/queue/hooks/useInvoke'; @@ -16,7 +15,6 @@ import { PiLightningFill, PiSlidersHorizontalBold, PiSparkleFill, - PiTrashSimpleBold, PiXBold, PiXCircle, } from 'react-icons/pi'; @@ -126,27 +124,6 @@ const CancelCurrentIconButton = memo(() => { CancelCurrentIconButton.displayName = 'CancelCurrentIconButton'; -const CancelAndClearAllIconButton = memo(() => { - const { t } = useTranslation(); - const clearQueue = useClearQueueDialog(); - - return ( - - } - colorScheme="error" - onClick={clearQueue.openDialog} - flexGrow={1} - /> - - ); -}); - -CancelAndClearAllIconButton.displayName = 'CancelAndClearAllIconButton'; - const CancelAllExceptCurrentIconButton = memo(() => { const { t } = useTranslation(); const cancelAllExceptCurrent = useCancelAllExceptCurrentQueueItemDialog();