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

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

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>

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>

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

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}>
+      <Row style={STYLE_ROW} gutter={16}>
-        <Col md={4} style={STYLE_RALIGN}>
+        <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}>
+    <Row style={STYLE_ROW} gutter={16}>
-      <Col md={4} style={STYLE_RALIGN}>
+      <Col xs={24} md={8} style={STYLE_RALIGN}>
         {labelAndTooltip}
       </Col>
-      <Col md={8}>{control}</Col>
+      <Col xs={24} md={16}>
+        {control}
+      </Col>
     </Row>
   );
 }

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>
+      <Row gutter={16}>
-        <Col md={6}>
+        <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>
+        <Row gutter={16}>
-          <Col md={6}>
+          <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>
+          <Row gutter={16}>
-            <Col md={6}>
+            <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

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>
+        <Row gutter={16}>
-          <Col md={6}>
+          <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>

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>
+          <Row gutter={16}>
-            <Col xs={6}>
+            <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"

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>
+          <Row gutter={16}>
-            <Col md={6}>
+            <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,12 +188,14 @@ export default class SpatialControl extends React.Component {
           isSelected={this.state.type === spatialTypes.delimited}
           onSelect={this.setType.bind(this, spatialTypes.delimited)}
         >
-          <Row>
+          <Row gutter={16}>
-            <Col md={6}>
+            <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
@@ -201,12 +203,14 @@ export default class SpatialControl extends React.Component {
           isSelected={this.state.type === spatialTypes.geohash}
           onSelect={this.setType.bind(this, spatialTypes.geohash)}
         >
-          <Row>
+          <Row gutter={16}>
-            <Col md={6}>
+            <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>

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,7 +129,7 @@ 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"
@@ -136,7 +137,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             label={ttLabel}
           />
         </Col>
-        <Col md={7}>{control}</Col>
+        <Col xs={24} md={14}>
+          {control}
+        </Col>
       </Row>
     );
   }

superset-frontend/src/explore/components/controls/VizTypeControl.jsx

@@ -18,7 +18,8 @@
  */
 import React, { useEffect, useRef, useState } 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 { Behavior, t, getChartMetadataRegistry } from '@superset-ui/core';
 import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
 import Modal from 'src/components/Modal';
@@ -44,7 +45,6 @@ const defaultProps = {
 
 const registry = getChartMetadataRegistry();
 
-const IMAGE_PER_ROW = 6;
 const DEFAULT_ORDER = [
   'line',
   'big_number',
@@ -190,19 +190,6 @@ const VizTypeControl = props => {
     )
     .filter(entry => entry.value.name.toLowerCase().includes(filterString));
 
-  const rows = [];
-  for (let i = 0; i <= filteredTypes.length; i += IMAGE_PER_ROW) {
-    rows.push(
-      <Row data-test="viz-row" key={`row-${i}`}>
-        {filteredTypes.slice(i, i + IMAGE_PER_ROW).map(entry => (
-          <Col md={12 / IMAGE_PER_ROW} key={`grid-col-${entry.key}`}>
-            {renderItem(entry)}
-          </Col>
-        ))}
-      </Row>,
-    );
-  }
-
   return (
     <div>
       <ControlHeader {...props} />
@@ -242,7 +229,13 @@ const VizTypeControl = props => {
             onChange={changeSearch}
           />
         </div>
-        {rows}
+        <Row data-test="viz-row" gutter={16}>
+          {filteredTypes.map(entry => (
+            <Col xs={12} sm={8} md={6} lg={4} key={`grid-col-${entry.key}`}>
+              {renderItem(entry)}
+            </Col>
+          ))}
+        </Row>
       </Modal>
     </div>
   );

superset-frontend/src/profile/components/App.tsx

@@ -17,16 +17,16 @@
  * under the License.
  */
 import React from 'react';
-import { Col, Row, Panel } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
+import { Panel } from 'react-bootstrap';
 import Tabs from 'src/common/components/Tabs';
 import { t } from '@superset-ui/core';
-
+import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
 import Favorites from './Favorites';
 import UserInfo from './UserInfo';
 import Security from './Security';
 import RecentActivity from './RecentActivity';
 import CreatedContent from './CreatedContent';
-import { UserWithPermissionsAndRoles } from '../../types/bootstrapTypes';
 
 interface AppProps {
   user: UserWithPermissionsAndRoles;
@@ -35,11 +35,11 @@ interface AppProps {
 export default function App({ user }: AppProps) {
   return (
     <div className="container app">
-      <Row>
+      <Row gutter={16}>
-        <Col md={3}>
+        <Col xs={24} md={6}>
           <UserInfo user={user} />
         </Col>
-        <Col md={9}>
+        <Col xs={24} md={18}>
           <Tabs centered>
             <Tabs.TabPane
               key="1"