Move exposed configs in the advanced transform modals (#466)

Signed-off-by: Tyler Ohlsen <[email protected]>

public/pages/workflow_detail/workflow_detail.test.tsx

@@ -78,11 +78,6 @@ describe('WorkflowDetail Page with create ingestion option', () => {
       } = renderWithRouter(workflowId, workflowName, type);
 
       expect(getAllByText(workflowName).length).toBeGreaterThan(0);
-      expect(getAllByText('Create an ingest pipeline').length).toBeGreaterThan(
-        0
-      );
-      expect(getAllByText('Skip ingestion pipeline').length).toBeGreaterThan(0);
-      expect(getAllByText('Define ingest pipeline').length).toBeGreaterThan(0);
       expect(getAllByText('Inspector').length).toBeGreaterThan(0);
       expect(getAllByText('Preview').length).toBeGreaterThan(0);
       expect(
@@ -188,27 +183,19 @@ describe('WorkflowDetail Page with skip ingestion option (Hybrid Search Workflow
     jest.clearAllMocks();
   });
   test(`renders the WorkflowDetail page with skip ingestion option`, async () => {
-    const {
-      container,
-      getByTestId,
-      getAllByText,
-      getAllByTestId,
-    } = renderWithRouter(workflowId, workflowName, WORKFLOW_TYPE.HYBRID_SEARCH);
-
-    // "Create an ingest pipeline" option should be selected by default
-    const createIngestRadio = container.querySelector('#create');
-    expect(createIngestRadio).toBeChecked();
+    const { getByTestId, getAllByText, getAllByTestId } = renderWithRouter(
+      workflowId,
+      workflowName,
+      WORKFLOW_TYPE.HYBRID_SEARCH
+    );
 
-    // "Skip ingestion pipeline" option should be unselected by default
-    const skipIngestRadio = container.querySelector('#skip');
-    expect(skipIngestRadio).not.toBeChecked();
+    // Defining a new ingest pipeline & index is enabled by default
+    const enabledCheckbox = getByTestId('checkbox-ingest.enabled');
+    expect(enabledCheckbox).toBeChecked();
 
-    // Selected "Skip ingestion pipeline"
-    userEvent.click(skipIngestRadio!);
-    await waitFor(() => {
-      expect(createIngestRadio).not.toBeChecked();
-    });
-    expect(skipIngestRadio).toBeChecked();
+    // Skipping ingest pipeline and navigating to search
+    userEvent.click(enabledCheckbox);
+    await waitFor(() => {});
     const searchPipelineButton = getByTestId('searchPipelineButton');
     userEvent.click(searchPipelineButton);
 
@@ -255,7 +242,7 @@ describe('WorkflowDetail Page with skip ingestion option (Hybrid Search Workflow
     userEvent.click(searchPipelineBackButton);
 
     await waitFor(() => {
-      expect(skipIngestRadio).toBeChecked();
+      expect(enabledCheckbox).not.toBeChecked();
     });
   });
 });

public/pages/workflow_detail/workflow_inputs/config_field_list.tsx

@@ -63,15 +63,6 @@ export function ConfigFieldList(props: ConfigFieldListProps) {
                 <BooleanField
                   label={camelCaseToTitleString(field.id)}
                   fieldPath={fieldPath}
-                  enabledOption={{
-                    id: `${fieldPath}_true`,
-                    label: 'True',
-                  }}
-                  disabledOption={{
-                    id: `${fieldPath}_false`,
-                    label: 'False',
-                  }}
-                  showLabel={true}
                 />
                 <EuiSpacer size={CONFIG_FIELD_SPACER_SIZE} />
               </EuiFlexItem>

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

@@ -6,22 +6,17 @@
 import React from 'react';
 import { Field, FieldProps } from 'formik';
 import {
-  EuiCompressedFormRow,
-  EuiCompressedRadioGroup,
-  EuiLink,
-  EuiRadioGroupOption,
+  EuiCompressedCheckbox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
   EuiText,
 } from '@elastic/eui';
-import { camelCaseToTitleString } from '../../../../utils';
 
 interface BooleanFieldProps {
   fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
-  enabledOption: EuiRadioGroupOption;
-  disabledOption: EuiRadioGroupOption;
-  label?: string;
-  helpLink?: string;
+  label: string;
   helpText?: string;
-  showLabel?: boolean;
 }
 
 /**
@@ -32,37 +27,32 @@ export function BooleanField(props: BooleanFieldProps) {
     <Field name={props.fieldPath}>
       {({ field, form }: FieldProps) => {
         return (
-          <EuiCompressedFormRow
-            key={props.fieldPath}
+          <EuiCompressedCheckbox
+            data-testid={`checkbox-${field.name}`}
+            id={`checkbox-${field.name}`}
             label={
-              props.showLabel &&
-              (props.label || camelCaseToTitleString(field.name))
+              <>
+                <EuiFlexGroup direction="row">
+                  <EuiFlexItem grow={false}>
+                    <EuiText size="s">{props.label}</EuiText>
+                  </EuiFlexItem>
+                  {props.helpText && (
+                    <EuiFlexItem
+                      grow={false}
+                      style={{ marginLeft: '-8px', marginTop: '10px' }}
+                    >
+                      <EuiIconTip content={props.helpText} position="right" />
+                    </EuiFlexItem>
+                  )}
+                </EuiFlexGroup>
+              </>
             }
-            labelAppend={
-              props.helpLink ? (
-                <EuiText size="xs">
-                  <EuiLink href={props.helpLink} target="_blank">
-                    Learn more
-                  </EuiLink>
-                </EuiText>
-              ) : undefined
-            }
-            helpText={props.helpText || undefined}
-            isInvalid={false}
-          >
-            <EuiCompressedRadioGroup
-              options={[props.enabledOption, props.disabledOption]}
-              idSelected={
-                field.value === undefined || field.value === true
-                  ? props.enabledOption.id
-                  : props.disabledOption.id
-              }
-              onChange={(id) => {
-                form.setFieldValue(field.name, !field.value);
-                form.setFieldTouched(field.name, true);
-              }}
-            />
-          </EuiCompressedFormRow>
+            checked={field.value === undefined || field.value === true}
+            onChange={() => {
+              form.setFieldValue(field.name, !field.value);
+              form.setFieldTouched(field.name, true);
+            }}
+          />
         );
       }}
     </Field>

public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx

@@ -29,6 +29,7 @@ import {
   EuiIconTip,
   EuiCompressedSwitch,
   EuiCallOut,
+  EuiAccordion,
 } from '@elastic/eui';
 import {
   IConfigField,
@@ -37,7 +38,6 @@ import {
   InputTransformFormValues,
   InputTransformSchema,
   JSONPATH_ROOT_SELECTOR,
-  ML_INFERENCE_RESPONSE_DOCS_LINK,
   MapArrayFormValue,
   ModelInterface,
   PROCESSOR_CONTEXT,
@@ -331,16 +331,6 @@ export function InputTransformModal(props: InputTransformModalProps) {
           <BooleanField
             label={'One-to-one'}
             fieldPath={'one_to_one'}
-            enabledOption={{
-              id: `one_to_one_true`,
-              label: 'True',
-            }}
-            disabledOption={{
-              id: `one_to_one_false`,
-              label: 'False',
-            }}
-            showLabel={true}
-            helpLink={ML_INFERENCE_RESPONSE_DOCS_LINK}
             helpText="Run inference for each document separately"
           />
         );
@@ -544,6 +534,21 @@ export function InputTransformModal(props: InputTransformModalProps) {
                     </EuiFlexGroup>
                     <EuiSpacer size="s" />
                     {InputMap}
+                    {props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE && (
+                      <>
+                        <EuiSpacer size="s" />
+                        <EuiAccordion
+                          id={`advancedSettingsInputTransform${props.config.id}`}
+                          buttonContent="Advanced settings"
+                          paddingSize="none"
+                        >
+                          <EuiSpacer size="s" />
+                          <EuiFlexItem style={{ marginLeft: '4px' }}>
+                            {OneToOneConfig}
+                          </EuiFlexItem>
+                        </EuiAccordion>
+                      </>
+                    )}
                   </>
                 </EuiFlexItem>
                 <EuiFlexItem>
@@ -573,12 +578,6 @@ export function InputTransformModal(props: InputTransformModalProps) {
                           <EuiSpacer size="s" />
                         </>
                       )}
-                      {props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE && (
-                        <>
-                          {OneToOneConfig}
-                          <EuiSpacer size="s" />
-                        </>
-                      )}
                       {FetchButton}
                     </>
                   </EuiFlexItem>

public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx

@@ -27,14 +27,13 @@ import {
   EuiCodeBlock,
   EuiCallOut,
   EuiIconTip,
+  EuiAccordion,
 } from '@elastic/eui';
 import {
   IConfigField,
   IProcessorConfig,
   IngestPipelineConfig,
   JSONPATH_ROOT_SELECTOR,
-  ML_INFERENCE_DOCS_LINK,
-  ML_INFERENCE_RESPONSE_DOCS_LINK,
   MapArrayFormValue,
   ModelInterface,
   OutputTransformFormValues,
@@ -254,22 +253,8 @@ root object selector "${JSONPATH_ROOT_SELECTOR}"`}
 
         const FullResponsePathConfig = (
           <BooleanField
-            label={'Full response path'}
+            label={'Full Response Path'}
             fieldPath={'full_response_path'}
-            enabledOption={{
-              id: `full_response_path_true`,
-              label: 'True',
-            }}
-            disabledOption={{
-              id: `full_response_path_false`,
-              label: 'False',
-            }}
-            showLabel={true}
-            helpLink={
-              props.context === PROCESSOR_CONTEXT.INGEST
-                ? ML_INFERENCE_DOCS_LINK
-                : ML_INFERENCE_RESPONSE_DOCS_LINK
-            }
             helpText="Parse the full model output"
           />
         );
@@ -474,6 +459,22 @@ root object selector "${JSONPATH_ROOT_SELECTOR}"`}
                     </EuiFlexGroup>
                     <EuiSpacer size="s" />
                     {OutputMap}
+                    {(props.context === PROCESSOR_CONTEXT.INGEST ||
+                      props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE) && (
+                      <>
+                        <EuiSpacer size="s" />
+                        <EuiAccordion
+                          id={`advancedSettingsOutputTransform${props.config.id}`}
+                          buttonContent="Advanced settings"
+                          paddingSize="none"
+                        >
+                          <EuiSpacer size="s" />
+                          <EuiFlexItem style={{ marginLeft: '4px' }}>
+                            {FullResponsePathConfig}
+                          </EuiFlexItem>
+                        </EuiAccordion>
+                      </>
+                    )}
                   </>
                 </EuiFlexItem>
                 <EuiFlexItem>
@@ -508,14 +509,6 @@ root object selector "${JSONPATH_ROOT_SELECTOR}"`}
                           <EuiSpacer size="s" />
                         </>
                       )}
-                      {(props.context === PROCESSOR_CONTEXT.INGEST ||
-                        props.context ===
-                          PROCESSOR_CONTEXT.SEARCH_RESPONSE) && (
-                        <>
-                          {FullResponsePathConfig}
-                          <EuiSpacer size="s" />
-                        </>
-                      )}
                       {FetchButton}
                     </>
                   </EuiFlexItem>

public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

@@ -82,11 +82,6 @@ interface WorkflowInputsProps {
   setUnsavedSearchProcessors: (unsavedSearchProcessors: boolean) => void;
 }
 
-enum INGEST_OPTION {
-  CREATE = 'create',
-  SKIP = 'skip',
-}
-
 /**
  * The workflow inputs component containing the multi-step flow to create ingest
  * and search flows for a particular workflow.
@@ -692,33 +687,8 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                   <>
                     <BooleanField
                       fieldPath="ingest.enabled"
-                      enabledOption={{
-                        id: INGEST_OPTION.CREATE,
-                        label: (
-                          <EuiFlexGroup direction="column" gutterSize="none">
-                            <EuiText color="default">
-                              Create an ingest pipeline
-                            </EuiText>
-                            <EuiText size="xs" color="subdued">
-                              Configure and ingest data into an index.
-                            </EuiText>
-                          </EuiFlexGroup>
-                        ),
-                      }}
-                      disabledOption={{
-                        id: INGEST_OPTION.SKIP,
-                        label: (
-                          <EuiFlexGroup direction="column" gutterSize="none">
-                            <EuiText color="default">
-                              Skip ingestion pipeline
-                            </EuiText>
-                            <EuiText size="xs" color="subdued">
-                              Use an existing index with data ingested.
-                            </EuiText>
-                          </EuiFlexGroup>
-                        ),
-                      }}
-                      showLabel={false}
+                      label="Enabled"
+                      helpText="Create a new ingest pipeline and index"
                     />
                   </>
                 )}