From ed8fd633aab41a99451873ca9376c8b361afb4a1 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Fri, 26 Jan 2024 15:39:07 -0500
Subject: [PATCH 1/5] fix: OPTIC-108: Text on grid view should be truncated

---
 src/components/DataGroups/AudioDataGroup.js |  4 ++--
 src/components/DataGroups/TextDataGroup.js  | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/DataGroups/AudioDataGroup.js b/src/components/DataGroups/AudioDataGroup.js
index 495c0de5..24b7c52a 100644
--- a/src/components/DataGroups/AudioDataGroup.js
+++ b/src/components/DataGroups/AudioDataGroup.js
@@ -2,10 +2,10 @@ import { MediaPlayer } from "../Common/MediaPlayer/MediaPlayer";
 
 export const AudioDataGroup = ({ value }) => {
   return (
-    <div style={{ padding: 10, height: AudioDataGroup.height }}>
+    <div style={{ padding: 10, height: AudioDataGroup.height, boxSizing: "content-box" }}>
       <MediaPlayer src={value} />
     </div>
   );
 };
 
-AudioDataGroup.height = 42;
+AudioDataGroup.height = 32;
diff --git a/src/components/DataGroups/TextDataGroup.js b/src/components/DataGroups/TextDataGroup.js
index 052a87f6..e7437875 100644
--- a/src/components/DataGroups/TextDataGroup.js
+++ b/src/components/DataGroups/TextDataGroup.js
@@ -1,21 +1,27 @@
+import { Tooltip } from "../Common/Tooltip/Tooltip";
+
 const valueToString = (value) => {
   if (typeof value === "string") return value;
 
   try {
     return JSON.stringify(value);
   } catch {
-    return value.toString();
+    return (value ?? "").toString();
   }
 };
 
 export const TextDataGroup = ({ value }) => {
+  const output = valueToString(value);
+
   return (
-    <div
-      style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden" }}
-    >
-      {value ? valueToString(value) : ""}
-    </div>
+    <Tooltip title={output}>
+      <div
+        style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}
+      >
+        {output}
+      </div>
+    </Tooltip>
   );
 };
 
-TextDataGroup.height = 77;
+TextDataGroup.height = 32;

From 15963615c95312b97dd216013a1264758987f61a Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Mon, 29 Jan 2024 10:03:20 -0500
Subject: [PATCH 2/5] adding updates based on feedback

---
 src/components/DataGroups/TextDataGroup.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/DataGroups/TextDataGroup.js b/src/components/DataGroups/TextDataGroup.js
index e7437875..ef3cbf3a 100644
--- a/src/components/DataGroups/TextDataGroup.js
+++ b/src/components/DataGroups/TextDataGroup.js
@@ -12,12 +12,17 @@ const valueToString = (value) => {
 
 export const TextDataGroup = ({ value }) => {
   const output = valueToString(value);
+  const style = { 
+    padding: 5, 
+    height: TextDataGroup.height, 
+    overflow: "hidden", 
+    whiteSpace: "nowrap", 
+    textOverflow: "ellipsis",
+  };
 
   return (
     <Tooltip title={output}>
-      <div
-        style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }}
-      >
+      <div style={style}>
         {output}
       </div>
     </Tooltip>

From 99dc78b63d6a738c0dd5139df709071a71c3a05b Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Mon, 29 Jan 2024 16:55:36 -0500
Subject: [PATCH 3/5] getting rid of tooltip component because position
 calculation is weird for long text

---
 src/components/DataGroups/TextDataGroup.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/DataGroups/TextDataGroup.js b/src/components/DataGroups/TextDataGroup.js
index ef3cbf3a..3708c8ae 100644
--- a/src/components/DataGroups/TextDataGroup.js
+++ b/src/components/DataGroups/TextDataGroup.js
@@ -1,5 +1,3 @@
-import { Tooltip } from "../Common/Tooltip/Tooltip";
-
 const valueToString = (value) => {
   if (typeof value === "string") return value;
 
@@ -21,11 +19,9 @@ export const TextDataGroup = ({ value }) => {
   };
 
   return (
-    <Tooltip title={output}>
-      <div style={style}>
-        {output}
-      </div>
-    </Tooltip>
+    <div style={style} title={output}>
+      {output}
+    </div>
   );
 };
 

From e80e01d0f31edc93282fc11e6b9bf31016c147bc Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Tue, 30 Jan 2024 13:58:45 -0500
Subject: [PATCH 4/5] TextDataGroup behavior should match behavior of
 StringCell

---
 src/components/DataGroups/TextDataGroup.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/DataGroups/TextDataGroup.js b/src/components/DataGroups/TextDataGroup.js
index 3708c8ae..453b1948 100644
--- a/src/components/DataGroups/TextDataGroup.js
+++ b/src/components/DataGroups/TextDataGroup.js
@@ -1,10 +1,17 @@
-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';
   }
 };
 

From 34e5fad87309ec76258d9c1182dd9874ff5022b7 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Tue, 30 Jan 2024 13:59:55 -0500
Subject: [PATCH 5/5] improved readability

---
 src/components/DataGroups/AudioDataGroup.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/DataGroups/AudioDataGroup.js b/src/components/DataGroups/AudioDataGroup.js
index 24b7c52a..66ee5784 100644
--- a/src/components/DataGroups/AudioDataGroup.js
+++ b/src/components/DataGroups/AudioDataGroup.js
@@ -1,8 +1,14 @@
 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, boxSizing: "content-box" }}>
+    <div style={style}>
       <MediaPlayer src={value} />
     </div>
   );