UX fit-n-finish updates V (opensearch-project#567)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

common/constants.ts

@@ -571,7 +571,6 @@ export enum TRANSFORM_TYPE {
   TEMPLATE = 'Template',
 }
 export const NO_TRANSFORMATION = 'No transformation';
-export const START_FROM_SCRATCH_WORKFLOW_NAME = 'Start From Scratch';
 export const DEFAULT_NEW_WORKFLOW_NAME = 'new_workflow';
 export const DEFAULT_NEW_WORKFLOW_DESCRIPTION = 'My new workflow';
 export const DEFAULT_NEW_WORKFLOW_STATE_TYPE = ('NOT_STARTED' as any) as typeof WORKFLOW_STATE;
@@ -592,6 +591,7 @@ export enum SORT_ORDER {
   DESC = 'desc',
 }
 export const MAX_DOCS = 1000;
+export const MAX_DOCS_TO_IMPORT = 100;
 export const MAX_STRING_LENGTH = 100;
 export const MAX_JSON_STRING_LENGTH = 10000;
 export const MAX_TEMPLATE_STRING_LENGTH = 10000;

public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import * as yup from 'yup';
 import { Formik, getIn, useFormikContext } from 'formik';
 import { isEmpty } from 'lodash';
@@ -13,12 +14,12 @@ import {
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiModalBody,
   EuiModalFooter,
   EuiSmallButtonEmpty,
   EuiSmallButton,
 } from '@elastic/eui';
 import {
+  FETCH_ALL_QUERY,
   MAX_STRING_LENGTH,
   Workflow,
   WORKFLOW_NAME_REGEXP,
@@ -32,7 +33,13 @@ import {
   getInitialValue,
 } from '../../../utils';
 import { TextField } from '../workflow_inputs/input_fields';
-import { getWorkflow, updateWorkflow, useAppDispatch } from '../../../store';
+import {
+  AppState,
+  getWorkflow,
+  searchWorkflows,
+  updateWorkflow,
+  useAppDispatch,
+} from '../../../store';
 
 interface EditWorkflowMetadataModalProps {
   workflow?: Workflow;
@@ -47,6 +54,7 @@ export function EditWorkflowMetadataModal(
   const dispatch = useAppDispatch();
   const dataSourceId = getDataSourceId();
   const { values } = useFormikContext<WorkflowFormValues>();
+  const { workflows } = useSelector((state: AppState) => state.workflows);
 
   // sub-form values/schema
   const metadataFormValues = {
@@ -64,6 +72,17 @@ export function EditWorkflowMetadataModal(
           WORKFLOW_NAME_REGEXP.test(name) === false
         );
       })
+      .test(
+        'workflowName',
+        'This workflow name is already in use. Use a different name',
+        (name) => {
+          return !(
+            Object.values(workflows)
+              .map((workflow) => workflow.name)
+              .includes(name || '') && name !== props.workflow?.name
+          );
+        }
+      )
       .required('Required') as yup.Schema,
     desription: yup
       .string()
@@ -83,6 +102,17 @@ export function EditWorkflowMetadataModal(
   // button updating state
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
 
+  // On initial render: fetch all workflows. Used for preventing users from updating name
+  // to an existing workflow
+  useEffect(() => {
+    dispatch(
+      searchWorkflows({
+        apiBody: FETCH_ALL_QUERY,
+        dataSourceId,
+      })
+    );
+  }, []);
+
   // if saving, take the updated name/description (along with any other unsaved form values)
   // and execute the update.
   async function onSave() {
@@ -162,34 +192,36 @@ export function EditWorkflowMetadataModal(
         return (
           <EuiModal
             maxWidth={false}
-            style={{ width: '50vw' }}
+            style={{ width: '30vw' }}
             onClose={() => props.setIsModalOpen(false)}
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle>
-                <p>Update workflow metadata</p>
+                <p>Workflow settings</p>
               </EuiModalHeaderTitle>
             </EuiModalHeader>
-            <EuiModalBody>
+            <EuiFlexItem style={{ paddingLeft: '24px', paddingRight: '24px' }}>
               <EuiFlexGroup direction="column">
                 <EuiFlexItem>
                   <TextField
-                    label="Workflow name"
+                    label="Name"
                     fullWidth={false}
                     fieldPath={`name`}
                     showError={true}
                   />
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <TextField
-                    label="Workflow description"
-                    fullWidth={true}
+                    label="Description - optional"
+                    fullWidth={false}
                     fieldPath={`description`}
                     showError={true}
+                    placeholder="Provide a description for identifying this workflow."
+                    textArea={true}
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>
-            </EuiModalBody>
+            </EuiFlexItem>
             <EuiModalFooter>
               <EuiSmallButtonEmpty
                 onClick={() => props.setIsModalOpen(false)}

public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx

@@ -13,6 +13,7 @@ import {
   EuiText,
   EuiCodeBlock,
   EuiSmallButtonEmpty,
+  EuiEmptyPrompt,
 } from '@elastic/eui';
 import {
   MapEntry,
@@ -103,11 +104,11 @@ export function SourceData(props: SourceDataProps) {
           <EuiFlexGroup direction="row" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiText size="s">
-                <h3>Import data</h3>
+                <h3>Import sample data</h3>
               </EuiText>
             </EuiFlexItem>
-            {docsPopulated && (
-              <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={false}>
+              {docsPopulated ? (
                 <EuiSmallButtonEmpty
                   onClick={() => setIsEditModalOpen(true)}
                   data-testid="editSourceDataButton"
@@ -116,8 +117,19 @@ export function SourceData(props: SourceDataProps) {
                 >
                   Edit
                 </EuiSmallButtonEmpty>
-              </EuiFlexItem>
-            )}
+              ) : (
+                <EuiSmallButton
+                  fill={false}
+                  style={{ width: '75px' }}
+                  onClick={() => setIsEditModalOpen(true)}
+                  data-testid="selectDataToImportButton"
+                  iconType="plus"
+                  iconSide="left"
+                >
+                  {`Import`}
+                </EuiSmallButton>
+              )}
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
         {props.lastIngested !== undefined && (
@@ -127,21 +139,7 @@ export function SourceData(props: SourceDataProps) {
             </EuiText>
           </EuiFlexItem>
         )}
-
-        {!docsPopulated && (
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton
-              fill={false}
-              style={{ width: '100px' }}
-              onClick={() => setIsEditModalOpen(true)}
-              data-testid="selectDataToImportButton"
-            >
-              {`Select data`}
-            </EuiSmallButton>
-          </EuiFlexItem>
-        )}
-
-        {docsPopulated && (
+        {docsPopulated ? (
           <>
             <EuiSpacer size="s" />
             <EuiFlexItem grow={true}>
@@ -157,6 +155,20 @@ export function SourceData(props: SourceDataProps) {
               </EuiCodeBlock>
             </EuiFlexItem>
           </>
+        ) : (
+          <EuiEmptyPrompt
+            iconType="document"
+            title={<h2>No data imported</h2>}
+            titleSize="s"
+            body={
+              <>
+                <EuiText size="s">
+                  Import a sample of your data to begin configuring your
+                  ingestion flow.
+                </EuiText>
+              </>
+            }
+          />
         )}
       </EuiFlexGroup>
     </>