From 0df5fcad1a3a3ada1f60cfb0b1d5583772bd8577 Mon Sep 17 00:00:00 2001
From: Matthew Wilcoxson <Matthew.Wilcoxson@diamond.ac.uk>
Date: Thu, 4 Jun 2026 17:35:55 +0100
Subject: [PATCH 1/2] Fix for dash appearing when the number zero should
 display. In JsonForms.

---
 .../jsonforms/components/DataBox.test.tsx     | 31 +++++++++++++++-
 .../helpers/jsonforms/components/DataBox.tsx  |  8 ++--
 .../jsonforms/components/DataCell.test.tsx    | 37 +++++++++++++++----
 .../helpers/jsonforms/components/DataCell.tsx |  2 +-
 4 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/components/helpers/jsonforms/components/DataBox.test.tsx b/src/components/helpers/jsonforms/components/DataBox.test.tsx
index b3873fd6..27109eb3 100644
--- a/src/components/helpers/jsonforms/components/DataBox.test.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.test.tsx
@@ -16,6 +16,33 @@ describe("DataBox", () => {
     expect(container.querySelector("dd span.empty")).not.toBeInTheDocument();
   });
 
+  test("Should render data if zero and label", () => {
+    const data = "0";
+    const { container } = render(<DataBox {...props} data={data} />);
+
+    expect(screen.getByText(props.label)).toBeInTheDocument();
+    expect(screen.getByText(data)).toBeInTheDocument();
+    expect(container.querySelector("dd span.empty")).not.toBeInTheDocument();
+  });
+
+  test("Should render data if zero number and label", () => {
+    const data = 0;
+    const { container } = render(<DataBox {...props} data={data} />);
+
+    expect(screen.getByText(props.label)).toBeInTheDocument();
+    expect(screen.getByText(data)).toBeInTheDocument();
+    expect(container.querySelector("dd span.empty")).not.toBeInTheDocument();
+  });
+
+  test("Should render data if zero number and label", () => {
+    const data = 0.0;
+    const { container } = render(<DataBox {...props} data={data} />);
+
+    expect(screen.getByText(props.label)).toBeInTheDocument();
+    expect(screen.getByText(data)).toBeInTheDocument();
+    expect(container.querySelector("dd span.empty")).not.toBeInTheDocument();
+  });
+
   test("Should render '-' with empty data", () => {
     const { container } = render(<DataBox {...props} data="" />);
 
@@ -23,8 +50,8 @@ describe("DataBox", () => {
     expect(container.querySelector("dd span.empty")).toBeInTheDocument();
   });
 
-  test("Should render '-' with null data", () => {
-    const { container } = render(<DataBox {...props} data={null} />);
+  test("Should render '-' with whitespace data", () => {
+    const { container } = render(<DataBox {...props} data="   " />);
 
     expect(screen.getByText(props.label)).toBeInTheDocument();
     expect(container.querySelector("dd span.empty")).toBeInTheDocument();
diff --git a/src/components/helpers/jsonforms/components/DataBox.tsx b/src/components/helpers/jsonforms/components/DataBox.tsx
index a9b2bb8f..1ea7bc6c 100644
--- a/src/components/helpers/jsonforms/components/DataBox.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.tsx
@@ -2,11 +2,13 @@ import { Box, Stack, Typography } from "@mui/material";
 
 interface DataBoxProps {
   label: string;
-  data?: string | null;
+  data?: string | number | null;
 }
 
-export const DataOrEmpty = ({ data }: { data?: string | null }) =>
-  data ? (
+export const DataOrEmpty = ({ data }: { data?: string | number | null }) =>
+  data !== undefined &&
+  data !== null &&
+  (typeof data !== "string" || data.trim() !== "") ? (
     data
   ) : (
     <Typography
diff --git a/src/components/helpers/jsonforms/components/DataCell.test.tsx b/src/components/helpers/jsonforms/components/DataCell.test.tsx
index 195902a0..2991bf9d 100644
--- a/src/components/helpers/jsonforms/components/DataCell.test.tsx
+++ b/src/components/helpers/jsonforms/components/DataCell.test.tsx
@@ -2,14 +2,32 @@ import { render, screen } from "@testing-library/react";
 
 import { DataCell } from "./DataCell";
 
-const props = {
-  data: "Data 1234",
-};
-
 describe("DataCell", () => {
-  test("Should render data and label", () => {
-    const { container } = render(<DataCell {...props} />);
-    expect(screen.getByText(props.data)).toBeInTheDocument();
+  test("Should render data string", () => {
+    const data = "Data 1234";
+    const { container } = render(<DataCell data={data} />);
+    expect(screen.getByText(data)).toBeInTheDocument();
+    expect(container.querySelector("span.empty")).not.toBeInTheDocument();
+  });
+
+  test("Should render data with 0", () => {
+    const data = "0";
+    const { container } = render(<DataCell data={data} />);
+    expect(screen.getByText(data)).toBeInTheDocument();
+    expect(container.querySelector("span.empty")).not.toBeInTheDocument();
+  });
+
+  test("Should render data with 0 number", () => {
+    const data = 0;
+    const { container } = render(<DataCell data={data} />);
+    expect(screen.getByText(data)).toBeInTheDocument();
+    expect(container.querySelector("span.empty")).not.toBeInTheDocument();
+  });
+
+  test("Should render data with 0.0 number", () => {
+    const data = 0.0;
+    const { container } = render(<DataCell data={data} />);
+    expect(screen.getByText(data)).toBeInTheDocument();
     expect(container.querySelector("span.empty")).not.toBeInTheDocument();
   });
 
@@ -18,6 +36,11 @@ describe("DataCell", () => {
     expect(container.querySelector("span.empty")).toBeInTheDocument();
   });
 
+  test("Should render '-' with whitespace data", () => {
+    const { container } = render(<DataCell data="  " />);
+    expect(container.querySelector("span.empty")).toBeInTheDocument();
+  });
+
   test("Should render '-' with null data", () => {
     const { container } = render(<DataCell data={null} />);
     expect(container.querySelector("span.empty")).toBeInTheDocument();
diff --git a/src/components/helpers/jsonforms/components/DataCell.tsx b/src/components/helpers/jsonforms/components/DataCell.tsx
index 66939dc4..53fbd315 100644
--- a/src/components/helpers/jsonforms/components/DataCell.tsx
+++ b/src/components/helpers/jsonforms/components/DataCell.tsx
@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material";
 import { DataOrEmpty } from "./DataBox";
 
 interface DataCellProps {
-  data?: string | null;
+  data?: string | number | null;
 }
 
 const DataCell = ({ data }: DataCellProps) => (

From 7a2e027cb3cda0eb5a067635ea826ae436f64e83 Mon Sep 17 00:00:00 2001
From: Matthew Wilcoxson <github+anon@akademy.co.uk>
Date: Mon, 8 Jun 2026 16:27:22 +0100
Subject: [PATCH 2/2] Rename tests

---
 src/components/helpers/jsonforms/components/DataBox.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/helpers/jsonforms/components/DataBox.test.tsx b/src/components/helpers/jsonforms/components/DataBox.test.tsx
index 27109eb3..76c7d2a5 100644
--- a/src/components/helpers/jsonforms/components/DataBox.test.tsx
+++ b/src/components/helpers/jsonforms/components/DataBox.test.tsx
@@ -25,7 +25,7 @@ describe("DataBox", () => {
     expect(container.querySelector("dd span.empty")).not.toBeInTheDocument();
   });
 
-  test("Should render data if zero number and label", () => {
+  test("Should render data if zero int number and label", () => {
     const data = 0;
     const { container } = render(<DataBox {...props} data={data} />);
 
@@ -34,7 +34,7 @@ describe("DataBox", () => {
     expect(container.querySelector("dd span.empty")).not.toBeInTheDocument();
   });
 
-  test("Should render data if zero number and label", () => {
+  test("Should render data if zero floating-point number and label", () => {
     const data = 0.0;
     const { container } = render(<DataBox {...props} data={data} />);