UX fit-n-finish updates X (#586) (#588)

opensearch-trigger-bot[bot] · github-actions[bot] · web-flow · commit 4362a1ab1162 · 2025-01-27T13:48:48.000-08:00
(cherry picked from commit fb7b64d) Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
diff --git a/common/constants.ts b/common/constants.ts
@@ -590,14 +590,14 @@ export const INPUT_TRANSFORM_OPTIONS = [
     id: TRANSFORM_TYPE.FIELD,
     description: 'Map an existing field from your data.',
   },
-  {
-    id: TRANSFORM_TYPE.TEMPLATE,
-    description: 'Configure a prompt and map to the input field.',
-  },
   {
     id: TRANSFORM_TYPE.EXPRESSION,
     description: 'Extract data before mapping to the input field.',
   },
+  {
+    id: TRANSFORM_TYPE.TEMPLATE,
+    description: 'Configure a prompt and map to the input field.',
+  },
   {
     id: TRANSFORM_TYPE.STRING,
     description: 'Declare a string to the input field.',
@@ -679,21 +679,21 @@ export enum SOURCE_OPTIONS {
   EXISTING_INDEX = 'existing_index',
 }
 export enum INSPECTOR_TAB_ID {
+  TEST = 'test',
   INGEST = 'ingest',
-  QUERY = 'query',
   ERRORS = 'errors',
   RESOURCES = 'resources',
 }
 
 export const INSPECTOR_TABS = [
   {
-    id: INSPECTOR_TAB_ID.INGEST,
-    name: 'Ingest response',
+    id: INSPECTOR_TAB_ID.TEST,
+    name: 'Test flow',
     disabled: false,
   },
   {
-    id: INSPECTOR_TAB_ID.QUERY,
-    name: 'Search tool',
+    id: INSPECTOR_TAB_ID.INGEST,
+    name: 'Ingest response',
     disabled: false,
   },
   {
diff --git a/public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx b/public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx
@@ -205,15 +205,15 @@ export function EditWorkflowMetadataModal(
                 <EuiFlexItem>
                   <TextField
                     label="Name"
-                    fullWidth={false}
+                    fullWidth={true}
                     fieldPath={`name`}
                     showError={true}
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <TextField
                     label="Description - optional"
-                    fullWidth={false}
+                    fullWidth={true}
                     fieldPath={`description`}
                     showError={true}
                     placeholder="Provide a description for identifying this workflow."
diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -86,7 +86,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   const [ingestResponse, setIngestResponse] = useState<string>('');
   const [selectedInspectorTabId, setSelectedInspectorTabId] = useState<
     INSPECTOR_TAB_ID
-  >(INSPECTOR_TAB_ID.INGEST);
+  >(INSPECTOR_TAB_ID.TEST);
 
   // is valid workflow state, + associated hook to set it as such
   const [isValidWorkflow, setIsValidWorkflow] = useState<boolean>(true);
@@ -141,7 +141,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                   if (!isToolsPanelOpen) {
                     onToggleToolsChange();
                   }
-                  setSelectedInspectorTabId(INSPECTOR_TAB_ID.QUERY);
+                  setSelectedInspectorTabId(INSPECTOR_TAB_ID.TEST);
                 }}
                 setCachedFormikState={props.setCachedFormikState}
               />
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
@@ -124,7 +124,7 @@ export function Tools(props: ToolsProps) {
                 {props.selectedTabId === INSPECTOR_TAB_ID.INGEST && (
                   <Ingest ingestResponse={props.ingestResponse} />
                 )}
-                {props.selectedTabId === INSPECTOR_TAB_ID.QUERY && (
+                {props.selectedTabId === INSPECTOR_TAB_ID.TEST && (
                   <Query
                     hasSearchPipeline={hasProvisionedSearchResources(
                       props.workflow
diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx
@@ -95,8 +95,8 @@ describe('WorkflowDetail Page with create ingestion option', () => {
       expect(getByText('Export')).toBeInTheDocument();
       expect(getByText('Visual')).toBeInTheDocument();
       expect(getByText('JSON')).toBeInTheDocument();
+      expect(getByRole('tab', { name: 'Test flow' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Ingest response' })).toBeInTheDocument();
-      expect(getByRole('tab', { name: 'Search tool' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Errors' })).toBeInTheDocument();
       expect(getByRole('tab', { name: 'Resources' })).toBeInTheDocument();
 
diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx
@@ -282,7 +282,7 @@ export function SourceDataModal(props: SourceDataProps) {
                     <EuiText
                       size="xs"
                       color="subdued"
-                    >{`Only the top ${MAX_DOCS_TO_IMPORT} documents will be imported.`}</EuiText>
+                    >{`Only the first ${MAX_DOCS_TO_IMPORT} documents will be imported.`}</EuiText>
                     <EuiSpacer size="xs" />
                   </>
                 )}
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -550,9 +550,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                 text: (
                   <EuiFlexGroup direction="column">
                     <EuiFlexItem grow={false}>
-                      <EuiText size="s">
-                        Validate your ingest flow with the search tool
-                      </EuiText>
+                      <EuiText size="s">Validate your ingest flow</EuiText>
                     </EuiFlexItem>
                     <EuiFlexItem>
                       <EuiFlexGroup direction="row" justifyContent="flexEnd">
@@ -561,7 +559,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                             fill={false}
                             onClick={() => props.displaySearchPanel()}
                           >
-                            Open Search tool
+                            Test flow
                           </EuiSmallButton>
                         </EuiFlexItem>
                       </EuiFlexGroup>
diff --git a/public/pages/workflows/get_started_accordion.tsx b/public/pages/workflows/get_started_accordion.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiCard,
+  EuiLink,
+  EuiTitle,
+  EuiAccordion,
+} from '@elastic/eui';
+import { CREATE_WORKFLOW_LINK, ML_REMOTE_MODEL_LINK } from '../../../common';
+
+interface GetStartedAccordionProps {}
+
+export function GetStartedAccordion(props: GetStartedAccordionProps) {
+  return (
+    <EuiAccordion
+      style={{ marginBottom: '-16px' }}
+      initialIsOpen={false}
+      id={`accordionGetStarted`}
+      buttonContent={
+        <EuiFlexGroup direction="row">
+          <EuiFlexItem grow={false}>
+            <EuiText>Get started</EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+    >
+      <EuiSpacer size="s" />
+      <EuiFlexItem>
+        <EuiFlexGroup direction="row">
+          <EuiFlexItem>
+            <EuiCard
+              layout="horizontal"
+              title={
+                <EuiTitle size="s">
+                  <h3>1. Set up models</h3>
+                </EuiTitle>
+              }
+            >
+              <EuiText>
+                Connect to an externally hosted model and make it available in
+                your OpenSearch cluster.{' '}
+                <EuiLink href={ML_REMOTE_MODEL_LINK} target="_blank">
+                  Learn more
+                </EuiLink>
+              </EuiText>
+            </EuiCard>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiCard
+              layout="horizontal"
+              title={
+                <EuiTitle size="s">
+                  <h3>2. Ingest data</h3>
+                </EuiTitle>
+              }
+            >
+              <EuiText>
+                Import sample data to get started; add processors to customize
+                your ingest pipeline.
+              </EuiText>
+            </EuiCard>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiCard
+              layout="horizontal"
+              title={
+                <EuiTitle size="s">
+                  <h3>3. Build a search pipeline</h3>
+                </EuiTitle>
+              }
+            >
+              <EuiText>
+                Set up a query and configure your search pipeline.
+              </EuiText>
+            </EuiCard>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiCard
+              layout="horizontal"
+              title={
+                <EuiTitle size="s">
+                  <h3>4. Export the workflow</h3>
+                </EuiTitle>
+              }
+            >
+              <EuiText>
+                Export your workflow template to create and deploy the workflow
+                on other OpenSearch clusters.{' '}
+                <EuiLink href={CREATE_WORKFLOW_LINK} target="_blank">
+                  Learn more
+                </EuiLink>
+              </EuiText>
+            </EuiCard>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiAccordion>
+  );
+}
diff --git a/public/pages/workflows/new_workflow/quick_configure_inputs.tsx b/public/pages/workflows/new_workflow/quick_configure_inputs.tsx
@@ -23,6 +23,7 @@ import {
   DEFAULT_LLM_RESPONSE_FIELD,
   DEFAULT_TEXT_FIELD,
   DEFAULT_VECTOR_FIELD,
+  ML_CHOOSE_MODEL_LINK,
   ML_REMOTE_MODEL_LINK,
   MODEL_STATE,
   Model,
@@ -194,6 +195,14 @@ export function QuickConfigureInputs(props: QuickConfigureInputsProps) {
                 ? 'Large language model'
                 : 'Embedding model'
             }
+            labelAppend={
+              // TODO: update to be a popover with more content.
+              <EuiText size="xs">
+                <EuiLink href={ML_CHOOSE_MODEL_LINK} target="_blank">
+                  Learn more
+                </EuiLink>
+              </EuiText>
+            }
             isInvalid={false}
             helpText={
               isEmpty(deployedModels)
diff --git a/public/pages/workflows/new_workflow/quick_configure_modal.tsx b/public/pages/workflows/new_workflow/quick_configure_modal.tsx
@@ -164,7 +164,7 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {
         >
           <EuiCompressedTextArea
             fullWidth={true}
-            placeholder="Enter a description for your workflow"
+            placeholder="Enter a description for this workflow"
             value={workflowDescription}
             onChange={(e) => {
               setWorkflowDescription(e.target.value);
diff --git a/public/pages/workflows/workflow_list/columns.tsx b/public/pages/workflows/workflow_list/columns.tsx
@@ -24,7 +24,7 @@ export const columns = (actions: any[]) => {
     {
       field: 'name',
       name: 'Name',
-      width: '35%',
+      width: '25%',
       sortable: true,
       render: (name: string, workflow: Workflow) => (
         <EuiLink
@@ -40,13 +40,19 @@ export const columns = (actions: any[]) => {
     {
       field: 'ui_metadata.type',
       name: 'Type',
-      width: '20%',
+      width: '25%',
       sortable: true,
     },
+    {
+      field: 'description',
+      name: 'Description',
+      width: '35%',
+      sortable: false,
+    },
     {
       field: 'lastUpdated',
       name: 'Last saved',
-      width: '35%',
+      width: '15%',
       sortable: true,
       render: (lastUpdated: number) =>
         lastUpdated !== undefined
diff --git a/public/pages/workflows/workflow_list/workflow_list.tsx b/public/pages/workflows/workflow_list/workflow_list.tsx
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui';
 import { AppState } from '../../../store';
 import {
+  EMPTY_FIELD_STRING,
   MAX_WORKFLOW_NAME_TO_DISPLAY,
   UIState,
   WORKFLOW_TYPE,
@@ -222,10 +223,11 @@ function fetchFilteredWorkflows(
   const allWorkflowsExceptRegisterAgent = allWorkflows.filter(
     (workflow) => workflow.use_case !== 'REGISTER_AGENT'
   );
-  // If missing/invalid ui metadata, add defaults
+  // If missing/invalid fields for each workflow, add defaults
   const allWorkflowsWithDefaults = allWorkflowsExceptRegisterAgent.map(
     (workflow) => ({
       ...workflow,
+      description: workflow.description || EMPTY_FIELD_STRING,
       ui_metadata: {
         ...workflow.ui_metadata,
         type: workflow.ui_metadata?.type || WORKFLOW_TYPE.UNKNOWN,
diff --git a/public/pages/workflows/workflows.tsx b/public/pages/workflows/workflows.tsx
@@ -42,6 +42,7 @@ import {
 } from '../../services';
 import { prettifyErrorMessage } from '../../../common/utils';
 import { DataSourceOption } from '../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
+import { GetStartedAccordion } from './get_started_accordion';
 
 export interface WorkflowsRouterProps {}
 
@@ -238,6 +239,8 @@ export function Workflows(props: WorkflowsProps) {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiText color="subdued">{DESCRIPTION}</EuiText>
+      <EuiSpacer size="l" />
+      <GetStartedAccordion />
     </EuiFlexGroup>
   );
 

Original file line number	Diff line number	Diff line change
`@@ -164,7 +164,7 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {`
`164`	`164`	`>`
`165`	`165`	`<EuiCompressedTextArea`
`166`	`166`	`fullWidth={true}`
`167`		`- placeholder="Enter a description for your workflow"`
	`167`	`+ placeholder="Enter a description for this workflow"`
`168`	`168`	`value={workflowDescription}`
`169`	`169`	`onChange={(e) => {`
`170`	`170`	`setWorkflowDescription(e.target.value);`