UX fit-n-finish updates IV (opensearch-project#565)

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

Author: ohltyler

common/constants.ts

@@ -166,6 +166,7 @@ export enum WORKFLOW_TYPE {
   MULTIMODAL_SEARCH = 'Multimodal search',
   HYBRID_SEARCH = 'Hybrid search',
   RAG = 'Retrieval-augmented generation',
+  VECTOR_SEARCH_WITH_RAG = 'Vector search with retrieval-augmented generation',
   CUSTOM = 'Custom',
   UNKNOWN = 'Unknown',
 }
@@ -281,12 +282,13 @@ export const VECTOR = 'vector';
 export const VECTOR_PATTERN = `{{${VECTOR}}}`;
 export const VECTOR_TEMPLATE_PLACEHOLDER = `\$\{${VECTOR}\}`;
 export const DEFAULT_K = 10;
+export const DEFAULT_FETCH_SIZE = 10;
 
 export const FETCH_ALL_QUERY = {
   query: {
     match_all: {},
   },
-  size: 1000,
+  size: DEFAULT_FETCH_SIZE,
 };
 export const TERM_QUERY_TEXT = {
   query: {
@@ -578,6 +580,7 @@ export const EMPTY_FIELD_STRING = '--';
 export const OMIT_SYSTEM_INDEX_PATTERN = '*,-.*';
 export const INDEX_NOT_FOUND_EXCEPTION = 'index_not_found_exception';
 export const ERROR_GETTING_WORKFLOW_MSG = 'Failed to retrieve template';
+export const INVALID_DATASOURCE_MSG = 'No Living connections';
 export const NO_TEMPLATES_FOUND_MSG = 'There are no templates';
 export const NO_MODIFICATIONS_FOUND_TEXT =
   'Template does not contain any modifications';

common/interfaces.ts

@@ -544,7 +544,8 @@ export type PromptPreset = {
 };
 
 export type QuickConfigureFields = {
-  modelId?: string;
+  embeddingModelId?: string;
+  llmId?: string;
   vectorField?: string;
   textField?: string;
   imageField?: string;

common/utils.ts

@@ -47,6 +47,7 @@ export function isVectorSearchUseCase(workflow: Workflow | undefined): boolean {
       WORKFLOW_TYPE.HYBRID_SEARCH,
       WORKFLOW_TYPE.MULTIMODAL_SEARCH,
       WORKFLOW_TYPE.SEMANTIC_SEARCH,
+      WORKFLOW_TYPE.VECTOR_SEARCH_WITH_RAG,
     ].includes(workflow?.ui_metadata?.type)
   );
 }

public/pages/workflow_detail/components/export_modal.tsx

@@ -5,11 +5,11 @@
 
 import React, { useEffect, useState } from 'react';
 import yaml from 'js-yaml';
+import { isEmpty, toLower } from 'lodash';
 import {
   EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiCompressedRadioGroup,
   EuiText,
   EuiLink,
   EuiModal,
@@ -20,6 +20,7 @@ import {
   EuiSmallButtonEmpty,
   EuiCallOut,
   EuiSpacer,
+  EuiSmallButtonGroup,
 } from '@elastic/eui';
 import {
   CREATE_WORKFLOW_LINK,
@@ -38,21 +39,10 @@ interface ExportModalProps {
 }
 
 enum EXPORT_OPTION {
-  JSON = 'json',
-  YAML = 'yaml',
+  JSON = 'JSON',
+  YAML = 'YAML',
 }
 
-const exportOptions = [
-  {
-    id: EXPORT_OPTION.JSON,
-    label: 'JSON',
-  },
-  {
-    id: EXPORT_OPTION.YAML,
-    label: 'YAML',
-  },
-];
-
 /**
  * Modal containing all of the export options
  */
@@ -75,6 +65,18 @@ export function ExportModal(props: ExportModalProps) {
     }
   }, [props.workflow, selectedOption]);
 
+  // client-side file to be downloaded if the user so chooses. Generate a file
+  // and its corresponding URL.
+  const [formattedConfigHref, setFormattedConfigHref] = useState<string>('');
+  useEffect(() => {
+    if (!isEmpty(formattedConfig)) {
+      const formattedConfigFile = new Blob([formattedConfig], {
+        type: `text/${toLower(selectedOption)}`,
+      });
+      setFormattedConfigHref(URL.createObjectURL(formattedConfigFile));
+    }
+  }, [formattedConfig]);
+
   return (
     <EuiModal
       maxWidth={false}
@@ -115,19 +117,45 @@ export function ExportModal(props: ExportModalProps) {
             >{`Note: certain resource IDs in the template, such as model IDs, may be cluster-specific and not work out-of-the-box 
             in other environments. Ensure these values are updated before attempting to provision in other environments.`}</EuiText>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiCompressedRadioGroup
-              options={exportOptions}
-              idSelected={selectedOption}
-              onChange={(option) => {
-                setSelectedOption(option as EXPORT_OPTION);
-              }}
-            />
+          <EuiFlexItem>
+            <EuiFlexGroup direction="row" justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiSmallButtonGroup
+                  legend="Choose how to view your workflow"
+                  options={[
+                    {
+                      id: EXPORT_OPTION.JSON,
+                      label: EXPORT_OPTION.JSON,
+                    },
+                    {
+                      id: EXPORT_OPTION.YAML,
+                      label: EXPORT_OPTION.YAML,
+                    },
+                  ]}
+                  idSelected={selectedOption}
+                  onChange={(id) => setSelectedOption(id as EXPORT_OPTION)}
+                  data-testid="exportDataToggleButtonGroup"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiSmallButtonEmpty
+                  iconType="download"
+                  iconSide="right"
+                  href={formattedConfigHref}
+                  download={`${props.workflow?.name}.${toLower(
+                    selectedOption
+                  )}`}
+                  onClick={() => {}}
+                >
+                  {`Download ${selectedOption} file`}
+                </EuiSmallButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
           {props.workflow !== undefined && (
             <EuiFlexItem grow={false}>
               <EuiCodeBlock
-                language={selectedOption}
+                language={toLower(selectedOption)}
                 fontSize="m"
                 isCopyable={true}
               >

public/pages/workflow_detail/workflow_detail.test.tsx

@@ -113,6 +113,7 @@ describe('WorkflowDetail Page Functionality (Custom Workflow)', () => {
     jest.clearAllMocks();
   });
   test('tests Export button, Tools panel toggling, and Workspace preview', async () => {
+    global.URL.createObjectURL = jest.fn();
     const { getByText, container, getByTestId } = renderWithRouter(
       workflowId,
       workflowName,

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

@@ -79,6 +79,7 @@ export function JsonField(props: JsonFieldProps) {
               value={jsonStr}
               onChange={(input) => {
                 setJsonStr(input);
+                form.setFieldValue(field.name, input);
               }}
               onBlur={() => {
                 try {

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

@@ -234,6 +234,7 @@ export function OverrideQueryModal(props: OverrideQueryModalProps) {
                       validate={false}
                       label={'Query template'}
                       fieldPath={'request'}
+                      editorHeight="30vh"
                     />
                     {finalModelOutputs.length > 0 && (
                       <>

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

@@ -39,7 +39,7 @@ export function SearchInputs(props: SearchInputsProps) {
         <ConfigureSearchRequest />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiHorizontalRule margin="none" />
+        <EuiHorizontalRule margin="m" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EnrichSearchRequest
@@ -48,7 +48,7 @@ export function SearchInputs(props: SearchInputsProps) {
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiHorizontalRule margin="none" />
+        <EuiHorizontalRule margin="m" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EnrichSearchResponse

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -506,7 +506,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
           );
           dispatch(bulk({ apiBody: { body: bulkBody }, dataSourceId }))
             .unwrap()
-            .then(async (resp) => {
+            .then(async (resp: any) => {
               props.setIngestResponse(customStringify(resp));
               props.setIsRunningIngest(false);
               setLastIngested(Date.now());