[8.10] [ESRE] Update UX of pipeline selection (#161575)

## Summary

We're updating the looks of the existing pipeline selection dropdown's
items in preparation for streamlining the UX of field configuration:
- Listing all source fields that are configured in the pipeline
- "Destination field" is dropped as it's visible in the next screens
- If a pipeline cannot be selected due to the index missing some
configured fields, the missing fields are listed in the reason
- Updated text and style

Example - selectable pipelines
![Screenshot 2023-07-10 at 11 44
04](cb21683a-f8b7-444f-ab2b-5dd3d49b4723)

Example - some disabled pipelines
![Screenshot 2023-07-10 at 11 43
37](a82a7829-5acf-4273-91b5-c62ed38c2713)


### Checklist
- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/ml_inference_logic.test.ts

@@ -211,12 +211,12 @@ describe('MlInferenceLogic', () => {
 
         expect(MLInferenceLogic.values.existingInferencePipelines).toEqual([
           {
-            destinationField: 'test-field',
             disabled: false,
             modelId: 'test-model',
             modelType: '',
             pipelineName: 'unit-test',
-            sourceField: 'body',
+            sourceFields: ['body'],
+            indexFields: ['body'],
           },
         ]);
       });
@@ -258,13 +258,13 @@ describe('MlInferenceLogic', () => {
 
         expect(MLInferenceLogic.values.existingInferencePipelines).toEqual([
           {
-            destinationField: 'title',
             disabled: true,
             disabledReason: expect.stringContaining('title, body_content'),
             modelId: 'test-model',
             modelType: '',
             pipelineName: 'unit-test',
-            sourceField: 'title',
+            sourceFields: ['title', 'body', 'body_content'],
+            indexFields: ['body'],
           },
         ]);
       });
@@ -288,12 +288,12 @@ describe('MlInferenceLogic', () => {
 
         expect(MLInferenceLogic.values.existingInferencePipelines).toEqual([
           {
-            destinationField: 'test-field',
             disabled: false,
             pipelineName: 'unit-test',
             modelType: '',
             modelId: '',
-            sourceField: 'body',
+            sourceFields: ['body'],
+            indexFields: ['body'],
           },
         ]);
       });
@@ -326,13 +326,13 @@ describe('MlInferenceLogic', () => {
 
         expect(MLInferenceLogic.values.existingInferencePipelines).toEqual([
           {
-            destinationField: 'test-field',
             disabled: true,
             disabledReason: expect.any(String),
             pipelineName: 'unit-test',
             modelType: '',
             modelId: 'test-model',
-            sourceField: 'body',
+            sourceFields: ['body'],
+            indexFields: ['body'],
           },
         ]);
       });

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/ml_inference_logic.ts

@@ -99,13 +99,13 @@ const API_REQUEST_COMPLETE_STATUSES = [Status.SUCCESS, Status.ERROR];
 const DEFAULT_CONNECTOR_FIELDS = ['body', 'title', 'id', 'type', 'url'];
 
 export interface MLInferencePipelineOption {
-  destinationField: string;
   disabled: boolean;
   disabledReason?: string;
   modelId: string;
   modelType: string;
   pipelineName: string;
-  sourceField: string;
+  sourceFields: string[];
+  indexFields: string[];
 }
 
 interface MLInferenceProcessorsActions {
@@ -570,7 +570,7 @@ export const MLInferenceLogic = kea<
       ],
       (
         mlInferencePipelinesData: MLInferenceProcessorsValues['mlInferencePipelinesData'],
-        sourceFields: MLInferenceProcessorsValues['sourceFields'],
+        indexFields: MLInferenceProcessorsValues['sourceFields'],
         supportedMLModels: MLInferenceProcessorsValues['supportedMLModels'],
         mlInferencePipelineProcessors: MLInferenceProcessorsValues['mlInferencePipelineProcessors']
       ) => {
@@ -587,16 +587,10 @@ export const MLInferenceLogic = kea<
             if (!pipeline) return undefined;
             const pipelineParams = parseMlInferenceParametersFromPipeline(pipelineName, pipeline);
             if (!pipelineParams) return undefined;
-            const {
-              destination_field: destinationField,
-              model_id: modelId,
-              source_field: sourceField,
-              field_mappings: fieldMappings,
-            } = pipelineParams;
+            const { model_id: modelId, field_mappings: fieldMappings } = pipelineParams;
 
-            const missingSourceFields =
-              fieldMappings?.map((f) => f.sourceField).filter((f) => !sourceFields?.includes(f)) ??
-              [];
+            const sourceFields = fieldMappings?.map((m) => m.sourceField) ?? [];
+            const missingSourceFields = sourceFields.filter((f) => !indexFields?.includes(f)) ?? [];
             const mlModel = supportedMLModels.find((model) => model.model_id === modelId);
             const modelType = mlModel ? getMLType(getMlModelTypesForModelConfig(mlModel)) : '';
             const disabledReason = getDisabledReason(
@@ -606,13 +600,13 @@ export const MLInferenceLogic = kea<
             );
 
             return {
-              destinationField: destinationField ?? '',
               disabled: disabledReason !== undefined,
               disabledReason,
               modelId,
               modelType,
               pipelineName,
-              sourceField,
+              sourceFields,
+              indexFields: indexFields ?? [],
             };
           })
           .filter((p): p is MLInferencePipelineOption => p !== undefined);

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.test.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiText, EuiTitle } from '@elastic/eui';
+
+import { MLModelTypeBadge } from '../ml_model_type_badge';
+
+import { MLInferencePipelineOption } from './ml_inference_logic';
+import { PipelineSelectOption, PipelineSelectOptionDisabled } from './pipeline_select_option';
+
+import { MODEL_REDACTED_VALUE } from './utils';
+
+describe('PipelineSelectOption', () => {
+  const pipeline: MLInferencePipelineOption = {
+    disabled: false,
+    disabledReason: undefined,
+    modelId: 'my-model-id',
+    modelType: 'my-model-type',
+    pipelineName: 'my-pipeline',
+    sourceFields: ['my-source-field1', 'my-source-field2'],
+    indexFields: [],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('renders pipeline selection option', () => {
+    const wrapper = shallow(<PipelineSelectOption pipeline={pipeline} />);
+    expect(wrapper.find(EuiTitle)).toHaveLength(1);
+    expect(wrapper.find(MLModelTypeBadge)).toHaveLength(1);
+  });
+  it('does not render model type badge if model type is unknown', () => {
+    const wrapper = shallow(
+      <PipelineSelectOption
+        pipeline={{
+          ...pipeline,
+          modelType: '',
+        }}
+      />
+    );
+    expect(wrapper.find(MLModelTypeBadge)).toHaveLength(0);
+  });
+  it("redacts model ID if it's unavailable", () => {
+    const wrapper = shallow(
+      <PipelineSelectOption
+        pipeline={{
+          ...pipeline,
+          modelId: '',
+        }}
+      />
+    );
+    expect(wrapper.find(EuiText)).toHaveLength(4);
+    expect(wrapper.find(EuiText).at(1).children().text()).toEqual(MODEL_REDACTED_VALUE);
+  });
+  it('renders disable warning text if the pipeline is disabled', () => {
+    const wrapper = shallow(
+      <PipelineSelectOption
+        pipeline={{
+          ...pipeline,
+          disabled: true,
+          disabledReason: 'my-reason',
+        }}
+      />
+    );
+    expect(wrapper.find(PipelineSelectOptionDisabled)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx

@@ -7,49 +7,59 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTextColor, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+  EuiText,
+  EuiTextColor,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { MLModelTypeBadge } from '../ml_model_type_badge';
 
 import { MLInferencePipelineOption } from './ml_inference_logic';
-import { EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELD, MODEL_REDACTED_VALUE } from './utils';
+import { EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS, MODEL_REDACTED_VALUE } from './utils';
 
 export interface PipelineSelectOptionProps {
   pipeline: MLInferencePipelineOption;
 }
 
+export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }> = ({
+  disabledReason,
+}) => {
+  return (
+    <>
+      <EuiSpacer size="xs" />
+      <EuiFlexItem>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="warning" color="warning" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiTextColor color="warning">
+              {disabledReason ?? EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS}
+            </EuiTextColor>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiSpacer size="xs" />
+    </>
+  );
+};
+
 export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipeline }) => {
   const modelIdDisplay = pipeline.modelId.length > 0 ? pipeline.modelId : MODEL_REDACTED_VALUE;
   return (
-    <EuiFlexGroup direction="column" gutterSize="xs">
-      {pipeline.disabled && (
-        <EuiFlexItem>
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="warning" color="warning" />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiTextColor color="default">
-                {pipeline.disabledReason ?? EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELD}
-              </EuiTextColor>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-      )}
-      <EuiFlexItem>
-        <EuiTitle size="xs">
-          <h4>{pipeline.pipelineName}</h4>
-        </EuiTitle>
-      </EuiFlexItem>
+    <EuiFlexGroup direction="column" gutterSize="none">
       <EuiFlexItem>
         <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem>
-            {pipeline.disabled ? (
-              modelIdDisplay
-            ) : (
-              <EuiTextColor color="subdued">{modelIdDisplay}</EuiTextColor>
-            )}
+            <EuiTitle size="xs">
+              <h4>{pipeline.pipelineName}</h4>
+            </EuiTitle>
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (
             <EuiFlexItem grow={false}>
@@ -58,32 +68,46 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
           )}
         </EuiFlexGroup>
       </EuiFlexItem>
+      <EuiSpacer size="m" />
       <EuiFlexItem>
-        <EuiFlexGroup>
+        <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem>
-            <strong>
+            <EuiText size="s" color="subdued">
               {i18n.translate(
-                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceField',
-                { defaultMessage: 'Source field' }
+                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model',
+                { defaultMessage: 'Model' }
               )}
-            </strong>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'}>
+              {modelIdDisplay}
+            </EuiText>
           </EuiFlexItem>
-          <EuiFlexItem>{pipeline.sourceField}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
+      <EuiSpacer size="xs" />
       <EuiFlexItem>
         <EuiFlexGroup>
-          <EuiFlexItem>
-            <strong>
+          <EuiFlexItem style={{ minWidth: 100 }}>
+            <EuiText size="s" color="subdued">
               {i18n.translate(
-                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.destinationField',
-                { defaultMessage: 'Destination field' }
+                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields',
+                { defaultMessage: 'Source fields' }
               )}
-            </strong>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'} textAlign="right">
+              {pipeline.sourceFields.join(', ')}
+            </EuiText>
           </EuiFlexItem>
-          <EuiFlexItem>{pipeline.destinationField}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
+      <EuiSpacer size="s" />
+      {pipeline.disabled && (
+        <PipelineSelectOptionDisabled disabledReason={pipeline.disabledReason} />
+      )}
     </EuiFlexGroup>
   );
 };

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/utils.ts

@@ -84,14 +84,13 @@ export const validateInferencePipelineFields = (
   return errors;
 };
 
-export const EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELD = (
+export const EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS = (
   commaSeparatedMissingSourceFields: string
 ) =>
   i18n.translate(
-    'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.disabledSourceFieldDescription',
+    'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.missingSourceFieldsDescription',
     {
-      defaultMessage:
-        "This pipeline cannot be selected because some source fields don't exist in this index: {commaSeparatedMissingSourceFields}.",
+      defaultMessage: 'Fields missing in this index: {commaSeparatedMissingSourceFields}',
       values: { commaSeparatedMissingSourceFields },
     }
   );
@@ -109,7 +108,7 @@ export const getDisabledReason = (
   pipelineName: string
 ): string | undefined => {
   if (missingSourceFields.length > 0) {
-    return EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELD(missingSourceFields.join(', '));
+    return EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS(missingSourceFields.join(', '));
   } else if (indexProcessorNames.includes(pipelineName)) {
     return EXISTING_PIPELINE_DISABLED_PIPELINE_EXISTS;
   }

x-pack/plugins/translations/translations/fr-FR.json

@@ -13143,12 +13143,10 @@
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.docsLink": "Découvrez l'importation et l'utilisation des modèles de ML dans Enterprise Search",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.emptyValueError": "Champ obligatoire.",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.chooseLabel": "Choisir",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.destinationField": "Champ de destination",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.disabledPipelineExistsDescription": "Ce pipeline ne peut pas être sélectionné car il est déjà attaché.",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.existingLabel": "Pipeline existant",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.newLabel": "Nouveau pipeline",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder": "Effectuez une sélection",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceField": "Champ source",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipelineLabel": "Sélectionner un pipeline d'inférence existant",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.inference.title": "Configuration de l'inférence",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.inference.zeroShot.labels.label": "Étiquettes de classe",

x-pack/plugins/translations/translations/ja-JP.json

@@ -13142,12 +13142,10 @@
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.docsLink": "エンタープライズ サーチでのMLモデルのインポートと使用の詳細",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.emptyValueError": "フィールドが必要です。",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.chooseLabel": "選択",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.destinationField": "デスティネーションフィールド",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.disabledPipelineExistsDescription": "このパイプラインはすでにアタッチされているため、選択できません。",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.existingLabel": "既存のパイプライン",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.newLabel": "新しいパイプライン",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder": "1 つ選択してください",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceField": "ソースフィールド",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipelineLabel": "既存の推論パイプラインを選択",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.inference.title": "推論構成",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.inference.zeroShot.labels.label": "クラスラベル",

x-pack/plugins/translations/translations/zh-CN.json

@@ -13142,12 +13142,10 @@
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.docsLink": "详细了解如何在 Enterprise Search 中导入并使用 ML 模型",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.emptyValueError": "“字段”必填。",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.chooseLabel": "选择",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.destinationField": "目标字段",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.disabledPipelineExistsDescription": "无法选择此管道，因为已附加该管道。",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.existingLabel": "现有管道",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.newLabel": "新建管道",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder": "选择一个",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceField": "源字段",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipelineLabel": "选择现有推理管道",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.inference.title": "推理配置",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.inference.zeroShot.labels.label": "类标签",