chore: Consolidating form experience (Bootstrap to AntD) - iteration 4

superset-frontend/cypress-base/cypress/integration/explore/annotations.test.ts

@@ -32,18 +32,8 @@ describe('Annotations', () => {
     cy.get('[data-test=annotation_layers]').click();
 
     cy.get('[data-test="popover-content"]').within(() => {
-      cy.get('[data-test=annotation-layer-name-header]')
-        .siblings()
-        .first()
-        .within(() => {
-          cy.get('input').type(layerLabel);
-        });
-      cy.get('[data-test=annotation-layer-value-header]')
-        .siblings()
-        .first()
-        .within(() => {
-          cy.get('input').type('y=1400000');
-        });
+      cy.get('[aria-label=Name]').type(layerLabel);
+      cy.get('[aria-label=Formula]').type('y=1400000');
       cy.get('button').contains('OK').click();
     });
 

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

@@ -18,10 +18,10 @@
  */
 /* eslint-disable no-unused-expressions */
 import React from 'react';
-import { FormControl } from 'react-bootstrap';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
+import { TextArea } from 'src/common/components';
 
 import TextAreaControl from 'src/explore/components/controls/TextAreaControl';
 
@@ -38,11 +38,11 @@ describe('SelectControl', () => {
   });
 
   it('renders a FormControl', () => {
-    expect(wrapper.find(FormControl)).toExist();
+    expect(wrapper.find(TextArea)).toExist();
   });
 
   it('calls onChange when toggled', () => {
-    const select = wrapper.find(FormControl);
+    const select = wrapper.find(TextArea);
     select.simulate('change', { target: { value: 'x' } });
     expect(defaultProps.onChange.calledWith('x')).toBe(true);
   });
@@ -51,7 +51,7 @@ describe('SelectControl', () => {
     const props = { ...defaultProps };
     props.language = 'markdown';
     wrapper = shallow(<TextAreaControl {...props} />);
-    expect(wrapper.find(FormControl)).not.toExist();
+    expect(wrapper.find(TextArea)).not.toExist();
     expect(wrapper.find(TextAreaEditor)).toExist();
   });
 });

superset-frontend/src/CRUD/Field.jsx

@@ -18,10 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, HelpBlock, FormControl } from 'react-bootstrap';
-
 import { Tooltip } from 'src/components/Tooltip';
-import { FormLabel } from 'src/components/Form';
+import { FormItem, FormLabel } from 'src/components/Form';
 import './crud.less';
 
 const propTypes = {
@@ -63,19 +61,31 @@ export default class Field extends React.PureComponent {
       onChange: this.onChange,
     });
     return (
-      <FormGroup controlId={fieldKey}>
-        <FormLabel className="m-r-5">
-          {label || fieldKey}
-          {compact && description && (
-            <Tooltip id="field-descr" placement="right" title={description}>
-              <i className="fa fa-info-circle m-l-5" />
-            </Tooltip>
-          )}
-        </FormLabel>{' '}
+      <FormItem
+        controlId={fieldKey}
+        label={
+          <FormLabel className="m-r-5">
+            {label || fieldKey}
+            {compact && description && (
+              <Tooltip id="field-descr" placement="right" title={description}>
+                <i className="fa fa-info-circle m-l-5" />
+              </Tooltip>
+            )}
+          </FormLabel>
+        }
+      >
         {hookedControl}
-        <FormControl.Feedback />
-        {!compact && description && <HelpBlock>{description}</HelpBlock>}
-      </FormGroup>
+        {!compact && description && (
+          <div
+            css={theme => ({
+              color: theme.colors.grayscale.base,
+              marginTop: theme.gridUnit,
+            })}
+          >
+            {description}
+          </div>
+        )}
+      </FormItem>
     );
   }
 }

superset-frontend/src/CRUD/Fieldset.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form } from 'react-bootstrap';
+import { Form } from 'src/components/Form';
 
 import { recurseReactClone } from './utils';
 import Field from './Field';
@@ -56,7 +56,7 @@ export default class Fieldset extends React.PureComponent {
       compact: this.props.compact,
     });
     return (
-      <Form componentClass="fieldset" className="CRUD">
+      <Form componentClass="fieldset" className="CRUD" layout="vertical">
         {title && <legend>{title}</legend>}
         {recurseReactClone(this.props.children, Field, propExtender)}
       </Form>

superset-frontend/src/components/DeleteModal/index.tsx

@@ -18,11 +18,11 @@
  */
 import { t, styled } from '@superset-ui/core';
 import React, { useState } from 'react';
-import { FormGroup, FormControl, FormControlProps } from 'react-bootstrap';
+import { Input } from 'src/common/components';
 import Modal from 'src/components/Modal';
 import { FormLabel } from 'src/components/Form';
 
-const StyleFormGroup = styled(FormGroup)`
+const StyledDiv = styled.div`
   padding-top: 8px;
   width: 50%;
   label {
@@ -64,24 +64,21 @@ export default function DeleteModal({
       title={title}
     >
       <DescriptionContainer>{description}</DescriptionContainer>
-      <StyleFormGroup>
+      <StyledDiv>
         <FormLabel htmlFor="delete">
           {t('Type "%s" to confirm', t('DELETE'))}
         </FormLabel>
-        <FormControl
+        <Input
           data-test="delete-modal-input"
           type="text"
           id="delete"
-          bsSize="sm"
           autoComplete="off"
-          onChange={(
-            event: React.FormEvent<FormControl & FormControlProps>,
-          ) => {
-            const targetValue = (event.currentTarget?.value as string) ?? '';
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+            const targetValue = event.target.value ?? '';
             setDisableChange(targetValue.toUpperCase() !== t('DELETE'));
           }}
         />
-      </StyleFormGroup>
+      </StyledDiv>
     </Modal>
   );
 }

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>