fix(database): make to display validation error msg when all cases (#20095)

* fix(database): make to display validation error msg when all cases

* fix(db): make to update the alert error condition

* fix(db): make to add error detail display

* fix(db): make to update error alert display by superset error style guide.

* fix(db): make to style modal header title with h4

* fix(db): make to place see more on bottom instead of top

* fix(db): make to fix shortly

* fix(db): make to fix lint issue

Co-authored-by: Evan Rusackas <evan@preset.io>

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>