refactor: Bootstrap to AntD - Form - iteration 2

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

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 = {

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);

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 = {

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';
 

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';
 

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;

superset-frontend/src/components/FormLabel/index.tsx → superset-frontend/src/components/Form/Form.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} />;
 }

superset-frontend/src/components/FormLabel/FormLabel.test.tsx → superset-frontend/src/components/Form/FormItem.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} />;
+}

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>
+  );
+}

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 };

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';

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}