React Migration: Migrates FolderPicker from angular to react (#21088)

* Angular/React: Migrates FolderPicker from angular to react

* move to core

* snap

* minor changes

* more removes

* Managing creating new and saving in movetofolderctrl

* Do not use new forms.field, fix select menu

* FolderPicker responsible to creating new folder

* create new as prop

* snap

* remove unnecessary things

* remove console log

* snap

* fix null checks

* add search debouncing

* set folder to state, null check

* typing folder

* adding case for loadOptions

* snap

Co-authored-by: Peter Holmberg <peterholmberg@users.noreply.github.com>

packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx

@@ -194,6 +194,9 @@ export function SelectBase<T>({
           return v === o.value || o.value === v.value;
         })[0];
       });
+    } else if (loadOptions) {
+      const hasValue = defaultValue || value;
+      selectedValue = hasValue ? [hasValue] : [];
     } else {
       selectedValue = options.filter(o => o.value === value || o === value);
     }

packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts

@@ -16,6 +16,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       box-shadow: 0px 4px 4px ${menuShadowColor};
       position: relative;
       min-width: 100%;
+      z-index: 1;
     `,
     option: css`
       padding: 8px;

packages/grafana-ui/src/components/Forms/index.ts

@@ -1,8 +1,8 @@
 import { getFormStyles } from './getFormStyles';
 import { Label } from './Label';
 import { Input } from './Input/Input';
-import { Select } from './Select/Select';
 import { ButtonSelect } from './Select/ButtonSelect';
+import { AsyncSelect, Select } from './Select/Select';
 import { Form } from './Form';
 import { Field } from './Field';
 import { Button, LinkButton } from './Button';
@@ -19,6 +19,7 @@ const Forms = {
   Select,
   ButtonSelect,
   InputControl,
+  AsyncSelect,
 };
 
 export default Forms;