refactor: Use Antd Modals instead of react-bootstrap Modals (#11366)

* Make Modal responsive

* ErrorAlert

* OmniContainer

* dashboard/PropertiesModal

* Fix e2e tests

* Lint fix

* E2E test fix

* Fix test

* Use grid units

* Change padding to padding-left/right

superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 import React, { useState, ReactNode } from 'react';
-import { Modal } from 'react-bootstrap';
 import { styled, supersetTheme, t } from '@superset-ui/core';
 import { noOp } from 'src/utils/common';
+import Modal from 'src/common/components/Modal';
 import Button from 'src/components/Button';
 
 import Icon from '../Icon';
@@ -64,17 +64,10 @@ const ErrorModal = styled(Modal)<{ level: ErrorLevel }>`
   }
 
   .header {
+    display: flex;
     align-items: center;
     background-color: ${({ level, theme }) => theme.colors[level].light2};
-    display: flex;
-    justify-content: space-between;
     font-size: ${({ theme }) => theme.typography.sizes.l}px;
-
-    // Remove clearfix hack as Superset is only used on modern browsers
-    ::before,
-    ::after {
-      content: unset;
-    }
   }
 `;
 
@@ -157,46 +150,41 @@ export default function ErrorAlert({
           level={level}
           show={isModalOpen}
           onHide={() => setIsModalOpen(false)}
-        >
-          <Modal.Header className="header">
-            <LeftSideContent>
+          title={
+            <div className="header">
               <Icon
                 className="icon"
                 name={level === 'error' ? 'error-solid' : 'warning-solid'}
                 color={supersetTheme.colors[level].base}
               />
               <div className="title">{title}</div>
-            </LeftSideContent>
-            <span
-              role="button"
-              tabIndex={0}
-              onClick={() => setIsModalOpen(false)}
-            >
-              <Icon name="close" />
-            </span>
-          </Modal.Header>
-          <Modal.Body>
+            </div>
+          }
+          footer={
+            <>
+              {copyText && (
+                <CopyToClipboard
+                  text={copyText}
+                  shouldShowText={false}
+                  wrapped={false}
+                  copyNode={<Button onClick={noOp}>{t('Copy Message')}</Button>}
+                />
+              )}
+              <Button
+                cta
+                buttonStyle="primary"
+                onClick={() => setIsModalOpen(false)}
+              >
+                {t('Close')}
+              </Button>
+            </>
+          }
+        >
+          <>
             <p>{subtitle}</p>
             <br />
             {body}
-          </Modal.Body>
-          <Modal.Footer>
-            {copyText && (
-              <CopyToClipboard
-                text={copyText}
-                shouldShowText={false}
-                wrapped={false}
-                copyNode={<Button onClick={noOp}>{t('Copy Message')}</Button>}
-              />
-            )}
-            <Button
-              cta
-              buttonStyle="primary"
-              onClick={() => setIsModalOpen(false)}
-            >
-              {t('Close')}
-            </Button>
-          </Modal.Footer>
+          </>
         </ErrorModal>
       )}
     </ErrorAlertDiv>