From 25e5f704eb051b9cef7e511c242fb1deb5655b88 Mon Sep 17 00:00:00 2001
From: Paul Rosenzweig <paulrosenzweig@users.noreply.github.com>
Date: Mon, 16 Nov 2020 13:50:01 -0500
Subject: [PATCH] Fix scalar error when rendering null (#13808)
* fix scalar error when rendering null
* remove ".only" from test
* make check for null more explicit
---
.../query_builder/components/VisualizationError.jsx | 10 ++++++++++
.../visualizations/visualizations/Scalar.jsx | 4 +++-
.../visualizations/Scalar.unit.spec.js | 12 ++++++++++++
3 files changed, 25 insertions(+), 1 deletion(-)
diff --git a/frontend/src/metabase/query_builder/components/VisualizationError.jsx b/frontend/src/metabase/query_builder/components/VisualizationError.jsx
index 1e205899726..09c7b2664a8 100644
--- a/frontend/src/metabase/query_builder/components/VisualizationError.jsx
+++ b/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 &&
diff --git a/frontend/src/metabase/visualizations/visualizations/Scalar.jsx b/frontend/src/metabase/visualizations/visualizations/Scalar.jsx
index 3e9fef1851c..0434651a98a 100644
--- a/frontend/src/metabase/visualizations/visualizations/Scalar.jsx
+++ b/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 = {
diff --git a/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js b/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js
index 20f09a9de07..b2840574bfb 100644
--- a/frontend/test/metabase/visualizations/visualizations/Scalar.unit.spec.js
+++ b/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
+ });
});
--
GitLab