feat(ui): restore share workflow button

This commit is contained in:
psychedelicious
2025-03-06 14:21:51 +10:00
parent b87febcf4c
commit 1a84a2fb7e
2 changed files with 9 additions and 26 deletions

View File

@@ -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';

View File

@@ -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>