Forms migrations: Move Switch from Forms namespace (#23386)

packages/grafana-ui/src/components/Forms/Switch.mdx

-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
-import { Switch } from './Switch';
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { Switch } from "./Switch";
 
 <Meta title="MDX|Switch" component={Switch} />
 
@@ -10,11 +10,11 @@ Used to represent binary values
 ### Usage
 
 ```jsx
-import { Forms } from '@grafana/ui';
+import { Switch } from '@grafana/ui';
 
-<Forms.Switch disabled={...} checked={...} onChange={...} />
+<Switch disabled={...} checked={...} onChange={...} />
 ```
 
 ### Props
-<Props of={Switch} />
 
+<Props of={Switch} />

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

@@ -4,14 +4,12 @@ import { Label } from './Label';
 import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
 import { Form } from './Form';
 import { Field } from './Field';
-import { Switch } from './Switch';
 import { Legend } from './Legend';
 import { TextArea } from './TextArea/TextArea';
 import { Checkbox } from './Checkbox';
 
 const Forms = {
   RadioButtonGroup,
-  Switch,
   getFormStyles,
   Label,
   Form,

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

@@ -137,6 +137,7 @@ export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';
 export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
 
 export { Input } from './Input/Input';
+export { Switch } from './Forms/Switch';
 
 // Legacy forms
 
@@ -160,5 +161,4 @@ const LegacyForms = {
   Input,
   Switch,
 };
-export { Switch };
 export { LegacyForms, LegacyInputStatus };

packages/grafana-ui/src/utils/standardEditors.tsx

@@ -20,6 +20,7 @@ import {
   ThresholdsMode,
 } from '@grafana/data';
 import { NumberValueEditor, Forms, StringValueEditor, Select } from '../components';
+import { Switch } from '../components/Forms/Switch';
 import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings';
 import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds';
 import { UnitValueEditor } from '../components/OptionsUI/units';
@@ -220,7 +221,7 @@ export const getStandardOptionEditors = () => {
     id: 'boolean',
     name: 'Boolean',
     description: 'Allows boolean values input',
-    editor: props => <Forms.Switch {...props} onChange={e => props.onChange(e.currentTarget.checked)} />,
+    editor: props => <Switch {...props} onChange={e => props.onChange(e.currentTarget.checked)} />,
   };
 
   const select: StandardEditorsRegistryItem<any> = {

public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx

 import React, { FC, useMemo } from 'react';
 import { PanelModel, DashboardModel } from '../../state';
 import { SelectableValue, PanelPlugin, FieldConfigSource, PanelData } from '@grafana/data';
-import { Forms, Select, DataLinksInlineEditor, Input } from '@grafana/ui';
+import { Forms, Switch, Select, DataLinksInlineEditor, Input } from '@grafana/ui';
 import { OptionsGroup } from './OptionsGroup';
 import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
 import { getVariables } from '../../../variables/state/selectors';
@@ -51,10 +51,7 @@ export const PanelOptionsTab: FC<Props> = ({
         />
       </Forms.Field>
       <Forms.Field label="Transparent" description="Display panel without background.">
-        <Forms.Switch
-          value={panel.transparent}
-          onChange={e => onPanelConfigChange('transparent', e.currentTarget.checked)}
-        />
+        <Switch value={panel.transparent} onChange={e => onPanelConfigChange('transparent', e.currentTarget.checked)} />
       </Forms.Field>
     </OptionsGroup>
   );

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx

 import React from 'react';
-import { Button, Forms, HorizontalGroup, Input } from '@grafana/ui';
+import { Button, Forms, HorizontalGroup, Input, Switch } from '@grafana/ui';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { SaveDashboardFormProps } from '../types';
@@ -90,7 +90,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
             />
           </Forms.Field>
           <Forms.Field label="Copy tags">
-            <Forms.Switch name="copyTags" ref={register} />
+            <Switch name="copyTags" ref={register} />
           </Forms.Field>
           <HorizontalGroup>
             <Button type="submit" aria-label="Save dashboard button">

public/app/features/explore/RichHistory/RichHistorySettings.test.tsx

 import React from 'react';
 import { mount } from 'enzyme';
 import { RichHistorySettings, RichHistorySettingsProps } from './RichHistorySettings';
-import { Forms, Select } from '@grafana/ui';
+import { Select, Switch } from '@grafana/ui';
 
 const setup = (propOverrides?: Partial<RichHistorySettingsProps>) => {
   const props: RichHistorySettingsProps = {
@@ -29,7 +29,7 @@ describe('RichHistorySettings', () => {
     const wrapper = setup();
     expect(
       wrapper
-        .find(Forms.Switch)
+        .find(Switch)
         .at(0)
         .prop('value')
     ).toBe(true);
@@ -38,7 +38,7 @@ describe('RichHistorySettings', () => {
     const wrapper = setup();
     expect(
       wrapper
-        .find(Forms.Switch)
+        .find(Switch)
         .at(1)
         .prop('value')
     ).toBe(false);

public/app/features/explore/RichHistory/RichHistorySettings.tsx

 import React from 'react';
 import { css } from 'emotion';
-import { stylesFactory, useTheme, Forms, Select, Button } from '@grafana/ui';
+import { stylesFactory, useTheme, Forms, Select, Button, Switch } from '@grafana/ui';
 import { GrafanaTheme, AppEvents } from '@grafana/data';
 import appEvents from 'app/core/app_events';
 import { CoreEvents } from 'app/types';
@@ -84,13 +84,13 @@ export function RichHistorySettings(props: RichHistorySettingsProps) {
       </Forms.Field>
       <Forms.Field label="Default active tab" description=" " className="space-between">
         <div className={styles.switch}>
-          <Forms.Switch value={starredTabAsFirstTab} onChange={toggleStarredTabAsFirstTab}></Forms.Switch>
+          <Switch value={starredTabAsFirstTab} onChange={toggleStarredTabAsFirstTab}></Switch>
           <div className={styles.label}>Change the default active tab from “Query history” to “Starred”</div>
         </div>
       </Forms.Field>
       <Forms.Field label="Data source behaviour" description=" " className="space-between">
         <div className={styles.switch}>
-          <Forms.Switch value={activeDatasourceOnly} onChange={toggleactiveDatasourceOnly}></Forms.Switch>
+          <Switch value={activeDatasourceOnly} onChange={toggleactiveDatasourceOnly}></Switch>
           <div className={styles.label}>Only show queries for data source currently active in Explore</div>
         </div>
       </Forms.Field>

public/app/features/org/UserInviteForm.tsx

 import React, { FC } from 'react';
-import { Forms, HorizontalGroup, Button, LinkButton, Input } from '@grafana/ui';
+import { Forms, HorizontalGroup, Button, LinkButton, Input, Switch } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { OrgRole } from 'app/types';
 import { getBackendSrv } from '@grafana/runtime';
@@ -63,7 +63,7 @@ export const UserInviteForm: FC<Props> = ({ updateLocation }) => {
               <Forms.InputControl as={Forms.RadioButtonGroup} control={control} options={roles} name="role" />
             </Forms.Field>
             <Forms.Field invalid={!!errors.sendEmail} label="Send invite email">
-              <Forms.Switch name="sendEmail" ref={register} />
+              <Switch name="sendEmail" ref={register} />
             </Forms.Field>
             <HorizontalGroup>
               <Button type="submit">Submit</Button>