feat: get html (links/styling/img/...) to work in pivot table (#29724)

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -154,6 +154,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     dateFormatters,
     onContextMenu,
     timeGrainSqla,
+    allowRenderHtml,
   } = props;
 
   const theme = useTheme();
@@ -555,6 +556,7 @@ export default function PivotTableChart(props: PivotTableProps) {
           subtotalOptions={subtotalOptions}
           namesMapping={verboseMap}
           onContextMenu={handleContextMenu}
+          allowRenderHtml={allowRenderHtml}
         />
       </PivotTableWrapper>
     </Styles>

superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx

@@ -428,6 +428,18 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'allow_render_html',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Render columns in HTML format'),
+              renderTrigger: true,
+              default: true,
+              description: t('Render data in HTML format if applicable.'),
+            },
+          },
+        ],
       ],
     },
   ],

superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts

@@ -105,6 +105,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     conditionalFormatting,
     timeGrainSqla,
     currencyFormat,
+    allowRenderHtml,
   } = formData;
   const { selectedFilters } = filterState;
   const granularity = extractTimegrain(rawFormData);
@@ -174,5 +175,6 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     dateFormatters,
     onContextMenu,
     timeGrainSqla,
+    allowRenderHtml,
   };
 }

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx

@@ -18,7 +18,7 @@
  */
 
 import { Component } from 'react';
-import { t } from '@superset-ui/core';
+import { t, safeHtmlSpan } from '@superset-ui/core';
 import PropTypes from 'prop-types';
 import { PivotData, flatKey } from './utilities';
 import { Styles } from './Styles';
@@ -40,8 +40,13 @@ function displayHeaderCell(
   onArrowClick,
   value,
   namesMapping,
+  allowRenderHtml,
 ) {
   const name = namesMapping[value] || value;
+  const parsedLabel = parseLabel(name);
+  const labelContent = allowRenderHtml
+    ? safeHtmlSpan(parsedLabel)
+    : parsedLabel;
   return needToggle ? (
     <span className="toggle-wrapper">
       <span
@@ -52,10 +57,10 @@ function displayHeaderCell(
       >
         {ArrowIcon}
       </span>
-      <span className="toggle-val">{parseLabel(name)}</span>
+      <span className="toggle-val">{labelContent}</span>
     </span>
   ) : (
-    parseLabel(name)
+    labelContent
   );
 }
 
@@ -179,6 +184,7 @@ export class TableRenderer extends Component {
       colTotalCallbacks,
       grandTotalCallback,
       namesMapping,
+      allowRenderHtml: props.allowRenderHtml,
     };
   }
 
@@ -351,6 +357,7 @@ export class TableRenderer extends Component {
       maxColVisible,
       pivotData,
       namesMapping,
+      allowRenderHtml,
     } = pivotSettings;
     const {
       highlightHeaderCellsOnHover,
@@ -388,6 +395,7 @@ export class TableRenderer extends Component {
           arrowClickHandle,
           attrName,
           namesMapping,
+          allowRenderHtml,
         )}
       </th>
     );
@@ -453,6 +461,7 @@ export class TableRenderer extends Component {
               onArrowClick,
               headerCellFormattedValue,
               namesMapping,
+              allowRenderHtml,
             )}
           </th>,
         );
@@ -523,6 +532,7 @@ export class TableRenderer extends Component {
       maxRowVisible,
       pivotData,
       namesMapping,
+      allowRenderHtml,
     } = pivotSettings;
     return (
       <tr key="rowHdr">
@@ -546,6 +556,7 @@ export class TableRenderer extends Component {
                 arrowClickHandle,
                 r,
                 namesMapping,
+                allowRenderHtml,
               )}
             </th>
           );
@@ -590,6 +601,7 @@ export class TableRenderer extends Component {
       cellCallbacks,
       rowTotalCallbacks,
       namesMapping,
+      allowRenderHtml,
     } = pivotSettings;
 
     const {
@@ -659,6 +671,7 @@ export class TableRenderer extends Component {
               onArrowClick,
               headerCellFormattedValue,
               namesMapping,
+              allowRenderHtml,
             )}
           </th>
         );
@@ -871,6 +884,7 @@ export class TableRenderer extends Component {
       colTotals,
       rowSubtotalDisplay,
       colSubtotalDisplay,
+      allowRenderHtml,
     } = this.cachedBasePivotSettings;
 
     // Need to account for exclusions to compute the effective row
@@ -895,6 +909,7 @@ export class TableRenderer extends Component {
       maxColVisible: Math.max(...visibleColKeys.map(k => k.length)),
       rowAttrSpans: this.calcAttrSpans(visibleRowKeys, rowAttrs.length),
       colAttrSpans: this.calcAttrSpans(visibleColKeys, colAttrs.length),
+      allowRenderHtml,
       ...this.cachedBasePivotSettings,
     };
 

superset-frontend/plugins/plugin-chart-pivot-table/src/types.ts

@@ -87,6 +87,7 @@ interface PivotTableCustomizeProps {
   timeGrainSqla?: TimeGranularity;
   time_grain_sqla?: TimeGranularity;
   granularity_sqla?: string;
+  allowRenderHtml?: boolean;
 }
 
 export type PivotTableQueryFormData = QueryFormData &