refactor: Bootstrap to AntD - Form - iteration 2 (#14379)

2021-05-06 02:00:37 -03:00 · 2021-05-06 02:00:37 -03:00 · 331310db9b
parent fa510df624
commit 331310db9b
24 changed files with 245 additions and 179 deletions
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_properties.test.ts
@ -91,7 +91,7 @@ describe('Dashboard edit action', () => {
    cy.get('.ant-modal-body')
      .should('be.visible')
      .contains('Title')
-      .siblings('input')
+      .get('[data-test="dashboard-title-input"]')
      .type(`{selectall}{backspace}${dashboardTitle}`);

    // save edit changes
--- a/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
@ -16,12 +16,10 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-/* eslint-disable no-unused-expressions */
 import React from 'react';
 import { FormControl } from 'react-bootstrap';
 import sinon from 'sinon';
-import { mount } from 'enzyme';
-
+import { styledMount as mount } from 'spec/helpers/theming';
 import BoundsControl from 'src/explore/components/controls/BoundsControl';

 const defaultProps = {
--- a/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx
@ -24,7 +24,6 @@ import { Provider } from 'react-redux';

 import { shallow } from 'enzyme';
 import { styledMount as mount } from 'spec/helpers/theming';
-import { FormControl } from 'react-bootstrap';
 import { Radio } from 'src/components/Radio';
 import Button from 'src/components/Button';
 import sinon from 'sinon';
@ -91,7 +90,6 @@ describe('SaveModal', () => {
  it('renders a Modal with the right set of components', () => {
    const wrapper = getWrapper();
    expect(wrapper.find(StyledModal)).toExist();
-    expect(wrapper.find(FormControl)).toExist();
    expect(wrapper.find(Radio)).toHaveLength(2);

    const footerWrapper = shallow(wrapper.find(StyledModal).props().footer);
--- a/superset-frontend/src/CRUD/Field.jsx
+++ b/superset-frontend/src/CRUD/Field.jsx
@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { FormGroup, HelpBlock, FormControl } from 'react-bootstrap';

 import { Tooltip } from 'src/components/Tooltip';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import './crud.less';

 const propTypes = {
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@ -22,7 +22,7 @@ import { FormControl, FormGroup } from 'react-bootstrap';
 import { t, supersetTheme, styled } from '@superset-ui/core';

 import Button from 'src/components/Button';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import Modal from 'src/components/Modal';
 import Icon from 'src/components/Icon';

--- a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
+++ b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
@ -23,7 +23,7 @@ import { FormControl, FormGroup } from 'react-bootstrap';
 import { t, styled } from '@superset-ui/core';
 import * as chrono from 'chrono-node';
 import ModalTrigger from 'src/components/ModalTrigger';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import './ScheduleQueryButton.less';
 import Button from 'src/components/Button';

--- a/superset-frontend/src/components/DeleteModal/index.tsx
+++ b/superset-frontend/src/components/DeleteModal/index.tsx
@ -20,7 +20,7 @@ import { t, styled } from '@superset-ui/core';
 import React, { useState } from 'react';
 import { FormGroup, FormControl, FormControlProps } from 'react-bootstrap';
 import Modal from 'src/components/Modal';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';

 const StyleFormGroup = styled(FormGroup)`
  padding-top: 8px;
--- a/superset-frontend/src/components/FormLabel/index.tsx
+++ b/superset-frontend/src/components/FormLabel/index.tsx
@ -16,32 +16,19 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-// import { styled } from '@superset-ui/core';
-import React, { ReactNode } from 'react';
-import { ControlLabel } from 'react-bootstrap';
+import React from 'react';
+import AntDForm, { FormProps } from 'antd/lib/form';
+import { styled } from '@superset-ui/core';

-export type FormLabelProps = {
-  children: ReactNode;
-  htmlFor?: string;
-  required?: boolean;
-  className?: string;
-};
+const StyledForm = styled(AntDForm)`
+  &.ant-form label {
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  }
+  .ant-form-item {
+    margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+  }
+`;

-export default function FormLabel({
-  children,
-  htmlFor,
-  required = false,
-}: FormLabelProps) {
-  return (
-    <>
-      <ControlLabel htmlFor={htmlFor}>
-        {children}
-        {required && (
-          <span className="text-danger m-l-4">
-            <strong>*</strong>
-          </span>
-        )}
-      </ControlLabel>
-    </>
-  );
+export default function Form(props: FormProps) {
+  return <StyledForm {...props} />;
 }
--- a/superset-frontend/src/components/FormLabel/FormLabel.test.tsx
+++ b/superset-frontend/src/components/FormLabel/FormLabel.test.tsx
@ -17,36 +17,29 @@
 * under the License.
 */
 import React from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
-import { FormControl } from 'react-bootstrap';
-import FormLabel from './index';
+import Form, { FormItemProps } from 'antd/lib/form';
+import { styled } from '@superset-ui/core';

-const mockedProps = {
-  children: 'Form label',
-  required: false,
-  htmlFor: 'form-control',
-};
+const StyledItem = styled(Form.Item)`
+  .ant-form-item-label > label {
+    text-transform: uppercase;
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+    color: ${({ theme }) => theme.colors.grayscale.base};

-test('should render', () => {
-  const { container } = render(<FormLabel {...mockedProps} />);
-  expect(container).toBeInTheDocument();
-});
+    &.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+      &::before {
+        display: none;
+      }
+      &::after {
+        display: inline-block;
+        color: ${({ theme }) => theme.colors.error.base};
+        font-size: ${({ theme }) => theme.typography.sizes.m}px;
+        content: '*';
+      }
+    }
+  }
+`;

-test('should render a Label', () => {
-  render(
-    <>
-      <FormLabel {...mockedProps} />
-      <FormControl id="form-control" />
-    </>,
-  );
-  expect(screen.getByLabelText('Form label')).toBeInTheDocument();
-});
-
-test('should be shown as required', () => {
-  const requiredProps = {
-    ...mockedProps,
-    required: true,
-  };
-  render(<FormLabel {...requiredProps} />);
-  expect(screen.getByText('*').parentNode).toBeInTheDocument();
-});
+export default function FormItem(props: FormItemProps) {
+  return <StyledItem {...props} />;
+}
--- a/superset-frontend/src/components/Form/FormLabel.tsx
+++ b/superset-frontend/src/components/Form/FormLabel.tsx
@ -0,0 +1,61 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { ReactNode } from 'react';
+import { styled } from '@superset-ui/core';
+
+export type FormLabelProps = {
+  children: ReactNode;
+  htmlFor?: string;
+  required?: boolean;
+  className?: string;
+};
+
+const Label = styled.label`
+  text-transform: uppercase;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  color: ${({ theme }) => theme.colors.grayscale.base};
+  margin-bottom: ${({ theme }) => theme.gridUnit}px;
+`;
+
+const RequiredLabel = styled.label`
+  text-transform: uppercase;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  color: ${({ theme }) => theme.colors.grayscale.base};
+  margin-bottom: ${({ theme }) => theme.gridUnit}px;
+  &::after {
+    display: inline-block;
+    color: ${({ theme }) => theme.colors.error.base};
+    font-size: ${({ theme }) => theme.typography.sizes.m}px;
+    content: '*';
+  }
+`;
+
+export default function FormLabel({
+  children,
+  htmlFor,
+  required = false,
+  className,
+}: FormLabelProps) {
+  const StyledLabel = required ? RequiredLabel : Label;
+  return (
+    <StyledLabel htmlFor={htmlFor} className={className}>
+      {children}
+    </StyledLabel>
+  );
+}
--- a/superset-frontend/src/components/Form/index.tsx
+++ b/superset-frontend/src/components/Form/index.tsx
@ -0,0 +1,23 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import Form from './Form';
+import FormItem from './FormItem';
+import FormLabel from './FormLabel';
+
+export { Form, FormItem, FormLabel };
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@ -25,7 +25,7 @@ import React, {
 import { styled, SupersetClient, t } from '@superset-ui/core';
 import { AsyncSelect, CreatableSelect, Select } from 'src/components/Select';

-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';

 import DatabaseSelector from 'src/components/DatabaseSelector';
 import RefreshLabel from 'src/components/RefreshLabel';
--- a/superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx
+++ b/superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx
@ -25,6 +25,7 @@ import ColorSchemeControl from 'src/explore/components/controls/ColorSchemeContr

 const propTypes = {
  onChange: PropTypes.func,
+  labelMargin: PropTypes.number,
  colorScheme: PropTypes.string,
 };

@ -47,13 +48,14 @@ class ColorSchemeControlWrapper extends React.PureComponent {
  }

  render() {
-    const { colorScheme } = this.props;
+    const { colorScheme, labelMargin = 0 } = this.props;
    return (
      <ColorSchemeControl
        description={t(
          "Any color palette selected here will override the colors applied to this dashboard's individual charts",
        )}
        label={t('Color scheme')}
+        labelMargin={labelMargin}
        name="color_scheme"
        onChange={this.props.onChange}
        value={colorScheme}
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
@ -18,8 +18,8 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'src/common/components';
-import { FormControl } from 'react-bootstrap';
+import { Row, Col, Input } from 'src/common/components';
+import { Form, FormItem } from 'src/components/Form';
 import jsonStringify from 'json-stringify-pretty-compact';
 import Button from 'src/components/Button';
 import { AsyncSelect } from 'src/components/Select';
@ -33,7 +33,6 @@ import {
 } from '@superset-ui/core';

 import Modal from 'src/components/Modal';
-import FormLabel from 'src/components/FormLabel';
 import { JsonEditor } from 'src/components/AsyncAceEditor';

 import ColorSchemeControlWrapper from 'src/dashboard/components/ColorSchemeControlWrapper';
@ -327,29 +326,31 @@ class PropertiesModal extends React.PureComponent {
      <Row gutter={16}>
        <Col xs={24} md={12}>
          <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
-          <FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
-          <AsyncSelect
-            name="owners"
-            isMulti
-            value={values.owners}
-            loadOptions={loadAccessOptions('owners')}
-            defaultOptions // load options on render
-            cacheOptions
-            onChange={this.onOwnersChange}
-            disabled={!isDashboardLoaded}
-            filterOption={null} // options are filtered at the api
-          />
-          <p className="help-block">
-            {t(
-              'Owners is a list of users who can alter the dashboard. Searchable by name or username.',
-            )}
-          </p>
+          <FormItem label={t('Owners')}>
+            <AsyncSelect
+              name="owners"
+              isMulti
+              value={values.owners}
+              loadOptions={loadAccessOptions('owners')}
+              defaultOptions // load options on render
+              cacheOptions
+              onChange={this.onOwnersChange}
+              disabled={!isDashboardLoaded}
+              filterOption={null} // options are filtered at the api
+            />
+            <p className="help-block">
+              {t(
+                'Owners is a list of users who can alter the dashboard. Searchable by name or username.',
+              )}
+            </p>
+          </FormItem>
        </Col>
        <Col xs={24} md={12}>
          <h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3>
          <ColorSchemeControlWrapper
            onChange={this.onColorSchemeChange}
            colorScheme={values.colorScheme}
+            labelMargin={8}
          />
        </Col>
      </Row>
@ -367,42 +368,44 @@ class PropertiesModal extends React.PureComponent {
        </Row>
        <Row gutter={16}>
          <Col xs={24} md={12}>
-            <FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
-            <AsyncSelect
-              name="owners"
-              isMulti
-              value={values.owners}
-              loadOptions={loadAccessOptions('owners')}
-              defaultOptions // load options on render
-              cacheOptions
-              onChange={this.onOwnersChange}
-              disabled={!isDashboardLoaded}
-              filterOption={null} // options are filtered at the api
-            />
-            <p className="help-block">
-              {t(
-                'Owners is a list of users who can alter the dashboard. Searchable by name or username.',
-              )}
-            </p>
+            <FormItem label={t('Owners')}>
+              <AsyncSelect
+                name="owners"
+                isMulti
+                value={values.owners}
+                loadOptions={loadAccessOptions('owners')}
+                defaultOptions // load options on render
+                cacheOptions
+                onChange={this.onOwnersChange}
+                disabled={!isDashboardLoaded}
+                filterOption={null} // options are filtered at the api
+              />
+              <p className="help-block">
+                {t(
+                  'Owners is a list of users who can alter the dashboard. Searchable by name or username.',
+                )}
+              </p>
+            </FormItem>
          </Col>
          <Col xs={24} md={12}>
-            <FormLabel htmlFor="roles">{t('Roles')}</FormLabel>
-            <AsyncSelect
-              name="roles"
-              isMulti
-              value={values.roles}
-              loadOptions={loadAccessOptions('roles')}
-              defaultOptions // load options on render
-              cacheOptions
-              onChange={this.onRolesChange}
-              disabled={!isDashboardLoaded}
-              filterOption={null} // options are filtered at the api
-            />
-            <p className="help-block">
-              {t(
-                'Roles is a list which defines access to the dashboard. Granting a role access to a dashboard will bypass dataset level checks. If no roles defined then the dashboard is available to all roles.',
-              )}
-            </p>
+            <FormItem label={t('Roles')}>
+              <AsyncSelect
+                name="roles"
+                isMulti
+                value={values.roles}
+                loadOptions={loadAccessOptions('roles')}
+                defaultOptions // load options on render
+                cacheOptions
+                onChange={this.onRolesChange}
+                disabled={!isDashboardLoaded}
+                filterOption={null} // options are filtered at the api
+              />
+              <p className="help-block">
+                {t(
+                  'Roles is a list which defines access to the dashboard. Granting a role access to a dashboard will bypass dataset level checks. If no roles defined then the dashboard is available to all roles.',
+                )}
+              </p>
+            </FormItem>
          </Col>
        </Row>
        <Row>
@ -410,6 +413,7 @@ class PropertiesModal extends React.PureComponent {
            <ColorSchemeControlWrapper
              onChange={this.onColorSchemeChange}
              colorScheme={values.colorScheme}
+              labelMargin={8}
            />
          </Col>
        </Row>
@ -453,7 +457,11 @@ class PropertiesModal extends React.PureComponent {
        }
        responsive
      >
-        <form data-test="dashboard-edit-properties-form" onSubmit={this.submit}>
+        <Form
+          data-test="dashboard-edit-properties-form"
+          onSubmit={this.submit}
+          layout="vertical"
+        >
          <Row>
            <Col xs={24} md={24}>
              <h3>{t('Basic information')}</h3>
@ -461,30 +469,30 @@ class PropertiesModal extends React.PureComponent {
          </Row>
          <Row gutter={16}>
            <Col xs={24} md={12}>
-              <FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
-              <FormControl
-                data-test="dashboard-title-input"
-                name="dashboard_title"
-                type="text"
-                bsSize="sm"
-                value={values.dashboard_title}
-                onChange={this.onChange}
-                disabled={!isDashboardLoaded}
-              />
+              <FormItem label={t('Title')}>
+                <Input
+                  data-test="dashboard-title-input"
+                  name="dashboard_title"
+                  type="text"
+                  value={values.dashboard_title}
+                  onChange={this.onChange}
+                  disabled={!isDashboardLoaded}
+                />
+              </FormItem>
            </Col>
            <Col xs={24} md={12}>
-              <FormLabel htmlFor="embed-height">{t('URL slug')}</FormLabel>
-              <FormControl
-                name="slug"
-                type="text"
-                bsSize="sm"
-                value={values.slug || ''}
-                onChange={this.onChange}
-                disabled={!isDashboardLoaded}
-              />
-              <p className="help-block">
-                {t('A readable URL for your dashboard')}
-              </p>
+              <FormItem label={t('URL slug')}>
+                <Input
+                  name="slug"
+                  type="text"
+                  value={values.slug || ''}
+                  onChange={this.onChange}
+                  disabled={!isDashboardLoaded}
+                />
+                <p className="help-block">
+                  {t('A readable URL for your dashboard')}
+                </p>
+              </FormItem>
            </Col>
          </Row>
          {isFeatureEnabled(FeatureFlag.DASHBOARD_RBAC)
@ -504,10 +512,7 @@ class PropertiesModal extends React.PureComponent {
                </Button>
              </h3>
              {isAdvancedOpen && (
-                <>
-                  <FormLabel htmlFor="json_metadata">
-                    {t('JSON metadata')}
-                  </FormLabel>
+                <FormItem label={t('JSON metadata')}>
                  <StyledJsonEditor
                    showLoadingForImport
                    name="json_metadata"
@ -524,11 +529,11 @@ class PropertiesModal extends React.PureComponent {
                      'This JSON object is generated dynamically when clicking the save or overwrite button in the dashboard view. It is exposed here for reference and for power users who may want to alter specific parameters.',
                    )}
                  </p>
-                </>
+                </FormItem>
              )}
            </Col>
          </Row>
-        </form>
+        </Form>
      </Modal>
    );
  }
--- a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
@ -23,7 +23,7 @@ import Alert from 'src/components/Alert';
 import Button from 'src/components/Button';

 import ModalTrigger from 'src/components/ModalTrigger';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';

 export const options = [
  [0, t("Don't refresh")],
--- a/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx
@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';

 const propTypes = {
  label: PropTypes.string.isRequired,
--- a/superset-frontend/src/explore/components/ControlHeader.jsx
+++ b/superset-frontend/src/explore/components/ControlHeader.jsx
@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/components/Tooltip';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';

 const propTypes = {
  name: PropTypes.string,
@ -85,7 +85,7 @@ export default class ControlHeader extends React.Component {
    return (
      <div className="ControlHeader" data-test={`${this.props.name}-header`}>
        <div className="pull-left">
-          <FormLabel>
+          <FormLabel css={{ marginBottom: 0 }}>
            {this.props.leftNode && <span>{this.props.leftNode}</span>}
            <span
              role="button"
--- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { t } from '@superset-ui/core';

 import Popover from 'src/components/Popover';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import Icon from 'src/components/Icon';
 import { Tooltip } from 'src/components/Tooltip';
 import CopyToClipboard from 'src/components/CopyToClipboard';
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@ -26,7 +26,7 @@ import { AsyncSelect } from 'src/components/Select';
 import rison from 'rison';
 import { t, SupersetClient } from '@superset-ui/core';
 import Chart, { Slice } from 'src/types/Chart';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';

 type PropertiesModalProps = {
--- a/superset-frontend/src/explore/components/SaveModal.tsx
+++ b/superset-frontend/src/explore/components/SaveModal.tsx
@ -18,14 +18,14 @@
 */
 /* eslint camelcase: 0 */
 import React from 'react';
-import { FormControl, FormGroup } from 'react-bootstrap';
+import { Input } from 'src/common/components';
+import { Form, FormItem } from 'src/components/Form';
 import Alert from 'src/components/Alert';
 import { JsonObject, t, styled } from '@superset-ui/core';
 import ReactMarkdown from 'react-markdown';
 import Modal from 'src/components/Modal';
 import { Radio } from 'src/components/Radio';
 import Button from 'src/components/Button';
-import FormLabel from 'src/components/FormLabel';
 import { CreatableSelect } from 'src/components/Select';
 import { connect } from 'react-redux';

@ -101,9 +101,7 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
    });
  }

-  onSliceNameChange(
-    event: React.FormEvent<FormControl> & { target: HTMLInputElement },
-  ) {
+  onSliceNameChange(event: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ newSliceName: event.target.value });
  }

@ -205,7 +203,7 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
          </div>
        }
      >
-        <div data-test="save-modal-body">
+        <Form data-test="save-modal-body" layout="vertical">
          {(this.state.alert || this.props.alert) && (
            <Alert
              type="warning"
@ -224,7 +222,7 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
              }
            />
          )}
-          <FormGroup data-test="radio-group">
+          <FormItem data-test="radio-group">
            <Radio
              id="overwrite-radio"
              disabled={!(this.props.can_overwrite && this.props.slice)}
@ -243,22 +241,22 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
              {' '}
              {t('Save as ...')} &nbsp;
            </Radio>
-          </FormGroup>
+          </FormItem>
          <hr />
-          <FormGroup>
-            <FormLabel required>{t('Chart name')}</FormLabel>
-            <FormControl
+          <FormItem label={t('Chart name')} required>
+            <Input
              name="new_slice_name"
              type="text"
-              bsSize="sm"
              placeholder="Name"
              value={this.state.newSliceName}
              onChange={this.onSliceNameChange}
              data-test="new-chart-name"
            />
-          </FormGroup>
-          <FormGroup data-test="save-chart-modal-select-dashboard-form">
-            <FormLabel>{t('Add to dashboard')}</FormLabel>
+          </FormItem>
+          <FormItem
+            label={t('Add to dashboard')}
+            data-test="save-chart-modal-select-dashboard-form"
+          >
            <CreatableSelect
              id="dashboard-creatable-select"
              className="save-modal-selector"
@ -277,8 +275,8 @@ class SaveModal extends React.Component<SaveModalProps, SaveModalState> {
                />
              }
            />
-          </FormGroup>
-        </div>
+          </FormItem>
+        </Form>
      </StyledModal>
    );
  }
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl.jsx
@ -28,6 +28,7 @@ import './ColorSchemeControl.less';
 const propTypes = {
  description: PropTypes.string,
  label: PropTypes.string.isRequired,
+  labelMargin: PropTypes.number,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func,
  value: PropTypes.string,
@ -92,7 +93,7 @@ export default class ColorSchemeControl extends React.PureComponent {
  }

  render() {
-    const { schemes, choices } = this.props;
+    const { schemes, choices, labelMargin = 0 } = this.props;
    // save parsed schemes for later
    this.schemes = isFunction(schemes) ? schemes() : schemes;
    const options = (isFunction(choices) ? choices() : choices).map(
@ -118,7 +119,7 @@ export default class ColorSchemeControl extends React.PureComponent {
    return (
      <div>
        <ControlHeader {...this.props} />
-        <Select {...selectProps} />
+        <Select {...selectProps} css={{ marginTop: labelMargin }} />
      </div>
    );
  }
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
@ -25,7 +25,7 @@ import Button from 'src/components/Button';
 import { NativeSelect as Select } from 'src/components/Select';
 import { t, styled } from '@superset-ui/core';

-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import { noOp } from 'src/utils/common';
--- a/superset-frontend/src/explore/components/controls/ViewportControl.jsx
+++ b/superset-frontend/src/explore/components/controls/ViewportControl.jsx
@ -22,7 +22,7 @@ import Popover from 'src/components/Popover';
 import { decimal2sexagesimal } from 'geolib';

 import Label from 'src/components/Label';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import TextControl from './TextControl';
 import ControlHeader from '../ControlHeader';

--- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@ -29,7 +29,7 @@ import {
  BOOL_TRUE_DISPLAY,
  SLOW_DEBOUNCE,
 } from 'src/constants';
-import FormLabel from 'src/components/FormLabel';
+import { FormLabel } from 'src/components/Form';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
 import ControlRow from 'src/explore/components/ControlRow';
 import Control from 'src/explore/components/Control';