From 61a2a713ea8a7b8d665cb1a49748093ed4be0451 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 8 Apr 2020 10:17:19 +0200
Subject: [PATCH] Forms migrations: Move Switch from Forms namespace (#23386)

---
 packages/grafana-ui/src/components/Forms/Switch.mdx    | 10 +++++-----
 packages/grafana-ui/src/components/Forms/index.ts      |  2 --
 packages/grafana-ui/src/components/index.ts            |  2 +-
 packages/grafana-ui/src/utils/standardEditors.tsx      |  3 ++-
 .../components/PanelEditor/PanelOptionsTab.tsx         |  7 ++-----
 .../SaveDashboard/forms/SaveDashboardAsForm.tsx        |  4 ++--
 .../explore/RichHistory/RichHistorySettings.test.tsx   |  6 +++---
 .../explore/RichHistory/RichHistorySettings.tsx        |  6 +++---
 public/app/features/org/UserInviteForm.tsx             |  4 ++--
 9 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Switch.mdx b/packages/grafana-ui/src/components/Forms/Switch.mdx
index 5a8cf5e3d46..8d1b1a92a9c 100644
--- a/packages/grafana-ui/src/components/Forms/Switch.mdx
+++ b/packages/grafana-ui/src/components/Forms/Switch.mdx
@@ -1,5 +1,5 @@
-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} />
diff --git a/packages/grafana-ui/src/components/Forms/index.ts b/packages/grafana-ui/src/components/Forms/index.ts
index 7274d05c189..418a562387a 100644
--- a/packages/grafana-ui/src/components/Forms/index.ts
+++ b/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,
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 1dfa95fb442..7082bb230ad 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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 };
diff --git a/packages/grafana-ui/src/utils/standardEditors.tsx b/packages/grafana-ui/src/utils/standardEditors.tsx
index 32025c9a90f..8c0ed3742f5 100644
--- a/packages/grafana-ui/src/utils/standardEditors.tsx
+++ b/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> = {
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx b/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
index c695cea3eee..c7ef6562fdb 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
@@ -1,7 +1,7 @@
 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>
   );
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
index aec8b840266..c3dfd68e8de 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
@@ -1,5 +1,5 @@
 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">
diff --git a/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx b/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx
index 85b8f38cb80..da80d0975e4 100644
--- a/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx
@@ -1,7 +1,7 @@
 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);
diff --git a/public/app/features/explore/RichHistory/RichHistorySettings.tsx b/public/app/features/explore/RichHistory/RichHistorySettings.tsx
index 501ee8d3205..d7f9141102e 100644
--- a/public/app/features/explore/RichHistory/RichHistorySettings.tsx
+++ b/public/app/features/explore/RichHistory/RichHistorySettings.tsx
@@ -1,6 +1,6 @@
 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>
diff --git a/public/app/features/org/UserInviteForm.tsx b/public/app/features/org/UserInviteForm.tsx
index da0237d91e4..9db85fd870b 100644
--- a/public/app/features/org/UserInviteForm.tsx
+++ b/public/app/features/org/UserInviteForm.tsx
@@ -1,5 +1,5 @@
 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>