mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-04-23 03:00:31 -04:00
feat(ui): restore share workflow button
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user