fix: OPTIC-108: Text on grid view should be truncated

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");
+  });
+});

web/libs/datamanager/src/components/DataGroups/AudioDataGroup.js

@@ -1,11 +1,17 @@
 import { MediaPlayer } from "../Common/MediaPlayer/MediaPlayer";
 
 export const AudioDataGroup = ({ value }) => {
+  const style = {
+    padding: 10, 
+    height: AudioDataGroup.height, 
+    boxSizing: "content-box",
+  };
+
   return (
-    <div style={{ padding: 10, height: AudioDataGroup.height }}>
+    <div style={style}>
       <MediaPlayer src={value} />
     </div>
   );
 };
 
-AudioDataGroup.height = 42;
+AudioDataGroup.height = 32;

web/libs/datamanager/src/components/DataGroups/TextDataGroup.js

@@ -1,21 +1,35 @@
-const valueToString = (value) => {
+import { format, isValid } from "date-fns";
+import { dateTimeFormat } from "../CellViews/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 TextDataGroup = ({ value }) => {
+  const output = valueToString(value);
+  const style = { 
+    padding: 5, 
+    height: TextDataGroup.height, 
+    overflow: "hidden", 
+    whiteSpace: "nowrap", 
+    textOverflow: "ellipsis",
+  };
+
   return (
-    <div
-      style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden" }}
-    >
-      {value ? valueToString(value) : ""}
+    <div style={style} title={output}>
+      {output}
     </div>
   );
 };
 
-TextDataGroup.height = 77;
+TextDataGroup.height = 32;

web/libs/datamanager/src/components/DataGroups/__tests__/TextDataGroup.test.js

@@ -0,0 +1,55 @@
+/* global describe, test, expect */
+import { format } from 'date-fns';
+
+import { valueToString } from '../TextDataGroup';
+import { dateTimeFormat } from '../../CellViews/DateTimeCell';
+
+describe('TextDataGroup 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");
+  });
+});