empty state for workflow with no linear fields in view mode

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",

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>
+  );
+};

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>