refactor: Boostrap to AntD - Row/Col (#14100)

apache · Apr 23, 2021 · b963624 · b963624
1 parent 01de309
commit b963624
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 81 deletions.
diff --git a/superset-frontend/spec/javascripts/profile/App_spec.tsx b/superset-frontend/spec/javascripts/profile/App_spec.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { Col, Row } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
 import { shallow } from 'enzyme';
 import App from 'src/profile/components/App';
 import Tabs from 'src/common/components/Tabs';

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { FormControl, FormGroup, Row, Col } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
+import { FormControl, FormGroup } from 'react-bootstrap';
 import { t, supersetTheme, styled } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
@@ -114,7 +115,7 @@ export default function SaveQuery({
   const renderModalBody = () => (
     <FormGroup bsSize="small">
       <Row>
-        <Col md={12}>
+        <Col xs={24}>
           <small>
             <FormLabel htmlFor="embed-height">{t('Name')}</FormLabel>
           </small>
@@ -123,7 +124,7 @@ export default function SaveQuery({
       </Row>
       <br />
       <Row>
-        <Col md={12}>
+        <Col xs={24}>
           <small>
             <FormLabel htmlFor="embed-height">{t('Description')}</FormLabel>
           </small>
@@ -140,7 +141,7 @@ export default function SaveQuery({
           <br />
           <div>
             <Row>
-              <Col md={12}>
+              <Col xs={24}>
                 <small>{saveQueryWarning}</small>
               </Col>
             </Row>

diff --git a/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx b/superset-frontend/src/SqlLab/components/ScheduleQueryButton.tsx
@@ -18,7 +18,8 @@
  */
 import React, { FunctionComponent, useState } from 'react';
 import Form, { FormProps, FormValidation } from 'react-jsonschema-form';
-import { Col, FormControl, FormGroup, Row } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
+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';
@@ -140,7 +141,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
   const renderModalBody = () => (
     <FormGroup>
       <StyledRow>
-        <Col md={12}>
+        <Col xs={24}>
           <FormLabel className="control-label" htmlFor="embed-height">
             {t('Label')}
           </FormLabel>
@@ -153,7 +154,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
         </Col>
       </StyledRow>
       <StyledRow>
-        <Col md={12}>
+        <Col xs={24}>
           <FormLabel className="control-label" htmlFor="embed-height">
             {t('Description')}
           </FormLabel>
@@ -166,7 +167,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
         </Col>
       </StyledRow>
       <Row>
-        <Col md={12}>
+        <Col xs={24}>
           <div className="json-schema">
             <Form
               schema={getJSONSchema()}
@@ -179,7 +180,7 @@ const ScheduleQueryButton: FunctionComponent<ScheduleQueryButtonProps> = ({
       </Row>
       {scheduleQueryWarning && (
         <Row>
-          <Col md={12}>
+          <Col xs={24}>
             <small>{scheduleQueryWarning}</small>
           </Col>
         </Row>

diff --git a/superset-frontend/src/components/FormRow/FormRow.test.jsx b/superset-frontend/src/components/FormRow/FormRow.test.jsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-import { Col, Row } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
 import TextControl from 'src/explore/components/controls/TextControl';
 import FormRow from 'src/components/FormRow';
 

diff --git a/superset-frontend/src/components/FormRow/index.jsx b/superset-frontend/src/components/FormRow/index.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
 
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
@@ -52,20 +52,24 @@ export default function FormRow({ label, tooltip, control, isCheckbox }) {
   );
   if (isCheckbox) {
     return (
-      <Row style={STYLE_ROW}>
-        <Col md={4} style={STYLE_RALIGN}>
+      <Row style={STYLE_ROW} gutter={16}>
+        <Col xs={24} md={8} style={STYLE_RALIGN}>
           {control}
         </Col>
-        <Col md={8}>{labelAndTooltip}</Col>
+        <Col xs={24} md={16}>
+          {labelAndTooltip}
+        </Col>
       </Row>
     );
   }
   return (
-    <Row style={STYLE_ROW}>
-      <Col md={4} style={STYLE_RALIGN}>
+    <Row style={STYLE_ROW} gutter={16}>
+      <Col xs={24} md={8} style={STYLE_RALIGN}>
         {labelAndTooltip}
       </Col>
-      <Col md={8}>{control}</Col>
+      <Col xs={24} md={16}>
+        {control}
+      </Col>
     </Row>
   );
 }

diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.jsx
@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, FormControl } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
+import { FormControl } from 'react-bootstrap';
 import jsonStringify from 'json-stringify-pretty-compact';
 import Button from 'src/components/Button';
 import { AsyncSelect } from 'src/components/Select';
@@ -323,8 +324,8 @@ class PropertiesModal extends React.PureComponent {
   getRowsWithoutRoles() {
     const { values, isDashboardLoaded } = this.state;
     return (
-      <Row>
-        <Col md={6}>
+      <Row gutter={16}>
+        <Col xs={24} md={12}>
           <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
           <FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
           <AsyncSelect
@@ -344,7 +345,7 @@ class PropertiesModal extends React.PureComponent {
             )}
           </p>
         </Col>
-        <Col md={6}>
+        <Col xs={24} md={12}>
           <h3 style={{ marginTop: '1em' }}>{t('Colors')}</h3>
           <ColorSchemeControlWrapper
             onChange={this.onColorSchemeChange}
@@ -360,12 +361,12 @@ class PropertiesModal extends React.PureComponent {
     return (
       <>
         <Row>
-          <Col md={12}>
+          <Col xs={24} md={24}>
             <h3 style={{ marginTop: '1em' }}>{t('Access')}</h3>
           </Col>
         </Row>
-        <Row>
-          <Col md={6}>
+        <Row gutter={16}>
+          <Col xs={24} md={12}>
             <FormLabel htmlFor="owners">{t('Owners')}</FormLabel>
             <AsyncSelect
               name="owners"
@@ -384,7 +385,7 @@ class PropertiesModal extends React.PureComponent {
               )}
             </p>
           </Col>
-          <Col md={6}>
+          <Col xs={24} md={12}>
             <FormLabel htmlFor="roles">{t('Roles')}</FormLabel>
             <AsyncSelect
               name="roles"
@@ -405,7 +406,7 @@ class PropertiesModal extends React.PureComponent {
           </Col>
         </Row>
         <Row>
-          <Col md={6}>
+          <Col xs={24} md={12}>
             <ColorSchemeControlWrapper
               onChange={this.onColorSchemeChange}
               colorScheme={values.colorScheme}
@@ -454,12 +455,12 @@ class PropertiesModal extends React.PureComponent {
       >
         <form data-test="dashboard-edit-properties-form" onSubmit={this.submit}>
           <Row>
-            <Col md={12}>
+            <Col xs={24} md={24}>
               <h3>{t('Basic information')}</h3>
             </Col>
           </Row>
-          <Row>
-            <Col md={6}>
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
               <FormLabel htmlFor="embed-height">{t('Title')}</FormLabel>
               <FormControl
                 data-test="dashboard-title-input"
@@ -471,7 +472,7 @@ class PropertiesModal extends React.PureComponent {
                 disabled={!isDashboardLoaded}
               />
             </Col>
-            <Col md={6}>
+            <Col xs={24} md={12}>
               <FormLabel htmlFor="embed-height">{t('URL slug')}</FormLabel>
               <FormControl
                 name="slug"
@@ -490,7 +491,7 @@ class PropertiesModal extends React.PureComponent {
             ? this.getRowsWithRoles()
             : this.getRowsWithoutRoles()}
           <Row>
-            <Col md={12}>
+            <Col xs={24} md={24}>
               <h3 style={{ marginTop: '1em' }}>
                 <Button buttonStyle="link" onClick={this.toggleAdvanced}>
                   <i

diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -17,14 +17,9 @@
  * under the License.
  */
 import React, { useState, useEffect, useCallback } from 'react';
-import {
-  Row,
-  Col,
-  FormControl,
-  FormGroup,
-  FormControlProps,
-} from 'react-bootstrap';
 import Modal from 'src/components/Modal';
+import { Row, Col } from 'src/common/components';
+import { FormControl, FormGroup, FormControlProps } from 'react-bootstrap';
 import Button from 'src/components/Button';
 import { OptionsType } from 'react-select/src/types';
 import { AsyncSelect } from 'src/components/Select';
@@ -192,8 +187,8 @@ export default function PropertiesModal({
       wrapProps={{ 'data-test': 'properties-edit-modal' }}
     >
       <form onSubmit={onSubmit}>
-        <Row>
-          <Col md={6}>
+        <Row gutter={16}>
+          <Col xs={24} md={12}>
             <h3>{t('Basic information')}</h3>
             <FormGroup>
               <FormLabel htmlFor="name" required>
@@ -232,7 +227,7 @@ export default function PropertiesModal({
               </p>
             </FormGroup>
           </Col>
-          <Col md={6}>
+          <Col xs={24} md={12}>
             <h3>{t('Configuration')}</h3>
             <FormGroup>
               <FormLabel htmlFor="cacheTimeout">{t('Cache timeout')}</FormLabel>

diff --git a/superset-frontend/src/explore/components/controls/BoundsControl.jsx b/superset-frontend/src/explore/components/controls/BoundsControl.jsx
@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col, Row, FormGroup, FormControl } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
+import { FormGroup, FormControl } from 'react-bootstrap';
 import { t } from '@superset-ui/core';
 import ControlHeader from '../ControlHeader';
 
@@ -87,8 +88,8 @@ export default class BoundsControl extends React.Component {
       <div>
         <ControlHeader {...this.props} />
         <FormGroup bsSize="small">
-          <Row>
-            <Col xs={6}>
+          <Row gutter={16}>
+            <Col xs={12}>
               <FormControl
                 data-test="min-bound"
                 type="text"
@@ -97,7 +98,7 @@ export default class BoundsControl extends React.Component {
                 value={this.state.minMax[0]}
               />
             </Col>
-            <Col xs={6}>
+            <Col xs={12}>
               <FormControl
                 type="text"
                 data-test="max-bound"

diff --git a/superset-frontend/src/explore/components/controls/SpatialControl.jsx b/superset-frontend/src/explore/components/controls/SpatialControl.jsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
 import { t } from '@superset-ui/core';
 
 import Label from 'src/components/Label';
@@ -168,12 +168,12 @@ export default class SpatialControl extends React.Component {
           isSelected={this.state.type === spatialTypes.latlong}
           onSelect={this.setType.bind(this, spatialTypes.latlong)}
         >
-          <Row>
-            <Col md={6}>
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
               Longitude
               {this.renderSelect('lonCol', spatialTypes.latlong)}
             </Col>
-            <Col md={6}>
+            <Col xs={24} md={12}>
               Latitude
               {this.renderSelect('latCol', spatialTypes.latlong)}
             </Col>
@@ -188,25 +188,29 @@ export default class SpatialControl extends React.Component {
           isSelected={this.state.type === spatialTypes.delimited}
           onSelect={this.setType.bind(this, spatialTypes.delimited)}
         >
-          <Row>
-            <Col md={6}>
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
               {t('Column')}
               {this.renderSelect('lonlatCol', spatialTypes.delimited)}
             </Col>
-            <Col md={6}>{this.renderReverseCheckbox()}</Col>
+            <Col xs={24} md={12}>
+              {this.renderReverseCheckbox()}
+            </Col>
           </Row>
         </PopoverSection>
         <PopoverSection
           title={t('Geohash')}
           isSelected={this.state.type === spatialTypes.geohash}
           onSelect={this.setType.bind(this, spatialTypes.geohash)}
         >
-          <Row>
-            <Col md={6}>
+          <Row gutter={16}>
+            <Col xs={24} md={12}>
               Column
               {this.renderSelect('geohashCol', spatialTypes.geohash)}
             </Col>
-            <Col md={6}>{this.renderReverseCheckbox()}</Col>
+            <Col xs={24} md={12}>
+              {this.renderReverseCheckbox()}
+            </Col>
           </Row>
         </PopoverSection>
       </div>

diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, FormControl } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
+import { FormControl } from 'react-bootstrap';
 import Popover from 'src/components/Popover';
 import Select from 'src/components/Select';
 import { t } from '@superset-ui/core';
@@ -128,15 +129,17 @@ export default class TimeSeriesColumnControl extends React.Component {
   formRow(label, tooltip, ttLabel, control) {
     return (
       <Row style={{ marginTop: '5px' }}>
-        <Col md={5}>
+        <Col xs={24} md={10}>
           {`${label} `}
           <InfoTooltipWithTrigger
             placement="top"
             tooltip={tooltip}
             label={ttLabel}
           />
         </Col>
-        <Col md={7}>{control}</Col>
+        <Col xs={24} md={14}>
+          {control}
+        </Col>
       </Row>
     );
   }