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

This commit is contained in:
Michail Yasonik 2020-09-17 13:11:29 -04:00 committed by GitHub
parent a834c20661
commit 456760b894
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 14 deletions

View file

@ -7,8 +7,13 @@ Array [
"className": "euiSelectableTemplateSitewide__listItem",
"key": "Canvas",
"label": "Canvas",
"meta": Array [
Object {
"text": "Kibana",
},
],
"prepend": undefined,
"title": "Canvasundefinedundefined",
"title": "Canvas • Kibana",
"url": "/app/test/Canvas",
},
Object {
@ -16,8 +21,13 @@ Array [
"className": "euiSelectableTemplateSitewide__listItem",
"key": "Discover",
"label": "Discover",
"meta": Array [
Object {
"text": "Kibana",
},
],
"prepend": undefined,
"title": "Discoverundefinedundefined",
"title": "Discover • Kibana",
"url": "/app/test/Discover",
},
Object {
@ -25,8 +35,13 @@ Array [
"className": "euiSelectableTemplateSitewide__listItem",
"key": "Graph",
"label": "Graph",
"meta": Array [
Object {
"text": "Kibana",
},
],
"prepend": undefined,
"title": "Graphundefinedundefined",
"title": "Graph • Kibana",
"url": "/app/test/Graph",
},
]
@ -39,8 +54,13 @@ Array [
"className": "euiSelectableTemplateSitewide__listItem",
"key": "Discover",
"label": "Discover",
"meta": Array [
Object {
"text": "Kibana",
},
],
"prepend": undefined,
"title": "Discoverundefinedundefined",
"title": "Discover • Kibana",
"url": "/app/test/Discover",
},
Object {

View file

@ -21,6 +21,7 @@ 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,
@ -28,6 +29,7 @@ const createResult = (result: Result): GlobalSearchResult => {
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();

View file

@ -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,