Add scrolling to SQL error messages (#18144)

frontend/src/metabase/css/query_builder.css

@@ -241,13 +241,6 @@
   margin-right: auto;
 }
 
-.QueryError-iconWrapper {
-  padding: 2em;
-  margin-bottom: 2em;
-  border: 4px solid var(--color-accent3);
-  border-radius: 99px;
-}
-
 .QueryError-image {
   background-repeat: no-repeat;
   margin-bottom: 1rem;
@@ -277,12 +270,6 @@
   background-image: url("~assets/img/stopwatch.svg");
 }
 
-.QueryError-message {
-  /* IE flexbox align-items:center bug workaround */
-  /* https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container */
-  max-width: 100%;
-}
-
 .QueryError-messageText {
   line-height: 1.4;
 }

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

@@ -9,6 +9,11 @@ import cx from "classnames";
 import MetabaseSettings from "metabase/lib/settings";
 import ErrorMessage from "metabase/components/ErrorMessage";
 import ErrorDetails from "metabase/components/ErrorDetails";
+import {
+  QueryError,
+  QueryErrorIcon,
+  QueryErrorMessage,
+} from "./VisualizationError.styled";
 
 const EmailAdmin = () => {
   const adminEmail = MetabaseSettings.adminEmail();
@@ -137,22 +142,14 @@ class VisualizationError extends Component {
         processedError = stripRemarks(processedError);
       }
       return (
-        <div
-          className={cx(className, "QueryError flex align-center text-error")}
-        >
-          <div className="QueryError-iconWrapper">
-            <svg
-              className="QueryError-icon"
-              viewBox="0 0 32 32"
-              width="64"
-              height="64"
-              fill="currentcolor"
-            >
+        <QueryError className={className}>
+          <QueryErrorIcon>
+            <svg viewBox="0 0 32 32" width="64" height="64" fill="currentcolor">
               <path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z " />
             </svg>
-          </div>
-          <span className="QueryError-message">{processedError}</span>
-        </div>
+          </QueryErrorIcon>
+          <QueryErrorMessage>{processedError}</QueryErrorMessage>
+        </QueryError>
       );
     } else {
       return (

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

+import styled from "styled-components";
+import { color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+
+export const QueryError = styled.div`
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const QueryErrorIcon = styled.div`
+  color: ${color("error")};
+  padding: ${space(3)};
+  margin-bottom: ${space(3)};
+  border: 0.25rem solid ${color("accent3")};
+  border-radius: 50%;
+`;
+
+export const QueryErrorMessage = styled.div`
+  color: ${color("error")};
+  max-width: 31.25rem;
+  min-height: 0;
+`;

frontend/test/metabase-visual/visualizations/bar.cy.spec.js

 import { restore, visitQuestionAdhoc } from "__support__/e2e/cypress";
 
-const testQuery = {
-  type: "native",
-  native: {
-    query:
-      "SELECT X, A, B, C " +
-      "FROM (VALUES (1,20,30,30),(2,10,-40,-20),(3,20,10,30)) T (X, A, B, C)",
-  },
-  database: 1,
-};
-
 describe("visual tests > visualizations > bar", () => {
   beforeEach(() => {
     restore();
@@ -19,6 +9,42 @@ describe("visual tests > visualizations > bar", () => {
   });
 
   it("with stacked series", () => {
+    const testQuery = {
+      type: "native",
+      native: {
+        query:
+          "SELECT X, A, B, C " +
+          "FROM (VALUES (1,20,30,30),(2,10,-40,-20),(3,20,10,30)) T (X, A, B, C)",
+      },
+      database: 1,
+    };
+
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "bar",
+      visualization_settings: {
+        "graph.dimensions": ["X"],
+        "graph.metrics": ["A", "B", "C"],
+        "stackable.stack_type": "stacked",
+      },
+    });
+
+    cy.wait("@dataset");
+
+    cy.percySnapshot();
+  });
+
+  it("with an invalid SQL query and a long error message", () => {
+    const testQuery = {
+      type: "native",
+      native: {
+        query: Array(50)
+          .fill("SELECT A, B, C FROM EXAMPLE")
+          .join(" UNION ALL\n"),
+      },
+      database: 1,
+    };
+
     visitQuestionAdhoc({
       dataset_query: testQuery,
       display: "bar",