fix: OPTIC-152: Uploading a text field but only 'true' is showing up not 'false'

web/libs/datamanager/src/components/CellViews/DateTimeCell.js

@@ -1,12 +1,12 @@
 import { format, isValid } from "date-fns";
+export const dateTimeFormat = "MMM dd yyyy, HH:mm:ss";
 
 export const DateTimeCell = (column) => {
   const date = new Date(column.value);
-  const dateFormat = "MMM dd yyyy, HH:mm:ss";
 
   return column.value ? (
     <div style={{ whiteSpace: "nowrap" }}>
-      {isValid(date) ? format(date, dateFormat) : ""}
+      {isValid(date) ? format(date, dateTimeFormat) : ""}
     </div>
   ) : (
     ""

web/libs/datamanager/src/components/CellViews/StringCell.js

@@ -1,24 +1,31 @@
-const valueToString = (value) => {
+import { format, isValid } from "date-fns";
+import { dateTimeFormat } from "./DateTimeCell";
+
+export const valueToString = (value) => {
   if (typeof value === "string") return value;
+  /* if undefined or null we'll treat it as empty string */
+  if (value === undefined || value === null) return "";
+  if (value instanceof Date && isValid(value)) return format(value, dateTimeFormat);
 
   try {
+    /* JSON.stringify will handle JSON and non-strings, non-null, non-undefined */
     return JSON.stringify(value);
   } catch {
-    return value.toString();
+    return 'Error: Invalid JSON';
   }
 };
 
 export const StringCell = ({ value }) => {
+  const style = {
+    maxHeight: "100%",
+    overflow: "hidden",
+    fontSize: 12,
+    lineHeight: "16px",
+  };
+
   return (
-    <div
-      style={{
-        maxHeight: "100%",
-        overflow: "hidden",
-        fontSize: 12,
-        lineHeight: "16px",
-      }}
-    >
-      {value ? valueToString(value) : ""}
+    <div style={style}>
+      {valueToString(value)}
     </div>
   );
 };

web/libs/datamanager/src/components/CellViews/__tests__/StringCell.test.js

@@ -0,0 +1,54 @@
+/* global describe, test, expect */
+import { format } from 'date-fns';
+import { dateTimeFormat } from '../DateTimeCell';
+import { valueToString } from '../StringCell';
+
+describe('StringCell valueToString', () => {
+  test('Undefined/Null', () => {
+    expect(valueToString(undefined)).toBe("");
+    expect(valueToString(null)).toBe("");
+  });
+
+  test('Boolean', () => {
+    expect(valueToString(true)).toBe("true");
+    expect(valueToString(false)).toBe("false");
+  });
+
+  test('Date', () => {
+    const testDate = new Date();
+
+    expect(valueToString(testDate)).toBe(format(testDate, dateTimeFormat));
+  });
+
+  test('String', () => {
+    const testString = 'Hello World!';
+    const testString2 = `Hello 
+
+
+    World!`;
+
+    expect(valueToString(testString)).toBe(testString);
+    expect(valueToString(testString2)).toBe(testString2);
+  });
+
+  test('JSON', () => {
+    const json1 = {
+      a: 1,
+      b: '2',
+      c: null,
+    };
+    const jsonCircular = { b: 5 };
+
+    jsonCircular.a = jsonCircular;
+
+    expect(valueToString(json1)).toBe(JSON.stringify(json1));
+    expect(valueToString(jsonCircular)).toBe('Error: Invalid JSON');
+  });
+
+  test('Number', () => {
+    const test = 1234;
+
+    expect(valueToString(test)).toBe(test.toString());
+    expect(valueToString(0)).toBe("0");
+  });
+});