Migration: Migrate Dashboard Import to React (#22338)

* first things

* introduce headers and moving buttons

* adding reducer and action for gcom dashboard

* action working

* continue building on import form

* change dashboard title

* add prop to not render a label

* first things

* introduce headers and moving buttons

* adding reducer and action for gcom dashboard

* action working

* continue building on import form

* change dashboard title

* add prop to not render a label

* import form layout

* break out form to component

* add actions and reader for file upload

* fix upload issue

* modified data types to handle both gcom and file upload

* import dashboard json

* save dashboard

* start change uid

* change dashboard uid

* fix spacing and date format

* fix import from json

* handle uid and title change

* revert change in panelinspect

* redo fileupload component

* after review

* redo forms to use Forms functionality

* first attempt on async validation

* use ternary on uid input

* removed unused actions, fixed async validation on form

* post form if invalid, break out form to component

* sync file with master

* fix after merge

* nits

* export formapi type

* redo page to use forms validation

* fix inputs and validation

* readd post

* add guards on data source and constants

* type checks and strict nulls

* strict nulls

* validate onchange and fix import button when valid

* shorten validate call

* reexport OnSubmit type

* add comment for overwrite useEffect

* move validation functions to util

* fix button imports

* remove angular import

* move title and uid validation

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

@@ -8,18 +8,20 @@ import { SelectableValue, DataSourceSelectItem } from '@grafana/data';
 export interface Props {
   onChange: (ds: DataSourceSelectItem) => void;
   datasources: DataSourceSelectItem[];
-  current: DataSourceSelectItem;
+  current?: DataSourceSelectItem;
   hideTextValue?: boolean;
   onBlur?: () => void;
   autoFocus?: boolean;
   openMenuOnFocus?: boolean;
   showLoading?: boolean;
+  placeholder?: string;
 }
 
 export class DataSourcePicker extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
     autoFocus: false,
     openMenuOnFocus: false,
+    placeholder: 'Select datasource',
   };
 
   searchInput: HTMLElement;
@@ -30,11 +32,23 @@ export class DataSourcePicker extends PureComponent<Props> {
 
   onChange = (item: SelectableValue<string>) => {
     const ds = this.props.datasources.find(ds => ds.name === item.value);
-    this.props.onChange(ds);
+
+    if (ds) {
+      this.props.onChange(ds);
+    }
   };
 
   render() {
-    const { datasources, current, autoFocus, hideTextValue, onBlur, openMenuOnFocus, showLoading } = this.props;
+    const {
+      datasources,
+      current,
+      autoFocus,
+      hideTextValue,
+      onBlur,
+      openMenuOnFocus,
+      showLoading,
+      placeholder,
+    } = this.props;
 
     const options = datasources.map(ds => ({
       value: ds.name,
@@ -63,7 +77,7 @@ export class DataSourcePicker extends PureComponent<Props> {
           onBlur={onBlur}
           openMenuOnFocus={openMenuOnFocus}
           maxMenuHeight={500}
-          placeholder="Select datasource"
+          placeholder={placeholder}
           noOptionsMessage={() => 'No datasources found'}
           value={value}
         />

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

@@ -9,7 +9,7 @@ import { DashboardSearchHit } from '../../../types';
 
 export interface Props {
   onChange: ($folder: { title: string; id: number }) => void;
-  enableCreateNew: boolean;
+  enableCreateNew?: boolean;
   rootName?: string;
   enableReset?: boolean;
   dashboardId?: any;
@@ -43,6 +43,7 @@ export class FolderPicker extends PureComponent<Props, State> {
     enableReset: false,
     initialTitle: '',
     enableCreateNew: false,
+    useInNextGenForms: false,
   };
 
   componentDidMount = async () => {
@@ -115,7 +116,7 @@ export class FolderPicker extends PureComponent<Props, State> {
       folder = resetFolder;
     }
 
-    if (!folder) {
+    if (folder.value === -1) {
       if (contextSrv.isEditor) {
         folder = rootFolder;
       } else {