refactor: Bootstrap to AntD - Form - iteration 3 (#14502)

apache · May 8, 2021 · 79ff962 · 79ff962
1 parent 4f000cc
commit 79ff962
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 179 deletions.
diff --git a/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx b/superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { FormGroup } from 'react-bootstrap';
+import { FormItem } from 'src/components/Form';
 import Button from 'src/components/Button';
 
 import { AGGREGATES } from 'src/explore/constants';
@@ -67,7 +67,7 @@ function setup(overrides) {
 describe('AdhocMetricEditPopover', () => {
   it('renders a popover with edit metric form contents', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(FormGroup)).toHaveLength(4);
+    expect(wrapper.find(FormItem)).toHaveLength(3);
     expect(wrapper.find(Button)).toHaveLength(2);
   });
 

diff --git a/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx b/superset-frontend/spec/javascripts/explore/components/BoundsControl_spec.jsx
@@ -17,10 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { FormControl } from 'react-bootstrap';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
 import BoundsControl from 'src/explore/components/controls/BoundsControl';
+import { Input } from 'src/common/components';
 
 const defaultProps = {
   name: 'y_axis_bounds',
@@ -35,13 +35,13 @@ describe('BoundsControl', () => {
     wrapper = mount(<BoundsControl {...defaultProps} />);
   });
 
-  it('renders two FormControls', () => {
-    expect(wrapper.find(FormControl)).toHaveLength(2);
+  it('renders two Input', () => {
+    expect(wrapper.find(Input)).toHaveLength(2);
   });
 
   it('errors on non-numeric', () => {
     wrapper
-      .find(FormControl)
+      .find(Input)
       .first()
       .simulate('change', { target: { value: 's' } });
     expect(defaultProps.onChange.calledWith([null, null])).toBe(true);
@@ -51,11 +51,11 @@ describe('BoundsControl', () => {
   });
   it('casts to numeric', () => {
     wrapper
-      .find(FormControl)
+      .find(Input)
       .first()
       .simulate('change', { target: { value: '1' } });
     wrapper
-      .find(FormControl)
+      .find(Input)
       .last()
       .simulate('change', { target: { value: '5' } });
     expect(defaultProps.onChange.calledWith([1, 5])).toBe(true);

diff --git a/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SaveQuery_spec.jsx
@@ -17,12 +17,12 @@
  * under the License.
  */
 import React from 'react';
-import { FormControl } from 'react-bootstrap';
 import { shallow } from 'enzyme';
 import * as sinon from 'sinon';
 import SaveQuery from 'src/SqlLab/components/SaveQuery';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
+import { FormItem } from 'src/components/Form';
 
 describe('SavedQuery', () => {
   const mockedProps = {
@@ -52,11 +52,11 @@ describe('SavedQuery', () => {
 
     expect(modal.find('[data-test="cancel-query"]')).toHaveLength(1);
   });
-  it('has 2 FormControls', () => {
+  it('has 2 FormItem', () => {
     const wrapper = shallow(<SaveQuery {...mockedProps} />);
     const modal = wrapper.find(Modal);
 
-    expect(modal.find(FormControl)).toHaveLength(2);
+    expect(modal.find(FormItem)).toHaveLength(2);
   });
   // eslint-disable-next-line jest/no-disabled-tests
   it.skip('has a save button if this is a new query', () => {

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -17,12 +17,10 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { Row, Col } from 'src/common/components';
-import { FormControl, FormGroup } from 'react-bootstrap';
+import { Row, Col, Input, TextArea } from 'src/common/components';
 import { t, supersetTheme, styled } from '@superset-ui/core';
-
 import Button from 'src/components/Button';
-import { FormLabel } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
 import Modal from 'src/components/Modal';
 import Icon from 'src/components/Icon';
 
@@ -100,40 +98,37 @@ export default function SaveQuery({
     close();
   };
 
-  const onLabelChange = (e: React.FormEvent<FormControl>) => {
-    setLabel((e.target as HTMLInputElement).value);
+  const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLabel(e.target.value);
   };
 
-  const onDescriptionChange = (e: React.FormEvent<FormControl>) => {
-    setDescription((e.target as HTMLInputElement).value);
+  const onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(e.target.value);
   };
 
   const toggleSave = () => {
     setShowSave(!showSave);
   };
 
   const renderModalBody = () => (
-    <FormGroup bsSize="small">
+    <Form layout="vertical">
       <Row>
         <Col xs={24}>
-          <small>
-            <FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
-          </small>
-          <FormControl type="text" value={label} onChange={onLabelChange} />
+          <FormItem label={t('Name')}>
+            <Input type="text" value={label} onChange={onLabelChange} />
+          </FormItem>
         </Col>
       </Row>
       <br />
       <Row>
         <Col xs={24}>
-          <small>
-            <FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
-          </small>
-          <FormControl
-            rows={5}
-            componentClass="textarea"
-            value={description}
-            onChange={onDescriptionChange}
-          />
+          <FormItem label={t('Description')}>
+            <TextArea
+              rows={4}
+              value={description}
+              onChange={onDescriptionChange}
+            />
+          </FormItem>
         </Col>
       </Row>
       {saveQueryWarning && (
@@ -149,7 +144,7 @@ export default function SaveQuery({
           </div>
         </>
       )}
-    </FormGroup>
+    </Form>
   );
 
   return (

diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
@@ -17,13 +17,12 @@
  * under the License.
  */
 import React, { FunctionComponent, useState } from 'react';
-import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
-import { Row, Col } from 'src/common/components';
-import { FormControl, FormGroup } from 'react-bootstrap';
+import SchemaForm, { FormProps, FormValidation } from 'react-jsonschema-form';
+import { Row, Col, Input, TextArea } from 'src/common/components';
 import { t, styled } from '@superset-ui/core';
 import * as chrono from 'chrono-node';
 import ModalTrigger from 'src/components/ModalTrigger';
-import { FormLabel } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
 import './ScheduleQueryButton.less';
 import Button from 'src/components/Button';
 
@@ -139,42 +138,52 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
   };
 
   const renderModalBody = () => (
-    <FormGroup>
+    <Form layout="vertical">
       <StyledRow>
         <Col xs={24}>
-          <FormLabel className="control-label" htmlFor="embed-height">
-            {t('Label')}
-          </FormLabel>
-          <FormControl
-            type="text"
-            placeholder={t('Label for your query')}
-            value={label}
-            onChange={(event: any) => setLabel(event.target?.value)}
-          />
+          <FormItem label={t('Label')}>
+            <Input
+              type="text"
+              placeholder={t('Label for your query')}
+              value={label}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setLabel(event.target.value)
+              }
+            />
+          </FormItem>
         </Col>
       </StyledRow>
       <StyledRow>
         <Col xs={24}>
-          <FormLabel className="control-label" htmlFor="embed-height">
-            {t('Description')}
-          </FormLabel>
-          <FormControl
-            componentClass="textarea"
-            placeholder={t('Write a description for your query')}
-            value={description}
-            onChange={(event: any) => setDescription(event.target?.value)}
-          />
+          <FormItem label={t('Description')}>
+            <TextArea
+              rows={4}
+              placeholder={t('Write a description for your query')}
+              value={description}
+              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setDescription(event.target.value)
+              }
+            />
+          </FormItem>
         </Col>
       </StyledRow>
       <Row>
         <Col xs={24}>
           <div className="json-schema">
-            <Form
+            <SchemaForm
               schema={getJSONSchema()}
               uiSchema={getUISchema}
               onSubmit={onScheduleSubmit}
               validate={getValidator()}
-            />
+            >
+              <Button
+                buttonStyle="primary"
+                htmlType="submit"
+                css={{ float: 'right' }}
+              >
+                Submit
+              </Button>
+            </SchemaForm>
           </div>
         </Col>
       </Row>
@@ -185,7 +194,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
           </Col>
         </Row>
       )}
-    </FormGroup>
+    </Form>
   );
 
   return (

diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -89,11 +89,13 @@ export const Menu = Object.assign(AntdMenu, {
 });
 
 export const Input = styled(AntdInput)`
-  &[type='text'],
-  &[type='textarea'] {
-    border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
-    border-radius: ${({ theme }) => theme.borderRadius}px;
-  }
+  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+`;
+
+export const TextArea = styled(AntdInput.TextArea)`
+  border: 1px solid ${({ theme }) => theme.colors.secondary.light3};
+  border-radius: ${({ theme }) => theme.borderRadius}px;
 `;
 
 export const NoAnimationDropdown = (props: DropDownProps) => (

diff --git a/superset-frontend/src/components/Form/FormItem.tsx b/superset-frontend/src/components/Form/FormItem.tsx
@@ -21,23 +21,28 @@ import Form, { FormItemProps } from 'antd/lib/form';
 import { styled } from '@superset-ui/core';
 
 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};
+  ${({ theme }) => `
+    .ant-form-item-label {
+      padding-bottom: ${theme.gridUnit}px;
+      & > label {
+        text-transform: uppercase;
+        font-size: ${theme.typography.sizes.s}px;
+        color: ${theme.colors.grayscale.base};
 
-    &.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: '*';
+        &.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
+          &::before {
+            display: none;
+          }
+          &::after {
+            display: inline-block;
+            color: ${theme.colors.error.base};
+            font-size: ${theme.typography.sizes.m}px;
+            content: '*';
+          }
+        }
       }
     }
-  }
+  `}
 `;
 
 export default function FormItem(props: FormItemProps) {

diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
@@ -350,7 +350,7 @@ class PropertiesModal extends React.PureComponent {
           <ColorSchemeControlWrapper
             onChange={this.onColorSchemeChange}
             colorScheme={values.colorScheme}
-            labelMargin={8}
+            labelMargin={4}
           />
         </Col>
       </Row>
@@ -413,7 +413,7 @@ class PropertiesModal extends React.PureComponent {
             <ColorSchemeControlWrapper
               onChange={this.onColorSchemeChange}
               colorScheme={values.colorScheme}
-              labelMargin={8}
+              labelMargin={4}
             />
           </Col>
         </Row>

diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -18,10 +18,9 @@
  */
 import React, { useMemo } from 'react';
 import { styled, t } from '@superset-ui/core';
-import { FormControl } from 'react-bootstrap';
 import { Column } from 'react-table';
 import debounce from 'lodash/debounce';
-
+import { Input } from 'src/common/components';
 import {
   BOOL_FALSE_DISPLAY,
   BOOL_TRUE_DISPLAY,
@@ -73,9 +72,8 @@ export const FilterInput = ({
 }) => {
   const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
   return (
-    <FormControl
+    <Input
       placeholder={t('Search')}
-      bsSize="sm"
       onChange={(event: any) => {
         const filterText = event.target.value;
         debouncedChangeHandler(filterText);