feat: Updates button styles of Modal pre-defined functions (#22737)

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

@@ -16,8 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { ModalFuncProps } from 'antd/lib/modal';
 import React from 'react';
 import Modal, { ModalProps } from '.';
+import Button from '../Button';
 
 export default {
   title: 'Modal',
@@ -50,3 +52,16 @@ InteractiveModal.story = {
     },
   },
 };
+
+export const ModalFunctions = (props: ModalFuncProps) => (
+  <div>
+    <Button onClick={() => Modal.error(props)}>Error</Button>
+    <Button onClick={() => Modal.warning(props)}>Warning</Button>
+    <Button onClick={() => Modal.confirm(props)}>Confirm</Button>
+  </div>
+);
+
+ModalFunctions.args = {
+  title: 'Modal title',
+  content: 'Modal content',
+};

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

@@ -18,6 +18,7 @@
  */
 import React, { useMemo, useRef, useState } from 'react';
 import { isNil } from 'lodash';
+import { ModalFuncProps } from 'antd/lib/modal';
 import { styled, t } from '@superset-ui/core';
 import { css } from '@emotion/react';
 import { AntdModal, AntdModalProps } from 'src/components';
@@ -363,13 +364,26 @@ const CustomModal = ({
 };
 CustomModal.displayName = 'Modal';
 
+// Ant Design 4 does not allow overriding Modal's buttons when
+// using one of the pre-defined functions. Ant Design 5 Modal introduced
+// the footer property that will allow that. Meanwhile, we're replicating
+// Button style using global CSS in src/GlobalStyles.tsx.
+// TODO: Replace this logic when on Ant Design 5.
+const buttonProps = {
+  okButtonProps: { className: 'modal-functions-ok-button' },
+  cancelButtonProps: { className: 'modal-functions-cancel-button' },
+};
+
 // TODO: in another PR, rename this to CompatabilityModal
 // and demote it as the default export.
 // We should start using AntD component interfaces going forward.
 const Modal = Object.assign(CustomModal, {
-  error: AntdModal.error,
-  warning: AntdModal.warning,
-  confirm: AntdModal.confirm,
+  error: (config: ModalFuncProps) =>
+    AntdModal.error({ ...config, ...buttonProps }),
+  warning: (config: ModalFuncProps) =>
+    AntdModal.warning({ ...config, ...buttonProps }),
+  confirm: (config: ModalFuncProps) =>
+    AntdModal.confirm({ ...config, ...buttonProps }),
   useModal: AntdModal.useModal,
 });