UX fit-n-finish updates VI (opensearch-project#570)

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

Author: ohltyler

common/constants.ts

@@ -244,6 +244,8 @@ export const NORMALIZATION_PROCESSOR_LINK =
 export const GITHUB_FEEDBACK_LINK =
   'https://github.com/opensearch-project/dashboards-flow-framework/issues/new/choose';
 export const JSONPATH_DOCS_LINK = 'https://www.npmjs.com/package/jsonpath';
+export const KNN_VECTOR_DOCS_LINK =
+  'https://opensearch.org/docs/latest/field-types/supported-field-types/knn-vector/';
 
 /**
  * Text chunking algorithm constants

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

@@ -19,13 +19,16 @@ import { AppState } from '../../../../store';
 import {
   getEmbeddingField,
   getEmbeddingModelDimensions,
+  getFieldValue,
   getUpdatedIndexMappings,
   getUpdatedIndexSettings,
   isKnnIndex,
   removeVectorFieldFromIndexMappings,
 } from '../../../../utils';
 
-interface AdvancedSettingsProps {}
+interface AdvancedSettingsProps {
+  setHasInvalidDimensions: (hasInvalidDimensions: boolean) => void;
+}
 
 /**
  * Input component for configuring ingest-side advanced settings
@@ -54,7 +57,10 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
         );
         if (processorModel?.connectorId !== undefined) {
           const processorConnector = connectors[processorModel?.connectorId];
-          const dimension = getEmbeddingModelDimensions(processorConnector);
+          const dimension =
+            processorConnector !== undefined
+              ? getEmbeddingModelDimensions(processorConnector)
+              : undefined;
 
           // If a dimension is found, it is a known embedding model.
           // Ensure the index is configured to be knn-enabled.
@@ -115,6 +121,17 @@ export function AdvancedSettings(props: AdvancedSettingsProps) {
     }
   }, [getIn(values, 'ingest.enrich')]);
 
+  // listener to check if there is a dimension value set, and if so, check its validity
+  useEffect(() => {
+    try {
+      const mappingsObj = JSON.parse(getIn(values, indexMappingsPath));
+      const dimensionVal = getFieldValue(mappingsObj, 'dimension');
+      props.setHasInvalidDimensions(
+        dimensionVal !== undefined && typeof dimensionVal !== 'number'
+      );
+    } catch (e) {}
+  }, [getIn(values, indexMappingsPath)]);
+
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>

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

@@ -3,29 +3,54 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import React, { useState } from 'react';
+import {
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiText,
+} from '@elastic/eui';
 import { TextField } from '../input_fields';
 import { AdvancedSettings } from './advanced_settings';
+import { KNN_VECTOR_DOCS_LINK } from '../../../../../common';
 
 interface IngestDataProps {}
 
 /**
  * Input component for configuring the data ingest (the OpenSearch index)
  */
 export function IngestData(props: IngestDataProps) {
+  const [hasInvalidDimensions, setHasInvalidDimensions] = useState<boolean>(
+    false
+  );
+
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
         <EuiText size="s">
           <h3>Ingest data</h3>
         </EuiText>
       </EuiFlexItem>
+      {hasInvalidDimensions && (
+        <EuiCallOut
+          style={{ marginLeft: '14px' }}
+          size="s"
+          title={
+            <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>
+            </EuiText>
+          }
+          color="warning"
+        />
+      )}
       <EuiFlexItem>
         <TextField label="Index name" fieldPath={'ingest.index.name'} />
       </EuiFlexItem>
       <EuiFlexItem>
-        <AdvancedSettings />
+        <AdvancedSettings setHasInvalidDimensions={setHasInvalidDimensions} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

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

@@ -28,25 +28,20 @@ import {
 } from '@elastic/eui';
 import {
   IConfigField,
-  IMAGE_FIELD_PATTERN,
   IProcessorConfig,
-  LABEL_FIELD_PATTERN,
-  MODEL_ID_PATTERN,
   ModelInterface,
   NO_TRANSFORMATION,
   OutputMapEntry,
-  QUERY_IMAGE_PATTERN,
   QUERY_PRESETS,
-  QUERY_TEXT_PATTERN,
   QueryPreset,
   RequestFormValues,
-  TEXT_FIELD_PATTERN,
   TRANSFORM_TYPE,
-  VECTOR_FIELD_PATTERN,
-  VECTOR_PATTERN,
   WorkflowFormValues,
 } from '../../../../../../../common';
-import { parseModelOutputs } from '../../../../../../utils/utils';
+import {
+  injectPlaceholdersInQueryString,
+  parseModelOutputs,
+} from '../../../../../../utils/utils';
 import { JsonField } from '../../../input_fields';
 import { getFieldSchema, getInitialValue } from '../../../../../../utils';
 import '../../../../../../global-styles.scss';
@@ -193,60 +188,7 @@ export function OverrideQueryModal(props: OverrideQueryModalProps) {
                               onClick: () => {
                                 formikProps.setFieldValue(
                                   'request',
-                                  preset.query
-                                    // sanitize the query preset string into valid template placeholder format, for
-                                    // any placeholder values in the query.
-                                    // for example, replacing `"{{vector}}"` with `${vector}`
-                                    .replace(
-                                      new RegExp(
-                                        `"${VECTOR_FIELD_PATTERN}"`,
-                                        'g'
-                                      ),
-                                      `\$\{vector_field\}`
-                                    )
-                                    .replace(
-                                      new RegExp(`"${VECTOR_PATTERN}"`, 'g'),
-                                      `\$\{vector\}`
-                                    )
-                                    .replace(
-                                      new RegExp(
-                                        `"${TEXT_FIELD_PATTERN}"`,
-                                        'g'
-                                      ),
-                                      `\$\{text_field\}`
-                                    )
-                                    .replace(
-                                      new RegExp(
-                                        `"${IMAGE_FIELD_PATTERN}"`,
-                                        'g'
-                                      ),
-                                      `\$\{image_field\}`
-                                    )
-                                    .replace(
-                                      new RegExp(
-                                        `"${LABEL_FIELD_PATTERN}"`,
-                                        'g'
-                                      ),
-                                      `\$\{label_field\}`
-                                    )
-                                    .replace(
-                                      new RegExp(
-                                        `"${QUERY_TEXT_PATTERN}"`,
-                                        'g'
-                                      ),
-                                      `\$\{query_text\}`
-                                    )
-                                    .replace(
-                                      new RegExp(
-                                        `"${QUERY_IMAGE_PATTERN}"`,
-                                        'g'
-                                      ),
-                                      `\$\{query_image\}`
-                                    )
-                                    .replace(
-                                      new RegExp(`"${MODEL_ID_PATTERN}"`, 'g'),
-                                      `\$\{model_id\}`
-                                    )
+                                  injectPlaceholdersInQueryString(preset.query)
                                 );
                                 formikProps.setFieldTouched('request', true);
                                 setPresetsPopoverOpen(false);

public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx

@@ -42,6 +42,7 @@ import {
   getInitialValue,
   getPlaceholdersFromQuery,
   injectParameters,
+  injectPlaceholdersInQueryString,
 } from '../../../../utils';
 import { AppState, searchIndex, useAppDispatch } from '../../../../store';
 import { QueryParamsList, Results } from '../../../../general_components';
@@ -206,7 +207,9 @@ export function EditQueryModal(props: EditQueryModalProps) {
                                           onClick: () => {
                                             formikProps.setFieldValue(
                                               'request',
-                                              preset.query
+                                              injectPlaceholdersInQueryString(
+                                                preset.query
+                                              )
                                             );
                                             setPopoverOpen(false);
                                           },

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -388,6 +388,9 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
               props.setUnsavedIngestProcessors(false);
               props.setUnsavedSearchProcessors(false);
               await dispatch(
+                // TODO: update to be synchronous provisioning, to prevent
+                // having to wait/sleep before performing next actions.
+                // https://github.com/opensearch-project/flow-framework/pull/1009
                 provisionWorkflow({
                   workflowId: updatedWorkflow.id as string,
                   dataSourceId,
@@ -396,20 +399,47 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                 .unwrap()
                 .then(async (result) => {
                   await sleep(1000);
-                  success = true;
-                  // Kicking off an async task to re-fetch the workflow details
-                  // after some amount of time. Provisioning will finish in an indeterminate
-                  // amount of time and may be long and expensive; we add this single
-                  // auto-fetching to cover the majority of provisioning updates which
-                  // are inexpensive and will finish within milliseconds.
-                  setTimeout(async () => {
-                    dispatch(
-                      getWorkflow({
-                        workflowId: updatedWorkflow.id as string,
-                        dataSourceId,
-                      })
-                    );
-                  }, 1000);
+
+                  await dispatch(
+                    getWorkflow({
+                      workflowId: updatedWorkflow.id as string,
+                      dataSourceId,
+                    })
+                  )
+                    .unwrap()
+                    .then(async (result: any) => {
+                      const resultWorkflow = result.workflow as Workflow;
+                      if (isEmpty(resultWorkflow.error)) {
+                        success = true;
+                      } else {
+                        success = false;
+                        getCore().notifications.toasts.addDanger(
+                          `Error creating all resources, rolling back: ${resultWorkflow.error}`
+                        );
+                        await dispatch(
+                          deprovisionWorkflow({
+                            apiBody: {
+                              workflowId: resultWorkflow?.id as string,
+                              resourceIds: getResourcesToBeForceDeleted(
+                                resultWorkflow
+                              ),
+                            },
+                            dataSourceId,
+                          })
+                        )
+                          .unwrap()
+                          .then(async (result) => {
+                            setTimeout(async () => {
+                              await dispatch(
+                                getWorkflow({
+                                  workflowId: updatedWorkflow.id as string,
+                                  dataSourceId,
+                                })
+                              );
+                            }, 1000);
+                          });
+                      }
+                    });
                 })
                 .catch((error: any) => {
                   console.error('Error provisioning updated workflow: ', error);

public/pages/workflows/new_workflow/quick_configure_inputs.tsx

@@ -66,6 +66,11 @@ export function QuickConfigureInputs(props: QuickConfigureInputsProps) {
   // Local field values state
   const [fieldValues, setFieldValues] = useState<QuickConfigureFields>({});
 
+  // Advanced config accordion state
+  const [accordionState, setAccordionState] = useState<'open' | 'closed'>(
+    'closed'
+  );
+
   // on initial load, and when there are any deployed models found, set
   // defaults for the field values for certain workflow types
   useEffect(() => {
@@ -117,13 +122,24 @@ export function QuickConfigureInputs(props: QuickConfigureInputsProps) {
   }, [fieldValues]);
 
   // Try to pre-fill the dimensions based on the chosen embedding model
+  // If not found, we display a helper callout, and automatically
+  // open the accordion to guide the user.
+  const [unknownEmbeddingLength, setUnknownEmbeddingLength] = useState<boolean>(
+    false
+  );
   useEffect(() => {
     const selectedModel = deployedModels.find(
       (model) => model.id === fieldValues.embeddingModelId
     );
     if (selectedModel?.connectorId !== undefined) {
       const connector = connectors[selectedModel.connectorId];
       if (connector !== undefined) {
+        const dimensions = getEmbeddingModelDimensions(connector);
+        if (dimensions === undefined) {
+          setUnknownEmbeddingLength(true);
+          setAccordionState('open');
+        }
+        setUnknownEmbeddingLength(dimensions === undefined);
         setFieldValues({
           ...fieldValues,
           embeddingLength: getEmbeddingModelDimensions(connector),
@@ -161,6 +177,16 @@ export function QuickConfigureInputs(props: QuickConfigureInputsProps) {
         // we will always have a selectable embedding model.
         <>
           <EuiSpacer size="m" />
+          {unknownEmbeddingLength && (
+            <>
+              <EuiCallOut
+                size="s"
+                title="No embedding length found. Make sure to manually configure below."
+                color="warning"
+              />
+              <EuiSpacer size="s" />
+            </>
+          )}
           <EuiCompressedFormRow
             fullWidth={true}
             label={
@@ -313,8 +339,13 @@ export function QuickConfigureInputs(props: QuickConfigureInputsProps) {
           <EuiAccordion
             id="optionalConfiguration"
             buttonContent="Optional configuration"
-            initialIsOpen={false}
+            forceState={accordionState}
             data-testid="optionalConfigurationButton"
+            onToggle={() =>
+              accordionState === 'open'
+                ? setAccordionState('closed')
+                : setAccordionState('open')
+            }
           >
             <>
               <EuiSpacer size="s" />

public/pages/workflows/new_workflow/quick_configure_modal.tsx

@@ -117,7 +117,7 @@ export function QuickConfigureModal(props: QuickConfigureModalProps) {
   }, [models, quickConfigureFields?.llmId]);
 
   return (
-    <EuiModal onClose={() => props.onClose()} style={{ width: '30vw' }}>
+    <EuiModal onClose={() => props.onClose()} style={{ width: '40vw' }}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>
           <p>{`Quick configure`}</p>