From 2b08d9e53beb2cd736fccc096f26f6a5985ff672 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 21 Sep 2023 09:41:43 +1000 Subject: [PATCH] feat(ui): disable queue-related buttons when disconnected --- .../components/CancelCurrentQueueItemButton.tsx | 4 ++-- .../queue/components/ClearQueueButton.tsx | 4 ++-- .../queue/components/PauseProcessorButton.tsx | 4 ++-- .../queue/components/PruneQueueButton.tsx | 4 ++-- .../queue/components/ResumeProcessorButton.tsx | 4 ++-- .../src/features/queue/hooks/useCancelBatch.ts | 5 +++-- .../queue/hooks/useCancelCurrentQueueItem.ts | 15 +++++++++++++-- .../features/queue/hooks/useCancelQueueItem.ts | 5 +++-- .../web/src/features/queue/hooks/useClearQueue.ts | 14 +++++++++----- .../src/features/queue/hooks/usePauseProcessor.ts | 10 ++++++++-- .../web/src/features/queue/hooks/usePruneQueue.ts | 12 +++++++++--- .../features/queue/hooks/useResumeProcessor.ts | 10 ++++++++-- 12 files changed, 63 insertions(+), 28 deletions(-) diff --git a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemButton.tsx b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemButton.tsx index b08f6e9e20..8b883a9bb2 100644 --- a/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/CancelCurrentQueueItemButton.tsx @@ -12,12 +12,12 @@ type Props = { const CancelCurrentQueueItemButton = ({ asIconButton, sx }: Props) => { const { t } = useTranslation(); - const { cancelQueueItem, isLoading, currentQueueItemId } = + const { cancelQueueItem, isLoading, isDisabled } = useCancelCurrentQueueItem(); return ( { const { t } = useTranslation(); - const { clearQueue, isLoading, queueStatus } = useClearQueue(); + const { clearQueue, isLoading, isDisabled } = useClearQueue(); return ( { acceptButtonText={t('queue.clear')} triggerComponent={ { const { t } = useTranslation(); - const { pauseProcessor, isLoading, isStarted } = usePauseProcessor(); + const { pauseProcessor, isLoading, isDisabled } = usePauseProcessor(); return ( } onClick={pauseProcessor} diff --git a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx index 5aded74b45..2af234d42c 100644 --- a/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/PruneQueueButton.tsx @@ -10,11 +10,11 @@ type Props = { const PruneQueueButton = ({ asIconButton }: Props) => { const { t } = useTranslation(); - const { pruneQueue, isLoading, finishedCount } = usePruneQueue(); + const { pruneQueue, isLoading, finishedCount, isDisabled } = usePruneQueue(); return ( { const { t } = useTranslation(); - const { resumeProcessor, isLoading, isStarted } = useResumeProcessor(); + const { resumeProcessor, isLoading, isDisabled } = useResumeProcessor(); return ( } onClick={resumeProcessor} diff --git a/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts b/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts index 5281734357..42825f151b 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/useCancelBatch.ts @@ -1,4 +1,4 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -8,6 +8,7 @@ import { } from 'services/api/endpoints/queue'; export const useCancelBatch = (batch_id: string) => { + const isConnected = useAppSelector((state) => state.system.isConnected); const { isCanceled } = useGetBatchStatusQuery( { batch_id }, { @@ -49,5 +50,5 @@ export const useCancelBatch = (batch_id: string) => { } }, [batch_id, dispatch, isCanceled, t, trigger]); - return { cancelBatch, isLoading, isCanceled }; + return { cancelBatch, isLoading, isCanceled, isDisabled: !isConnected }; }; diff --git a/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts b/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts index 62f645fac9..308695dd67 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts @@ -1,4 +1,4 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -8,6 +8,7 @@ import { } from 'services/api/endpoints/queue'; export const useCancelCurrentQueueItem = () => { + const isConnected = useAppSelector((state) => state.system.isConnected); const { data: queueStatus } = useGetQueueStatusQuery(); const [trigger, { isLoading }] = useCancelQueueItemMutation(); const dispatch = useAppDispatch(); @@ -38,5 +39,15 @@ export const useCancelCurrentQueueItem = () => { } }, [currentQueueItemId, dispatch, t, trigger]); - return { cancelQueueItem, isLoading, currentQueueItemId }; + const isDisabled = useMemo( + () => !isConnected || !currentQueueItemId, + [isConnected, currentQueueItemId] + ); + + return { + cancelQueueItem, + isLoading, + currentQueueItemId, + isDisabled, + }; }; diff --git a/invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItem.ts b/invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItem.ts index 82ce5765f6..4582ef1223 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItem.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/useCancelQueueItem.ts @@ -1,10 +1,11 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { useCancelQueueItemMutation } from 'services/api/endpoints/queue'; export const useCancelQueueItem = (item_id: number) => { + const isConnected = useAppSelector((state) => state.system.isConnected); const [trigger, { isLoading }] = useCancelQueueItemMutation(); const dispatch = useAppDispatch(); const { t } = useTranslation(); @@ -27,5 +28,5 @@ export const useCancelQueueItem = (item_id: number) => { } }, [dispatch, item_id, t, trigger]); - return { cancelQueueItem, isLoading }; + return { cancelQueueItem, isLoading, isDisabled: !isConnected }; }; diff --git a/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts b/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts index e09650bc44..a807e22ead 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts @@ -1,6 +1,6 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useClearQueueMutation, @@ -10,10 +10,9 @@ import { listCursorChanged, listPriorityChanged } from '../store/queueSlice'; export const useClearQueue = () => { const { t } = useTranslation(); - const dispatch = useAppDispatch(); const { data: queueStatus } = useGetQueueStatusQuery(); - + const isConnected = useAppSelector((state) => state.system.isConnected); const [trigger, { isLoading }] = useClearQueueMutation({ fixedCacheKey: 'clearQueue', }); @@ -43,5 +42,10 @@ export const useClearQueue = () => { } }, [queueStatus?.queue.total, trigger, dispatch, t]); - return { clearQueue, isLoading, queueStatus }; + const isDisabled = useMemo( + () => !isConnected || !queueStatus?.queue.total, + [isConnected, queueStatus?.queue.total] + ); + + return { clearQueue, isLoading, queueStatus, isDisabled }; }; diff --git a/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts b/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts index c9b31dafa6..938f989449 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/usePauseProcessor.ts @@ -1,4 +1,4 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -10,6 +10,7 @@ import { export const usePauseProcessor = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); + const isConnected = useAppSelector((state) => state.system.isConnected); const { data: queueStatus } = useGetQueueStatusQuery(); const [trigger, { isLoading }] = usePauseProcessorMutation({ fixedCacheKey: 'pauseProcessor', @@ -42,5 +43,10 @@ export const usePauseProcessor = () => { } }, [isStarted, trigger, dispatch, t]); - return { pauseProcessor, isLoading, isStarted }; + const isDisabled = useMemo( + () => !isConnected || !isStarted, + [isConnected, isStarted] + ); + + return { pauseProcessor, isLoading, isStarted, isDisabled }; }; diff --git a/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts b/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts index 6d95a571e7..0cda8ffd02 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/usePruneQueue.ts @@ -1,6 +1,6 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useGetQueueStatusQuery, @@ -11,6 +11,7 @@ import { listCursorChanged, listPriorityChanged } from '../store/queueSlice'; export const usePruneQueue = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); + const isConnected = useAppSelector((state) => state.system.isConnected); const [trigger, { isLoading }] = usePruneQueueMutation({ fixedCacheKey: 'pruneQueue', }); @@ -51,5 +52,10 @@ export const usePruneQueue = () => { } }, [finishedCount, trigger, dispatch, t]); - return { pruneQueue, isLoading, finishedCount }; + const isDisabled = useMemo( + () => !isConnected || !finishedCount, + [finishedCount, isConnected] + ); + + return { pruneQueue, isLoading, finishedCount, isDisabled }; }; diff --git a/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts b/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts index 2097507b56..19e21339dd 100644 --- a/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts +++ b/invokeai/frontend/web/src/features/queue/hooks/useResumeProcessor.ts @@ -1,4 +1,4 @@ -import { useAppDispatch } from 'app/store/storeHooks'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,6 +9,7 @@ import { export const useResumeProcessor = () => { const dispatch = useAppDispatch(); + const isConnected = useAppSelector((state) => state.system.isConnected); const { data: queueStatus } = useGetQueueStatusQuery(); const { t } = useTranslation(); const [trigger, { isLoading }] = useResumeProcessorMutation({ @@ -42,5 +43,10 @@ export const useResumeProcessor = () => { } }, [isStarted, trigger, dispatch, t]); - return { resumeProcessor, isLoading, isStarted }; + const isDisabled = useMemo( + () => !isConnected || isStarted, + [isConnected, isStarted] + ); + + return { resumeProcessor, isLoading, isStarted, isDisabled }; };