From 56fcf6af78f944a0b0c9498bae0f927fd2f0bb8b Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 6 Mar 2024 11:19:03 -0500
Subject: [PATCH] empty state for workflow with no linear fields in view mode

---
 invokeai/frontend/web/public/locales/en.json  |  2 +
 .../sidePanel/viewMode/EmptyState.tsx         | 55 +++++++++++++++++++
 .../sidePanel/viewMode/WorkflowViewMode.tsx   |  3 +-
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index a6d4c3d2b0..b80c15b935 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -944,6 +944,7 @@
         "doesNotExist": "does not exist",
         "downloadWorkflow": "Download Workflow JSON",
         "edge": "Edge",
+        "edit": "Edit",
         "editMode": "Edit in Workflow Editor",
         "enum": "Enum",
         "enumDescription": "Enums are values that may be one of a number of options.",
@@ -1019,6 +1020,7 @@
         "nodeTemplate": "Node Template",
         "nodeType": "Node Type",
         "noFieldsLinearview": "No fields added to Linear View",
+        "noFieldsViewMode": "This workflow has no selected fields to display. View the full workflow to configure values.",
         "noFieldType": "No field type",
         "noImageFoundState": "No initial image found in state",
         "noMatchingNodes": "No matching nodes",
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx
new file mode 100644
index 0000000000..f3c35f5cfb
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx
@@ -0,0 +1,55 @@
+import { Button, Flex, Text, Image } from '@invoke-ai/ui-library';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '../../../../../app/store/storeHooks';
+import { useCallback } from 'react';
+import { workflowModeChanged } from '../../../store/workflowSlice';
+import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg';
+
+export const EmptyState = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const onClick = useCallback(() => {
+    dispatch(workflowModeChanged('edit'));
+  }, [dispatch]);
+
+  return (
+    <Flex
+      sx={{
+        w: 'full',
+        h: 'full',
+        userSelect: 'none',
+      }}
+    >
+      <Flex
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 'base',
+          flexDir: 'column',
+          gap: 5,
+          maxW: '230px',
+          margin: '0 auto',
+        }}
+      >
+        <Image
+          src={InvokeLogoSVG}
+          alt="invoke-ai-logo"
+          opacity={0.2}
+          mixBlendMode="overlay"
+          w={16}
+          h={16}
+          minW={16}
+          minH={16}
+          userSelect="none"
+        />
+        <Text textAlign="center" fontSize="md">
+          {t('nodes.noFieldsViewMode')}
+        </Text>
+        <Button colorScheme="invokeBlue" onClick={onClick}>
+          {t('nodes.edit')}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx
index 7bfe256702..29fe465495 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowViewMode.tsx
@@ -8,6 +8,7 @@ import { t } from 'i18next';
 import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 import WorkflowField from './WorkflowField';
+import { EmptyState } from './EmptyState';
 
 const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
   return {
@@ -30,7 +31,7 @@ export const WorkflowViewMode = () => {
               <WorkflowField key={`${nodeId}.${fieldName}`} nodeId={nodeId} fieldName={fieldName} />
             ))
           ) : (
-            <IAINoContentFallback label={t('nodes.noFieldsLinearview')} icon={null} />
+            <EmptyState />
           )}
         </Flex>
       </ScrollableContent>