Forms migration: Old Select to Legacy namespace (#23200)

* Export other components as Legacy

* More Select Legacy

* Add namespacing to more files

* Export new elements

* Move Legacy Select folder

* Let's not forget the scss file

* Move new Select folder

* Move new Select from Forms namespace

* Little oopsie

* Fix errors

* Fix merge issues

public/app/core/components/PermissionList/AddPermission.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
-import { Select } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { User } from 'app/types';
 import {
@@ -12,6 +12,7 @@ import {
   NewDashboardAclItem,
   OrgRole,
 } from 'app/types/acl';
+const { Select } = LegacyForms;
 
 export interface Props {
   onAddPermission: (item: NewDashboardAclItem) => void;

public/app/core/components/PermissionList/DisabledPermissionListItem.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Select } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
 import { dashboardPermissionLevels } from 'app/types/acl';
+const { Select } = LegacyForms;
 
 export interface Props {
   item: any;

public/app/core/components/PermissionList/PermissionListItem.tsx

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
-import { Select } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
 import { FolderInfo } from 'app/types';
+const { Select } = LegacyForms;
 
 const setClassNameHelper = (inherited: boolean) => {
   return inherited ? 'gf-form-disabled' : '';

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

@@ -2,7 +2,7 @@ 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 { AsyncSelect } 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';
@@ -42,7 +42,7 @@ export const DashboardPicker: FC<Props> = ({
   const [state, searchDashboards] = useAsyncFn(debouncedSearch, []);
 
   return (
-    <Forms.AsyncSelect
+    <AsyncSelect
       size={size}
       isLoading={state.loading}
       isClearable={isClearable}

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

@@ -2,8 +2,9 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { Select } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
 import { SelectableValue, DataSourceSelectItem } from '@grafana/data';
+const { Select } = LegacyForms;
 
 export interface Props {
   onChange: (ds: DataSourceSelectItem) => void;

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Forms } from '@grafana/ui';
+import { AsyncSelect } from '@grafana/ui';
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { debounce } from 'lodash';
 import appEvents from '../../app_events';
@@ -150,7 +150,7 @@ export class FolderPicker extends PureComponent<Props, State> {
     return (
       <>
         {useNewForms && (
-          <Forms.AsyncSelect
+          <AsyncSelect
             loadingMessage="Loading folders..."
             defaultOptions
             defaultValue={folder}
@@ -167,7 +167,7 @@ export class FolderPicker extends PureComponent<Props, State> {
           <div className="gf-form-inline">
             <div className="gf-form">
               <label className="gf-form-label width-7">Folder</label>
-              <Forms.AsyncSelect
+              <AsyncSelect
                 loadingMessage="Loading folders..."
                 defaultOptions
                 defaultValue={folder}

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { Select } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { Variable } from 'app/types/templates';
+const { Select } = LegacyForms;
 
 export interface Props {
   onChange: (value: string) => void;

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Forms } from '@grafana/ui';
+import { AsyncSelect } from '@grafana/ui';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { Organization } from 'app/types';
 import { SelectableValue } from '@grafana/data';
@@ -54,7 +54,7 @@ export class OrgPicker extends PureComponent<Props, State> {
     const { isLoading } = this.state;
 
     return (
-      <Forms.AsyncSelect
+      <AsyncSelect
         className={className}
         isLoading={isLoading}
         defaultOptions={true}

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

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
-import { AsyncSelect } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
 import { debounce } from 'lodash';
 import { getBackendSrv } from '@grafana/runtime';
+const { AsyncSelect } = LegacyForms;
 
 export interface Team {
   id: number;

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

@@ -3,7 +3,8 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 
 // Components
-import { AsyncSelect } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { AsyncSelect } = LegacyForms;
 
 // Utils & Services
 import { debounce } from 'lodash';

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 
-import { FormLabel, Select } from '@grafana/ui';
+import { FormLabel, LegacyForms } from '@grafana/ui';
+const { Select } = LegacyForms;
 
 import { DashboardSearchHit, DashboardSearchHitType } from 'app/types';
 import { backendSrv } from 'app/core/services/backend_srv';

public/app/core/components/TagFilter/TagFilter.tsx

@@ -8,7 +8,8 @@ import { escapeStringForRegex } from '@grafana/data';
 // Components
 import { TagOption } from './TagOption';
 import { TagBadge } from './TagBadge';
-import { IndicatorsContainer, NoOptionsMessage, resetSelectStyles } from '@grafana/ui';
+import { resetSelectStyles, LegacyForms } from '@grafana/ui';
+const { IndicatorsContainer, NoOptionsMessage } = LegacyForms;
 
 export interface TermCount {
   term: string;