Add 'Show error details' to GenericError

frontend/src/metabase/App.jsx

@@ -34,7 +34,7 @@ const getErrorComponent = ({ status, data, context }) => {
   ) {
     return <Archived entityName="question" linkTo="/questions/archive" />;
   } else {
-    return <GenericError />;
+    return <GenericError details={data && data.message} />;
   }
 };
 

frontend/src/metabase/components/ErrorDetails.jsx

+import React from "react";
+import { t } from "c-3po";
+import cx from "classnames";
+
+export default class ErrorDetails extends React.Component {
+  state = {
+    showError: false,
+  };
+  render() {
+    const { details, centered, className } = this.props;
+    if (!details) {
+      return null;
+    }
+    return (
+      <div className={className}>
+        <div className={centered ? "text-centered" : "text-left"}>
+          <a
+            onClick={() => this.setState({ showError: true })}
+            className="link cursor-pointer"
+          >{t`Show error details`}</a>
+        </div>
+        <div
+          style={{ display: this.state.showError ? "inherit" : "none" }}
+          className={cx("pt3", centered ? "text-centered" : "text-left")}
+        >
+          <h2>{t`Here's the full error message`}</h2>
+          <div
+            style={{ fontFamily: "monospace" }}
+            className="QueryError2-detailBody bordered rounded bg-grey-0 text-bold p2 mt1"
+          >
+            {details}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

frontend/src/metabase/components/GenericError.jsx

 import React from "react";
 import { t } from "c-3po";
 
-import ErrorMessage from "metabase/components/ErrorMessage.jsx";
+import ErrorMessage from "metabase/components/ErrorMessage";
+import ErrorDetails from "metabase/components/ErrorDetails";
 
 const GenericError = ({
   title = t`Something's gone wrong`,
   message = t`We've run into an error. You can try refreshing the page, or just go back.`,
+  details = null,
 }) => (
   <div className="flex flex-column layout-centered full-height">
     <ErrorMessage type="serverError" title={title} message={message} />
+    <ErrorDetails className="pt2" details={details} centered />
   </div>
 );
 

frontend/src/metabase/query_builder/components/VisualizationError.jsx

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { t } from "c-3po";
 import MetabaseSettings from "metabase/lib/settings";
 import ErrorMessage from "metabase/components/ErrorMessage";
+import ErrorDetails from "metabase/components/ErrorDetails";
 
 const EmailAdmin = () => {
   const adminEmail = MetabaseSettings.adminEmail();
@@ -86,24 +87,7 @@ class VisualizationError extends Component {
           <div className="QueryError2-details">
             <h1 className="text-bold">{t`There was a problem with your question`}</h1>
             <p className="QueryError-messageText">{t`Most of the time this is caused by an invalid selection or bad input value. Double check your inputs and retry your query.`}</p>
-            <div className="pt2">
-              <a
-                onClick={() => this.setState({ showError: true })}
-                className="link cursor-pointer"
-              >{t`Show error details`}</a>
-            </div>
-            <div
-              style={{ display: this.state.showError ? "inherit" : "none" }}
-              className="pt3 text-left"
-            >
-              <h2>{t`Here's the full error message`}</h2>
-              <div
-                style={{ fontFamily: "monospace" }}
-                className="QueryError2-detailBody bordered rounded bg-grey-0 text-bold p2 mt1"
-              >
-                {error}
-              </div>
-            </div>
+            <ErrorDetails className="pt2" details={error} />
           </div>
         </div>
       );