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

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

@@ -18,8 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'src/common/components';
-import { FormGroup, FormControl } from 'react-bootstrap';
+import { Row, Col, Input } from 'src/common/components';
 import { t } from '@superset-ui/core';
 import ControlHeader from '../ControlHeader';
 
@@ -87,28 +86,26 @@ export default class BoundsControl extends React.Component {
     return (
       <div>
         <ControlHeader {...this.props} />
-        <FormGroup bsSize="small">
-          <Row gutter={16}>
-            <Col xs={12}>
-              <FormControl
-                data-test="min-bound"
-                type="text"
-                placeholder={t('Min')}
-                onChange={this.onMinChange}
-                value={this.state.minMax[0]}
-              />
-            </Col>
-            <Col xs={12}>
-              <FormControl
-                type="text"
-                data-test="max-bound"
-                placeholder={t('Max')}
-                onChange={this.onMaxChange}
-                value={this.state.minMax[1]}
-              />
-            </Col>
-          </Row>
-        </FormGroup>
+        <Row gutter={16}>
+          <Col xs={12}>
+            <Input
+              data-test="min-bound"
+              type="text"
+              placeholder={t('Min')}
+              onChange={this.onMinChange}
+              value={this.state.minMax[0]}
+            />
+          </Col>
+          <Col xs={12}>
+            <Input
+              type="text"
+              data-test="max-bound"
+              placeholder={t('Max')}
+              onChange={this.onMaxChange}
+              value={this.state.minMax[1]}
+            />
+          </Col>
+        </Row>
       </div>
     );
   }

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx

@@ -170,7 +170,7 @@ test('Should switch to tab:Custom SQL', () => {
   ).toBeInTheDocument();
 });
 
-test('Should render "Custom SQL" tab correctly', () => {
+test('Should render "Custom SQL" tab correctly', async () => {
   const props = createProps();
   props.getCurrentTab.mockImplementation(tab => {
     props.adhocMetric.expressionType = tab;
@@ -180,5 +180,5 @@ test('Should render "Custom SQL" tab correctly', () => {
   const tab = screen.getByRole('tab', { name: 'Custom SQL' }).parentElement!;
   userEvent.click(tab);
 
-  expect(screen.getByTestId('sql-editor')).toBeVisible();
+  expect(await screen.findByRole('textbox')).toBeInTheDocument();
 });

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx

@@ -19,13 +19,12 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup } from 'react-bootstrap';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { NativeSelect as Select } from 'src/components/Select';
 import { t, styled } from '@superset-ui/core';
 
-import { FormLabel } from 'src/components/Form';
+import { Form, FormItem } from 'src/components/Form';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import { noOp } from 'src/utils/common';
@@ -337,7 +336,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
         savedMetric?.metric_name !== propsSavedMetric?.metric_name);
 
     return (
-      <div
+      <Form
+        layout="vertical"
         id="metrics-edit-popover"
         data-test="metrics-edit-popover"
         {...popoverProps}
@@ -352,10 +352,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
           allowOverflow
         >
           <Tabs.TabPane key={SAVED_TAB_KEY} tab={t('Saved')}>
-            <FormGroup>
-              <FormLabel>
-                <strong>{t('Saved metric')}</strong>
-              </FormLabel>
+            <FormItem label={t('Saved metric')}>
               <StyledSelect
                 {...savedSelectProps}
                 name="select-saved"
@@ -374,13 +371,10 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                     </Select.Option>
                   ))}
               </StyledSelect>
-            </FormGroup>
+            </FormItem>
           </Tabs.TabPane>
           <Tabs.TabPane key={EXPRESSION_TYPES.SIMPLE} tab={t('Simple')}>
-            <FormGroup>
-              <FormLabel>
-                <strong>{t('column')}</strong>
-              </FormLabel>
+            <FormItem label={t('column')}>
               <Select
                 {...columnSelectProps}
                 name="select-column"
@@ -396,11 +390,8 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                   </Select.Option>
                 ))}
               </Select>
-            </FormGroup>
-            <FormGroup>
-              <FormLabel>
-                <strong>{t('aggregate')}</strong>
-              </FormLabel>
+            </FormItem>
+            <FormItem label={t('aggregate')}>
               <Select
                 {...aggregateSelectProps}
                 name="select-aggregate"
@@ -412,7 +403,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                   </Select.Option>
                 ))}
               </Select>
-            </FormGroup>
+            </FormItem>
           </Tabs.TabPane>
           <Tabs.TabPane
             key={EXPRESSION_TYPES.SQL}
@@ -420,24 +411,23 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
             data-test="adhoc-metric-edit-tab#custom"
           >
             {this.props.datasourceType !== 'druid' ? (
-              <FormGroup data-test="sql-editor">
-                <SQLEditor
-                  showLoadingForImport
-                  ref={this.handleAceEditorRef}
-                  keywords={keywords}
-                  height={`${this.state.height - 80}px`}
-                  onChange={this.onSqlExpressionChange}
-                  width="100%"
-                  showGutter={false}
-                  value={
-                    adhocMetric.sqlExpression || adhocMetric.translateToSql()
-                  }
-                  editorProps={{ $blockScrolling: true }}
-                  enableLiveAutocompletion
-                  className="filter-sql-editor"
-                  wrapEnabled
-                />
-              </FormGroup>
+              <SQLEditor
+                data-test="sql-editor"
+                showLoadingForImport
+                ref={this.handleAceEditorRef}
+                keywords={keywords}
+                height={`${this.state.height - 80}px`}
+                onChange={this.onSqlExpressionChange}
+                width="100%"
+                showGutter={false}
+                value={
+                  adhocMetric.sqlExpression || adhocMetric.translateToSql()
+                }
+                editorProps={{ $blockScrolling: true }}
+                enableLiveAutocompletion
+                className="adhoc-filter-sql-editor"
+                wrapEnabled
+              />
             ) : (
               <div className="custom-sql-disabled-message">
                 Custom SQL Metrics are not available on druid datasources
@@ -474,7 +464,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
             className="fa fa-expand edit-popover-resize text-muted"
           />
         </div>
-      </div>
+      </Form>
     );
   }
 }

superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx

@@ -18,11 +18,10 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'src/common/components';
-import { FormControl } from 'react-bootstrap';
+import { Row, Col, Input } from 'src/common/components';
 import Popover from 'src/components/Popover';
 import Select from 'src/components/Select';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
 import BoundsControl from '../BoundsControl';
@@ -75,6 +74,20 @@ const colTypeOptions = [
   { value: 'avg', label: 'Period average' },
 ];
 
+const StyledRow = styled(Row)`
+  margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
+const StyledCol = styled(Col)`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledTooltip = styled(InfoTooltipWithTrigger)`
+  margin-left: ${({ theme }) => theme.gridUnit}px;
+  color: ${({ theme }) => theme.colors.grayscale.light1};
+`;
+
 export default class TimeSeriesColumnControl extends React.Component {
   constructor(props) {
     super(props);
@@ -128,19 +141,15 @@ export default class TimeSeriesColumnControl extends React.Component {
 
   formRow(label, tooltip, ttLabel, control) {
     return (
-      <Row style={{ marginTop: '5px' }}>
-        <Col xs={24} md={10}>
-          {`${label} `}
-          <InfoTooltipWithTrigger
-            placement="top"
-            tooltip={tooltip}
-            label={ttLabel}
-          />
-        </Col>
-        <Col xs={24} md={14}>
+      <StyledRow>
+        <StyledCol xs={24} md={10}>
+          {label}
+          <StyledTooltip placement="top" tooltip={tooltip} label={ttLabel} />
+        </StyledCol>
+        <StyledCol xs={24} md={14}>
           {control}
-        </Col>
-      </Row>
+        </StyledCol>
+      </StyledRow>
     );
   }
 
@@ -151,10 +160,9 @@ export default class TimeSeriesColumnControl extends React.Component {
           'Label',
           'The column header label',
           'time-lag',
-          <FormControl
+          <Input
             value={this.state.label}
             onChange={this.onTextInputChange.bind(this, 'label')}
-            bsSize="small"
             placeholder="Label"
           />,
         )}
@@ -162,10 +170,9 @@ export default class TimeSeriesColumnControl extends React.Component {
           'Tooltip',
           'Column header tooltip',
           'col-tooltip',
-          <FormControl
+          <Input
             value={this.state.tooltip}
             onChange={this.onTextInputChange.bind(this, 'tooltip')}
-            bsSize="small"
             placeholder="Tooltip"
           />,
         )}
@@ -186,10 +193,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Width',
             'Width of the sparkline',
             'spark-width',
-            <FormControl
+            <Input
               value={this.state.width}
               onChange={this.onTextInputChange.bind(this, 'width')}
-              bsSize="small"
               placeholder="Width"
             />,
           )}
@@ -198,10 +204,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Height',
             'Height of the sparkline',
             'spark-width',
-            <FormControl
+            <Input
               value={this.state.height}
               onChange={this.onTextInputChange.bind(this, 'height')}
-              bsSize="small"
               placeholder="Height"
             />,
           )}
@@ -210,10 +215,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Time lag',
             'Number of periods to compare against',
             'time-lag',
-            <FormControl
+            <Input
               value={this.state.timeLag}
               onChange={this.onTextInputChange.bind(this, 'timeLag')}
-              bsSize="small"
               placeholder="Time Lag"
             />,
           )}
@@ -222,10 +226,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Time ratio',
             'Number of periods to ratio against',
             'time-ratio',
-            <FormControl
+            <Input
               value={this.state.timeRatio}
               onChange={this.onTextInputChange.bind(this, 'timeRatio')}
-              bsSize="small"
               placeholder="Time Ratio"
             />,
           )}
@@ -277,10 +280,9 @@ export default class TimeSeriesColumnControl extends React.Component {
           'Number format',
           'Optional d3 number format string',
           'd3-format',
-          <FormControl
+          <Input
             value={this.state.d3format}
             onChange={this.onTextInputChange.bind(this, 'd3format')}
-            bsSize="small"
             placeholder="Number format string"
           />,
         )}
@@ -289,10 +291,9 @@ export default class TimeSeriesColumnControl extends React.Component {
             'Date format',
             'Optional d3 date format string',
             'date-format',
-            <FormControl
+            <Input
               value={this.state.dateFormat}
               onChange={this.onTextInputChange.bind(this, 'dateFormat')}
-              bsSize="small"
               placeholder="Date format string"
             />,
           )}