UX fit-n-finish updates I (#549) (#551)

(cherry picked from commit 9025d1b) Signed-off-by: Tyler Ohlsen <[email protected]> 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>
opensearch-project · Dec 27, 2024 · 8ee7843 · 8ee7843
1 parent ed192a5
commit 8ee7843
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 23 deletions.
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
@@ -108,10 +108,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
     };
   }, [setHeaderVariant, USE_NEW_HOME_PAGE]);
 
-  const onExportButtonClick = () => {
-    setIsExportModalOpen(true);
-  };
-
   const onExitButtonClick = () => {
     history.replace(
       constructUrlWithParams(APP_PATH.WORKFLOWS, undefined, dataSourceId)
@@ -302,13 +298,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 controlType: 'icon',
                 disabled: saveDisabled,
               } as TopNavMenuIconData,
-              {
-                iconType: 'exportAction',
-                tooltip: 'Export',
-                ariaLabel: 'Export',
-                run: onExportButtonClick,
-                controlType: 'icon',
-              } as TopNavMenuIconData,
               {
                 iconType: 'exit',
                 tooltip: 'Return to projects',
@@ -353,10 +342,23 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 ),
               },
               {
-                text: `Last updated: ${workflowLastUpdated}`,
+                text: `Last saved: ${workflowLastUpdated}`,
                 color: 'subdued',
                 className: 'workflow-detail-last-updated',
               } as TopNavControlData,
+              {
+                renderComponent: (
+                  <EuiSmallButton
+                    fill={true}
+                    onClick={() => {
+                      setIsExportModalOpen(true);
+                    }}
+                    data-testid="exportButton"
+                  >
+                    Export
+                  </EuiSmallButton>
+                ),
+              },
             ]}
           />
         </>
@@ -411,7 +413,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 }}
               />,
               <EuiText color="subdued" size="s">
-                {`Last updated: ${workflowLastUpdated}`}
+                {`Last saved: ${workflowLastUpdated}`}
               </EuiText>,
               <ExperimentalBadge
                 popoverEnabled={true}

diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
@@ -38,7 +38,7 @@ interface ToolsProps {
   selectedStep: CONFIG_STEP;
 }
 
-const PANEL_TITLE = 'Inspector';
+const PANEL_TITLE = 'Inspect pipeline';
 
 /**
  * The base Tools component for performing ingest and search, viewing resources, and debugging.
@@ -98,7 +98,7 @@ export function Tools(props: ToolsProps) {
       >
         <EuiFlexItem grow={false} style={{ marginBottom: '0px' }}>
           <EuiText size="s">
-            <h2>{PANEL_TITLE}</h2>
+            <h3>{PANEL_TITLE}</h3>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx
@@ -78,10 +78,10 @@ describe('WorkflowDetail Page with create ingestion option', () => {
       } = renderWithRouter(workflowId, workflowName, type);
 
       expect(getAllByText(workflowName).length).toBeGreaterThan(0);
-      expect(getAllByText('Inspector').length).toBeGreaterThan(0);
-      expect(getAllByText('Preview').length).toBeGreaterThan(0);
+      expect(getAllByText('Inspect pipeline').length).toBeGreaterThan(0);
+      expect(getAllByText('Preview pipeline').length).toBeGreaterThan(0);
       expect(
-        getAllByText((content) => content.startsWith('Last updated:')).length
+        getAllByText((content) => content.startsWith('Last saved:')).length
       ).toBeGreaterThan(0);
       expect(getByText('Close')).toBeInTheDocument();
       expect(getByText('Export')).toBeInTheDocument();

diff --git a/...orkflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx b/...orkflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_expression_modal.tsx
@@ -23,6 +23,7 @@ import {
   EuiSpacer,
   EuiIconTip,
   EuiPopover,
+  EuiBadge,
 } from '@elastic/eui';
 import {
   customStringify,
@@ -562,7 +563,20 @@ export function ConfigureExpressionModal(props: ConfigureExpressionModalProps) {
                         </EuiFlexItem>
                       )}
                     <EuiFlexItem grow={false}>
-                      <EuiText size="s">Source data</EuiText>
+                      <EuiFlexGroup
+                        direction="row"
+                        gutterSize="s"
+                        justifyContent="flexStart"
+                      >
+                        <EuiFlexItem grow={false}>
+                          <EuiText size="s">Sample of source data</EuiText>
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <EuiBadge>{`${
+                            oneToOne ? 'One' : 'Many'
+                          } to one processing`}</EuiBadge>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       <EuiCodeEditor

diff --git a/...w_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx b/...w_inputs/processor_inputs/ml_processor_inputs/modals/configure_multi_expression_modal.tsx
@@ -573,7 +573,7 @@ export function ConfigureMultiExpressionModal(
                         </EuiFlexItem>
                       )}
                     <EuiFlexItem grow={false}>
-                      <EuiText size="s">Source data</EuiText>
+                      <EuiText size="s">Sample of model output</EuiText>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       <EuiCodeEditor

diff --git a/.../workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx b/.../workflow_inputs/processor_inputs/ml_processor_inputs/modals/configure_template_modal.tsx
@@ -24,6 +24,7 @@ import {
   EuiSmallButtonIcon,
   EuiSpacer,
   EuiIconTip,
+  EuiBadge,
 } from '@elastic/eui';
 import {
   customStringify,
@@ -622,7 +623,7 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) {
                         justifyContent="spaceBetween"
                       >
                         <EuiFlexItem grow={false}>
-                          <EuiText size="m">Prompt preview</EuiText>
+                          <EuiText size="m">Preview</EuiText>
                         </EuiFlexItem>
                         <EuiFlexItem grow={false}>
                           <EuiSmallButton
@@ -793,7 +794,20 @@ export function ConfigureTemplateModal(props: ConfigureTemplateModalProps) {
                         </EuiFlexItem>
                       )}
                     <EuiFlexItem grow={false}>
-                      <EuiText size="s">Source data</EuiText>
+                      <EuiFlexGroup
+                        direction="row"
+                        gutterSize="s"
+                        justifyContent="flexStart"
+                      >
+                        <EuiFlexItem grow={false}>
+                          <EuiText size="s">Sample of source data</EuiText>
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <EuiBadge>{`${
+                            oneToOne ? 'One' : 'Many'
+                          } to one processing`}</EuiBadge>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false}>
                       <EuiCodeEditor

diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -47,6 +47,8 @@ interface WorkspaceProps {
   uiConfig?: WorkflowConfig;
 }
 
+const PANEL_TITLE = 'Preview pipeline';
+
 const nodeTypes = {
   custom: WorkspaceComponent,
   ingestGroup: IngestGroupComponent,
@@ -140,7 +142,7 @@ export function Workspace(props: WorkspaceProps) {
           <EuiFlexGroup direction="row" style={{ padding: '12px' }}>
             <EuiFlexItem grow={false}>
               <EuiText size="s">
-                <h2>Preview</h2>
+                <h3>{PANEL_TITLE}</h3>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>