fix(ui): hide workflow thumbnail for unsaved and default workflows

Author: psychedelicious

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

@@ -96,13 +96,17 @@ const WorkflowGeneralTab = () => {
             <FormLabel>{t('nodes.workflowName')}</FormLabel>
             <Input variant="darkFilled" value={name} onChange={handleChangeName} />
           </FormControl>
-          {/* we should not show this field if default workflow or not saved to DB yet */}
-          {/* {data?.meta.category !== 'default' || !data.workflow_id && ( */}
-          <FormControl>
-            <FormLabel>{t('workflows.workflowThumbnail')}</FormLabel>
-            <WorkflowThumbnailEditor thumbnailUrl={data?.thumbnail_url || null} workflowId={id} />
-          </FormControl>
-          {/* )} */}
+          {/*
+           * Only saved and non-default workflows can have a thumbnail.
+           * - Unsaved workflows have no id.
+           * - Default workflows have a category of 'default'.
+           */}
+          {id && data && data.workflow.meta.category !== 'default' && (
+            <FormControl>
+              <FormLabel>{t('workflows.workflowThumbnail')}</FormLabel>
+              <WorkflowThumbnailEditor thumbnailUrl={data.thumbnail_url} workflowId={id} />
+            </FormControl>
+          )}
           <FormControl>
             <FormLabel>{t('nodes.workflowVersion')}</FormLabel>
             <Input variant="darkFilled" value={version} onChange={handleChangeVersion} />

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowThumbnail/WorkflowThumbnailEditor.tsx

@@ -11,8 +11,8 @@ export const WorkflowThumbnailEditor = ({
   workflowId,
   thumbnailUrl,
 }: {
-  workflowId?: string;
-  thumbnailUrl: string | null;
+  workflowId: string;
+  thumbnailUrl?: string | null;
 }) => {
   const { t } = useTranslation();
 
@@ -28,10 +28,6 @@ export const WorkflowThumbnailEditor = ({
   }, []);
 
   const handleSaveChanges = useCallback(async () => {
-    if (!workflowId) {
-      return;
-    }
-
     try {
       if (localThumbnailUrl) {
         const blob = await convertImageUrlToBlob(localThumbnailUrl);

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowThumbnail/WorkflowThumbnailField.tsx

@@ -9,12 +9,12 @@ export const WorkflowThumbnailField = ({
   imageUrl,
   onChange,
 }: {
-  imageUrl: string | null;
+  imageUrl?: string | null;
   onChange: (localThumbnailUrl: string | null) => void;
 }) => {
   const [thumbnail, setThumbnail] = useState<File | null>(null);
 
-  const syncThumbnail = useCallback(async (imageUrl: string | null) => {
+  const syncThumbnail = useCallback(async (imageUrl?: string | null) => {
     if (!imageUrl) {
       setThumbnail(null);
       return;