Skip to content

N
nexpie-grafana-theme
Commit 61a2a713 by Tobias Skarhed Committed by GitHub
Options

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

parent 6779033b
Showing with 20 additions and 24 deletions
packages/grafana-ui/src/components/Forms/Switch.mdx
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { Switch } from './Switch'; import { Switch } from "./Switch";
<Meta title="MDX|Switch" component={Switch} /> <Meta title="MDX|Switch" component={Switch} />
...@@ -10,11 +10,11 @@ Used to represent binary values ...@@ -10,11 +10,11 @@ Used to represent binary values
### Usage ### Usage
```jsx ```jsx
import { Forms } from '@grafana/ui'; import { Switch } from '@grafana/ui';
<Forms.Switch disabled={...} checked={...} onChange={...} /> <Switch disabled={...} checked={...} onChange={...} />
``` ```
### Props ### Props
<Props of={Switch} />
<Props of={Switch} />
packages/grafana-ui/src/components/Forms/index.ts
...@@ -4,14 +4,12 @@ import { Label } from './Label'; ...@@ -4,14 +4,12 @@ import { Label } from './Label';
import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup'; import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
import { Form } from './Form'; import { Form } from './Form';
import { Field } from './Field'; import { Field } from './Field';
import { Switch } from './Switch';
import { Legend } from './Legend'; import { Legend } from './Legend';
import { TextArea } from './TextArea/TextArea'; import { TextArea } from './TextArea/TextArea';
import { Checkbox } from './Checkbox'; import { Checkbox } from './Checkbox';
const Forms = { const Forms = {
RadioButtonGroup, RadioButtonGroup,
Switch,
getFormStyles, getFormStyles,
Label, Label,
Form, Form,
......
packages/grafana-ui/src/components/index.ts
...@@ -137,6 +137,7 @@ export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout'; ...@@ -137,6 +137,7 @@ export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';
export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup'; export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
export { Input } from './Input/Input'; export { Input } from './Input/Input';
export { Switch } from './Forms/Switch';
// Legacy forms // Legacy forms
...@@ -160,5 +161,4 @@ const LegacyForms = { ...@@ -160,5 +161,4 @@ const LegacyForms = {
Input, Input,
Switch, Switch,
}; };
export { Switch };
export { LegacyForms, LegacyInputStatus }; export { LegacyForms, LegacyInputStatus };
packages/grafana-ui/src/utils/standardEditors.tsx
...@@ -20,6 +20,7 @@ import { ...@@ -20,6 +20,7 @@ import {
ThresholdsMode, ThresholdsMode,
} from '@grafana/data'; } from '@grafana/data';
import { NumberValueEditor, Forms, StringValueEditor, Select } from '../components'; import { NumberValueEditor, Forms, StringValueEditor, Select } from '../components';
import { Switch } from '../components/Forms/Switch';
import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings'; import { ValueMappingsValueEditor } from '../components/OptionsUI/mappings';
import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds'; import { ThresholdsValueEditor } from '../components/OptionsUI/thresholds';
import { UnitValueEditor } from '../components/OptionsUI/units'; import { UnitValueEditor } from '../components/OptionsUI/units';
...@@ -220,7 +221,7 @@ export const getStandardOptionEditors = () => { ...@@ -220,7 +221,7 @@ export const getStandardOptionEditors = () => {
id: 'boolean', id: 'boolean',
name: 'Boolean', name: 'Boolean',
description: 'Allows boolean values input', 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> = { const select: StandardEditorsRegistryItem<any> = {
......
public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx
import React, { FC, useMemo } from 'react'; import React, { FC, useMemo } from 'react';
import { PanelModel, DashboardModel } from '../../state'; import { PanelModel, DashboardModel } from '../../state';
import { SelectableValue, PanelPlugin, FieldConfigSource, PanelData } from '@grafana/data'; 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 { OptionsGroup } from './OptionsGroup';
import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv'; import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
import { getVariables } from '../../../variables/state/selectors'; import { getVariables } from '../../../variables/state/selectors';
...@@ -51,10 +51,7 @@ export const PanelOptionsTab: FC<Props> = ({ ...@@ -51,10 +51,7 @@ export const PanelOptionsTab: FC<Props> = ({
/> />
</Forms.Field> </Forms.Field>
<Forms.Field label="Transparent" description="Display panel without background."> <Forms.Field label="Transparent" description="Display panel without background.">
<Forms.Switch <Switch value={panel.transparent} onChange={e => onPanelConfigChange('transparent', e.currentTarget.checked)} />
value={panel.transparent}
onChange={e => onPanelConfigChange('transparent', e.currentTarget.checked)}
/>
</Forms.Field> </Forms.Field>
</OptionsGroup> </OptionsGroup>
); );
......
public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
import React from 'react'; 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 { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { FolderPicker } from 'app/core/components/Select/FolderPicker'; import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { SaveDashboardFormProps } from '../types'; import { SaveDashboardFormProps } from '../types';
...@@ -90,7 +90,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo ...@@ -90,7 +90,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
/> />
</Forms.Field> </Forms.Field>
<Forms.Field label="Copy tags"> <Forms.Field label="Copy tags">
<Forms.Switch name="copyTags" ref={register} /> <Switch name="copyTags" ref={register} />
</Forms.Field> </Forms.Field>
<HorizontalGroup> <HorizontalGroup>
<Button type="submit" aria-label="Save dashboard button"> <Button type="submit" aria-label="Save dashboard button">
......
public/app/features/explore/RichHistory/RichHistorySettings.test.tsx
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { RichHistorySettings, RichHistorySettingsProps } from './RichHistorySettings'; import { RichHistorySettings, RichHistorySettingsProps } from './RichHistorySettings';
import { Forms, Select } from '@grafana/ui'; import { Select, Switch } from '@grafana/ui';
const setup = (propOverrides?: Partial<RichHistorySettingsProps>) => { const setup = (propOverrides?: Partial<RichHistorySettingsProps>) => {
const props: RichHistorySettingsProps = { const props: RichHistorySettingsProps = {
...@@ -29,7 +29,7 @@ describe('RichHistorySettings', () => { ...@@ -29,7 +29,7 @@ describe('RichHistorySettings', () => {
const wrapper = setup(); const wrapper = setup();
expect( expect(
wrapper wrapper
.find(Forms.Switch) .find(Switch)
.at(0) .at(0)
.prop('value') .prop('value')
).toBe(true); ).toBe(true);
...@@ -38,7 +38,7 @@ describe('RichHistorySettings', () => { ...@@ -38,7 +38,7 @@ describe('RichHistorySettings', () => {
const wrapper = setup(); const wrapper = setup();
expect( expect(
wrapper wrapper
.find(Forms.Switch) .find(Switch)
.at(1) .at(1)
.prop('value') .prop('value')
).toBe(false); ).toBe(false);
......
public/app/features/explore/RichHistory/RichHistorySettings.tsx
import React from 'react'; import React from 'react';
import { css } from 'emotion'; 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 { GrafanaTheme, AppEvents } from '@grafana/data';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { CoreEvents } from 'app/types'; import { CoreEvents } from 'app/types';
...@@ -84,13 +84,13 @@ export function RichHistorySettings(props: RichHistorySettingsProps) { ...@@ -84,13 +84,13 @@ export function RichHistorySettings(props: RichHistorySettingsProps) {
</Forms.Field> </Forms.Field>
<Forms.Field label="Default active tab" description=" " className="space-between"> <Forms.Field label="Default active tab" description=" " className="space-between">
<div className={styles.switch}> <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 className={styles.label}>Change the default active tab from “Query history” to “Starred”</div>
</div> </div>
</Forms.Field> </Forms.Field>
<Forms.Field label="Data source behaviour" description=" " className="space-between"> <Forms.Field label="Data source behaviour" description=" " className="space-between">
<div className={styles.switch}> <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 className={styles.label}>Only show queries for data source currently active in Explore</div>
</div> </div>
</Forms.Field> </Forms.Field>
......
public/app/features/org/UserInviteForm.tsx
import React, { FC } from 'react'; 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 { getConfig } from 'app/core/config';
import { OrgRole } from 'app/types'; import { OrgRole } from 'app/types';
import { getBackendSrv } from '@grafana/runtime'; import { getBackendSrv } from '@grafana/runtime';
...@@ -63,7 +63,7 @@ export const UserInviteForm: FC<Props> = ({ updateLocation }) => { ...@@ -63,7 +63,7 @@ export const UserInviteForm: FC<Props> = ({ updateLocation }) => {
<Forms.InputControl as={Forms.RadioButtonGroup} control={control} options={roles} name="role" /> <Forms.InputControl as={Forms.RadioButtonGroup} control={control} options={roles} name="role" />
</Forms.Field> </Forms.Field>
<Forms.Field invalid={!!errors.sendEmail} label="Send invite email"> <Forms.Field invalid={!!errors.sendEmail} label="Send invite email">
<Forms.Switch name="sendEmail" ref={register} /> <Switch name="sendEmail" ref={register} />
</Forms.Field> </Forms.Field>
<HorizontalGroup> <HorizontalGroup>
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment