refactor: Bootstrap to AntD - Form - iteration 4 (#14546)

superset-frontend/src/datasource/ChangeDatasourceModal.tsx

@@ -23,7 +23,6 @@ import React, {
   useEffect,
   useCallback,
 } from 'react';
-import { FormControl, FormControlProps } from 'react-bootstrap';
 import Alert from 'src/components/Alert';
 import { SupersetClient, t, styled } from '@superset-ui/core';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
@@ -32,9 +31,10 @@ import Button from 'src/components/Button';
 import { useListViewResource } from 'src/views/CRUD/hooks';
 import Dataset from 'src/types/Dataset';
 import { useDebouncedEffect } from 'src/explore/exploreUtils';
-import { getClientErrorObject } from '../utils/getClientErrorObject';
-import Loading from '../components/Loading';
-import withToasts from '../messageToasts/enhancers/withToasts';
+import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import Loading from 'src/components/Loading';
+import withToasts from 'src/messageToasts/enhancers/withToasts';
+import { Input, AntdInput } from 'src/common/components';
 
 const CONFIRM_WARNING_MESSAGE = t(
   'Warning! Changing the dataset may break the chart if the metadata does not exist.',
@@ -107,7 +107,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
   const [filter, setFilter] = useState<any>(undefined);
   const [confirmChange, setConfirmChange] = useState(false);
   const [confirmedDataset, setConfirmedDataset] = useState<Datasource>();
-  let searchRef = useRef<HTMLInputElement>(null);
+  const searchRef = useRef<AntdInput>(null);
 
   const {
     state: { loading, resourceCollection },
@@ -140,9 +140,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
 
   useEffect(() => {
     const onEnterModal = async () => {
-      if (searchRef && searchRef.current) {
-        searchRef.current.focus();
-      }
+      setTimeout(() => searchRef?.current?.focus(), 200);
     };
 
     if (show) {
@@ -158,14 +156,8 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
     show,
   ]);
 
-  const setSearchRef = (ref: any) => {
-    searchRef = ref;
-  };
-
-  const changeSearch = (
-    event: React.FormEvent<FormControl & FormControlProps>,
-  ) => {
-    const searchValue = (event.currentTarget?.value as string) ?? '';
+  const changeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const searchValue = event.target.value ?? '';
     setFilter(searchValue);
   };
 
@@ -250,24 +242,20 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
             <Alert
               roomBelow
               type="warning"
+              css={theme => ({ marginBottom: theme.gridUnit * 4 })}
               message={
                 <>
                   <strong>{t('Warning!')}</strong> {CHANGE_WARNING_MSG}
                 </>
               }
             />
-            <div>
-              <FormControl
-                inputRef={ref => {
-                  setSearchRef(ref);
-                }}
-                type="text"
-                bsSize="sm"
-                value={filter}
-                placeholder={t('Search / Filter')}
-                onChange={changeSearch}
-              />
-            </div>
+            <Input
+              ref={searchRef}
+              type="text"
+              value={filter}
+              placeholder={t('Search / Filter')}
+              onChange={changeSearch}
+            />
             {loading && <Loading />}
             {!loading && (
               <TableView

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col } from 'react-bootstrap';
+import { Row, Col } from 'src/common/components';
 import { Radio } from 'src/components/Radio';
 import Card from 'src/components/Card';
 import Alert from 'src/components/Alert';
@@ -773,7 +773,7 @@ class DatasourceEditor extends React.PureComponent {
             </div>
           )}
           {this.state.datasourceType === DATASOURCE_TYPES.physical.key && (
-            <Col md={6}>
+            <Col xs={24} md={12}>
               {this.state.isSqla && (
                 <Field
                   fieldKey="tableSelector"
@@ -1085,14 +1085,14 @@ class DatasourceEditor extends React.PureComponent {
             />
           </Tabs.TabPane>
           <Tabs.TabPane key={4} tab={t('Settings')}>
-            <div>
-              <Col md={6}>
+            <Row gutter={16}>
+              <Col xs={24} md={12}>
                 <FormContainer>{this.renderSettingsFieldset()}</FormContainer>
               </Col>
-              <Col md={6}>
+              <Col xs={24} md={12}>
                 <FormContainer>{this.renderAdvancedFieldset()}</FormContainer>
               </Col>
-            </div>
+            </Row>
           </Tabs.TabPane>
         </StyledTableTabs>
       </DatasourceContainer>