Fix for dash appearing when the number zero should display.

src/components/helpers/jsonforms/components/DataBox.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { DataBox } from "./DataBox";
+import {DataBox, DataOrEmpty} from "./DataBox";
 
 const props = {
   label: "A Label",
@@ -15,17 +15,44 @@
     expect(screen.getByText(props.data)).toBeInTheDocument();
     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="" />);
 
     expect(screen.getByText(props.label)).toBeInTheDocument();
     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();
   });

src/components/helpers/jsonforms/components/DataBox.tsx

@@ -2,11 +2,11 @@ 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

src/components/helpers/jsonforms/components/DataCell.test.tsx

@@ -2,22 +2,45 @@ 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();
+  });
+
   test("Should render '-' with empty data", () => {
     const { container } = render(<DataCell data="" />);
     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();

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) => (