diff --git a/package.json b/package.json index 1bcb08adfa1..b5694933810 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "@types/d3": "5.7.2", "@types/d3-force": "^2.1.0", "@types/d3-scale-chromatic": "1.3.1", + "@types/debounce-promise": "3.1.3", "@types/enzyme": "3.10.5", "@types/enzyme-adapter-react-16": "1.0.6", "@types/file-saver": "2.0.1", @@ -234,6 +235,7 @@ "d3-force": "^2.1.1", "d3-scale-chromatic": "1.5.0", "dangerously-set-html-content": "1.0.6", + "debounce-promise": "3.1.2", "emotion": "10.0.27", "eventemitter3": "4.0.0", "fast-text-encoding": "^1.0.0", diff --git a/public/app/core/components/Select/DashboardPicker.tsx b/public/app/core/components/Select/DashboardPicker.tsx index 529f7f2cb4a..f8735d78e9f 100644 --- a/public/app/core/components/Select/DashboardPicker.tsx +++ b/public/app/core/components/Select/DashboardPicker.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react'; -import { debounce } from 'lodash'; -import { useAsyncFn } from 'react-use'; +import debounce from 'debounce-promise'; import { SelectableValue } from '@grafana/data'; import { AsyncSelect } from '@grafana/ui'; import { backendSrv } from 'app/core/services/backend_srv'; @@ -9,7 +8,7 @@ import { DashboardDTO } from 'app/types'; export interface Props { onSelected: (dashboard: DashboardDTO) => void; - currentDashboard?: SelectableValue; + currentDashboard?: SelectableValue; width?: number; isClearable?: boolean; invalid?: boolean; @@ -20,8 +19,9 @@ const getDashboards = (query = '') => { return backendSrv.search({ type: 'dash-db', query }).then((result: DashboardSearchHit[]) => { return result.map((item: DashboardSearchHit) => ({ id: item.id, + uid: item.uid, value: item.id, - label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`, + label: `${item?.folderTitle ?? 'General'}/${item.title}`, })); }); }; @@ -34,20 +34,14 @@ export const DashboardPicker: FC = ({ invalid, disabled, }) => { - const debouncedSearch = debounce(getDashboards, 300, { - leading: true, - trailing: true, - }); - - const [state, searchDashboards] = useAsyncFn(debouncedSearch, []); + const debouncedSearch = debounce(getDashboards, 300); return (