fix: OPTIC-108: Text on grid view should be truncated (#295)

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;

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;