Form migrations: Dashboard- and TimeZonePicker (#22459)

* Add new form styles to dashboard picker

* Use Forms.Select for TimeZonePicker

* Use new form elements for DashboardPicker

* Grafana UI: Extract types from SelectBase, add utils.ts

* Grafana UI: Fix imports

* Grafana UI: Add support for value of type number

* Grafana UI: tweak value search function

* Grafana UI: Add tests for findSelectedValue

* Grafana UI: Add tests for cleanValue

* Grafana UI: Remove redundant check

* Grafana UI: Order imports

* Grafana-UI: Fix TimeZonePicker.story.tsx

* Grafana-UI: Fix timezone value

* Fix merge

* Grafana-UI: Use Cascader vs Forms.Select for TimeZonePicker

* Grafana-UI: Add default size props

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

@@ -1,14 +1,15 @@
 import React, { PureComponent } from 'react';
-import { AsyncSelect } from '@grafana/ui';
-import { SelectableValue } from '@grafana/data';
 import { debounce } from 'lodash';
+import { SelectableValue } from '@grafana/data';
+import { Forms } from '@grafana/ui';
+import { FormInputSize } from '@grafana/ui/src/components/Forms/types';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { DashboardSearchHit, DashboardDTO } from 'app/types';
 
 export interface Props {
-  className?: string;
   onSelected: (dashboard: DashboardDTO) => void;
-  currentDashboardId: SelectableValue<number>;
+  currentDashboardId?: SelectableValue<number>;
+  size?: FormInputSize;
 }
 
 export interface State {
@@ -18,6 +19,10 @@ export interface State {
 export class DashboardPicker extends PureComponent<Props, State> {
   debouncedSearch: any;
 
+  static defaultProps = {
+    size: 'md',
+  };
+
   constructor(props: Props) {
     super(props);
 
@@ -46,25 +51,21 @@ export class DashboardPicker extends PureComponent<Props, State> {
   };
 
   render() {
-    const { className, onSelected, currentDashboardId } = this.props;
+    const { size, onSelected, currentDashboardId } = this.props;
     const { isLoading } = this.state;
 
     return (
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <AsyncSelect
-            className={className}
-            isLoading={isLoading}
-            isClearable={true}
-            defaultOptions={true}
-            loadOptions={this.debouncedSearch}
-            onChange={onSelected}
-            placeholder="Select dashboard"
-            noOptionsMessage={() => 'No dashboards found'}
-            value={currentDashboardId}
-          />
-        </div>
-      </div>
+      <Forms.AsyncSelect
+        size={size}
+        isLoading={isLoading}
+        isClearable={true}
+        defaultOptions={true}
+        loadOptions={this.debouncedSearch}
+        onChange={onSelected}
+        placeholder="Select dashboard"
+        noOptionsMessage={'No dashboards found'}
+        value={currentDashboardId}
+      />
     );
   }
 }