fix(ui): disallow loading/deleting workflow if already open

invokeai/frontend/web/public/locales/en.json

@@ -1651,7 +1651,8 @@
         "clearWorkflowSearchFilter": "Clear Workflow Search Filter",
         "workflowName": "Workflow Name",
         "workflowEditorReset": "Workflow Editor Reset",
-        "workflowEditorMenu": "Workflow Editor Menu"
+        "workflowEditorMenu": "Workflow Editor Menu",
+        "workflowIsOpen": "Workflow is Open"
     },
     "app": {
         "storeNotInitialized": "Store is not initialized"

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx

@@ -4,9 +4,10 @@ import dateFormat, { masks } from 'dateformat';
 import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
 import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
 import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { WorkflowRecordListItemDTO } from 'services/api/types';
+import { useAppSelector } from 'app/store/storeHooks';
 
 type Props = {
   workflowDTO: WorkflowRecordListItemDTO;
@@ -14,6 +15,7 @@ type Props = {
 
 const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
   const { t } = useTranslation();
+  const workflowId = useAppSelector((state) => state.workflow.id);
   const { onClose } = useWorkflowLibraryModalContext();
   const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow({});
   const { getAndLoadWorkflow, getAndLoadWorkflowResult } =
@@ -27,12 +29,17 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
     getAndLoadWorkflow(workflowDTO.workflow_id);
   }, [getAndLoadWorkflow, workflowDTO.workflow_id]);
 
+  const isOpen = useMemo(
+    () => workflowId === workflowDTO.workflow_id,
+    [workflowId, workflowDTO.workflow_id]
+  );
+
   return (
     <Flex key={workflowDTO.workflow_id} w="full">
       <Flex w="full" alignItems="center" gap={2} h={12}>
         <Flex flexDir="column" flexGrow={1} h="full">
           <Flex alignItems="center" w="full" h="50%">
-            <Heading size="sm">
+            <Heading size="sm" variant={isOpen ? 'accent' : undefined}>
               {workflowDTO.name || t('workflows.unnamedWorkflow')}
             </Heading>
             <Spacer />
@@ -70,6 +77,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
           </Flex>
         </Flex>
         <IAIButton
+          isDisabled={isOpen}
           onClick={handleGetAndLoadWorkflow}
           isLoading={getAndLoadWorkflowResult.isLoading}
           aria-label={t('workflows.openWorkflow')}
@@ -79,6 +87,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
         {workflowDTO.category === 'user' && (
           <IAIButton
             colorScheme="error"
+            isDisabled={isOpen}
             onClick={handleDeleteWorkflow}
             isLoading={deleteWorkflowResult.isLoading}
             aria-label={t('workflows.deleteWorkflow')}

invokeai/frontend/web/src/theme/components/heading.ts

@@ -0,0 +1,12 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+import { mode } from '@chakra-ui/theme-tools';
+
+const accent = defineStyle((props) => ({
+  color: mode('accent.500', 'accent.300')(props),
+}));
+
+export const headingTheme = defineStyleConfig({
+  variants: {
+    accent,
+  },
+});

invokeai/frontend/web/src/theme/theme.ts

@@ -21,6 +21,7 @@ import { textTheme } from './components/text';
 import { textareaTheme } from './components/textarea';
 import { tooltipTheme } from './components/tooltip';
 import { reactflowStyles } from './custom/reactflow';
+import { headingTheme } from 'theme/components/heading';
 
 export const theme: ThemeOverride = {
   config: {
@@ -146,6 +147,7 @@ export const theme: ThemeOverride = {
     Menu: menuTheme,
     Text: textTheme,
     Tooltip: tooltipTheme,
+    Heading: headingTheme,
   },
 };