From 886d8fae360257ffa7f723cdf44c528fd0addfa5 Mon Sep 17 00:00:00 2001
From: Kyle Cunningham <codeincarnate@users.noreply.github.com>
Date: Fri, 1 Mar 2024 11:20:14 -0600
Subject: [PATCH] Table Panel: Improve text wrapping on hover (#83642)

* Fix up text wrapping

* Make sure there are basic cell styles

* codeincarnate/text-wrapping-hover-pt2/ run prettier

* Add comment for conditional

* Update condition

---------

Co-authored-by: jev forsberg <jev.forsberg@grafana.com>
---
 .../src/components/Table/DefaultCell.tsx      | 25 +++++++++++++++----
 .../grafana-ui/src/components/Table/styles.ts |  9 ++++---
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index 186455b7946..90628ee0d65 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -29,6 +29,8 @@ export const DefaultCell = (props: TableCellProps) => {
   const [hover, setHover] = useState(false);
   let value: string | ReactElement;
 
+  const OG_TWEET_LENGTH = 140; // 🙏
+
   const onMouseLeave = () => {
     setHover(false);
   };
@@ -49,7 +51,9 @@ export const DefaultCell = (props: TableCellProps) => {
 
   const isStringValue = typeof value === 'string';
 
-  const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled, isStringValue);
+  // Text should wrap when the content length is less than or equal to the length of an OG tweet and it contains whitespace
+  const textShouldWrap = displayValue.text.length <= OG_TWEET_LENGTH && /\s/.test(displayValue.text);
+  const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled, isStringValue, textShouldWrap);
 
   if (isStringValue) {
     let justifyContent = cellProps.style?.justifyContent;
@@ -99,7 +103,8 @@ function getCellStyle(
   cellOptions: TableCellOptions,
   displayValue: DisplayValue,
   disableOverflowOnHover = false,
-  isStringValue = false
+  isStringValue = false,
+  shouldWrapText = false
 ) {
   // How much to darken elements depends upon if we're in dark mode
   const darkeningFactor = tableStyles.theme.isDark ? 1 : -0.7;
@@ -128,13 +133,23 @@ function getCellStyle(
   // If we have definied colors return those styles
   // Otherwise we return default styles
   if (textColor !== undefined || bgColor !== undefined) {
-    return tableStyles.buildCellContainerStyle(textColor, bgColor, !disableOverflowOnHover, isStringValue);
+    return tableStyles.buildCellContainerStyle(
+      textColor,
+      bgColor,
+      !disableOverflowOnHover,
+      isStringValue,
+      shouldWrapText
+    );
   }
 
   if (isStringValue) {
-    return disableOverflowOnHover ? tableStyles.cellContainerTextNoOverflow : tableStyles.cellContainerText;
+    return disableOverflowOnHover
+      ? tableStyles.buildCellContainerStyle(undefined, undefined, false, true, shouldWrapText)
+      : tableStyles.buildCellContainerStyle(undefined, undefined, true, true, shouldWrapText);
   } else {
-    return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer;
+    return disableOverflowOnHover
+      ? tableStyles.buildCellContainerStyle(undefined, undefined, false, shouldWrapText)
+      : tableStyles.buildCellContainerStyle(undefined, undefined, true, false, shouldWrapText);
   }
 }
 
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index ebd7d0e1780..2446d96d9c3 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -15,7 +15,8 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
     color?: string,
     background?: string,
     overflowOnHover?: boolean,
-    asCellText?: boolean
+    asCellText?: boolean,
+    textShouldWrap?: boolean
   ) => {
     return css({
       label: overflowOnHover ? 'cellContainerOverflow' : 'cellContainerNoOverflow',
@@ -48,10 +49,10 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
 
       '&:hover': {
         overflow: overflowOnHover ? 'visible' : undefined,
-        width: overflowOnHover ? 'auto' : undefined,
-        height: overflowOnHover ? 'auto' : `${rowHeight - 1}px`,
+        width: textShouldWrap ? 'auto' : 'auto !important',
+        height: textShouldWrap ? 'auto !important' : `${rowHeight - 1}px`,
         minHeight: `${rowHeight - 1}px`,
-        wordBreak: overflowOnHover ? 'break-word' : undefined,
+        wordBreak: textShouldWrap ? 'break-word' : undefined,
         whiteSpace: overflowOnHover ? 'normal' : 'nowrap',
         boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
         background: overflowOnHover ? background ?? theme.components.table.rowHoverBackground : undefined,