[superset] branch master updated: feat: truncate long values in table viz, a per-column setting (#19383)

[rusackas]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 7e504ff680 feat: truncate long values in table viz, a per-column 
setting (#19383)
7e504ff680 is described below

commit 7e504ff680698106cf9008b4c2814b01fcac90bb
Author: stevetracvc <70416691+stevetra...@users.noreply.github.com>
AuthorDate: Wed Jul 6 22:16:48 2022 -0600

    feat: truncate long values in table viz, a per-column setting (#19383)
    
    * feat: truncate long values, a per-column setting
    
    * fix: lint
    
    * fix: removed width for column control
    
    * fix: removed truncate option for time, bool, and numeric columns
    
    * prevent extra div if not truncating
---
 .../components/ColumnConfigControl/constants.tsx   | 11 ++++++++
 .../plugins/plugin-chart-table/src/Styles.tsx      | 11 ++++++++
 .../plugins/plugin-chart-table/src/TableChart.tsx  | 29 +++++++++++++++++++++-
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git 
a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
 
b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
index 150f1e91f0..a749e5a7cc 100644
--- 
a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
+++ 
b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl/constants.tsx
@@ -40,6 +40,7 @@ export type SharedColumnConfigProp =
   | 'd3SmallNumberFormat'
   | 'd3TimeFormat'
   | 'horizontalAlign'
+  | 'truncateLongCells'
   | 'showCellBars';
 
 const emitTarget: ControlFormItemSpec<'Input'> = {
@@ -142,6 +143,14 @@ const colorPositiveNegative: 
ControlFormItemSpec<'Checkbox'> = {
   debounceDelay: 200,
 };
 
+const truncateLongCells: ControlFormItemSpec<'Checkbox'> = {
+  controlType: 'Checkbox',
+  label: t('Truncate Cells'),
+  description: t('Truncate long cells to the "min width" set above'),
+  defaultValue: false,
+  debounceDelay: 400,
+};
+
 /**
  * All configurable column formatting properties.
  */
@@ -159,6 +168,7 @@ export const SHARED_COLUMN_CONFIG_PROPS = {
   d3TimeFormat,
   fractionDigits,
   columnWidth,
+  truncateLongCells,
   horizontalAlign,
   showCellBars,
   alignPositiveNegative,
@@ -175,6 +185,7 @@ export const DEFAULT_CONFIG_FORM_LAYOUT: 
ColumnConfigFormLayout = {
       'columnWidth',
       { name: 'horizontalAlign', override: { defaultValue: 'left' } },
     ],
+    ['truncateLongCells'],
   ],
   [GenericDataType.NUMERIC]: [
     [
diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx 
b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index 59a40b20bb..9219b6f003 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -82,6 +82,17 @@ export default styled.div`
       float: right;
     }
 
+    .dt-truncate-cell {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .dt-truncate-cell:hover {
+      overflow: visible;
+      white-space: normal;
+      height: auto;
+    }
+
     .dt-pagination {
       text-align: right;
       /* use padding instead of margin so clientHeight can capture it */
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx 
b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 73a639df01..f56381bb96 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -341,6 +341,8 @@ export default function TableChart<D extends DataRecord = 
DataRecord>(
           ? defaultColorPN
           : config.colorPositiveNegative;
 
+      const { truncateLongCells } = config;
+
       const hasColumnColorFormatters =
         isNumeric &&
         Array.isArray(columnColorFormatters) &&
@@ -411,12 +413,37 @@ export default function TableChart<D extends DataRecord = 
DataRecord>(
             ].join(' '),
           };
           if (html) {
+            if (truncateLongCells) {
+              // eslint-disable-next-line react/no-danger
+              return (
+                <StyledCell {...cellProps}>
+                  <div
+                    className="dt-truncate-cell"
+                    style={columnWidth ? { width: columnWidth } : undefined}
+                    dangerouslySetInnerHTML={html}
+                  />
+                </StyledCell>
+              );
+            }
             // eslint-disable-next-line react/no-danger
             return <StyledCell {...cellProps} dangerouslySetInnerHTML={html} 
/>;
           }
           // If cellProps renderes textContent already, then we don't have to
           // render `Cell`. This saves some time for large tables.
-          return <StyledCell {...cellProps}>{text}</StyledCell>;
+          return (
+            <StyledCell {...cellProps}>
+              {truncateLongCells ? (
+                <div
+                  className="dt-truncate-cell"
+                  style={columnWidth ? { width: columnWidth } : undefined}
+                >
+                  {text}
+                </div>
+              ) : (
+                text
+              )}
+            </StyledCell>
+          );
         },
         Header: ({ column: col, onClick, style, onDragStart, onDrop }) => (
           <th