feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

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

@@ -17,28 +17,17 @@
  * under the License.
  */
 import { useState } from 'react';
-import { Tooltip } from 'src/components/Tooltip';
-import Modal from 'src/components/Modal';
-import { Icons } from 'src/components/Icons';
-import Alert from 'src/components/Alert';
 import { t, useTheme } from '@superset-ui/core';
+import {
+  Alert,
+  Icons,
+  Modal,
+  Tooltip,
+  Typography,
+} from '@superset-ui/core/components';
+import type { ErrorAlertProps } from './types';
 
-export interface ErrorAlertProps {
-  errorType?: string; // Strong text on the first line
-  message: React.ReactNode | string; // Text shown on the first line
-  type?: 'warning' | 'error' | 'info'; // Allows only 'warning' or 'error'
-  description?: React.ReactNode; // Text shown under the first line, not collapsible
-  descriptionDetails?: React.ReactNode | string; // Text shown under the first line, collapsible
-  descriptionDetailsCollapsed?: boolean; // Hides the collapsible section unless "Show more" is clicked, default true
-  descriptionPre?: boolean; // Uses pre-style to break lines, default true
-  compact?: boolean; // Shows the error icon with tooltip and modal, default false
-  children?: React.ReactNode; // Additional content to show in the modal
-  closable?: boolean; // Show close button, default true
-  showIcon?: boolean; // Show icon, default true
-  className?: string;
-}
-
-const ErrorAlert: React.FC<ErrorAlertProps> = ({
+export const ErrorAlert: React.FC<ErrorAlertProps> = ({
   errorType = t('Error'),
   message,
   type = 'error',
@@ -70,7 +59,7 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
         <Icons.ExclamationCircleOutlined />
       );
     const color =
-      type === 'warning' ? theme.colors.warning.base : theme.colors.error.base;
+      type === 'warning' ? theme.colorWarningText : theme.colorErrorText;
     return (
       <div className={className} style={{ cursor: 'pointer' }}>
         <span style={{ color }}>{icon} </span>
@@ -80,19 +69,25 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
   };
   const preStyle = {
     whiteSpace: 'pre-wrap',
-    fontFamily: theme.typography.families.sansSerif,
+    fontFamily: theme.fontFamilyCode,
   };
   const renderDescription = () => (
     <div>
+      {message && <div>{message}</div>}
       {description && (
-        <p style={descriptionPre ? preStyle : {}} data-testid="description">
+        <Typography.Paragraph
+          style={descriptionPre ? preStyle : {}}
+          data-testid="description"
+        >
           {description}
-        </p>
+        </Typography.Paragraph>
       )}
       {descriptionDetails && (
         <div>
           {isDescriptionVisible && (
-            <p style={descriptionPre ? preStyle : {}}>{descriptionDetails}</p>
+            <Typography.Paragraph style={descriptionPre ? preStyle : {}}>
+              {descriptionDetails}
+            </Typography.Paragraph>
           )}
           <span
             role="button"
@@ -108,19 +103,13 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
   );
   const renderAlert = (closable: boolean) => (
     <Alert
+      message={errorType}
       description={renderDescription()}
       type={type}
-      showIcon
+      showIcon={showIcon}
       closable={closable}
       className={className}
-    >
-      <strong>{errorType}</strong>
-      {message && (
-        <>
-          : <span>{message}</span>
-        </>
-      )}
-    </Alert>
+    />
   );
 
   if (compact) {
@@ -146,5 +135,3 @@ const ErrorAlert: React.FC<ErrorAlertProps> = ({
 
   return renderAlert(closable);
 };
-
-export default ErrorAlert;