LibraryPanelSearch: Refactor and fix hyphen issue (#55314)

(cherry picked from commit 9e0d349)

.betterer.results

@@ -4958,10 +4958,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"]
     ],

packages/grafana-ui/src/components/FilterInput/FilterInput.tsx

@@ -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) => {
     const innerRef = React.useRef<HTMLInputElement>(null);
     const combinedRef = useCombinedRefs(ref, innerRef) as React.Ref<HTMLInputElement>;
 
@@ -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}
       />

public/app/core/components/FolderFilter/FolderFilter.tsx

@@ -5,41 +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, 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}>
@@ -56,26 +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,
   };
 
-  const searchHits = await getBackendSrv().search(params);
+  // FIXME: stop using id from search and use UID instead
+  const searchHits: DashboardSearchHit[] = await getBackendSrv().search(params);
   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' } });

public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx

@@ -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
@@ -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);
     },