[8.12] Dynamically set pipeline selection list height (#172816) (#172958

)

# Backport

This will backport the following commits from `main` to `8.12`:
- [Dynamically set pipeline selection list height
(#172816)](#172816)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Mike
Pellegrini","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-12-08T15:18:27Z","message":"Dynamically
set pipeline selection list height (#172816)\n\n## Summary\r\n\r\nUpdate
the pipeline selection list to set a maximum height that\r\ndecreases
when there are too few options to fill the space. The maximum\r\nheight
is set to 4.5 rows, with the extra half row used to indicate to\r\nthe
user that there are more options available than what is visible\r\n(i.e.
they need to scroll). If 4 or fewer options are available, the height
is\r\nset to `<option_count>`
rows.","sha":"7f61e2a41f1281c27bf82be9379b81a2b7ad80f4","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:EnterpriseSearch","v8.12.0","v8.13.0"],"number":172816,"url":"https://github.com/elastic/kibana/pull/172816","mergeCommit":{"message":"Dynamically
set pipeline selection list height (#172816)\n\n## Summary\r\n\r\nUpdate
the pipeline selection list to set a maximum height that\r\ndecreases
when there are too few options to fill the space. The maximum\r\nheight
is set to 4.5 rows, with the extra half row used to indicate to\r\nthe
user that there are more options available than what is visible\r\n(i.e.
they need to scroll). If 4 or fewer options are available, the height
is\r\nset to `<option_count>`
rows.","sha":"7f61e2a41f1281c27bf82be9379b81a2b7ad80f4"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172816","number":172816,"mergeCommit":{"message":"Dynamically
set pipeline selection list height (#172816)\n\n## Summary\r\n\r\nUpdate
the pipeline selection list to set a maximum height that\r\ndecreases
when there are too few options to fill the space. The maximum\r\nheight
is set to 4.5 rows, with the extra half row used to indicate to\r\nthe
user that there are more options available than what is visible\r\n(i.e.
they need to scroll). If 4 or fewer options are available, the height
is\r\nset to `<option_count>`
rows.","sha":"7f61e2a41f1281c27bf82be9379b81a2b7ad80f4"}}]}] BACKPORT-->

Co-authored-by: Mike Pellegrini <[email protected]>

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

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useActions, useValues } from 'kea';
 
-import { EuiSelectable, useIsWithinMaxBreakpoint } from '@elastic/eui';
+import { EuiSelectable, useEuiTheme, useIsWithinMaxBreakpoint } from '@elastic/eui';
 
 import { MLInferenceLogic, MLInferencePipelineOption } from './ml_inference_logic';
 import { PipelineSelectOption, PipelineSelectOptionProps } from './pipeline_select_option';
@@ -23,6 +23,15 @@ export const PipelineSelect: React.FC = () => {
 
   const { pipelineName } = configuration;
 
+  const { euiTheme } = useEuiTheme();
+  const largeScreenRowHeight = euiTheme.base * 6;
+  const smallScreenRowHeight = euiTheme.base * 8;
+  const maxVisibleOptions = 4.5;
+  const rowHeight: number = useIsWithinMaxBreakpoint('s')
+    ? smallScreenRowHeight
+    : largeScreenRowHeight;
+  const [height, setHeight] = useState(maxVisibleOptions * rowHeight);
+
   const getPipelineOptions = (
     pipelineOptions: MLInferencePipelineOption[]
   ): PipelineSelectOptionProps[] => {
@@ -50,14 +59,20 @@ export const PipelineSelect: React.FC = () => {
       options={getPipelineOptions(existingInferencePipelines)}
       listProps={{
         bordered: true,
-        rowHeight: useIsWithinMaxBreakpoint('s') ? 120 : 90,
         showIcons: true,
         onFocusBadge: false,
+        rowHeight,
+      }}
+      searchProps={{
+        onChange: (_, matchingOptions) => {
+          setHeight(Math.min(maxVisibleOptions, matchingOptions.length) * rowHeight);
+        },
       }}
       searchable
       singleSelection="always"
       onChange={onChange}
       renderOption={renderPipelineOption}
+      height={height}
     >
       {(list, search) => (
         <>