From b2bf03fd373f465ee6d566d3a23deecb8fc7eb47 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 10 Oct 2024 07:34:10 +1000
Subject: [PATCH] feat(ui): use own useDisclosure for workflow delete confirm
 dialog

---
 .../WorkflowListMenu/WorkflowListItem.tsx     | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
index a3509fba1d..ed72e791d5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
@@ -1,17 +1,9 @@
-import {
-  Badge,
-  ConfirmationAlertDialog,
-  Flex,
-  IconButton,
-  Spacer,
-  Text,
-  Tooltip,
-  useDisclosure,
-} from '@invoke-ai/ui-library';
+import { Badge, ConfirmationAlertDialog, Flex, IconButton, Spacer, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { EMPTY_OBJECT } from 'app/store/constants';
 import { $projectUrl } from 'app/store/nanostores/projectId';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useDisclosure } from 'common/hooks/useBoolean';
 import dateFormat, { masks } from 'dateformat';
 import { $isWorkflowListMenuIsOpen } from 'features/nodes/store/workflowListMenu';
 import { selectWorkflowId, workflowModeChanged } from 'features/nodes/store/workflowSlice';
@@ -28,7 +20,7 @@ import { CopyWorkflowLinkModal, useCopyWorkflowLinkModal } from './CopyWorkflowL
 import { WorkflowListItemTooltip } from './WorkflowListItemTooltip';
 
 export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListItemDTO }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const deleteConfirmationDialog = useDisclosure(false);
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const projectUrl = useStore($projectUrl);
@@ -70,15 +62,15 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
 
   const handleDeleteWorklow = useCallback(() => {
     deleteWorkflow(workflow.workflow_id);
-    onClose();
-  }, [workflow.workflow_id, deleteWorkflow, onClose]);
+    deleteConfirmationDialog.close();
+  }, [deleteWorkflow, workflow.workflow_id, deleteConfirmationDialog]);
 
   const handleClickDelete = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      onOpen();
+      deleteConfirmationDialog.open();
     },
-    [onOpen]
+    [deleteConfirmationDialog]
   );
 
   const handleClickShare = useCallback(
@@ -178,8 +170,8 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
         </Flex>
       </Flex>
       <ConfirmationAlertDialog
-        isOpen={isOpen}
-        onClose={onClose}
+        isOpen={deleteConfirmationDialog.isOpen}
+        onClose={deleteConfirmationDialog.close}
         title={t('workflows.deleteWorkflow')}
         acceptCallback={handleDeleteWorklow}
         acceptButtonText={t('common.delete')}