add mutation for unpublishing

Author: Mary Hipp

invokeai/frontend/web/public/locales/en.json

@@ -1306,7 +1306,10 @@
         "unableToCopy": "Unable to Copy",
         "unableToCopyDesc": "Your browser does not support clipboard access. Firefox users may be able to fix this by following ",
         "unableToCopyDesc_theseSteps": "these steps",
-        "fluxFillIncompatibleWithT2IAndI2I": "FLUX Fill is not compatible with Text to Image or Image to Image. Use other FLUX models for these tasks."
+        "fluxFillIncompatibleWithT2IAndI2I": "FLUX Fill is not compatible with Text to Image or Image to Image. Use other FLUX models for these tasks.",
+        "problemUnpublishingWorkflow": "Problem Unpublishing Workflow",
+        "problemUnpublishingWorkflowDescription": "There was a problem unpublishing the workflow. Please try again.",
+        "workflowUnpublished": "Workflow Unpublished"
     },
     "popovers": {
         "clipSkip": {
@@ -1786,8 +1789,8 @@
             "minimum": "Minimum",
             "maximum": "Maximum",
             "publish": "Publish",
-            "published": "Published",
             "unpublish": "Unpublish",
+            "published": "Published",
             "workflowLocked": "Workflow Locked",
             "workflowLockedPublished": "Published workflows are locked for editing.\nYou can unpublish the workflow to edit it, or make a copy of it.",
             "workflowLockedDuringPublishing": "Workflow is locked while configuring for publishing.",

invokeai/frontend/web/src/features/nodes/components/sidePanel/PublishedWorkflowPanelContent.tsx

@@ -1,12 +1,37 @@
 import { Button, Flex, Heading, Text } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
+import { toast } from 'features/toast/toast';
 import { useSaveOrSaveAsWorkflow } from 'features/workflowLibrary/hooks/useSaveOrSaveAsWorkflow';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCopyBold, PiLockOpenBold } from 'react-icons/pi';
+import { useUnpublishWorkflowMutation } from 'services/api/endpoints/workflows';
 
 export const PublishedWorkflowPanelContent = memo(() => {
   const { t } = useTranslation();
   const saveAs = useSaveOrSaveAsWorkflow();
+  const [unpublishWorkflow] = useUnpublishWorkflowMutation();
+  const workflowId = useAppSelector(selectWorkflowId);
+
+  const handleUnpublish = useCallback(async () => {
+    if (workflowId) {
+      try {
+        await unpublishWorkflow(workflowId).unwrap();
+        toast({
+          title: t('toast.workflowUnpublished'),
+          status: 'success',
+        });
+      } catch (error) {
+        toast({
+          title: t('toast.problemUnpublishingWorkflow'),
+          description: t('toast.problemUnpublishingWorkflowDescription'),
+          status: 'error',
+        });
+      }
+    }
+  }, [unpublishWorkflow, workflowId, t]);
+
   return (
     <Flex flexDir="column" w="full" h="full" gap={2} alignItems="center">
       <Heading size="md" pt={32}>
@@ -16,7 +41,7 @@ export const PublishedWorkflowPanelContent = memo(() => {
       <Button size="md" onClick={saveAs} variant="ghost" leftIcon={<PiCopyBold />}>
         {t('common.saveAs')}
       </Button>
-      <Button size="md" onClick={undefined} variant="ghost" leftIcon={<PiLockOpenBold />}>
+      <Button size="md" onClick={handleUnpublish} variant="ghost" leftIcon={<PiLockOpenBold />}>
         {t('workflows.builder.unpublish')}
       </Button>
     </Flex>

invokeai/frontend/web/src/services/api/endpoints/workflows.ts

@@ -148,6 +148,13 @@ export const workflowsApi = api.injectEndpoints({
       }),
       invalidatesTags: (result, error, workflow_id) => [{ type: 'Workflow', id: workflow_id }],
     }),
+    unpublishWorkflow: build.mutation<void, string>({
+      query: (workflow_id) => ({
+        url: buildWorkflowsUrl(`i/${workflow_id}/unpublish`),
+        method: 'POST',
+      }),
+      invalidatesTags: (result, error, workflow_id) => [{ type: 'Workflow', id: workflow_id }],
+    }),
   }),
 });
 
@@ -163,4 +170,5 @@ export const {
   useListWorkflowsInfiniteInfiniteQuery,
   useSetWorkflowThumbnailMutation,
   useDeleteWorkflowThumbnailMutation,
+  useUnpublishWorkflowMutation,
 } = workflowsApi;