From 06104f3851416d64764cf2cb7c19efa184c7fca8 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 6 Dec 2023 23:55:13 +1100
Subject: [PATCH] fix(ui): disallow loading/deleting workflow if already open

---
 invokeai/frontend/web/public/locales/en.json        |  3 ++-
 .../components/WorkflowLibraryListItem.tsx          | 13 +++++++++++--
 .../frontend/web/src/theme/components/heading.ts    | 12 ++++++++++++
 invokeai/frontend/web/src/theme/theme.ts            |  2 ++
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 invokeai/frontend/web/src/theme/components/heading.ts

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index ee7972c564..c948311c29 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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"
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index f8481ded83..49784c56d9 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/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')}
diff --git a/invokeai/frontend/web/src/theme/components/heading.ts b/invokeai/frontend/web/src/theme/components/heading.ts
new file mode 100644
index 0000000000..ed3e8604cb
--- /dev/null
+++ b/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,
+  },
+});
diff --git a/invokeai/frontend/web/src/theme/theme.ts b/invokeai/frontend/web/src/theme/theme.ts
index d51fae5ab7..65ad8b446d 100644
--- a/invokeai/frontend/web/src/theme/theme.ts
+++ b/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,
   },
 };