refactor: Replace react-bootstrap Modals with Antd in Explore (#11389)

* VizTypeControl

* SaveModal

* explore/PropertiesModal

* Fix e2e tests

* Remove console logs

* Fix tests

* Fix test

* Fix e2e test

* Remove unnecessary fragment

* Fix e2e tests

* Fix e2e test

superset-frontend/src/explore/components/PropertiesModal.tsx

@@ -18,13 +18,13 @@
  */
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import {
-  Modal,
   Row,
   Col,
   FormControl,
   FormGroup,
   FormControlProps,
 } from 'react-bootstrap';
+import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 import Dialog from 'react-bootstrap-dialog';
 import { OptionsType } from 'react-select/src/types';
@@ -35,10 +35,11 @@ import Chart, { Slice } from 'src/types/Chart';
 import FormLabel from 'src/components/FormLabel';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 
-type InternalProps = {
+type PropertiesModalProps = {
   slice: Slice;
   onHide: () => void;
   onSave: (chart: Chart) => void;
+  show: boolean;
 };
 
 type OwnerOption = {
@@ -46,12 +47,12 @@ type OwnerOption = {
   value: number;
 };
 
-export type WrapperProps = InternalProps & {
-  show: boolean;
-  animation?: boolean; // for the modal
-};
-
-function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
+export default function PropertiesModal({
+  slice,
+  onHide,
+  onSave,
+  show,
+}: PropertiesModalProps) {
   const [submitting, setSubmitting] = useState(false);
   const errorDialog = useRef<any>(null);
 
@@ -157,11 +158,40 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
   };
 
   return (
-    <form onSubmit={onSubmit}>
-      <Modal.Header data-test="properties-edit-modal" closeButton>
-        <Modal.Title>Edit Chart Properties</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
+    <Modal
+      show={show}
+      onHide={onHide}
+      title="Edit Chart Properties"
+      footer={
+        <>
+          <Button
+            data-test="properties-modal-cancel-button"
+            type="button"
+            buttonSize="sm"
+            onClick={onHide}
+            cta
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            data-test="properties-modal-save-button"
+            type="button"
+            buttonSize="sm"
+            buttonStyle="primary"
+            // @ts-ignore
+            onClick={onSubmit}
+            disabled={!owners || submitting || !name}
+            cta
+          >
+            {t('Save')}
+          </Button>
+          <Dialog ref={errorDialog} />
+        </>
+      }
+      responsive
+      wrapProps={{ 'data-test': 'properties-edit-modal' }}
+    >
+      <form onSubmit={onSubmit}>
         <Row>
           <Col md={6}>
             <h3>{t('Basic Information')}</h3>
@@ -247,44 +277,7 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
             </FormGroup>
           </Col>
         </Row>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button
-          data-test="properties-modal-cancel-button"
-          type="button"
-          buttonSize="sm"
-          onClick={onHide}
-          cta
-        >
-          {t('Cancel')}
-        </Button>
-        <Button
-          data-test="properties-modal-save-button"
-          type="submit"
-          buttonSize="sm"
-          buttonStyle="primary"
-          disabled={!owners || submitting || !name}
-          cta
-        >
-          {t('Save')}
-        </Button>
-        <Dialog ref={errorDialog} />
-      </Modal.Footer>
-    </form>
-  );
-}
-
-export default function PropertiesModalWrapper({
-  show,
-  onHide,
-  animation,
-  slice,
-  onSave,
-}: WrapperProps) {
-  // The wrapper is a separate component so that hooks only run when the modal opens
-  return (
-    <Modal show={show} onHide={onHide} animation={animation} bsSize="large">
-      <PropertiesModal slice={slice} onHide={onHide} onSave={onSave} />
+      </form>
     </Modal>
   );
 }