feat(ui): disable queue-related buttons when disconnected

Author: psychedelicious

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 (
     <QueueButton
-      isDisabled={!currentQueueItemId}
+      isDisabled={isDisabled}
       isLoading={isLoading}
       asIconButton={asIconButton}
       label={t('queue.cancel')}

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

@@ -13,7 +13,7 @@ type Props = {
 
 const ClearQueueButton = ({ asIconButton, sx }: Props) => {
   const { t } = useTranslation();
-  const { clearQueue, isLoading, queueStatus } = useClearQueue();
+  const { clearQueue, isLoading, isDisabled } = useClearQueue();
 
   return (
     <IAIAlertDialog
@@ -22,7 +22,7 @@ const ClearQueueButton = ({ asIconButton, sx }: Props) => {
       acceptButtonText={t('queue.clear')}
       triggerComponent={
         <QueueButton
-          isDisabled={!queueStatus?.queue.total}
+          isDisabled={isDisabled}
           isLoading={isLoading}
           asIconButton={asIconButton}
           label={t('queue.clear')}

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

@@ -10,14 +10,14 @@ type Props = {
 
 const PauseProcessorButton = ({ asIconButton }: Props) => {
   const { t } = useTranslation();
-  const { pauseProcessor, isLoading, isStarted } = usePauseProcessor();
+  const { pauseProcessor, isLoading, isDisabled } = usePauseProcessor();
 
   return (
     <QueueButton
       asIconButton={asIconButton}
       label={t('queue.pause')}
       tooltip={t('queue.pauseTooltip')}
-      isDisabled={!isStarted}
+      isDisabled={isDisabled}
       isLoading={isLoading}
       icon={<FaPause />}
       onClick={pauseProcessor}

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 (
     <QueueButton
-      isDisabled={!finishedCount}
+      isDisabled={isDisabled}
       isLoading={isLoading}
       asIconButton={asIconButton}
       label={t('queue.prune')}

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

@@ -10,14 +10,14 @@ type Props = {
 
 const ResumeProcessorButton = ({ asIconButton }: Props) => {
   const { t } = useTranslation();
-  const { resumeProcessor, isLoading, isStarted } = useResumeProcessor();
+  const { resumeProcessor, isLoading, isDisabled } = useResumeProcessor();
 
   return (
     <QueueButton
       asIconButton={asIconButton}
       label={t('queue.resume')}
       tooltip={t('queue.resumeTooltip')}
-      isDisabled={isStarted}
+      isDisabled={isDisabled}
       isLoading={isLoading}
       icon={<FaPlay />}
       onClick={resumeProcessor}

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

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,
+  };
 };

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

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

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