style(sqllab): make database errors more clear and render as monospace (#11075)

* style(sqllab): make database errors more clear and render as monospace

In SQL Lab, when a database error message is returned, generally because
of a user error in the SQL, it's identified as an "Unexpected Error" and
some of the text formatting of the error message (\n, spaces, tabs, ...)
are lost as they are rendered in html.

This PR identifies the error as a "Database Error", and renders like
more like a <pre>, using a monospace font.

* fix the build

* addressing comments

* addressed comments

* lint + removing cruft

* addressing comments

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

@@ -23,17 +23,23 @@ import getErrorMessageComponentRegistry from './getErrorMessageComponentRegistry
 import { SupersetError, ErrorSource } from './types';
 import ErrorAlert from './ErrorAlert';
 
+const DEFAULT_TITLE = t('Unexpected Error');
+
 type Props = {
+  title?: string;
   error?: SupersetError;
   link?: string;
-  message?: string;
+  subtitle?: React.ReactNode;
+  copyText?: string;
   stackTrace?: string;
   source?: ErrorSource;
 };
 
 export default function ErrorMessageWithStackTrace({
+  title = DEFAULT_TITLE,
   error,
-  message,
+  subtitle,
+  copyText,
   link,
   stackTrace,
   source,
@@ -51,9 +57,9 @@ export default function ErrorMessageWithStackTrace({
   return (
     <ErrorAlert
       level="warning"
-      title={t('Unexpected Error')}
-      subtitle={message}
-      copyText={message}
+      title={title}
+      subtitle={subtitle}
+      copyText={copyText}
       source={source}
       body={
         link || stackTrace ? (