Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LibraryPanelSearch: Refactor and fix hyphen issue #55314

Merged
merged 2 commits into from Sep 21, 2022
Merged

LibraryPanelSearch: Refactor and fix hyphen issue #55314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7572b92
LibraryPanelSearch: Refactor and fix hyphen issue
kaydelaney Sep 16, 2022
a69b041
Fix display name
kaydelaney Sep 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 0 additions & 4 deletions .betterer.results
View file
Open in desktop
Expand Up @@ -4601,10 +4601,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/features/library-panels/components/LibraryPanelsSearch/reducer.test.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/features/library-panels/components/LibraryPanelsView/actions.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
Expand Down
9 changes: 6 additions & 3 deletions packages/grafana-ui/src/components/FilterInput/FilterInput.tsx
View file
Open in desktop
Expand Up @@ -9,10 +9,11 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'onChange'> {
value: string | undefined;
width?: number;
onChange: (value: string) => void;
escapeRegex?: boolean;
}

export const FilterInput = React.forwardRef<HTMLInputElement, Props>(
({ value, width, onChange, ...restProps }, ref) => {
({ value, width, onChange, escapeRegex = true, ...restProps }, ref) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because FilterInput is in grafana-ui should we make the naming of the prop more clear about its purpose in general, like escapeSpecialChars?
escapeRegex makes me wonder which regex, what is the regex if not the one inside FilterInput and what does escaping it mean if it is?

const innerRef = React.useRef<HTMLInputElement>(null);
const combinedRef = useCombinedRefs(ref, innerRef) as React.Ref<HTMLInputElement>;

Expand All @@ -38,8 +39,10 @@ export const FilterInput = React.forwardRef<HTMLInputElement, Props>(
suffix={suffix}
width={width}
type="text"
value={value ? unEscapeStringFromRegex(value) : ''}
onChange={(event) => onChange(escapeStringForRegex(event.currentTarget.value))}
value={escapeRegex ? unEscapeStringFromRegex(value ?? '') : value}
onChange={(event) =>
onChange(escapeRegex ? escapeStringForRegex(event.currentTarget.value) : event.currentTarget.value)
}
{...restProps}
ref={combinedRef}
/>
Expand Down
44 changes: 19 additions & 25 deletions public/app/core/components/FolderFilter/FolderFilter.tsx
View file
Open in desktop
Expand Up @@ -5,42 +5,29 @@ import React, { useCallback, useMemo, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { AsyncMultiSelect, Icon, Button, useStyles2 } from '@grafana/ui';
import { getBackendSrv } from 'app/core/services/backend_srv';
import { DashboardSearchHit } from 'app/features/search/types';
import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types';
import { FolderInfo, PermissionLevelString } from 'app/types';

export interface FolderFilterProps {
onChange: (folder: FolderInfo[]) => void;
maxMenuHeight?: number;
}

export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderFilterProps): JSX.Element {
export function FolderFilter({ onChange, maxMenuHeight }: FolderFilterProps): JSX.Element {
const styles = useStyles2(getStyles);
const [loading, setLoading] = useState(false);
const getOptions = useCallback((searchString: string) => getFoldersAsOptions(searchString, setLoading), []);
const debouncedLoadOptions = useMemo(() => debounce(getOptions, 300), [getOptions]);

const [value, setValue] = useState<Array<SelectableValue<FolderInfo>>>([]);
const onChange = useCallback(
const onSelectOptionChange = useCallback(
(folders: Array<SelectableValue<FolderInfo>>) => {
const changedFolders = [];
for (const folder of folders) {
if (folder.value) {
changedFolders.push(folder.value);
}
}
propsOnChange(changedFolders);
const changedFolderIds = folders.filter((f) => Boolean(f.value)).map((f) => f.value!);
onChange(changedFolderIds);
setValue(folders);
},
[propsOnChange]
[onChange]
);
const selectOptions = {
defaultOptions: true,
isMulti: true,
noOptionsMessage: 'No folders found',
placeholder: 'Filter by folder',
maxMenuHeight,
value,
onChange,
};

return (
<div className={styles.container}>
Expand All @@ -57,28 +44,35 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
</Button>
)}
<AsyncMultiSelect
{...selectOptions}
value={value}
onChange={onSelectOptionChange}
isLoading={loading}
loadOptions={debouncedLoadOptions}
maxMenuHeight={maxMenuHeight}
placeholder="Filter by folder"
noOptionsMessage="No folders found"
prefix={<Icon name="filter" />}
aria-label="Folder filter"
defaultOptions
/>
</div>
);
}

async function getFoldersAsOptions(searchString: string, setLoading: (loading: boolean) => void) {
async function getFoldersAsOptions(
searchString: string,
setLoading: (loading: boolean) => void
): Promise<Array<SelectableValue<FolderInfo>>> {
setLoading(true);

const params = {
query: searchString,
type: 'dash-folder',
type: DashboardSearchItemType.DashFolder,
permission: PermissionLevelString.View,
};

// FIXME: stop using id from search and use UID instead
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const searchHits = (await getBackendSrv().search(params)) as DashboardSearchHit[];
const searchHits: DashboardSearchHit[] = await getBackendSrv().search(params);
kaydelaney marked this conversation as resolved.
Show resolved Hide resolved
const options = searchHits.map((d) => ({ label: d.title, value: { id: d.id, title: d.title } }));
if (!searchString || 'general'.includes(searchString.toLowerCase())) {
options.unshift({ label: 'General', value: { id: 0, title: 'General' } });
Expand Down
11 changes: 2 additions & 9 deletions public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
View file
Open in desktop
Expand Up @@ -11,9 +11,7 @@ export interface Props {
}

export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Props): JSX.Element => {
const plugins = useMemo<PanelPluginMeta[]>(() => {
return getAllPanelPluginMeta();
}, []);
const plugins = useMemo<PanelPluginMeta[]>(() => getAllPanelPluginMeta(), []);
const options = useMemo(
() =>
plugins
Expand All @@ -24,12 +22,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
const [value, setValue] = useState<Array<SelectableValue<PanelPluginMeta>>>([]);
const onChange = useCallback(
(plugins: Array<SelectableValue<PanelPluginMeta>>) => {
const changedPlugins = [];
for (const plugin of plugins) {
if (plugin.value) {
changedPlugins.push(plugin.value);
}
}
const changedPlugins = plugins.filter((p) => p.value).map((p) => p.value!);
propsOnChange(changedPlugins);
setValue(plugins);
},
Expand Down