feat(datatable): render html correctly (#199)

* feat(datatable): render html correctly n * fix(sanitize string): sanitize string before parsing n
apache · Nov 26, 2021 · a937a2a · a937a2a
1 parent ddbd50f
commit a937a2a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 6 deletions.
diff --git a/...erset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/package.json b/...erset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/package.json
@@ -27,7 +27,9 @@
   },
   "dependencies": {
     "@airbnb/lunar": "^2.16.0",
-    "@airbnb/lunar-icons": "^2.1.4"
+    "@airbnb/lunar-icons": "^2.1.4",
+    "@types/dompurify": "^0.0.33",
+    "dompurify": "^1.0.11"
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.12.0",

diff --git a/...rset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx b/...rset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx
@@ -4,6 +4,7 @@ import Text from '@airbnb/lunar/lib/components/Text';
 import Input from '@airbnb/lunar/lib/components/Input';
 import withStyles, { WithStylesProps } from '@airbnb/lunar/lib/composers/withStyles';
 import { Renderers, ParentRow, ColumnMetadata } from '@airbnb/lunar/lib/components/DataTable/types';
+import dompurify from 'dompurify';
 import { getRenderer, ColumnType, heightType, Cell } from './renderer';
 
 type Props = {
@@ -58,6 +59,18 @@ function getCellHash(cell: Cell) {
   return `${cell.key}#${cell.value}`;
 }
 
+function getText(value: string | number) {
+  if (typeof value === 'string') {
+    const span = document.createElement('span');
+    const sanitizedString = dompurify.sanitize(value);
+    span.innerHTML = sanitizedString;
+
+    return String(span.textContent || span.innerText);
+  }
+
+  return String(value);
+}
+
 class TableVis extends React.PureComponent<InternalTableProps, TableState> {
   static defaultProps = defaultProps;
 
@@ -187,14 +200,29 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
     const keys = dataToRender && dataToRender.length > 0 ? Object.keys(dataToRender[0].data) : [];
     let calculatedWidth = 0;
     keys.forEach(key => {
-      const maxLength = Math.max(...data.map(d => String(d.data[key]).length), key.length);
+      const maxLength = Math.max(...data.map(d => getText(d.data[key]).length), key.length);
       const stringWidth = maxLength * CHAR_WIDTH + CELL_PADDING;
       columnMetadata[key] = {
         maxWidth: MAX_COLUMN_WIDTH,
         width: stringWidth,
         ...columnMetadata[key],
       };
       calculatedWidth += Math.min(stringWidth, MAX_COLUMN_WIDTH);
+
+      if (!renderers[key]) {
+        renderers[key] = getRenderer({
+          alignPositiveNegative,
+          colorPositiveNegative,
+          column: {
+            key,
+            label: key,
+            type: 'string',
+          },
+          enableFilter: tableFilter,
+          handleCellSelected: this.handleCellSelected,
+          isSelected: this.isSelected,
+        });
+      }
     });
 
     const tableHeight = includeSearch ? height - SEARCH_BAR_HEIGHT : height;

diff --git a/...t-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/renderer.tsx b/...t-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/renderer.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable complexity */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable no-magic-numbers */
 import React, { CSSProperties } from 'react';
 import { HEIGHT_TO_PX } from '@airbnb/lunar/lib/components/DataTable/constants';
 import { RendererProps } from '@airbnb/lunar/lib/components/DataTable/types';
+import Interweave from '@airbnb/lunar/lib/components/Interweave';
 
 const NEGATIVE_COLOR = '#FFA8A8';
 const POSITIVE_COLOR = '#ced4da';
@@ -51,10 +53,12 @@ export const getRenderer = ({
   const isMetric = column.type === 'metric';
   let Parent;
 
+  const cursorStyle = enableFilter && !isMetric ? 'pointer' : 'default';
+
   const boxStyle: CSSProperties = {
     backgroundColor:
       enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined,
-    cursor: isMetric ? 'default' : 'pointer',
+    cursor: cursorStyle,
     margin: '0px -16px',
   };
 
@@ -123,7 +127,7 @@ export const getRenderer = ({
             })
       }
     >
-      <Parent>{column.format ? column.format(value) : value}</Parent>
+      <Parent>{column.format ? column.format(value) : <Interweave content={value} />}</Parent>
     </div>
   );
 };
diff --git a/...lugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx b/...lugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx
@@ -113,7 +113,7 @@ export default [
           orderDesc: true,
           pageLength: 0,
           percentMetrics: [],
-          tableFilter: true,
+          tableFilter: false,
           tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
           timeseriesLimitMetric: null,
         }}

diff --git a/...plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js b/...plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js
@@ -4,7 +4,7 @@
 const ROW_COUNT = 30;
 const COLUMN_COUNT = 20;
 
-export const keys = ['ds'].concat(
+export const keys = ['ds', 'html'].concat(
   Array(COLUMN_COUNT)
     .fill(0)
     .map((_, i) => `clm ${i}`),
@@ -17,6 +17,7 @@ keys.forEach((key, i) => {
     .join('');
 });
 item.ds = '2019-09-09';
+item.html = '<a href="www.google.com" target="_blank">Link Test</a>';
 
 export default Array(ROW_COUNT)
   .fill(0)