Core: DashboardPicker improvements (#22619)

* Refactor the picker to FC

* Remove redundant variable

* currentDashboardId => currentDashboard

* Make isClearable configurable

* Use useAsyncFn for options loading

* Move getDashboards outside of component

public/app/core/components/Select/DashboardPicker.tsx

@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
+import React, { FC } from 'react';
 import { debounce } from 'lodash';
+import { useAsyncFn } from 'react-use';
 import { SelectableValue } from '@grafana/data';
 import { Forms } from '@grafana/ui';
 import { FormInputSize } from '@grafana/ui/src/components/Forms/types';
@@ -8,64 +9,40 @@ import { DashboardSearchHit, DashboardDTO } from 'app/types';
 
 export interface Props {
   onSelected: (dashboard: DashboardDTO) => void;
-  currentDashboardId?: SelectableValue<number>;
+  currentDashboard?: SelectableValue<number>;
   size?: FormInputSize;
+  isClearable?: boolean;
 }
 
-export interface State {
-  isLoading: boolean;
-}
-
-export class DashboardPicker extends PureComponent<Props, State> {
-  debouncedSearch: any;
-
-  static defaultProps = {
-    size: 'md',
-  };
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      isLoading: false,
-    };
-
-    this.debouncedSearch = debounce(this.getDashboards, 300, {
-      leading: true,
-      trailing: true,
-    });
-  }
-
-  getDashboards = (query = '') => {
-    this.setState({ isLoading: true });
+const getDashboards = (query = '') => {
   return backendSrv.search({ type: 'dash-db', query }).then((result: DashboardSearchHit[]) => {
-      const dashboards = result.map((item: DashboardSearchHit) => ({
+    return result.map((item: DashboardSearchHit) => ({
       id: item.id,
       value: item.id,
       label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`,
     }));
-
-      this.setState({ isLoading: false });
-      return dashboards;
   });
-  };
+};
 
-  render() {
-    const { size, onSelected, currentDashboardId } = this.props;
-    const { isLoading } = this.state;
+export const DashboardPicker: FC<Props> = ({ onSelected, currentDashboard, size = 'md', isClearable = false }) => {
+  const debouncedSearch = debounce(getDashboards, 300, {
+    leading: true,
+    trailing: true,
+  });
+
+  const [state, searchDashboards] = useAsyncFn(debouncedSearch, []);
 
   return (
     <Forms.AsyncSelect
       size={size}
-        isLoading={isLoading}
-        isClearable={true}
+      isLoading={state.loading}
+      isClearable={isClearable}
       defaultOptions={true}
-        loadOptions={this.debouncedSearch}
+      loadOptions={searchDashboards}
       onChange={onSelected}
       placeholder="Select dashboard"
-        noOptionsMessage={'No dashboards found'}
-        value={currentDashboardId}
+      noOptionsMessage="No dashboards found"
+      value={currentDashboard}
     />
   );
-  }
-}
+};