No error message on preview api error (#40996)

* Correctly pass an error string to Vizualization

* Fix error layout for preview vizualization

* Do not animate preview vizualization height

* Add reproduction for #40724

* Fix test description

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Rename coerceError to getErrorMessage

---------

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.jsx

@@ -7,8 +7,6 @@ import _ from "underscore";
 import QuestionResultLoader from "metabase/containers/QuestionResultLoader";
 import Button from "metabase/core/components/Button";
 import CS from "metabase/css/core/index.css";
-import { useModalOpen } from "metabase/hooks/use-modal-open";
-import { isReducedMotionPreferred } from "metabase/lib/dom";
 import { Icon } from "metabase/ui";
 import Visualization from "metabase/visualizations/components/Visualization";
 import * as Lib from "metabase-lib";
@@ -74,8 +72,12 @@ const NotebookStepPreview = ({ step, onClose }) => {
         </PreviewButtonContainer>
       ) : (
         <QuestionResultLoader question={activeQuestion}>
-          {({ rawSeries, result }) => (
-            <VisualizationPreview rawSeries={rawSeries} result={result} />
+          {({ rawSeries, result, error }) => (
+            <VisualizationPreview
+              rawSeries={rawSeries}
+              result={result}
+              error={error}
+            />
           )}
         </QuestionResultLoader>
       )}
@@ -83,24 +85,18 @@ const NotebookStepPreview = ({ step, onClose }) => {
   );
 };
 
-const VisualizationPreview = ({ rawSeries, result }) => {
-  const { open } = useModalOpen();
-  const preferReducedMotion = isReducedMotionPreferred();
-
-  const transitionDuration = preferReducedMotion ? 80 : 700;
+export const VisualizationPreview = ({ rawSeries, result, error }) => {
+  const err = getErrorMessage(error || result?.error);
 
   return (
     <Visualization
       rawSeries={rawSeries}
-      error={result && result.error}
+      error={err}
       className={cx("bordered shadowed rounded bg-white", {
-        p2: result && result.error,
+        p2: err,
       })}
       style={{
-        height: open
-          ? getPreviewHeightForResult(result)
-          : getPreviewHeightForResult(result) / 2,
-        transition: `height ${transitionDuration}ms cubic-bezier(0, 0, 0.2, 1)`,
+        height: err ? "auto" : getPreviewHeightForResult(result),
       }}
     />
   );
@@ -111,4 +107,20 @@ function getPreviewHeightForResult(result) {
   return rowCount * 36 + 36 + 2;
 }
 
+function getErrorMessage(err) {
+  if (!err) {
+    return null;
+  }
+
+  if (typeof err === "string") {
+    return err;
+  }
+
+  if (typeof err.message === "string") {
+    return err.message;
+  }
+
+  return t`Could not fetch preview`;
+}
+
 export default NotebookStepPreview;

frontend/src/metabase/query_builder/components/notebook/NotebookStepPreview.unit.spec.tsx

+import { renderWithProviders, screen } from "__support__/ui";
+
+import { VisualizationPreview } from "./NotebookStepPreview";
+
+describe("VisualizationPreview", () => {
+  it("should render an error message when an error occurs (metabase#40724)", () => {
+    renderWithProviders(
+      <VisualizationPreview
+        rawSeries={null}
+        result={null}
+        error={{ status: 0 }}
+      />,
+    );
+    expect(screen.getByText("Could not fetch preview")).toBeInTheDocument();
+  });
+
+  it("should render a custom error message when an error occurs (metabase#40724)", () => {
+    const message = "This is a custom message";
+    renderWithProviders(
+      <VisualizationPreview
+        rawSeries={null}
+        result={null}
+        error={{ message }}
+      />,
+    );
+    expect(screen.getByText(message)).toBeInTheDocument();
+  });
+
+  it("should render an error message when an error is passed from the results (metabase#40724)", () => {
+    const message = "This is a custom message";
+    renderWithProviders(
+      <VisualizationPreview
+        rawSeries={null}
+        result={{ error: message }}
+        error={null}
+      />,
+    );
+    expect(screen.getByText(message)).toBeInTheDocument();
+  });
+});