refactor: Replace react-bootstrap dialogs with Antd dialogs (#11527)

* Refactor Dialogs in dashboard properties modal

* Refactor Dialogs in explore properties modal

* Refactor dialogs in DatasourceModal

* Refactor dialogs in ExploreResultsButton

* Remove react-bootstrap-dialog from ExploreCtasResultsButton

* Remove react-bootstrap-dialog dependency

* Remove unnecessary functions from Modal

* Bump antd version to fix a bug

* Fix unit tests

* Fix e2e test

* Change antd version to 4.5.4 to fix tests

* Reenable all tests in control

* Another version bump to fix tests

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

@@ -60,7 +60,7 @@ describe('Datasource control', () => {
       .clear()
       .type(`${newMetricName}{enter}`);
     cy.get('[data-test="datasource-modal-save"]').click();
-    cy.get('.modal-footer button').contains('OK').click();
+    cy.get('.ant-modal-confirm-btns button').contains('OK').click();
     // select new metric
     cy.get('[data-test=metrics]')
       .find('.Select__control input')
@@ -79,7 +79,7 @@ describe('Datasource control', () => {
       .find('.fa-trash')
       .click();
     cy.get('[data-test="datasource-modal-save"]').click();
-    cy.get('.modal-footer button').contains('OK').click();
+    cy.get('.ant-modal-confirm-btns button').contains('OK').click();
     cy.get('.Select__multi-value__label')
       .contains(newMetricName)
       .should('not.exist');

superset-frontend/package.json

@@ -94,7 +94,7 @@
     "@superset-ui/preset-chart-xy": "^0.15.10",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",
-    "antd": "^4.5.2",
+    "antd": "^4.6.6",
     "array-move": "^2.2.1",
     "bootstrap": "^3.4.1",
     "bootstrap-slider": "^10.0.0",
@@ -128,7 +128,6 @@
     "react": "^16.13.1",
     "react-ace": "^5.10.0",
     "react-bootstrap": "^0.33.1",
-    "react-bootstrap-dialog": "^0.13.0",
     "react-bootstrap-slider": "2.1.5",
     "react-checkbox-tree": "^1.5.1",
     "react-color": "^2.13.8",

superset-frontend/spec/javascripts/dashboard/components/PropertiesModal_spec.jsx

@@ -26,6 +26,7 @@ import {
   ThemeProvider,
 } from '@superset-ui/core';
 
+import Modal from 'src/common/components/Modal';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
 import { mockStore } from '../fixtures/mockStore';
 
@@ -118,7 +119,7 @@ describe('PropertiesModal', () => {
       const wrapper = setup();
       const modalInstance = wrapper.find('PropertiesModal').instance();
       it('will raise an error', () => {
-        const spy = jest.spyOn(modalInstance.dialog, 'show');
+        const spy = jest.spyOn(Modal, 'error');
         expect(() =>
           modalInstance.onColorSchemeChange('THIS_WILL_NOT_WORK'),
         ).toThrowError('A valid color scheme is required');

superset-frontend/spec/javascripts/datasource/DatasourceModal_spec.jsx

@@ -97,7 +97,9 @@ describe('DatasourceModal', () => {
     });
     await waitForComponentToPaint(wrapper);
     act(() => {
-      const okButton = wrapper.find('[className="btn btn-sm btn-primary"]');
+      const okButton = wrapper.find(
+        '.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary',
+      );
       okButton.simulate('click');
     });
     await waitForComponentToPaint(wrapper);

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

@@ -20,7 +20,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
@@ -99,11 +98,6 @@ class ExploreCtasResultsButton extends React.PureComponent {
           />{' '}
           {t('Explore')}
         </Button>
-        <Dialog
-          ref={el => {
-            this.dialog = el;
-          }}
-        />
       </>
     );
   }

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

@@ -22,11 +22,11 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Alert } from 'react-bootstrap';
-import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import shortid from 'shortid';
 
+import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
@@ -57,30 +57,16 @@ class ExploreResultsButton extends React.PureComponent {
     const { timeout } = this.props;
     const msg = this.renderInvalidColumnMessage();
     if (Math.round(this.getQueryDuration()) > timeout) {
-      this.dialog.show({
+      Modal.confirm({
         title: t('Explore'),
-        body: this.renderTimeoutWarning(),
-        actions: [
-          Dialog.CancelAction(),
-          Dialog.OKAction(() => {
-            this.visualize();
-          }),
-        ],
-        bsSize: 'large',
-        onHide: dialog => {
-          dialog.hide();
-        },
+        content: this.renderTimeoutWarning(),
+        onOk: this.visualize,
+        icon: null,
       });
     } else if (msg) {
-      this.dialog.show({
+      Modal.warning({
         title: t('Explore'),
-        body: msg,
-        actions: [Dialog.DefaultAction('Ok', () => {})],
-        bsSize: 'large',
-        bsStyle: 'warning',
-        onHide: dialog => {
-          dialog.hide();
-        },
+        content: msg,
       });
     } else {
       this.visualize();
@@ -228,11 +214,6 @@ class ExploreResultsButton extends React.PureComponent {
           />{' '}
           {t('Explore')}
         </Button>
-        <Dialog
-          ref={el => {
-            this.dialog = el;
-          }}
-        />
       </>
     );
   }

superset-frontend/src/common/components/Modal/Modal.tsx

@@ -106,7 +106,7 @@ const StyledModal = styled(BaseModal)<StyledModalProps>`
   }
 `;
 
-export default function Modal({
+const CustomModal = ({
   children,
   disablePrimaryButton = false,
   onHide,
@@ -123,7 +123,7 @@ export default function Modal({
   hideFooter,
   wrapProps,
   ...rest
-}: ModalProps) {
+}: ModalProps) => {
   const modalFooter = isNil(footer)
     ? [
         <Button key="back" onClick={onHide} cta data-test="modal-cancel-button">
@@ -165,4 +165,14 @@ export default function Modal({
       {children}
     </StyledModal>
   );
-}
+};
+CustomModal.displayName = 'Modal';
+
+const Modal = Object.assign(CustomModal, {
+  error: BaseModal.error,
+  warning: BaseModal.warning,
+  confirm: BaseModal.confirm,
+  useModal: BaseModal.useModal,
+});
+
+export default Modal;

superset-frontend/src/dashboard/components/PropertiesModal.jsx

@@ -21,7 +21,6 @@ import PropTypes from 'prop-types';
 import { Row, Col, FormControl } from 'react-bootstrap';
 import jsonStringify from 'json-stringify-pretty-compact';
 import Button from 'src/components/Button';
-import Dialog from 'react-bootstrap-dialog';
 import { AsyncSelect } from 'src/components/Select';
 import rison from 'rison';
 import {
@@ -65,6 +64,45 @@ const defaultProps = {
   onlyApply: false,
 };
 
+const handleErrorResponse = async response => {
+  const { error, statusText, message } = await getClientErrorObject(response);
+  let errorText = error || statusText || t('An error has occurred');
+
+  if (typeof message === 'object' && message.json_metadata) {
+    errorText = message.json_metadata;
+  } else if (typeof message === 'string') {
+    errorText = message;
+
+    if (message === 'Forbidden') {
+      errorText = t('You do not have permission to edit this dashboard');
+    }
+  }
+
+  Modal.error({
+    title: 'Error',
+    content: errorText,
+    okButtonProps: { danger: true, className: 'btn-danger' },
+  });
+};
+
+const loadOwnerOptions = (input = '') => {
+  const query = rison.encode({ filter: input });
+  return SupersetClient.get({
+    endpoint: `/api/v1/dashboard/related/owners?q=${query}`,
+  }).then(
+    response => {
+      return response.json.result.map(item => ({
+        value: item.value,
+        label: item.text,
+      }));
+    },
+    badResponse => {
+      handleErrorResponse(badResponse);
+      return [];
+    },
+  );
+};
+
 class PropertiesModal extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -85,8 +123,6 @@ class PropertiesModal extends React.PureComponent {
     this.onOwnersChange = this.onOwnersChange.bind(this);
     this.submit = this.submit.bind(this);
     this.toggleAdvanced = this.toggleAdvanced.bind(this);
-    this.loadOwnerOptions = this.loadOwnerOptions.bind(this);
-    this.handleErrorResponse = this.handleErrorResponse.bind(this);
     this.onColorSchemeChange = this.onColorSchemeChange.bind(this);
   }
 
@@ -104,12 +140,10 @@ class PropertiesModal extends React.PureComponent {
       : {};
 
     if (!colorChoices.includes(value)) {
-      this.dialog.show({
+      Modal.error({
         title: 'Error',
-        bsSize: 'medium',
-        bsStyle: 'danger',
-        actions: [Dialog.DefaultAction('Ok', () => {}, 'btn-danger')],
-        body: t('A valid color scheme is required'),
+        content: t('A valid color scheme is required'),
+        okButtonProps: { danger: true, className: 'btn-danger' },
       });
       throw new Error('A valid color scheme is required');
     }
@@ -170,25 +204,7 @@ class PropertiesModal extends React.PureComponent {
         label: `${owner.first_name} ${owner.last_name}`,
       }));
       this.onOwnersChange(initialSelectedOwners);
-    }, this.handleErrorResponse);
-  }
-
-  loadOwnerOptions(input = '') {
-    const query = rison.encode({ filter: input });
-    return SupersetClient.get({
-      endpoint: `/api/v1/dashboard/related/owners?q=${query}`,
-    }).then(
-      response => {
-        return response.json.result.map(item => ({
-          value: item.value,
-          label: item.text,
-        }));
-      },
-      badResponse => {
-        this.handleErrorResponse(badResponse);
-        return [];
-      },
-    );
+    }, handleErrorResponse);
   }
 
   updateFormState(name, value) {
@@ -206,29 +222,6 @@ class PropertiesModal extends React.PureComponent {
     }));
   }
 
-  async handleErrorResponse(response) {
-    const { error, statusText, message } = await getClientErrorObject(response);
-    let errorText = error || statusText || t('An error has occurred');
-
-    if (typeof message === 'object' && message.json_metadata) {
-      errorText = message.json_metadata;
-    } else if (typeof message === 'string') {
-      errorText = message;
-
-      if (message === 'Forbidden') {
-        errorText = t('You do not have permission to edit this dashboard');
-      }
-    }
-
-    this.dialog.show({
-      title: 'Error',
-      bsSize: 'medium',
-      bsStyle: 'danger',
-      actions: [Dialog.DefaultAction('Ok', () => {}, 'btn-danger')],
-      body: errorText,
-    });
-  }
-
   submit(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -286,7 +279,7 @@ class PropertiesModal extends React.PureComponent {
           colorScheme: metadataColorScheme || colorScheme,
         });
         this.props.onHide();
-      }, this.handleErrorResponse);
+      }, handleErrorResponse);
     }
   }
 
@@ -322,11 +315,6 @@ class PropertiesModal extends React.PureComponent {
             >
               {saveLabel}
             </Button>
-            <Dialog
-              ref={ref => {
-                this.dialog = ref;
-              }}
-            />
           </>
         }
         responsive
@@ -373,7 +361,7 @@ class PropertiesModal extends React.PureComponent {
                 name="owners"
                 isMulti
                 value={values.owners}
-                loadOptions={this.loadOwnerOptions}
+                loadOptions={loadOwnerOptions}
                 defaultOptions // load options on render
                 cacheOptions
                 onChange={this.onOwnersChange}

superset-frontend/src/datasource/DatasourceModal.tsx

@@ -19,7 +19,6 @@
 import React, { FunctionComponent, useState, useRef } from 'react';
 import { Alert } from 'react-bootstrap';
 import Button from 'src/components/Button';
-import Dialog from 'react-bootstrap-dialog';
 import { styled, t, SupersetClient } from '@superset-ui/core';
 
 import Modal from 'src/common/components/Modal';
@@ -84,6 +83,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   const [errors, setErrors] = useState<any[]>([]);
   const [isSaving, setIsSaving] = useState(false);
   const dialog = useRef<any>(null);
+  const [modal, contextHolder] = Modal.useModal();
 
   const onConfirmSave = () => {
     // Pull out extra fields into the extra object
@@ -118,12 +118,10 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
       .catch(response => {
         setIsSaving(false);
         getClientErrorObject(response).then(({ error }) => {
-          dialog.current.show({
+          modal.error({
             title: 'Error',
-            bsSize: 'medium',
-            bsStyle: 'danger',
-            actions: [Dialog.DefaultAction('Ok', () => {}, 'btn-danger')],
-            body: error || t('An error has occurred'),
+            content: error || t('An error has occurred'),
+            okButtonProps: { danger: true, className: 'btn-danger' },
           });
         });
       });
@@ -140,13 +138,13 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
     setErrors(err);
   };
 
+  const closeDialog = () => {
+    dialog.current?.destroy();
+  };
+
   const renderSaveDialog = () => (
     <div>
-      <Alert
-        bsStyle="warning"
-        className="pointer"
-        onClick={dialog.current.hideAlert}
-      >
+      <Alert bsStyle="warning" className="pointer" onClick={closeDialog}>
         <div>
           <i className="fa fa-exclamation-triangle" />{' '}
           {t(`The dataset configuration exposed here
@@ -161,11 +159,11 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   );
 
   const onClickSave = () => {
-    dialog.current.show({
+    dialog.current = modal.confirm({
       title: t('Confirm save'),
-      bsSize: 'medium',
-      actions: [Dialog.CancelAction(), Dialog.OKAction(onConfirmSave)],
-      body: renderSaveDialog(),
+      content: renderSaveDialog(),
+      onOk: onConfirmSave,
+      icon: null,
     });
   };
 
@@ -212,7 +210,6 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
           >
             {t('Cancel')}
           </Button>
-          <Dialog ref={dialog} />
         </>
       }
       responsive
@@ -223,6 +220,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
         datasource={currentDatasource}
         onChange={onDatasourceChange}
       />
+      {contextHolder}
     </StyledDatasourceModal>
   );
 };

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Row,
   Col,
@@ -26,7 +26,6 @@ import {
 } 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';
 import { AsyncSelect } from 'src/components/Select';
 import rison from 'rison';
@@ -54,7 +53,6 @@ export default function PropertiesModal({
   show,
 }: PropertiesModalProps) {
   const [submitting, setSubmitting] = useState(false);
-  const errorDialog = useRef<any>(null);
 
   // values of form inputs
   const [name, setName] = useState(slice.slice_name || '');
@@ -69,12 +67,10 @@ export default function PropertiesModal({
     if (message === 'Forbidden') {
       errorText = t('You do not have permission to edit this chart');
     }
-    errorDialog.current.show({
+    Modal.error({
       title: 'Error',
-      bsSize: 'medium',
-      bsStyle: 'danger',
-      actions: [Dialog.DefaultAction('Ok', () => {}, 'btn-danger')],
-      body: errorText,
+      content: errorText,
+      okButtonProps: { danger: true, className: 'btn-danger' },
     });
   }
 
@@ -185,7 +181,6 @@ export default function PropertiesModal({
           >
             {t('Save')}
           </Button>
-          <Dialog ref={errorDialog} />
         </>
       }
       responsive