Search: display sort metadata (#31167)

* Search: display metadata

* Search: update SortPicker icon

* Search: display folder meta data

* Search: reset sort picker on layout change

* Search: align tags in Card component

* Search: replace hyphen with dash

* Search: preserve sort state on layout change

* Search: update tests

* Search: fix tests

* Update pkg/services/search/hits.go

Co-authored-by: Agnès Toulet <35176601+AgnesToulet@users.noreply.github.com>

* Update public/app/features/search/components/SearchItem.tsx

Co-authored-by: Agnès Toulet <35176601+AgnesToulet@users.noreply.github.com>

* Update public/app/features/search/components/SearchItem.tsx

Co-authored-by: Agnès Toulet <35176601+AgnesToulet@users.noreply.github.com>

* Update public/app/features/search/types.ts

Co-authored-by: Agnès Toulet <35176601+AgnesToulet@users.noreply.github.com>

* Search: fix type error

* Search: add General folder name and adjust icon margin

Co-authored-by: Agnès Toulet <35176601+AgnesToulet@users.noreply.github.com>
This commit is contained in:
Alex Khomenko
2021-02-17 14:06:19 +02:00
committed by GitHub
parent c0015034a3
commit c21e45e428
13 changed files with 83 additions and 37 deletions

View File

@@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { useAsync } from 'react-use';
import { Select, Icon } from '@grafana/ui';
import { Select, Icon, IconName } from '@grafana/ui';
import { SelectableValue } from '@grafana/data';
import { DEFAULT_SORT } from 'app/features/search/constants';
import { SearchSrv } from '../../services/search_srv';
@@ -9,7 +9,7 @@ const searchSrv = new SearchSrv();
export interface Props {
onChange: (sortValue: SelectableValue) => void;
value?: SelectableValue | null;
value?: string;
placeholder?: string;
}
@@ -23,14 +23,16 @@ export const SortPicker: FC<Props> = ({ onChange, value, placeholder }) => {
// Using sync Select and manual options fetching here since we need to find the selected option by value
const { loading, value: options } = useAsync<SelectableValue[]>(getSortOptions, []);
const selected = options?.filter((opt) => opt.value === value);
return !loading ? (
<Select
key={value}
width={25}
onChange={onChange}
value={options?.filter((opt) => opt.value === value)}
value={selected?.length ? selected : null}
options={options}
placeholder={placeholder ?? `Sort (Default ${DEFAULT_SORT.label})`}
prefix={<Icon name="sort-amount-down" />}
prefix={<Icon name={(value?.includes('asc') ? 'sort-amount-up' : 'sort-amount-down') as IconName} />}
/>
) : null;
};