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

apache#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/SqlLab/components/ResultSet.tsx

@@ -20,7 +20,7 @@ import React, { CSSProperties } from 'react';
 import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap';
 import Button from 'src/components/Button';
 import shortid from 'shortid';
-import { t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 
 import ErrorMessageWithStackTrace from 'src/components/ErrorMessage/ErrorMessageWithStackTrace';
 import Loading from '../../components/Loading';
@@ -57,6 +57,11 @@ interface ResultSetState {
   data: Record<string, any>[];
 }
 
+const MonospaceDiv = styled.div`
+  font-family: ${({ theme }) => theme.typography.families.monospace};
+  white-space: pre;
+`;
+
 export default class ResultSet extends React.PureComponent<
   ResultSetProps,
   ResultSetState
@@ -232,8 +237,10 @@ export default class ResultSet extends React.PureComponent<
       return (
         <div className="result-set-error-message">
           <ErrorMessageWithStackTrace
+            title={t('Database Error')}
             error={query?.errors?.[0]}
-            message={query.errorMessage || undefined}
+            subtitle={<MonospaceDiv>{query.errorMessage}</MonospaceDiv>}
+            copyText={query.errorMessage || undefined}
             link={query.link}
             source="sqllab"
           />

superset-frontend/src/chart/Chart.jsx

@@ -163,10 +163,12 @@ class Chart extends React.PureComponent {
       extra.owners = owners;
       error.extra = extra;
     }
+    const message = chartAlert || queryResponse?.message;
     return (
       <ErrorMessageWithStackTrace
         error={error}
-        message={chartAlert || queryResponse?.message}
+        subtitle={message}
+        copyText={message}
         link={queryResponse ? queryResponse.link : null}
         source={dashboardId ? 'dashboard' : 'explore'}
         stackTrace={chartStackTrace}

superset-frontend/src/components/ErrorBoundary.jsx

@@ -55,7 +55,8 @@ export default class ErrorBoundary extends React.Component {
       if (this.props.showMessage) {
         return (
           <ErrorMessageWithStackTrace
-            message={message}
+            subtitle={message}
+            copyText={message}
             stackTrace={info ? info.componentStack : null}
           />
         );

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 ? (