DashboardPicker: switch to promise-based debounce, return dashboard UID (#30706)

* Use uid in dashboard picker

* Set both id and uid from picker

* Use debounce-promise

* Simplify logic

* Use exact package versions

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

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<number>;
+  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<Props> = ({
   invalid,
   disabled,
 }) => {
-  const debouncedSearch = debounce(getDashboards, 300, {
-    leading: true,
-    trailing: true,
-  });
-
-  const [state, searchDashboards] = useAsyncFn(debouncedSearch, []);
+  const debouncedSearch = debounce(getDashboards, 300);
 
   return (
     <AsyncSelect
       width={width}
-      isLoading={state.loading}
       isClearable={isClearable}
       defaultOptions={true}
-      loadOptions={searchDashboards}
+      loadOptions={debouncedSearch}
       onChange={onSelected}
       placeholder="Select dashboard"
       noOptionsMessage="No dashboards found"

yarn.lock

@@ -6211,6 +6211,11 @@
     "@types/d3-voronoi" "*"
     "@types/d3-zoom" "*"
 
+"@types/debounce-promise@3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/debounce-promise/-/debounce-promise-3.1.3.tgz#dd0d6b96ee61da0dd4c413e3ea03a425ffa36b3f"
+  integrity sha512-mjcCf//DAUQ6YLQMhqYJAv/+a4BsE1GQFmy1el5K62wLJJmQwGi3TsnshhOFynPpuBF9Gh2Vvb+5ImPi47KaZw==
+
 "@types/deep-freeze@^0.1.1":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/deep-freeze/-/deep-freeze-0.1.2.tgz#68e5379291910e82c2f0d1629732163c2aa662cc"
@@ -11560,6 +11565,11 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+debounce-promise@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/debounce-promise/-/debounce-promise-3.1.2.tgz#320fb8c7d15a344455cd33cee5ab63530b6dc7c5"
+  integrity sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg==
+
 debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"