Add ui_metadata versioning; other small fixes (#512) (#514)

(cherry picked from commit c56381d)

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>

common/constants.ts

@@ -108,6 +108,8 @@ export const BEDROCK_DIMENSIONS = {
  * Various constants pertaining to Workflow configs
  */
 
+export const UI_METADATA_SCHEMA_VERSION = 1;
+
 // frontend-specific workflow types, derived from the available preset templates
 export enum WORKFLOW_TYPE {
   SEMANTIC_SEARCH = 'Semantic search',
@@ -428,7 +430,7 @@ export const QUERY_PRESETS = [
  * PROMPT PRESETS
  */
 export const SUMMARIZE_DOCS_PROMPT =
-  "Human: You are a professional data analyist. \
+  "Human: You are a professional data analyst. \
 You are given a list of document results. You will \
 analyze the data and generate a human-readable summary of the results. If you don't \
 know the answer, just say I don't know.\
@@ -437,7 +439,7 @@ know the answer, just say I don't know.\
 \n\n Assistant:";
 
 export const QA_WITH_DOCUMENTS_PROMPT =
-  "Human: You are a professional data analyist. \
+  "Human: You are a professional data analyst. \
 You are given a list of document results, along with a question. You will \
 analyze the results and generate a human-readable response to the question, \
 based on the results. If you don't know the answer, just say I don't know.\

common/interfaces.ts

@@ -242,6 +242,7 @@ type ReactFlowViewport = {
 };
 
 export type UIState = {
+  schema_version: number;
   config: WorkflowConfig;
   type: WORKFLOW_TYPE;
   // Will be used in future when changing from form-based to flow-based configs via drag-and-drop

documentation/tutorial.md

@@ -486,7 +486,7 @@ NOTE: the below connector blueprint & model interface may change over time. The
 
 ```
 {
-  "prompt": "Human: You are a professional data analyist. You are given a list of document results. You will analyze the data and generate a human-readable summary of the results. If you don't know the answer, just say I don't know.\n\n Results: ${parameters.results.toString()}\n\n Human: Please summarize the results.\n\n Assistant:"
+  "prompt": "Human: You are a professional data analyst. You are given a list of document results. You will analyze the data and generate a human-readable summary of the results. If you don't know the answer, just say I don't know.\n\n Results: ${parameters.results.toString()}\n\n Human: Please summarize the results.\n\n Assistant:"
 }
 ```
 

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

@@ -68,11 +68,14 @@ export function Query(props: QueryProps) {
   // 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).
-  const [tempRequest, setTempRequest] = useState<string>(
-    props.selectedStep === CONFIG_STEP.INGEST
-      ? customStringify(FETCH_ALL_QUERY)
-      : values?.search?.request || '{}'
-  );
+  const [tempRequest, setTempRequest] = useState<string>('');
+  useEffect(() => {
+    setTempRequest(
+      props.selectedStep === CONFIG_STEP.INGEST
+        ? customStringify(FETCH_ALL_QUERY)
+        : values?.search?.request || '{}'
+    );
+  }, [props.selectedStep]);
 
   // state for if to execute search w/ or w/o any configured search pipeline.
   // default based on if there is an available search pipeline or not.

public/pages/workflow_detail/tools/tools.tsx

@@ -102,7 +102,7 @@ export function Tools(props: ToolsProps) {
         gutterSize="s"
         style={{
           height: '100%',
-          overflow: 'scroll',
+          overflow: 'hidden',
         }}
       >
         <EuiFlexItem grow={false} style={{ marginBottom: '0px' }}>

public/pages/workflows/new_workflow/utils.ts

@@ -28,6 +28,7 @@ import {
   KNN_QUERY,
   HYBRID_SEARCH_QUERY_MATCH_KNN,
   WorkflowConfig,
+  UI_METADATA_SCHEMA_VERSION,
 } from '../../../../common';
 import { generateId } from '../../../utils';
 
@@ -74,6 +75,7 @@ export function enrichPresetWorkflowWithUiMetadata(
 
 export function fetchEmptyMetadata(): UIState {
   return {
+    schema_version: UI_METADATA_SCHEMA_VERSION,
     type: WORKFLOW_TYPE.CUSTOM,
     config: fetchEmptyUIConfig(),
   };

public/utils/config_to_template_utils.ts

@@ -47,7 +47,6 @@ import { sanitizeJSONPath } from './utils';
 
 export function configToTemplateFlows(config: WorkflowConfig): TemplateFlows {
   const provisionFlow = configToProvisionTemplateFlow(config);
-
   return {
     provision: provisionFlow,
   };
@@ -486,13 +485,14 @@ function processModelInputs(
   mapFormValue.forEach((mapEntry) => {
     // dynamic data
     if (
-      mapEntry.value.transformType === TRANSFORM_TYPE.FIELD ||
-      mapEntry.value.transformType === TRANSFORM_TYPE.EXPRESSION
+      (mapEntry.value.transformType === TRANSFORM_TYPE.FIELD ||
+        mapEntry.value.transformType === TRANSFORM_TYPE.EXPRESSION) &&
+      !isEmpty(mapEntry.value.value)
     ) {
       inputMap = {
         ...inputMap,
         [sanitizeJSONPath(mapEntry.key)]: sanitizeJSONPath(
-          mapEntry.value.value
+          mapEntry.value.value as string
         ),
       };
       // template with dynamic nested vars. Add the nested vars as input map entries,
@@ -532,10 +532,13 @@ function processModelOutputs(mapFormValue: OutputMapFormValue): {} {
   let outputMap = {};
   mapFormValue.forEach((mapEntry) => {
     // field transform: just a rename
-    if (mapEntry.value.transformType === TRANSFORM_TYPE.FIELD) {
+    if (
+      mapEntry.value.transformType === TRANSFORM_TYPE.FIELD &&
+      !isEmpty(mapEntry.value.value)
+    ) {
       outputMap = {
         ...outputMap,
-        [sanitizeJSONPath(mapEntry.value.value)]: sanitizeJSONPath(
+        [sanitizeJSONPath(mapEntry.value.value as string)]: sanitizeJSONPath(
           mapEntry.key
         ),
       };

public/utils/utils.ts

@@ -6,6 +6,9 @@
 import yaml from 'js-yaml';
 import jsonpath from 'jsonpath';
 import { escape, get, isEmpty } from 'lodash';
+import semver from 'semver';
+import queryString from 'query-string';
+import { useLocation } from 'react-router-dom';
 import {
   JSONPATH_ROOT_SELECTOR,
   MODEL_OUTPUT_SCHEMA_FULL_PATH,
@@ -34,12 +37,9 @@ import {
   OutputMapEntry,
   QueryParam,
 } from '../../common/interfaces';
-import queryString from 'query-string';
-import { useLocation } from 'react-router-dom';
 import * as pluginManifest from '../../opensearch_dashboards.json';
 import { DataSourceAttributes } from '../../../../src/plugins/data_source/common/data_sources';
 import { SavedObject } from '../../../../src/core/public';
-import semver from 'semver';
 
 // Generate a random ID. Optionally add a prefix. Optionally
 // override the default # characters to generate.
@@ -533,7 +533,7 @@ export const getErrorMessageForStepType = (
 // scenarios will succeed on the frontend and fail on the backend,
 // or vice versa.
 export function sanitizeJSONPath(path: string): string {
-  return path.split('.').reduce((prevValue, curValue, idx) => {
+  return path?.split('.').reduce((prevValue, curValue, idx) => {
     // Case 1: accessing array via dot notation. Fails on the backend.
     if (!isNaN(parseInt(curValue))) {
       return prevValue + `[${curValue}]`;