[Unified Search] [Lens] [Dashboard Controls] Middle truncation for da…

…ta view pickers and field lists (#172296)

Adds middle truncation to the following:
Fixes #168753
Fixes #170398 

Unified Search:
<img width="554" alt="Screenshot 2023-11-30 at 16 06 49"
src="https://github.com/elastic/kibana/assets/4283304/38d95de5-78d3-4c33-8287-897876422886">

Lens layer data view picker:
<img width="620" alt="Screenshot 2023-11-30 at 16 06 58"
src="https://github.com/elastic/kibana/assets/4283304/68c6f0d6-7496-4db9-a0c0-0596350a4e90">

Create control field list:
<img width="843" alt="Screenshot 2023-11-30 at 16 15 12"
src="https://github.com/elastic/kibana/assets/4283304/7ac4fb32-bdd4-44b0-ab49-2967e3d54fe2">

Create control data view list:

<img width="584" alt="Screenshot 2023-11-30 at 16 33 10"
src="https://github.com/elastic/kibana/assets/4283304/a3b53c24-c363-4d72-b3e2-d4073ae4b3cf">

src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx

@@ -100,6 +100,9 @@ export function DataViewPicker({
           compressed: true,
           ...(selectableProps ? selectableProps.searchProps : undefined),
         }}
+        listProps={{
+          truncationProps: { truncation: 'middle' },
+        }}
       >
         {(list, search) => (
           <>

src/plugins/presentation_util/public/components/field_picker/field_picker.tsx

@@ -141,6 +141,7 @@ export const FieldPicker = ({
         isVirtualized: true,
         showIcons: false,
         bordered: true,
+        truncationProps: { truncation: 'middle' },
       }}
       height="full"
     >

src/plugins/unified_search/public/dataview_picker/dataview_list.tsx

@@ -23,6 +23,7 @@ import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 
 import { SortingService } from './sorting_service';
+import { MIDDLE_TRUNCATION_PROPS } from '../filter_bar/filter_editor/lib/helpers';
 
 const strings = {
   sortOrder: {
@@ -120,6 +121,10 @@ export function DataViewsList({
       checked?: 'on' | 'off' | undefined;
     }>
       {...selectableProps}
+      listProps={{
+        truncationProps: MIDDLE_TRUNCATION_PROPS,
+        ...(selectableProps?.listProps ? selectableProps.listProps : undefined),
+      }}
       data-test-subj="indexPattern-switcher"
       searchable
       singleSelection="always"