feat(ui): restore share workflow button

Author: psychedelicious

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

@@ -1,46 +1,25 @@
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { $projectUrl } from 'app/store/nanostores/projectId';
 import { useShareWorkflow } from 'features/nodes/components/sidePanel/workflow/WorkflowLibrary/ShareWorkflowModal';
 import type { MouseEvent } from 'react';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiShareFatBold } from 'react-icons/pi';
 import type { WorkflowRecordListItemWithThumbnailDTO } from 'services/api/types';
 
-export const ViewWorkflow = ({
-  isHovered,
-  setIsHovered,
-  workflow,
-}: {
-  isHovered: boolean;
-  setIsHovered: (isHovered: boolean) => void;
-  workflow: WorkflowRecordListItemWithThumbnailDTO;
-}) => {
-  const projectUrl = useStore($projectUrl);
+export const ShareWorkflowButton = memo(({ workflow }: { workflow: WorkflowRecordListItemWithThumbnailDTO }) => {
   const shareWorkflow = useShareWorkflow();
   const { t } = useTranslation();
 
   const handleClickShare = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      setIsHovered(false);
       shareWorkflow(workflow);
     },
-    [shareWorkflow, workflow, setIsHovered]
+    [shareWorkflow, workflow]
   );
 
-  if (!projectUrl || !workflow.workflow_id || workflow.category === 'user') {
-    return null;
-  }
-
   return (
-    <Tooltip
-      label={t('workflows.copyShareLink')}
-      // This prevents an issue where the tooltip isn't closed after the modal is opened
-      isOpen={!isHovered ? false : undefined}
-      closeOnScroll
-    >
+    <Tooltip label={t('workflows.copyShareLink')} closeOnScroll>
       <IconButton
         size="sm"
         variant="ghost"
@@ -50,4 +29,6 @@ export const ViewWorkflow = ({
       />
     </Tooltip>
   );
-};
+});
+
+ShareWorkflowButton.displayName = 'ShareWorkflowButton';

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

@@ -1,6 +1,7 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Badge, Flex, Icon, Image, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { ShareWorkflowButton } from 'features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryListItemActions/ShareWorkflow';
 import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
 import { useLoadWorkflow } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import InvokeLogo from 'public/assets/images/invoke-symbol-wht-lrg.svg';
@@ -127,6 +128,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
               <DeleteWorkflow workflowId={workflow.workflow_id} />
             </>
           )}
+          {workflow.category === 'project' && <ShareWorkflowButton workflow={workflow} />}
         </Flex>
       </Flex>
     </Flex>