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

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>

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"

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,12 +188,14 @@ 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
@@ -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>
-            <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>

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