[7.x] Adding meta data and highlighting to nav search (elastic#77662) (…

…elastic#77780)

x-pack/plugins/global_search_bar/public/components/search_bar.test.tsx

@@ -21,13 +21,15 @@ type Result = { id: string; type: string } | string;
 const createResult = (result: Result): GlobalSearchResult => {
   const id = typeof result === 'string' ? result : result.id;
   const type = typeof result === 'string' ? 'application' : result.type;
+  const meta = type === 'application' ? { categoryLabel: 'Kibana' } : { categoryLabel: null };
 
   return {
     id,
     type,
     title: id,
     url: `/app/test/${id}`,
     score: 42,
+    meta,
   };
 };
 
@@ -74,7 +76,7 @@ describe('SearchBar', () => {
     expect(findSpy).toHaveBeenCalledTimes(1);
     expect(findSpy).toHaveBeenCalledWith('', {});
     expect(getSelectableProps(component).options).toMatchSnapshot();
-    await wait(() => getSearchProps(component).onSearch('d'));
+    await wait(() => getSearchProps(component).onKeyUpCapture({ currentTarget: { value: 'd' } }));
     jest.runAllTimers();
     component.update();
     expect(getSelectableProps(component).options).toMatchSnapshot();

x-pack/plugins/global_search_bar/public/components/search_bar.tsx

@@ -52,14 +52,20 @@ export function SearchBar({ globalSearch, navigateToUrl }: Props) {
       if (!isMounted()) return;
 
       _setOptions([
-        ..._options.map((option) => ({
-          key: option.id,
-          label: option.title,
-          url: option.url,
-          ...(option.icon && { icon: { type: option.icon } }),
-          ...(option.type &&
-            option.type !== 'application' && { meta: [{ text: cleanMeta(option.type) }] }),
-        })),
+        ..._options.map(({ id, title, url, icon, type, meta }) => {
+          const option: EuiSelectableTemplateSitewideOption = {
+            key: id,
+            label: title,
+            url,
+          };
+
+          if (icon) option.icon = { type: icon };
+
+          if (type === 'application') option.meta = [{ text: meta?.categoryLabel as string }];
+          else option.meta = [{ text: cleanMeta(type) }];
+
+          return option;
+        }),
       ]);
     },
     [isMounted, _setOptions]
@@ -133,7 +139,8 @@ export function SearchBar({ globalSearch, navigateToUrl }: Props) {
       onChange={onChange}
       options={options}
       searchProps={{
-        onSearch: setSearchValue,
+        onKeyUpCapture: (e: React.KeyboardEvent<HTMLInputElement>) =>
+          setSearchValue(e.currentTarget.value),
         'data-test-subj': 'header-search',
         inputRef: setSearchRef,
         compressed: true,