fix: database modal crashed when use SQLAlchemy URI string (#21342)

Co-authored-by: smileydev <47900232+prosdev0107@users.noreply.github.com>
Co-authored-by: Evan Rusackas <evan@preset.io>

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

@@ -31,6 +31,7 @@ const mockedProps = {
   subtitle: 'Error subtitle',
   title: 'Error title',
   source: 'dashboard' as ErrorSource,
+  description: 'we are unable to connect db.',
 };
 
 test('should render', () => {
@@ -63,6 +64,11 @@ test('should render the error title', () => {
   expect(screen.getByText('Error title')).toBeInTheDocument();
 });
 
+test('should render the error description', () => {
+  render(<ErrorAlert {...mockedProps} />, { useRedux: true });
+  expect(screen.getByText('we are unable to connect db.')).toBeInTheDocument();
+});
+
 test('should render the error subtitle', () => {
   render(<ErrorAlert {...mockedProps} />, { useRedux: true });
   const button = screen.getByText('See more');

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

@@ -87,6 +87,7 @@ interface ErrorAlertProps {
   source?: ErrorSource;
   subtitle: ReactNode;
   title: ReactNode;
+  description?: string;
 }
 
 export default function ErrorAlert({
@@ -96,6 +97,7 @@ export default function ErrorAlert({
   source = 'dashboard',
   subtitle,
   title,
+  description,
 }: ErrorAlertProps) {
   const theme = useTheme();
 
@@ -116,7 +118,7 @@ export default function ErrorAlert({
           )}
           <strong>{title}</strong>
         </LeftSideContent>
-        {!isExpandable && (
+        {!isExpandable && !description && (
           <span
             role="button"
             tabIndex={0}
@@ -127,6 +129,21 @@ export default function ErrorAlert({
           </span>
         )}
       </div>
+      {description && (
+        <div className="error-body">
+          <p>{description}</p>
+          {!isExpandable && (
+            <span
+              role="button"
+              tabIndex={0}
+              className="link"
+              onClick={() => setIsModalOpen(true)}
+            >
+              {t('See more')}
+            </span>
+          )}
+        </div>
+      )}
       {isExpandable ? (
         <div className="error-body">
           <p>{subtitle}</p>

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

@@ -32,6 +32,7 @@ type Props = {
   copyText?: string;
   stackTrace?: string;
   source?: ErrorSource;
+  description?: string;
   errorMitigationFunction?: () => void;
 };
 
@@ -43,6 +44,7 @@ export default function ErrorMessageWithStackTrace({
   link,
   stackTrace,
   source,
+  description,
 }: Props) {
   // Check if a custom error message component was registered for this message
   if (error) {
@@ -66,6 +68,7 @@ export default function ErrorMessageWithStackTrace({
       title={title}
       subtitle={subtitle}
       copyText={copyText}
+      description={description}
       source={source}
       body={
         link || stackTrace ? (