UX fit-n-finish updates IX (#582)

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

Author: ohltyler

common/constants.ts

@@ -573,17 +573,52 @@ export enum PROCESSOR_CONTEXT {
   SEARCH_REQUEST = 'search_request',
   SEARCH_RESPONSE = 'search_response',
 }
+export const NO_TRANSFORMATION = 'No transformation';
 export enum TRANSFORM_CONTEXT {
   INPUT = 'input',
   OUTPUT = 'output',
 }
 export enum TRANSFORM_TYPE {
   STRING = 'String',
   FIELD = 'Field',
-  EXPRESSION = 'Expression',
-  TEMPLATE = 'Template',
+  EXPRESSION = 'JSONPath Expression',
+  TEMPLATE = 'Prompt',
 }
-export const NO_TRANSFORMATION = 'No transformation';
+
+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.STRING,
+    description: 'Declare a string to the input field.',
+  },
+];
+
+export const OUTPUT_TRANSFORM_OPTIONS = [
+  {
+    id: TRANSFORM_TYPE.FIELD,
+    description: 'Map an existing field from your data.',
+  },
+  {
+    id: TRANSFORM_TYPE.EXPRESSION,
+    description: 'Extract data before mapping to the input field.',
+  },
+  {
+    id: NO_TRANSFORMATION,
+    description: 'Leave the output field as-is.',
+  },
+];
+
 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;
@@ -608,6 +643,7 @@ export enum SORT_ORDER {
 export const MAX_DOCS = 1000;
 export const MAX_DOCS_TO_IMPORT = 100;
 export const MAX_STRING_LENGTH = 100;
+export const MAX_DESCRIPTION_LENGTH = 1000;
 export const MAX_JSON_STRING_LENGTH = 10000;
 export const MAX_TEMPLATE_STRING_LENGTH = 10000;
 export const MAX_BYTES = 1048576; // OSD REST request payload size limit

common/interfaces.ts

@@ -563,6 +563,11 @@ export type QueryParam = {
   value: string;
 };
 
+export type CachedFormikState = {
+  errors?: {};
+  touched?: {};
+};
+
 /**
  ********** OPENSEARCH TYPES/INTERFACES ************
  */

public/pages/workflow_detail/components/edit_workflow_metadata_modal.tsx

@@ -20,7 +20,7 @@ import {
 } from '@elastic/eui';
 import {
   FETCH_ALL_QUERY_LARGE,
-  MAX_STRING_LENGTH,
+  MAX_DESCRIPTION_LENGTH,
   Workflow,
   WORKFLOW_NAME_REGEXP,
   WORKFLOW_NAME_RESTRICTIONS,
@@ -87,9 +87,8 @@ export function EditWorkflowMetadataModal(
       .required('Required') as yup.Schema,
     desription: yup
       .string()
-      .trim()
       .min(0)
-      .max(MAX_STRING_LENGTH, 'Too long')
+      .max(MAX_DESCRIPTION_LENGTH, 'Too long')
       .optional() as yup.Schema,
   }) as yup.Schema;
 

public/pages/workflow_detail/components/header.tsx

@@ -437,10 +437,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                   revertUnsavedChanges();
                 }}
               />,
-              <EuiText color="subdued" size="s">
-                {`Last saved: ${workflowLastUpdated}`}
-              </EuiText>,
-              // TODO: placement may change for this
               <EuiSmallButtonEmpty
                 disabled={false}
                 onClick={() => {
@@ -449,6 +445,9 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
               >
                 {`How it works`}
               </EuiSmallButtonEmpty>,
+              <EuiText color="subdued" size="s">
+                {`Last saved: ${workflowLastUpdated}`}
+              </EuiText>,
             ]}
             bottomBorder={false}
             rightSideGroupProps={{

public/pages/workflow_detail/resizable_workspace.tsx

@@ -14,6 +14,7 @@ import {
 } from '@elastic/eui';
 import {
   CONFIG_STEP,
+  CachedFormikState,
   INSPECTOR_TAB_ID,
   Workflow,
   WorkflowConfig,
@@ -46,6 +47,7 @@ interface ResizableWorkspaceProps {
   setSelectedStep: (step: CONFIG_STEP) => void;
   setUnsavedIngestProcessors: (unsavedIngestProcessors: boolean) => void;
   setUnsavedSearchProcessors: (unsavedSearchProcessors: boolean) => void;
+  setCachedFormikState: (cachedFormikState: CachedFormikState) => void;
 }
 
 const WORKFLOW_INPUTS_PANEL_ID = 'workflow_inputs_panel_id';
@@ -141,6 +143,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                   }
                   setSelectedInspectorTabId(INSPECTOR_TAB_ID.QUERY);
                 }}
+                setCachedFormikState={props.setCachedFormikState}
               />
             </EuiResizablePanel>
             <EuiResizableButton />

public/pages/workflow_detail/tools/query/query.tsx

@@ -69,23 +69,14 @@ export function Query(props: QueryProps) {
   >(undefined);
 
   // Standalone / sandboxed search request state. Users can test things out
-  // without updating the base form / persisted value. We default to different values
-  // based on the context (ingest or search), and update based on changes to the context
-  // (ingest v. search), or if the parent form values are changed.
+  // without updating the base form / persisted value.
+  // Update if the parent form values are changed, or if a newly-created search pipeline is detected.
   const [tempRequest, setTempRequest] = useState<string>('');
   useEffect(() => {
-    setTempRequest(
-      props.selectedStep === CONFIG_STEP.INGEST
-        ? customStringify(FETCH_ALL_QUERY)
-        : values?.search?.request || '{}'
-    );
-  }, [props.selectedStep]);
-  useEffect(() => {
-    if (
-      !isEmpty(values?.search?.request) &&
-      props.selectedStep === CONFIG_STEP.SEARCH
-    ) {
+    if (!isEmpty(values?.search?.request)) {
       setTempRequest(values?.search?.request);
+    } else {
+      setTempRequest(customStringify(FETCH_ALL_QUERY));
     }
   }, [values?.search?.request]);
 
@@ -170,8 +161,7 @@ export function Query(props: QueryProps) {
                           singleSelection={{ asPlainText: true }}
                           isClearable={false}
                           options={
-                            props.hasSearchPipeline &&
-                            props.selectedStep === CONFIG_STEP.SEARCH
+                            props.hasSearchPipeline
                               ? SEARCH_OPTIONS
                               : [SEARCH_OPTIONS[1]]
                           }

public/pages/workflow_detail/workflow_detail.tsx

@@ -38,6 +38,7 @@ import {
 import { ResizableWorkspace } from './resizable_workspace';
 import {
   CONFIG_STEP,
+  CachedFormikState,
   ERROR_GETTING_WORKFLOW_MSG,
   FETCH_ALL_QUERY_LARGE,
   MAX_WORKFLOW_NAME_TO_DISPLAY,
@@ -144,6 +145,13 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     undefined
   );
 
+  // We persist some cached formik state we may want to save, even when the form is reset. For example,
+  // when adding a processor, the form needs to be re-generated. But, we should persist any known
+  // values that are touched or have errors.
+  const [cachedFormikState, setCachedFormikState] = useState<
+    CachedFormikState | undefined
+  >(undefined);
+
   // various form-related states. persisted here to pass down to the child's form and header components, particularly
   // to have consistency on the button states (enabled/disabled)
   const [isRunningIngest, setIsRunningIngest] = useState<boolean>(false);
@@ -199,6 +207,8 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     <Formik
       enableReinitialize={true}
       initialValues={formValues}
+      initialTouched={cachedFormikState?.touched}
+      initialErrors={cachedFormikState?.errors}
       validationSchema={formSchema}
       onSubmit={(values) => {}}
       validate={(values) => {}}
@@ -233,6 +243,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
               setSelectedStep={setSelectedStep}
               setUnsavedIngestProcessors={setUnsavedIngestProcessors}
               setUnsavedSearchProcessors={setUnsavedSearchProcessors}
+              setCachedFormikState={setCachedFormikState}
             />
           </EuiPageBody>
         </EuiPage>

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

@@ -6,11 +6,16 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ProcessorsList } from '../processors_list';
-import { PROCESSOR_CONTEXT, WorkflowConfig } from '../../../../../common';
+import {
+  CachedFormikState,
+  PROCESSOR_CONTEXT,
+  WorkflowConfig,
+} from '../../../../../common';
 import { ProcessorsTitle } from '../../../../general_components';
 interface EnrichDataProps {
   uiConfig: WorkflowConfig;
   setUiConfig: (uiConfig: WorkflowConfig) => void;
+  setCachedFormikState: (cachedFormikState: CachedFormikState) => void;
 }
 
 /**
@@ -29,6 +34,7 @@ export function EnrichData(props: EnrichDataProps) {
           uiConfig={props.uiConfig}
           setUiConfig={props.setUiConfig}
           context={PROCESSOR_CONTEXT.INGEST}
+          setCachedFormikState={props.setCachedFormikState}
         />
       </EuiFlexItem>
     </EuiFlexGroup>

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

@@ -40,7 +40,9 @@ export function IngestData(props: IngestDataProps) {
             <EuiText size="s">
               Invalid dimension detected for a vector field mapping. Ensure the
               dimension value is set correctly.{' '}
-              <EuiLink href={KNN_VECTOR_DOCS_LINK}>Learn more</EuiLink>
+              <EuiLink target="_blank" href={KNN_VECTOR_DOCS_LINK}>
+                Learn more
+              </EuiLink>
             </EuiText>
           }
           color="warning"

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

@@ -8,14 +8,19 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { SourceData } from './source_data';
 import { EnrichData } from './enrich_data';
 import { IngestData } from './ingest_data';
-import { Workflow, WorkflowConfig } from '../../../../../common';
+import {
+  CachedFormikState,
+  Workflow,
+  WorkflowConfig,
+} from '../../../../../common';
 
 interface IngestInputsProps {
   setIngestDocs: (docs: string) => void;
   uiConfig: WorkflowConfig;
   setUiConfig: (uiConfig: WorkflowConfig) => void;
   workflow: Workflow | undefined;
   lastIngested: number | undefined;
+  setCachedFormikState: (cachedFormikState: CachedFormikState) => void;
 }
 
 /**
@@ -36,7 +41,11 @@ export function IngestInputs(props: IngestInputsProps) {
         <EuiHorizontalRule margin="none" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EnrichData uiConfig={props.uiConfig} setUiConfig={props.setUiConfig} />
+        <EnrichData
+          uiConfig={props.uiConfig}
+          setUiConfig={props.setUiConfig}
+          setCachedFormikState={props.setCachedFormikState}
+        />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiHorizontalRule margin="none" />

public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx

@@ -65,7 +65,7 @@ export function TextField(props: TextFieldProps) {
                 placeholder={props.placeholder || ''}
                 value={field.value || getInitialValue('string')}
                 onChange={(e) => {
-                  form.setFieldValue(props.fieldPath, e.target.value?.trim());
+                  form.setFieldValue(props.fieldPath, e.target.value);
                 }}
                 isInvalid={isInvalid}
               />
@@ -76,7 +76,6 @@ export function TextField(props: TextFieldProps) {
                 placeholder={props.placeholder || ''}
                 value={field.value || getInitialValue('string')}
                 onChange={(e) => {
-                  console.log('value: ', e.target.value);
                   form.setFieldValue(props.fieldPath, e.target.value?.trim());
                 }}
                 isInvalid={isInvalid}

public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx

@@ -77,6 +77,7 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
   const inputMapValue = getIn(values, inputMapFieldPath);
   const outputMapFieldPath = `${props.baseConfigPath}.${props.config.id}.output_map`;
   const outputMapValue = getIn(values, outputMapFieldPath);
+  const [modelNotFound, setModelNotFound] = useState<boolean>(false);
 
   // preview availability states
   // if there are preceding search request processors, we cannot fetch and display the interim transformed query.
@@ -139,18 +140,44 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
     setFieldTouched(outputMapFieldPath, false);
   }
 
-  // on initial load of the models, update model interface states
+  // Listener to detect on changes that could affect the model details, such as
+  // any defined model interface, or if the model is not found.
   useEffect(() => {
     if (!isEmpty(models)) {
       const modelId = getIn(values, modelIdFieldPath);
-      if (modelId) {
+      if (modelId && models[modelId]) {
         setModelInterface(models[modelId]?.interface);
+        setModelNotFound(false);
+        // Edge case: model ID found, but no matching deployed model found in the cluster.
+        // If so, persist a model-not-found state, and touch all fields to trigger UI elements
+        // indicating errors for this particular processor.
+      } else if (modelId) {
+        setModelNotFound(true);
+        setFieldValue(modelIdFieldPath, '');
+        try {
+          const processorConfigPath = `${props.baseConfigPath}.${props.config.id}`;
+          Object.keys(
+            getIn(values, `${props.baseConfigPath}.${props.config.id}`)
+          ).forEach((modelFieldPath) => {
+            setFieldTouched(`${processorConfigPath}.${modelFieldPath}`, true);
+          });
+        } catch (e) {}
       }
     }
-  }, [models]);
+  }, [models, getIn(values, modelIdFieldPath), props.uiConfig]);
 
   return (
     <>
+      {modelNotFound && (
+        <>
+          <EuiCallOut
+            color="danger"
+            size="s"
+            title={<EuiText size="s">Model not found</EuiText>}
+          />
+          <EuiSpacer size="s" />
+        </>
+      )}
       {isQueryModalOpen && (
         <OverrideQueryModal
           config={props.config}