[Search]Add filter by FieldType component to mappings tab (#181188)

## Summary
Adds filter by field type component in mappings tab, in index management view


https://github.com/elastic/kibana/assets/55930906/f6137117-19e5-453f-a2c0-e124770756c0




### Checklist

Delete any items that are not applicable to this PR.

- [ ] 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)
- [ ] [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

---------

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

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts

@@ -41,6 +41,8 @@ export interface IndexDetailsPageTestBed extends TestBed {
     getActiveTabContent: () => string;
     mappings: {
       addNewMappingFieldNameAndType: (mappingFields?: MappingField[]) => Promise<void>;
+      clickFilterByFieldType: () => Promise<void>;
+      selectFilterFieldType: (fieldType: string) => Promise<void>;
       clickAddFieldButton: () => Promise<void>;
       clickSaveMappingsButton: () => Promise<void>;
       getCodeBlockContent: () => string;
@@ -51,6 +53,8 @@ export interface IndexDetailsPageTestBed extends TestBed {
       getTreeViewContent: (fieldName: string) => string;
       clickToggleViewButton: () => Promise<void>;
       isSearchBarDisabled: () => boolean;
+      setSearchBarValue: (searchValue: string) => Promise<void>;
+      findSearchResult: () => string;
       isSemanticTextBannerVisible: () => boolean;
     };
     settings: {
@@ -216,9 +220,35 @@ export const setup = async ({
       });
       component.update();
     },
+    clickFilterByFieldType: async () => {
+      expect(exists('indexDetailsMappingsFilterByFieldTypeButton')).toBe(true);
+      await act(async () => {
+        find('indexDetailsMappingsFilterByFieldTypeButton').simulate('click');
+      });
+      component.update();
+    },
+    selectFilterFieldType: async (fieldType: string) => {
+      expect(testBed.exists('indexDetailsMappingsSelectFilter-text')).toBe(true);
+      await act(async () => {
+        find(fieldType).simulate('click');
+      });
+      component.update();
+    },
     isSearchBarDisabled: () => {
       return find('indexDetailsMappingsFieldSearch').prop('disabled');
     },
+    setSearchBarValue: async (searchValue: string) => {
+      await act(async () => {
+        testBed
+          .find('indexDetailsMappingsFieldSearch')
+          .simulate('change', { target: { value: searchValue } });
+      });
+      component.update();
+    },
+    findSearchResult: () => {
+      expect(testBed.exists('fieldName')).toBe(true);
+      return testBed.find('fieldName').text();
+    },
     isSemanticTextBannerVisible: () => {
       return exists('indexDetailsMappingsSemanticTextBanner');
     },

x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx

@@ -471,10 +471,11 @@ describe('<IndexDetailsPage />', () => {
         requestOptions
       );
     });
-    it('searchbar, toggle button, add field button exists', async () => {
+    it('filter, searchbar, toggle button, add field button exists', async () => {
       expect(testBed.exists('indexDetailsMappingsAddField')).toBe(true);
       expect(testBed.exists('indexDetailsMappingsToggleViewButton')).toBe(true);
       expect(testBed.exists('indexDetailsMappingsFieldSearch')).toBe(true);
+      expect(testBed.exists('indexDetailsMappingsFilter')).toBe(true);
     });
 
     it('displays the mappings in the table view', async () => {
@@ -508,6 +509,57 @@ describe('<IndexDetailsPage />', () => {
         'https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/mapping.html'
       );
     });
+    describe('Filter field by filter Type', () => {
+      const mockIndexMappingResponse: any = {
+        ...testIndexMappings.mappings,
+        properties: {
+          ...testIndexMappings.mappings.properties,
+          name: {
+            type: 'text',
+          },
+        },
+      };
+      beforeEach(async () => {
+        httpRequestsMockHelpers.setLoadIndexMappingResponse(testIndexName, {
+          mappings: mockIndexMappingResponse,
+        });
+        await act(async () => {
+          testBed = await setup({ httpSetup });
+        });
+        testBed.component.update();
+        await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Mappings);
+      });
+      test('popover is visible and shows list of available field types', async () => {
+        await testBed.actions.mappings.clickFilterByFieldType();
+        expect(testBed.exists('euiSelectableList')).toBe(true);
+        expect(testBed.exists('indexDetailsMappingsFilterByFieldTypeSearch')).toBe(true);
+        expect(testBed.exists('euiSelectableList')).toBe(true);
+      });
+      test('can select a field type and list view changes', async () => {
+        await testBed.actions.mappings.clickFilterByFieldType();
+        await testBed.actions.mappings.selectFilterFieldType(
+          'indexDetailsMappingsSelectFilter-text'
+        );
+        expect(testBed.actions.mappings.getTreeViewContent('nameField-fieldName')).toContain(
+          'name'
+        );
+        expect(testBed.find('@timestampField-fieldName')).not.toContain('@timestamp');
+      });
+      test('can search field with filter', async () => {
+        expect(testBed.find('fieldName')).toHaveLength(2);
+
+        // set filter
+        await testBed.actions.mappings.clickFilterByFieldType();
+        await testBed.actions.mappings.selectFilterFieldType(
+          'indexDetailsMappingsSelectFilter-text'
+        );
+
+        await testBed.actions.mappings.setSearchBarValue('na');
+        expect(testBed.find('fieldName')).toHaveLength(1);
+        expect(testBed.actions.mappings.findSearchResult()).not.toBe('@timestamp');
+        expect(testBed.actions.mappings.findSearchResult()).toBe('name');
+      });
+    });
     describe('Add a new field ', () => {
       const mockIndexMappingResponse: any = {
         ...testIndexMappings.mappings,

x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result.tsx

@@ -18,6 +18,7 @@ interface Props {
   result: SearchResultType[];
   documentFieldsState: State['documentFields'];
   style?: React.CSSProperties;
+  onClearSearch?: () => void;
 }
 
 const ITEM_HEIGHT = 64;
@@ -50,12 +51,21 @@ const Row = React.memo<RowProps>(({ data, index, style }) => {
 }, areEqual);
 
 export const SearchResult = React.memo(
-  ({ result, documentFieldsState: { status, fieldToEdit }, style: virtualListStyle }: Props) => {
+  ({
+    result,
+    documentFieldsState: { status, fieldToEdit },
+    style: virtualListStyle,
+    onClearSearch,
+  }: Props) => {
     const dispatch = useDispatch();
     const listHeight = Math.min(result.length * ITEM_HEIGHT, 600);
 
     const clearSearch = () => {
-      dispatch({ type: 'search:update', value: '' });
+      if (onClearSearch !== undefined) {
+        onClearSearch();
+      } else {
+        dispatch({ type: 'search:update', value: '' });
+      }
     };
 
     const itemData = useMemo(

x-pack/plugins/index_management/public/application/components/mappings_editor/lib/index.ts

@@ -27,6 +27,9 @@ export {
   stripUndefinedValues,
   normalizeRuntimeFields,
   deNormalizeRuntimeFields,
+  getAllFieldTypesFromState,
+  getFieldsFromState,
+  getFieldsMatchingFilterFromState,
 } from './utils';
 
 export * from './serializers';