feat(ui): simpler workflow action buttons

Author: psychedelicious

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DeleteWorkflow.tsx

@@ -5,33 +5,19 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashBold } from 'react-icons/pi';
 
-export const DeleteWorkflow = ({
-  isHovered,
-  setIsHovered,
-  workflowId,
-}: {
-  isHovered: boolean;
-  setIsHovered: (isHovered: boolean) => void;
-  workflowId: string;
-}) => {
+export const DeleteWorkflow = ({ workflowId }: { workflowId: string }) => {
   const { t } = useTranslation();
   const deleteWorkflow = useDeleteWorkflow();
 
   const handleClickDelete = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      setIsHovered(false);
       deleteWorkflow(workflowId);
     },
-    [deleteWorkflow, workflowId, setIsHovered]
+    [deleteWorkflow, workflowId]
   );
   return (
-    <Tooltip
-      label={t('workflows.delete')}
-      // This prevents an issue where the tooltip isn't closed after the modal is opened
-      isOpen={!isHovered ? false : undefined}
-      closeOnScroll
-    >
+    <Tooltip label={t('workflows.delete')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/DownloadWorkflow.tsx

@@ -5,34 +5,20 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiDownloadSimpleBold } from 'react-icons/pi';
 
-// needs to be updated to work for a workflow other than the one loaded in editor
-export const DownloadWorkflow = ({
-  isHovered,
-  setIsHovered,
-  workflowId,
-}: {
-  isHovered: boolean;
-  setIsHovered: (isHovered: boolean) => void;
-  workflowId: string;
-}) => {
+export const DownloadWorkflow = ({ workflowId }: { workflowId: string }) => {
   const downloadWorkflowById = useDownloadWorkflowById();
+
   const handleClickDownload = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      setIsHovered(false);
       downloadWorkflowById.downloadWorkflow(workflowId);
     },
-    [downloadWorkflowById, setIsHovered, workflowId]
+    [downloadWorkflowById, workflowId]
   );
 
   const { t } = useTranslation();
   return (
-    <Tooltip
-      label={t('workflows.download')}
-      // This prevents an issue where the tooltip isn't closed after the modal is opened
-      isOpen={!isHovered ? false : undefined}
-      closeOnScroll
-    >
+    <Tooltip label={t('workflows.download')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/EditWorkflow.tsx

@@ -1,33 +1,24 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import type { MouseEvent} from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPencilBold } from 'react-icons/pi';
 
-export const EditWorkflow = ({
-  isHovered,
-  setIsHovered,
-  workflowId,
-}: {
-  isHovered: boolean;
-  setIsHovered: (isHovered: boolean) => void;
-  workflowId: string;
-}) => {
+export const EditWorkflow = ({ workflowId }: { workflowId: string }) => {
   const loadWorkflow = useLoadWorkflow();
   const { t } = useTranslation();
 
-  const handleClickEdit = useCallback(() => {
-    setIsHovered(false);
-    loadWorkflow.loadWithDialog(workflowId, 'edit');
-  }, [loadWorkflow, workflowId, setIsHovered]);
+  const handleClickEdit = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      loadWorkflow.loadWithDialog(workflowId, 'edit');
+    },
+    [loadWorkflow, workflowId]
+  );
 
   return (
-    <Tooltip
-      label={t('workflows.edit')}
-      // This prevents an issue where the tooltip isn't closed after the modal is opened
-      isOpen={!isHovered ? false : undefined}
-      closeOnScroll
-    >
+    <Tooltip label={t('workflows.edit')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/SaveWorkflow.tsx

@@ -1,34 +1,25 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFloppyDiskBold } from 'react-icons/pi';
 
 // needs to clone and save workflow to account without taking over editor
-export const SaveWorkflow = ({
-  isHovered,
-  setIsHovered,
-  workflowId,
-}: {
-  isHovered: boolean;
-  setIsHovered: (isHovered: boolean) => void;
-  workflowId: string;
-}) => {
+export const SaveWorkflow = ({ workflowId }: { workflowId: string }) => {
   const loadWorkflow = useLoadWorkflow();
   const { t } = useTranslation();
 
-  const handleClickSave = useCallback(() => {
-    setIsHovered(false);
-    loadWorkflow.loadWithDialog(workflowId, 'view');
-  }, [loadWorkflow, workflowId, setIsHovered]);
+  const handleClickSave = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      loadWorkflow.loadWithDialog(workflowId, 'view');
+    },
+    [loadWorkflow, workflowId]
+  );
 
   return (
-    <Tooltip
-      label={t('workflows.edit')}
-      // This prevents an issue where the tooltip isn't closed after the modal is opened
-      isOpen={!isHovered ? false : undefined}
-      closeOnScroll
-    >
+    <Tooltip label={t('workflows.edit')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ViewWorkflow.tsx

@@ -1,33 +1,24 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
+import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiEyeBold } from 'react-icons/pi';
 
-export const ViewWorkflow = ({
-  isHovered,
-  setIsHovered,
-  workflowId,
-}: {
-  isHovered: boolean;
-  setIsHovered: (isHovered: boolean) => void;
-  workflowId: string;
-}) => {
+export const ViewWorkflow = ({ workflowId }: { workflowId: string }) => {
   const loadWorkflow = useLoadWorkflow();
   const { t } = useTranslation();
 
-  const handleClickLoad = useCallback(() => {
-    setIsHovered(false);
-    loadWorkflow.loadWithDialog(workflowId, 'view');
-  }, [loadWorkflow, workflowId, setIsHovered]);
+  const handleClickLoad = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      loadWorkflow.loadWithDialog(workflowId, 'view');
+    },
+    [loadWorkflow, workflowId]
+  );
 
   return (
-    <Tooltip
-      label={t('workflows.edit')}
-      // This prevents an issue where the tooltip isn't closed after the modal is opened
-      isOpen={!isHovered ? false : undefined}
-      closeOnScroll
-    >
+    <Tooltip label={t('workflows.edit')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowListItem.tsx

@@ -107,15 +107,15 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
           {workflow.category === 'default' && (
             <>
               {/* need to consider what is useful here and which icons show that. idea is to "try it out"/"view" or "clone for your own changes" */}
-              <ViewWorkflow isHovered={isHovered} setIsHovered={setIsHovered} workflowId={workflow.workflow_id} />
-              <SaveWorkflow isHovered={isHovered} setIsHovered={setIsHovered} workflowId={workflow.workflow_id} />
+              <ViewWorkflow workflowId={workflow.workflow_id} />
+              <SaveWorkflow workflowId={workflow.workflow_id} />
             </>
           )}
           {workflow.category !== 'default' && (
             <>
-              <EditWorkflow isHovered={isHovered} setIsHovered={setIsHovered} workflowId={workflow.workflow_id} />
-              <DownloadWorkflow isHovered={isHovered} setIsHovered={setIsHovered} workflowId={workflow.workflow_id} />
-              <DeleteWorkflow isHovered={isHovered} setIsHovered={setIsHovered} workflowId={workflow.workflow_id} />
+              <EditWorkflow workflowId={workflow.workflow_id} />
+              <DownloadWorkflow workflowId={workflow.workflow_id} />
+              <DeleteWorkflow workflowId={workflow.workflow_id} />
             </>
           )}
         </Flex>