From 05c11c9b18f999b9d2c2e2b37675e4bd6464c6b7 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 12:10:52 -0500
Subject: [PATCH 01/19] Added pipeline select

---
 .../ml_inference/pipeline_select.tsx          | 50 +++++++++++++++++++
 .../ml_inference/pipeline_select_option.tsx   |  1 +
 2 files changed, 51 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
new file mode 100644
index 0000000000000..4973912c96f35
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { useValues } from 'kea';
+
+import { EuiSelectable } from '@elastic/eui';
+
+import { MLInferenceLogic, MLInferencePipelineOption } from './ml_inference_logic';
+import { PipelineSelectOption, PipelineSelectOptionProps } from './pipeline_select_option';
+
+export const PipelineSelect: React.FC = () => {
+  const { existingInferencePipelines } = useValues(MLInferenceLogic);
+
+  const getPipelineOptions = (
+    pipelineOptions: MLInferencePipelineOption[]
+  ): PipelineSelectOptionProps[] => {
+    return pipelineOptions.map((pipelineOption) => ({
+      label: pipelineOption.pipelineName,
+      pipeline: pipelineOption,
+    }));
+  };
+
+  const renderPipelineOption = (option: PipelineSelectOptionProps) => {
+    // TODO: Remove explicitly passing label
+    return <PipelineSelectOption label={option.label} pipeline={option.pipeline} />;
+  };
+
+  return (
+    <EuiSelectable
+      options={getPipelineOptions(existingInferencePipelines)}
+      listProps={{
+        bordered: true,
+        rowHeight: 90,
+        showIcons: false,
+        onFocusBadge: false,
+      }}
+      height={360}
+      singleSelection="always"
+      renderOption={renderPipelineOption}
+    >
+      {(list) => list}
+    </EuiSelectable>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index cb0f29794eda8..8971dfd68cd08 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -24,6 +24,7 @@ import { MLInferencePipelineOption } from './ml_inference_logic';
 import { EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS, MODEL_REDACTED_VALUE } from './utils';
 
 export interface PipelineSelectOptionProps {
+  label: string;
   pipeline: MLInferencePipelineOption;
 }
 

From 8c1b2e7179baa5f72c19dce9a7277333f43cbcab Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 13:51:33 -0500
Subject: [PATCH 02/19] Pipeline select option formatting

---
 .../ml_inference/pipeline_select.tsx          |   1 +
 .../ml_inference/pipeline_select_option.tsx   | 117 +++++++++++-------
 2 files changed, 73 insertions(+), 45 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 4973912c96f35..057f35f62efa3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -32,6 +32,7 @@ export const PipelineSelect: React.FC = () => {
   };
 
   return (
+    // TODO: Make list scrollable
     <EuiSelectable
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index 8971dfd68cd08..dec8bf16eec0a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -16,7 +16,6 @@ import {
   EuiTextColor,
   EuiTitle,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 
 import { MLModelTypeBadge } from '../ml_model_type_badge';
 
@@ -54,61 +53,89 @@ export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }>
 export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipeline }) => {
   const modelIdDisplay = pipeline.modelId.length > 0 ? pipeline.modelId : MODEL_REDACTED_VALUE;
   return (
-    <EuiFlexGroup direction="column" gutterSize="none">
+    // TODO: Verify text size
+    // TODO: Add status & action menu
+    // TODO: Test rendering when pipeline.modelType.length == 0
+    // TODO: Need to hide source fields when pipeline is disabled?
+    <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem>
-            <EuiTitle size="xs">
-              <h4>{pipeline.pipelineName}</h4>
-            </EuiTitle>
+        <EuiTitle size="xxs">
+          <h4>{pipeline.pipelineName}</h4>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">{modelIdDisplay}</EuiText>
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (
             <EuiFlexItem grow={false}>
               <MLModelTypeBadge type={pipeline.modelType} />
             </EuiFlexItem>
           )}
+          <EuiFlexItem />
         </EuiFlexGroup>
       </EuiFlexItem>
-      <EuiSpacer size="m" />
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem>
-            <EuiText size="s" color="subdued">
-              {i18n.translate(
-                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model',
-                { defaultMessage: 'Model' }
-              )}
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'}>
-              {modelIdDisplay}
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiText size="s">{pipeline.sourceFields.join(', ')}</EuiText>
       </EuiFlexItem>
-      <EuiSpacer size="xs" />
-      <EuiFlexItem>
-        <EuiFlexGroup>
-          <EuiFlexItem style={{ minWidth: 100 }}>
-            <EuiText size="s" color="subdued">
-              {i18n.translate(
-                'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields',
-                { defaultMessage: 'Source fields' }
-              )}
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'} textAlign="right">
-              {pipeline.sourceFields.join(', ')}
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiSpacer size="s" />
-      {pipeline.disabled && (
-        <PipelineSelectOptionDisabled disabledReason={pipeline.disabledReason} />
-      )}
     </EuiFlexGroup>
+
+    // <EuiFlexGroup direction="column" gutterSize="none">
+    //   <EuiFlexItem>
+    //     <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
+    //       <EuiFlexItem>
+    //         <EuiTitle size="xs">
+    //           <h4>{pipeline.pipelineName}</h4>
+    //         </EuiTitle>
+    //       </EuiFlexItem>
+    //       {pipeline.modelType.length > 0 && (
+    //         <EuiFlexItem grow={false}>
+    //           <MLModelTypeBadge type={pipeline.modelType} />
+    //         </EuiFlexItem>
+    //       )}
+    //     </EuiFlexGroup>
+    //   </EuiFlexItem>
+    //   <EuiSpacer size="m" />
+    //   <EuiFlexItem>
+    //     <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
+    //       <EuiFlexItem>
+    //         <EuiText size="s" color="subdued">
+    //           {i18n.translate(
+    //             'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model',
+    //             { defaultMessage: 'Model' }
+    //           )}
+    //         </EuiText>
+    //       </EuiFlexItem>
+    //       <EuiFlexItem grow={false}>
+    //         <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'}>
+    //           {modelIdDisplay}
+    //         </EuiText>
+    //       </EuiFlexItem>
+    //     </EuiFlexGroup>
+    //   </EuiFlexItem>
+    //   <EuiSpacer size="xs" />
+    //   <EuiFlexItem>
+    //     <EuiFlexGroup>
+    //       <EuiFlexItem style={{ minWidth: 100 }}>
+    //         <EuiText size="s" color="subdued">
+    //           {i18n.translate(
+    //             'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields',
+    //             { defaultMessage: 'Source fields' }
+    //           )}
+    //         </EuiText>
+    //       </EuiFlexItem>
+    //       <EuiFlexItem grow={false}>
+    //         <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'} textAlign="right">
+    //           {pipeline.sourceFields.join(', ')}
+    //         </EuiText>
+    //       </EuiFlexItem>
+    //     </EuiFlexGroup>
+    //   </EuiFlexItem>
+    //   <EuiSpacer size="s" />
+    //   {pipeline.disabled && (
+    //     <PipelineSelectOptionDisabled disabledReason={pipeline.disabledReason} />
+    //   )}
+    // </EuiFlexGroup>
   );
 };

From 146f747f701d1a7ea341335d6172230f34a03556 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 14:31:52 -0500
Subject: [PATCH 03/19] Added onChange logic

---
 .../pipelines/ml_inference/pipeline_select.tsx       | 12 +++++++++++-
 .../ml_inference/pipeline_select_option.tsx          |  2 ++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 057f35f62efa3..0a16b08643c24 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { useValues } from 'kea';
+import { useActions, useValues } from 'kea';
 
 import { EuiSelectable } from '@elastic/eui';
 
@@ -16,6 +16,7 @@ import { PipelineSelectOption, PipelineSelectOptionProps } from './pipeline_sele
 
 export const PipelineSelect: React.FC = () => {
   const { existingInferencePipelines } = useValues(MLInferenceLogic);
+  const { selectExistingPipeline } = useActions(MLInferenceLogic);
 
   const getPipelineOptions = (
     pipelineOptions: MLInferencePipelineOption[]
@@ -31,8 +32,16 @@ export const PipelineSelect: React.FC = () => {
     return <PipelineSelectOption label={option.label} pipeline={option.pipeline} />;
   };
 
+  const onChange = (options: PipelineSelectOptionProps[]) => {
+    const selectedOption = options.find((option) => option.checked === 'on');
+    if (selectedOption) {
+      selectExistingPipeline(selectedOption.pipeline.pipelineName);
+    }
+  };
+
   return (
     // TODO: Make list scrollable
+    // TODO: Fix selection highlighting when using keyboard to select
     <EuiSelectable
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
@@ -43,6 +52,7 @@ export const PipelineSelect: React.FC = () => {
       }}
       height={360}
       singleSelection="always"
+      onChange={onChange}
       renderOption={renderPipelineOption}
     >
       {(list) => list}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index dec8bf16eec0a..711ac356e11e4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -23,6 +23,7 @@ import { MLInferencePipelineOption } from './ml_inference_logic';
 import { EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS, MODEL_REDACTED_VALUE } from './utils';
 
 export interface PipelineSelectOptionProps {
+  checked?: 'on';
   label: string;
   pipeline: MLInferencePipelineOption;
 }
@@ -57,6 +58,7 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     // TODO: Add status & action menu
     // TODO: Test rendering when pipeline.modelType.length == 0
     // TODO: Need to hide source fields when pipeline is disabled?
+    // TODO: How to handle when a pipeline is disabled?
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
         <EuiTitle size="xxs">

From 917f5f6b2be292dee7b1c713f4725d27dff4f5c1 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 14:42:23 -0500
Subject: [PATCH 04/19] Use selection list to select existing pipeline

---
 .../ml_inference/configure_pipeline.tsx       | 32 ++-----------------
 1 file changed, 3 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
index 444fd87ef4160..22af563a33c10 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
@@ -29,11 +29,10 @@ import { IndexViewLogic } from '../../index_view_logic';
 
 import { EMPTY_PIPELINE_CONFIGURATION, MLInferenceLogic } from './ml_inference_logic';
 import { MlModelSelectOption } from './model_select_option';
-import { PipelineSelectOption } from './pipeline_select_option';
+import { PipelineSelect } from './pipeline_select';
 import { MODEL_REDACTED_VALUE, MODEL_SELECT_PLACEHOLDER, normalizeModelName } from './utils';
 
 const MODEL_SELECT_PLACEHOLDER_VALUE = 'model_placeholder$$';
-const PIPELINE_SELECT_PLACEHOLDER_VALUE = 'pipeline_placeholder$$';
 
 const CREATE_NEW_TAB_NAME = i18n.translate(
   'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.tabs.createNew.name',
@@ -54,11 +53,9 @@ export const ConfigurePipeline: React.FC = () => {
   const {
     addInferencePipelineModal: { configuration },
     formErrors,
-    existingInferencePipelines,
     supportedMLModels,
   } = useValues(MLInferenceLogic);
-  const { selectExistingPipeline, setInferencePipelineConfiguration } =
-    useActions(MLInferenceLogic);
+  const { setInferencePipelineConfiguration } = useActions(MLInferenceLogic);
   const { ingestionMethod } = useValues(IndexViewLogic);
   const { indexName } = useValues(IndexNameLogic);
 
@@ -81,22 +78,6 @@ export const ConfigurePipeline: React.FC = () => {
       value: model.model_id,
     })),
   ];
-  const pipelineOptions: Array<EuiSuperSelectOption<string>> = [
-    {
-      disabled: true,
-      inputDisplay: i18n.translate(
-        'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder',
-        { defaultMessage: 'Select one' }
-      ),
-      value: PIPELINE_SELECT_PLACEHOLDER_VALUE,
-    },
-    ...(existingInferencePipelines?.map((pipeline) => ({
-      disabled: pipeline.disabled,
-      dropdownDisplay: <PipelineSelectOption pipeline={pipeline} />,
-      inputDisplay: pipeline.pipelineName,
-      value: pipeline.pipelineName,
-    })) ?? []),
-  ];
 
   const inputsDisabled = configuration.existingPipeline !== false;
 
@@ -202,15 +183,8 @@ export const ConfigurePipeline: React.FC = () => {
                 }
               )}
             >
-              <EuiSuperSelect
-                fullWidth
-                hasDividers
+              <PipelineSelect
                 data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-configureInferencePipeline-selectExistingPipeline`}
-                valueOfSelected={
-                  pipelineName.length > 0 ? pipelineName : PIPELINE_SELECT_PLACEHOLDER_VALUE
-                }
-                options={pipelineOptions}
-                onChange={(value) => selectExistingPipeline(value)}
               />
             </EuiFormRow>
           </EuiForm>

From c40cca2b3003af4263d2c574b886bd7830877b47 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 15:13:41 -0500
Subject: [PATCH 05/19] Make selection list searchable

---
 .../pipelines/ml_inference/configure_pipeline.tsx        | 1 +
 .../pipelines/ml_inference/pipeline_select.tsx           | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
index 22af563a33c10..f4e0a2fcdcd42 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
@@ -49,6 +49,7 @@ export enum ConfigurePipelineTabId {
   USE_EXISTING = 'use_existing',
 }
 
+// TODO: Fix bug when going back to configure step after selecting an existing pipeline
 export const ConfigurePipeline: React.FC = () => {
   const {
     addInferencePipelineModal: { configuration },
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 0a16b08643c24..cc7d0bd42842c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -42,6 +42,7 @@ export const PipelineSelect: React.FC = () => {
   return (
     // TODO: Make list scrollable
     // TODO: Fix selection highlighting when using keyboard to select
+    // TODO: Show selection icons
     <EuiSelectable
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
@@ -50,12 +51,18 @@ export const PipelineSelect: React.FC = () => {
         showIcons: false,
         onFocusBadge: false,
       }}
+      searchable
       height={360}
       singleSelection="always"
       onChange={onChange}
       renderOption={renderPipelineOption}
     >
-      {(list) => list}
+      {(list, search) => (
+        <>
+          {search}
+          {list}
+        </>
+      )}
     </EuiSelectable>
   );
 };

From 4f396c9038bddaa1663afc4c2f9e6cc54425641f Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 16:25:23 -0500
Subject: [PATCH 06/19] Make selection list scrollable

---
 .../search_index/pipelines/ml_inference/pipeline_select.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index cc7d0bd42842c..49bb55d9f0f79 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -40,7 +40,7 @@ export const PipelineSelect: React.FC = () => {
   };
 
   return (
-    // TODO: Make list scrollable
+    // TODO: Is there a way to make EuiSelectable's border shrink when less than 4 options are available?
     // TODO: Fix selection highlighting when using keyboard to select
     // TODO: Show selection icons
     <EuiSelectable
@@ -50,6 +50,7 @@ export const PipelineSelect: React.FC = () => {
         rowHeight: 90,
         showIcons: false,
         onFocusBadge: false,
+        isVirtualized: true,
       }}
       searchable
       height={360}

From 09bf53b3132f3eddac91a29f7f37e5550679fe8a Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 18:14:13 -0500
Subject: [PATCH 07/19] Handle disabled pipelines

---
 .../ml_inference/pipeline_select.tsx          |  4 +-
 .../ml_inference/pipeline_select_option.tsx   | 41 +++++++------------
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 49bb55d9f0f79..1c20df2f7badf 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -22,14 +22,14 @@ export const PipelineSelect: React.FC = () => {
     pipelineOptions: MLInferencePipelineOption[]
   ): PipelineSelectOptionProps[] => {
     return pipelineOptions.map((pipelineOption) => ({
+      disabled: pipelineOption.disabled,
       label: pipelineOption.pipelineName,
       pipeline: pipelineOption,
     }));
   };
 
   const renderPipelineOption = (option: PipelineSelectOptionProps) => {
-    // TODO: Remove explicitly passing label
-    return <PipelineSelectOption label={option.label} pipeline={option.pipeline} />;
+    return <PipelineSelectOption {...option} />;
   };
 
   const onChange = (options: PipelineSelectOptionProps[]) => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index 711ac356e11e4..344a2abecb1aa 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -7,15 +7,7 @@
 
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiSpacer,
-  EuiText,
-  EuiTextColor,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor, EuiTitle } from '@elastic/eui';
 
 import { MLModelTypeBadge } from '../ml_model_type_badge';
 
@@ -24,6 +16,7 @@ import { EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS, MODEL_REDACTED_VALUE
 
 export interface PipelineSelectOptionProps {
   checked?: 'on';
+  disabled?: boolean;
   label: string;
   pipeline: MLInferencePipelineOption;
 }
@@ -32,22 +25,16 @@ export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }>
   disabledReason,
 }) => {
   return (
-    <>
-      <EuiSpacer size="xs" />
+    <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="warning" color="warning" />
+      </EuiFlexItem>
       <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>
+        <EuiTextColor color="warning">
+          {disabledReason ?? EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS}
+        </EuiTextColor>
       </EuiFlexItem>
-      <EuiSpacer size="xs" />
-    </>
+    </EuiFlexGroup>
   );
 };
 
@@ -57,8 +44,6 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     // TODO: Verify text size
     // TODO: Add status & action menu
     // TODO: Test rendering when pipeline.modelType.length == 0
-    // TODO: Need to hide source fields when pipeline is disabled?
-    // TODO: How to handle when a pipeline is disabled?
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
         <EuiTitle size="xxs">
@@ -79,7 +64,11 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiText size="s">{pipeline.sourceFields.join(', ')}</EuiText>
+        {pipeline.disabled ? (
+          <PipelineSelectOptionDisabled disabledReason={pipeline.disabledReason} />
+        ) : (
+          <EuiText size="s">{pipeline.sourceFields.join(', ')}</EuiText>
+        )}
       </EuiFlexItem>
     </EuiFlexGroup>
 

From e73163e01ca09c64c5e0e480fcc05065074629b4 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 19:39:20 -0500
Subject: [PATCH 08/19] Re-select the same existing pipeline when returning to
 the configure step

---
 .../ml_inference/pipeline_select.tsx          | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 1c20df2f7badf..c198964a7d03d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -15,9 +15,14 @@ import { MLInferenceLogic, MLInferencePipelineOption } from './ml_inference_logi
 import { PipelineSelectOption, PipelineSelectOptionProps } from './pipeline_select_option';
 
 export const PipelineSelect: React.FC = () => {
-  const { existingInferencePipelines } = useValues(MLInferenceLogic);
+  const {
+    addInferencePipelineModal: { configuration },
+    existingInferencePipelines,
+  } = useValues(MLInferenceLogic);
   const { selectExistingPipeline } = useActions(MLInferenceLogic);
 
+  const { existingPipeline, pipelineName } = configuration;
+
   const getPipelineOptions = (
     pipelineOptions: MLInferencePipelineOption[]
   ): PipelineSelectOptionProps[] => {
@@ -39,13 +44,29 @@ export const PipelineSelect: React.FC = () => {
     }
   };
 
+  const getActiveOptionIndex = (): number | undefined => {
+    if (!existingPipeline) {
+      return undefined;
+    }
+
+    const index = existingInferencePipelines.findIndex(
+      (pipelineOption) => pipelineOption.pipelineName === pipelineName
+    );
+
+    return index >= 0 ? index : undefined;
+  };
+
   return (
     // TODO: Is there a way to make EuiSelectable's border shrink when less than 4 options are available?
     // TODO: Fix selection highlighting when using keyboard to select
     // TODO: Show selection icons
+    // TODO: The virtualized list acts strangely when a pipeline is selected. How to fix?
+    //       Example: If you select an existing pipeline, then attempt to scroll to a pipeline not previously visible
+    //                and select it, you cannot select it
     <EuiSelectable
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
+        activeOptionIndex: getActiveOptionIndex(),
         bordered: true,
         rowHeight: 90,
         showIcons: false,

From 24471a253bfbf21b26e3c61554486d3789919c5f Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Wed, 29 Nov 2023 19:53:11 -0500
Subject: [PATCH 09/19] Use correct initial tab when returning to the configure
 step

---
 .../search_index/pipelines/ml_inference/configure_pipeline.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
index f4e0a2fcdcd42..abe382f7849a4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/configure_pipeline.tsx
@@ -49,7 +49,6 @@ export enum ConfigurePipelineTabId {
   USE_EXISTING = 'use_existing',
 }
 
-// TODO: Fix bug when going back to configure step after selecting an existing pipeline
 export const ConfigurePipeline: React.FC = () => {
   const {
     addInferencePipelineModal: { configuration },
@@ -222,6 +221,7 @@ export const ConfigurePipeline: React.FC = () => {
       <EuiTabbedContent
         tabs={tabs}
         autoFocus="selected"
+        initialSelectedTab={tabs[existingPipeline ? 1 : 0]}
         onTabClick={(tab) => {
           const isExistingPipeline = tab.id === ConfigurePipelineTabId.USE_EXISTING;
           if (isExistingPipeline !== configuration.existingPipeline) {

From 0bd48900850ce44658581ccab87686cdc7883b8d Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 09:53:19 -0500
Subject: [PATCH 10/19] Remove selection list scrolling

---
 .../search_index/pipelines/ml_inference/pipeline_select.tsx    | 3 +--
 .../pipelines/ml_inference/pipeline_select_option.tsx          | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index c198964a7d03d..4d469db30ed56 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -59,6 +59,7 @@ export const PipelineSelect: React.FC = () => {
   return (
     // TODO: Is there a way to make EuiSelectable's border shrink when less than 4 options are available?
     // TODO: Fix selection highlighting when using keyboard to select
+    // TODO: Can't interface with non-scrolling EuiSelectable with keyboard?
     // TODO: Show selection icons
     // TODO: The virtualized list acts strangely when a pipeline is selected. How to fix?
     //       Example: If you select an existing pipeline, then attempt to scroll to a pipeline not previously visible
@@ -71,10 +72,8 @@ export const PipelineSelect: React.FC = () => {
         rowHeight: 90,
         showIcons: false,
         onFocusBadge: false,
-        isVirtualized: true,
       }}
       searchable
-      height={360}
       singleSelection="always"
       onChange={onChange}
       renderOption={renderPipelineOption}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index 344a2abecb1aa..6bb4b808755d6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -44,6 +44,7 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     // TODO: Verify text size
     // TODO: Add status & action menu
     // TODO: Test rendering when pipeline.modelType.length == 0
+    // TODO: Fix rendering on mobile
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
         <EuiTitle size="xxs">

From d961636d493f832ed1137b53bbd7e9d71aa5cf16 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 12:52:00 -0500
Subject: [PATCH 11/19] Show selection icons

---
 .../search_index/pipelines/ml_inference/pipeline_select.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 4d469db30ed56..c8f84ebe4698c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -27,6 +27,7 @@ export const PipelineSelect: React.FC = () => {
     pipelineOptions: MLInferencePipelineOption[]
   ): PipelineSelectOptionProps[] => {
     return pipelineOptions.map((pipelineOption) => ({
+      checked: existingPipeline && pipelineOption.pipelineName === pipelineName ? 'on' : undefined,
       disabled: pipelineOption.disabled,
       label: pipelineOption.pipelineName,
       pipeline: pipelineOption,
@@ -60,7 +61,6 @@ export const PipelineSelect: React.FC = () => {
     // TODO: Is there a way to make EuiSelectable's border shrink when less than 4 options are available?
     // TODO: Fix selection highlighting when using keyboard to select
     // TODO: Can't interface with non-scrolling EuiSelectable with keyboard?
-    // TODO: Show selection icons
     // TODO: The virtualized list acts strangely when a pipeline is selected. How to fix?
     //       Example: If you select an existing pipeline, then attempt to scroll to a pipeline not previously visible
     //                and select it, you cannot select it
@@ -70,7 +70,7 @@ export const PipelineSelect: React.FC = () => {
         activeOptionIndex: getActiveOptionIndex(),
         bordered: true,
         rowHeight: 90,
-        showIcons: false,
+        showIcons: true,
         onFocusBadge: false,
       }}
       searchable

From f264f2e57deda9b2d4c737f16acac31637d9494b Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 14:46:12 -0500
Subject: [PATCH 12/19] Fix PipelineSelectOption rendering on mobile

---
 .../pipelines/ml_inference/pipeline_select.tsx            | 4 ++--
 .../pipelines/ml_inference/pipeline_select_option.tsx     | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index c8f84ebe4698c..362d0665c2274 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiSelectable } from '@elastic/eui';
+import { EuiSelectable, useIsWithinMaxBreakpoint } from '@elastic/eui';
 
 import { MLInferenceLogic, MLInferencePipelineOption } from './ml_inference_logic';
 import { PipelineSelectOption, PipelineSelectOptionProps } from './pipeline_select_option';
@@ -69,7 +69,7 @@ export const PipelineSelect: React.FC = () => {
       listProps={{
         activeOptionIndex: getActiveOptionIndex(),
         bordered: true,
-        rowHeight: 90,
+        rowHeight: useIsWithinMaxBreakpoint('s') ? 120 : 90,
         showIcons: true,
         onFocusBadge: false,
       }}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index 6bb4b808755d6..a1a93ce4a716b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -25,7 +25,7 @@ export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }>
   disabledReason,
 }) => {
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="s">
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem grow={false}>
         <EuiIcon type="warning" color="warning" />
       </EuiFlexItem>
@@ -44,7 +44,6 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     // TODO: Verify text size
     // TODO: Add status & action menu
     // TODO: Test rendering when pipeline.modelType.length == 0
-    // TODO: Fix rendering on mobile
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
         <EuiTitle size="xxs">
@@ -58,7 +57,10 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (
             <EuiFlexItem grow={false}>
-              <MLModelTypeBadge type={pipeline.modelType} />
+              {/* Wrap in a div to prevent the badge from growing to a whole row on mobile*/}
+              <div>
+                <MLModelTypeBadge type={pipeline.modelType} />
+              </div>
             </EuiFlexItem>
           )}
           <EuiFlexItem />

From 733b33afc610f95b0711b4ea78fb8bd75ce710d3 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 15:15:30 -0500
Subject: [PATCH 13/19] Fixed PipelineSelectOption tests

---
 .../ml_inference/pipeline_select_option.test.tsx       | 10 +++++++---
 .../pipelines/ml_inference/pipeline_select_option.tsx  |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.test.tsx
index 3169d527a745e..fdf7da391fba6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.test.tsx
@@ -28,18 +28,20 @@ describe('PipelineSelectOption', () => {
     sourceFields: ['my-source-field1', 'my-source-field2'],
     indexFields: [],
   };
+  const label = pipeline.pipelineName;
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
   it('renders pipeline selection option', () => {
-    const wrapper = shallow(<PipelineSelectOption pipeline={pipeline} />);
+    const wrapper = shallow(<PipelineSelectOption label={label} 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
+        label={label}
         pipeline={{
           ...pipeline,
           modelType: '',
@@ -51,18 +53,20 @@ describe('PipelineSelectOption', () => {
   it("redacts model ID if it's unavailable", () => {
     const wrapper = shallow(
       <PipelineSelectOption
+        label={label}
         pipeline={{
           ...pipeline,
           modelId: '',
         }}
       />
     );
-    expect(wrapper.find(EuiText)).toHaveLength(4);
-    expect(wrapper.find(EuiText).at(1).children().text()).toEqual(MODEL_REDACTED_VALUE);
+    expect(wrapper.find(EuiText)).toHaveLength(2);
+    expect(wrapper.find(EuiText).at(0).children().text()).toEqual(MODEL_REDACTED_VALUE);
   });
   it('renders disable warning text if the pipeline is disabled', () => {
     const wrapper = shallow(
       <PipelineSelectOption
+        label={label}
         pipeline={{
           ...pipeline,
           disabled: true,
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index a1a93ce4a716b..fee5aaa865186 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -21,6 +21,7 @@ export interface PipelineSelectOptionProps {
   pipeline: MLInferencePipelineOption;
 }
 
+// TODO: Make disabledReason required and remove EXISTING_PIPELINE_DISABLED_MISSING_SOURCE_FIELDS call without args
 export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }> = ({
   disabledReason,
 }) => {
@@ -41,8 +42,7 @@ export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }>
 export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipeline }) => {
   const modelIdDisplay = pipeline.modelId.length > 0 ? pipeline.modelId : MODEL_REDACTED_VALUE;
   return (
-    // TODO: Verify text size
-    // TODO: Add status & action menu
+    // TODO: Add model state & pipeline info link
     // TODO: Test rendering when pipeline.modelType.length == 0
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>

From 01a27f1b3b469a653edaa99241e8cdac791343ed Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 15:59:39 -0500
Subject: [PATCH 14/19] Model ID & type badge flex group adjustments

---
 .../pipelines/ml_inference/pipeline_select_option.tsx  | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index fee5aaa865186..9a7759dca0d6d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -42,8 +42,7 @@ export const PipelineSelectOptionDisabled: React.FC<{ disabledReason?: string }>
 export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipeline }) => {
   const modelIdDisplay = pipeline.modelId.length > 0 ? pipeline.modelId : MODEL_REDACTED_VALUE;
   return (
-    // TODO: Add model state & pipeline info link
-    // TODO: Test rendering when pipeline.modelType.length == 0
+    // TODO: Add model state & pipeline info link. Make sure to check mobile rendering when doing this!
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
         <EuiTitle size="xxs">
@@ -51,19 +50,18 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+          <EuiFlexItem grow={pipeline.modelType.length <= 0}>
             <EuiText size="s">{modelIdDisplay}</EuiText>
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem>
               {/* Wrap in a div to prevent the badge from growing to a whole row on mobile*/}
               <div>
                 <MLModelTypeBadge type={pipeline.modelType} />
               </div>
             </EuiFlexItem>
           )}
-          <EuiFlexItem />
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>

From 00fd08243a1f99e8f526991bfdf0cce2ef452d0a Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 16:05:38 -0500
Subject: [PATCH 15/19] Remove TODOs and commented out code

---
 .../ml_inference/pipeline_select.tsx          |  6 --
 .../ml_inference/pipeline_select_option.tsx   | 57 -------------------
 2 files changed, 63 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 362d0665c2274..5c15fe754d652 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -58,12 +58,6 @@ export const PipelineSelect: React.FC = () => {
   };
 
   return (
-    // TODO: Is there a way to make EuiSelectable's border shrink when less than 4 options are available?
-    // TODO: Fix selection highlighting when using keyboard to select
-    // TODO: Can't interface with non-scrolling EuiSelectable with keyboard?
-    // TODO: The virtualized list acts strangely when a pipeline is selected. How to fix?
-    //       Example: If you select an existing pipeline, then attempt to scroll to a pipeline not previously visible
-    //                and select it, you cannot select it
     <EuiSelectable
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index 9a7759dca0d6d..85afe2f674359 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -72,62 +72,5 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
         )}
       </EuiFlexItem>
     </EuiFlexGroup>
-
-    // <EuiFlexGroup direction="column" gutterSize="none">
-    //   <EuiFlexItem>
-    //     <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
-    //       <EuiFlexItem>
-    //         <EuiTitle size="xs">
-    //           <h4>{pipeline.pipelineName}</h4>
-    //         </EuiTitle>
-    //       </EuiFlexItem>
-    //       {pipeline.modelType.length > 0 && (
-    //         <EuiFlexItem grow={false}>
-    //           <MLModelTypeBadge type={pipeline.modelType} />
-    //         </EuiFlexItem>
-    //       )}
-    //     </EuiFlexGroup>
-    //   </EuiFlexItem>
-    //   <EuiSpacer size="m" />
-    //   <EuiFlexItem>
-    //     <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
-    //       <EuiFlexItem>
-    //         <EuiText size="s" color="subdued">
-    //           {i18n.translate(
-    //             'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model',
-    //             { defaultMessage: 'Model' }
-    //           )}
-    //         </EuiText>
-    //       </EuiFlexItem>
-    //       <EuiFlexItem grow={false}>
-    //         <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'}>
-    //           {modelIdDisplay}
-    //         </EuiText>
-    //       </EuiFlexItem>
-    //     </EuiFlexGroup>
-    //   </EuiFlexItem>
-    //   <EuiSpacer size="xs" />
-    //   <EuiFlexItem>
-    //     <EuiFlexGroup>
-    //       <EuiFlexItem style={{ minWidth: 100 }}>
-    //         <EuiText size="s" color="subdued">
-    //           {i18n.translate(
-    //             'xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields',
-    //             { defaultMessage: 'Source fields' }
-    //           )}
-    //         </EuiText>
-    //       </EuiFlexItem>
-    //       <EuiFlexItem grow={false}>
-    //         <EuiText size="s" color={pipeline.disabled ? 'subdued' : 'normal'} textAlign="right">
-    //           {pipeline.sourceFields.join(', ')}
-    //         </EuiText>
-    //       </EuiFlexItem>
-    //     </EuiFlexGroup>
-    //   </EuiFlexItem>
-    //   <EuiSpacer size="s" />
-    //   {pipeline.disabled && (
-    //     <PipelineSelectOptionDisabled disabledReason={pipeline.disabledReason} />
-    //   )}
-    // </EuiFlexGroup>
   );
 };

From 3a71a5e7cb6418628a024d1c681b1d77cf953b13 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 17:09:13 -0500
Subject: [PATCH 16/19] String length check update

Co-authored-by: Adam Demjen <demjened@gmail.com>
---
 .../pipelines/ml_inference/pipeline_select_option.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index 85afe2f674359..f9a7142b7396d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -51,7 +51,7 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
-          <EuiFlexItem grow={pipeline.modelType.length <= 0}>
+          <EuiFlexItem grow={pipeline.modelType.length === 0}>
             <EuiText size="s">{modelIdDisplay}</EuiText>
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (

From 7199e6404442aa6616c0c84fc301fb3e9b59cbd9 Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Thu, 30 Nov 2023 17:39:04 -0500
Subject: [PATCH 17/19] Removed unused translations

---
 x-pack/plugins/translations/translations/fr-FR.json | 3 ---
 x-pack/plugins/translations/translations/ja-JP.json | 3 ---
 x-pack/plugins/translations/translations/zh-CN.json | 3 ---
 3 files changed, 9 deletions(-)

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index cb92fe0fe194d..f68802ca2f9bb 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -14582,9 +14582,6 @@
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.noModels.imageAlt": "Illustration d'absence de modèles de Machine Learning",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.description": "Créez ou réutilisez un pipeline enfant qui servira de processeur dans votre pipeline principal.",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.emptyValueError": "Champ obligatoire.",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model": "Modèle",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder": "Effectuez une sélection",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields": "Champs sources",
     "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",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 6c0effafd281c..10eb7385339b2 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -14595,9 +14595,6 @@
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.noModels.imageAlt": "機械学習モデル例がありません",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.description": "メインパイプラインでプロセッサーとして使用される子パイプラインを作成または再利用します。",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.emptyValueError": "フィールドが必要です。",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model": "モデル",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder": "1 つ選択してください",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields": "ソースフィールド",
     "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": "クラスラベル",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index b58c600756803..2ebe6c4baad71 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -14595,9 +14595,6 @@
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.noModels.imageAlt": "无 Machine Learning 模型图示",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.description": "构建或重复使用将在您的主管道中用作处理器的子管道。",
     "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.emptyValueError": "“字段”必填。",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.model": "模型",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.placeholder": "选择一个",
-    "xpack.enterpriseSearch.content.indices.pipelines.addInferencePipelineModal.steps.configure.existingPipeline.sourceFields": "源字段",
     "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": "类标签",

From 1c1fbc86c7f9da19c162b226e0ad885ce9f425aa Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Fri, 1 Dec 2023 16:39:02 -0500
Subject: [PATCH 18/19] Remove redundant existingPipeline checks

---
 .../pipelines/ml_inference/pipeline_select.tsx            | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
index 5c15fe754d652..582348fd86e2b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select.tsx
@@ -21,13 +21,13 @@ export const PipelineSelect: React.FC = () => {
   } = useValues(MLInferenceLogic);
   const { selectExistingPipeline } = useActions(MLInferenceLogic);
 
-  const { existingPipeline, pipelineName } = configuration;
+  const { pipelineName } = configuration;
 
   const getPipelineOptions = (
     pipelineOptions: MLInferencePipelineOption[]
   ): PipelineSelectOptionProps[] => {
     return pipelineOptions.map((pipelineOption) => ({
-      checked: existingPipeline && pipelineOption.pipelineName === pipelineName ? 'on' : undefined,
+      checked: pipelineOption.pipelineName === pipelineName ? 'on' : undefined,
       disabled: pipelineOption.disabled,
       label: pipelineOption.pipelineName,
       pipeline: pipelineOption,
@@ -46,10 +46,6 @@ export const PipelineSelect: React.FC = () => {
   };
 
   const getActiveOptionIndex = (): number | undefined => {
-    if (!existingPipeline) {
-      return undefined;
-    }
-
     const index = existingInferencePipelines.findIndex(
       (pipelineOption) => pipelineOption.pipelineName === pipelineName
     );

From f122406362b6adda781a14df885fb2965cd513be Mon Sep 17 00:00:00 2001
From: Mike Pellegrini <mike.pellegrini@elastic.co>
Date: Fri, 1 Dec 2023 16:42:09 -0500
Subject: [PATCH 19/19] Pipeline name formatting

---
 .../pipelines/ml_inference/pipeline_select_option.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index f9a7142b7396d..deea940cfe68d 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -46,7 +46,7 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
         <EuiTitle size="xxs">
-          <h4>{pipeline.pipelineName}</h4>
+          <h5>{pipeline.pipelineName}</h5>
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>