Fix scalar error when rendering null (#13808)

* fix scalar error when rendering null

* remove ".only" from test

* make check for null more explicit

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

@@ -63,6 +63,16 @@ class VisualizationError extends Component {
           />
         );
       }
+    } else if (error instanceof Error) {
+      return (
+        <div className={cx(className, "QueryError2 flex justify-center")}>
+          <div className="QueryError-image QueryError-image--queryError mr4" />
+          <div className="QueryError2-details">
+            <h1 className="text-bold">{t`There was a problem with this visualization`}</h1>
+            <ErrorDetails className="pt2" details={error} />
+          </div>
+        </div>
+      );
     } else if (
       card &&
       card.dataset_query &&

frontend/src/metabase/visualizations/visualizations/Scalar.jsx

@@ -206,7 +206,9 @@ export default class Scalar extends Component {
     // use the compact version of formatting if the component is narrower than
     // the cutoff and the formatted value is longer than the cutoff
     const displayCompact =
-      fullScalarValue.length > COMPACT_MIN_LENGTH && width < COMPACT_MAX_WIDTH;
+      fullScalarValue !== null &&
+      fullScalarValue.length > COMPACT_MIN_LENGTH &&
+      width < COMPACT_MAX_WIDTH;
     const displayValue = displayCompact ? compactScalarValue : fullScalarValue;
 
     const clicked = {

frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js

@@ -51,4 +51,16 @@ describe("MetricForm", () => {
     );
     getByText("12.3k");
   });
+
+  it("should render null", () => {
+    const { getByText } = render(
+      <Scalar
+        isDashboard // displays title
+        series={series(null)}
+        settings={settings}
+        visualizationIsClickable={() => false}
+      />,
+    );
+    getByText("Scalar Title"); // just confirms that it rendered
+  });
 });