refactor: Bootstrap to AntD - Form - iteration 1 (#14106)

superset-frontend/spec/javascripts/explore/components/VizTypeControl_spec.jsx

@@ -22,6 +22,7 @@ import { shallow } from 'enzyme';
 import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/core';
 import VizTypeControl from 'src/explore/components/controls/VizTypeControl';
 import Modal from 'src/components/Modal';
+import { Input } from 'src/common/components';
 
 const defaultProps = {
   name: 'viz_type',
@@ -65,7 +66,7 @@ describe('VizTypeControl', () => {
   });
   it('filters images based on text input', () => {
     expect(wrapper.find('img')).toHaveLength(2);
-    wrapper.find('FormControl').simulate('change', {
+    wrapper.find(Input).simulate('change', {
       target: {
         value: 'vis2',
       },

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -23,7 +23,6 @@ import { CSSTransition } from 'react-transition-group';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
-import { Form } from 'react-bootstrap';
 import Split from 'react-split';
 import { t, styled, supersetTheme } from '@superset-ui/core';
 import debounce from 'lodash/debounce';
@@ -57,8 +56,14 @@ import {
   setActiveSouthPaneTab,
   updateSavedQuery,
   validateQuery,
-} from '../actions/sqlLab';
-
+} from 'src/SqlLab/actions/sqlLab';
+import {
+  STATE_TYPE_MAP,
+  SQL_EDITOR_GUTTER_HEIGHT,
+  SQL_EDITOR_GUTTER_MARGIN,
+  SQL_TOOLBAR_HEIGHT,
+} from 'src/SqlLab/constants';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import TemplateParamsEditor from './TemplateParamsEditor';
 import ConnectedSouthPane from './SouthPane/state';
 import SaveQuery from './SaveQuery';
@@ -67,14 +72,7 @@ import EstimateQueryCostButton from './EstimateQueryCostButton';
 import ShareSqlLabQuery from './ShareSqlLabQuery';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
-import {
-  STATE_TYPE_MAP,
-  SQL_EDITOR_GUTTER_HEIGHT,
-  SQL_EDITOR_GUTTER_MARGIN,
-  SQL_TOOLBAR_HEIGHT,
-} from '../constants';
 import RunQueryActionButton from './RunQueryActionButton';
-import { FeatureFlag, isFeatureEnabled } from '../../featureFlags';
 
 const LIMIT_DROPDOWN = [10, 100, 1000, 10000, 100000];
 const SQL_EDITOR_PADDING = 10;
@@ -114,7 +112,7 @@ const StyledToolbar = styled.div`
     margin-block-end: 0;
   }
 
-  .leftItems form,
+  .leftItems,
   .rightItems {
     display: flex;
     align-items: center;
@@ -599,62 +597,60 @@ class SqlEditor extends React.PureComponent {
     return (
       <StyledToolbar className="sql-toolbar" id="js-sql-toolbar">
         <div className="leftItems">
-          <Form inline>
-            <span>
-              <RunQueryActionButton
-                allowAsync={
-                  this.props.database
-                    ? this.props.database.allow_run_async
-                    : false
-                }
-                queryState={this.props.latestQuery?.state}
-                runQuery={this.runQuery}
-                selectedText={qe.selectedText}
-                stopQuery={this.stopQuery}
-                sql={this.state.sql}
-                overlayCreateAsMenu={showMenu ? runMenuBtn : null}
-              />
-            </span>
-            {isFeatureEnabled(FeatureFlag.ESTIMATE_QUERY_COST) &&
-              this.props.database &&
-              this.props.database.allows_cost_estimate && (
-                <span>
-                  <EstimateQueryCostButton
-                    dbId={qe.dbId}
-                    schema={qe.schema}
-                    sql={qe.sql}
-                    getEstimate={this.getQueryCostEstimate}
-                    queryCostEstimate={qe.queryCostEstimate}
-                    selectedText={qe.selectedText}
-                    tooltip={t('Estimate the cost before running a query')}
-                  />
-                </span>
-              )}
-            <span>
-              <LimitSelectStyled>
-                <Dropdown overlay={this.renderQueryLimit()} trigger="click">
-                  <a onClick={e => e.preventDefault()}>
-                    <span>LIMIT:</span>
-                    <span>
-                      {this.convertToNumWithSpaces(
-                        this.props.queryEditor.queryLimit ||
-                          this.props.defaultQueryLimit,
-                      )}
-                    </span>
-                    <Icon name="triangle-down" />
-                  </a>
-                </Dropdown>
-              </LimitSelectStyled>
-            </span>
-            {this.props.latestQuery && (
-              <Timer
-                startTime={this.props.latestQuery.startDttm}
-                endTime={this.props.latestQuery.endDttm}
-                state={STATE_TYPE_MAP[this.props.latestQuery.state]}
-                isRunning={this.props.latestQuery.state === 'running'}
-              />
+          <span>
+            <RunQueryActionButton
+              allowAsync={
+                this.props.database
+                  ? this.props.database.allow_run_async
+                  : false
+              }
+              queryState={this.props.latestQuery?.state}
+              runQuery={this.runQuery}
+              selectedText={qe.selectedText}
+              stopQuery={this.stopQuery}
+              sql={this.state.sql}
+              overlayCreateAsMenu={showMenu ? runMenuBtn : null}
+            />
+          </span>
+          {isFeatureEnabled(FeatureFlag.ESTIMATE_QUERY_COST) &&
+            this.props.database &&
+            this.props.database.allows_cost_estimate && (
+              <span>
+                <EstimateQueryCostButton
+                  dbId={qe.dbId}
+                  schema={qe.schema}
+                  sql={qe.sql}
+                  getEstimate={this.getQueryCostEstimate}
+                  queryCostEstimate={qe.queryCostEstimate}
+                  selectedText={qe.selectedText}
+                  tooltip={t('Estimate the cost before running a query')}
+                />
+              </span>
             )}
-          </Form>
+          <span>
+            <LimitSelectStyled>
+              <Dropdown overlay={this.renderQueryLimit()} trigger="click">
+                <a onClick={e => e.preventDefault()}>
+                  <span>LIMIT:</span>
+                  <span>
+                    {this.convertToNumWithSpaces(
+                      this.props.queryEditor.queryLimit ||
+                        this.props.defaultQueryLimit,
+                    )}
+                  </span>
+                  <Icon name="triangle-down" />
+                </a>
+              </Dropdown>
+            </LimitSelectStyled>
+          </span>
+          {this.props.latestQuery && (
+            <Timer
+              startTime={this.props.latestQuery.startDttm}
+              endTime={this.props.latestQuery.endDttm}
+              state={STATE_TYPE_MAP[this.props.latestQuery.state]}
+              isRunning={this.props.latestQuery.state === 'running'}
+            />
+          )}
         </div>
         <div className="rightItems">
           <span>

superset-frontend/src/dashboard/components/SaveModal.tsx

@@ -18,9 +18,8 @@
  */
 /* eslint-env browser */
 import React from 'react';
-import { FormControl, FormGroup } from 'react-bootstrap';
-import { RadioChangeEvent } from 'src/common/components';
 import { Radio } from 'src/components/Radio';
+import { RadioChangeEvent, Input } from 'src/common/components';
 import Button from 'src/components/Button';
 import { t, CategoricalColorNamespace, JsonResponse } from '@superset-ui/core';
 
@@ -109,9 +108,9 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
     });
   }
 
-  handleNameChange(event: React.FormEvent<FormControl>) {
+  handleNameChange(name: string) {
     this.setState({
-      newDashName: (event.target as HTMLInputElement).value,
+      newDashName: name,
       saveType: SAVE_TYPE_NEWDASHBOARD,
     });
   }
@@ -182,7 +181,7 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
         triggerNode={this.props.triggerNode}
         modalTitle={t('Save dashboard')}
         modalBody={
-          <FormGroup>
+          <div>
             <Radio
               value={SAVE_TYPE_OVERWRITE}
               onChange={this.handleSaveTypeChange}
@@ -199,12 +198,12 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
             >
               {t('Save as:')}
             </Radio>
-            <FormControl
+            <Input
               type="text"
               placeholder={t('[dashboard name]')}
               value={this.state.newDashName}
-              onFocus={this.handleNameChange}
-              onChange={this.handleNameChange}
+              onFocus={e => this.handleNameChange(e.target.value)}
+              onChange={e => this.handleNameChange(e.target.value)}
             />
             <div className="m-l-25 m-t-5">
               <Checkbox
@@ -213,7 +212,7 @@ class SaveModal extends React.PureComponent<SaveModalProps, SaveModalState> {
               />
               <span className="m-l-5">{t('also copy (duplicate) charts')}</span>
             </div>
-          </FormGroup>
+          </div>
         }
         modalFooter={
           <div>

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

@@ -18,16 +18,15 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'src/common/components';
-import { FormControl } from 'react-bootstrap';
+import { Input, Row, Col } from 'src/common/components';
 import { Behavior, t, getChartMetadataRegistry } from '@superset-ui/core';
 import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
 import Modal from 'src/components/Modal';
 import { Tooltip } from 'src/components/Tooltip';
 import Label from 'src/components/Label';
-import ControlHeader from '../ControlHeader';
+import ControlHeader from 'src/explore/components/ControlHeader';
 import './VizTypeControl.less';
-import { FeatureFlag, isFeatureEnabled } from '../../../featureFlags';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 
 const propTypes = {
   description: PropTypes.string,
@@ -119,7 +118,7 @@ const VizTypeControl = props => {
 
   useEffect(() => {
     if (showModal) {
-      searchRef?.current?.focus();
+      setTimeout(() => searchRef?.current?.focus(), 200);
     }
   }, [showModal]);
 
@@ -136,12 +135,6 @@ const VizTypeControl = props => {
     setFilter(event.target.value);
   };
 
-  const focusSearch = () => {
-    if (searchRef) {
-      searchRef.focus();
-    }
-  };
-
   const renderItem = entry => {
     const { value } = props;
     const { key, value: type } = entry;
@@ -212,17 +205,14 @@ const VizTypeControl = props => {
       <Modal
         show={showModal}
         onHide={toggleModal}
-        onEnter={focusSearch}
         title={t('Select a visualization type')}
         responsive
         hideFooter
         forceRender
       >
         <div className="viztype-control-search-box">
-          <FormControl
-            inputRef={ref => {
-              searchRef.current = ref;
-            }}
+          <Input
+            ref={searchRef}
             type="text"
             value={filter}
             placeholder={t('Search')}