feat: Adds drill to detail context menu to Pivot Table (#21198)

* feat: Adds drill to detail context menu to Pivot Table

* Adds useCallback

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

@@ -28,6 +28,7 @@ import {
   styled,
   useTheme,
   isAdhocColumn,
+  QueryObjectFilterClause,
 } from '@superset-ui/core';
 import { PivotTable, sortAs, aggregatorTemplates } from './react-pivottable';
 import {
@@ -142,6 +143,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     metricsLayout,
     metricColorFormatters,
     dateFormatters,
+    onContextMenu,
   } = props;
 
   const theme = useTheme();
@@ -360,6 +362,49 @@ export default function PivotTableChart(props: PivotTableProps) {
     [colSubtotalPosition, rowSubtotalPosition],
   );
 
+  const handleContextMenu = useCallback(
+    (
+      e: MouseEvent,
+      colKey: DataRecordValue[] | undefined,
+      rowKey: DataRecordValue[] | undefined,
+    ) => {
+      if (onContextMenu) {
+        e.preventDefault();
+        const filters: QueryObjectFilterClause[] = [];
+        if (colKey && colKey.length > 1) {
+          colKey.forEach((val, i) => {
+            const col = cols[i];
+            const formattedVal =
+              dateFormatters[col]?.(val as number) || String(val);
+            if (i > 0) {
+              filters.push({
+                col,
+                op: '==',
+                val,
+                formattedVal,
+              });
+            }
+          });
+        }
+        if (rowKey) {
+          rowKey.forEach((val, i) => {
+            const col = rows[i];
+            const formattedVal =
+              dateFormatters[col]?.(val as number) || String(val);
+            filters.push({
+              col,
+              op: '==',
+              val,
+              formattedVal,
+            });
+          });
+        }
+        onContextMenu(filters, e.clientX, e.clientY);
+      }
+    },
+    [cols, dateFormatters, onContextMenu, rows],
+  );
+
   return (
     <Styles height={height} width={width} margin={theme.gridUnit * 4}>
       <PivotTableWrapper>
@@ -378,6 +423,7 @@ export default function PivotTableChart(props: PivotTableProps) {
           tableOptions={tableOptions}
           subtotalOptions={subtotalOptions}
           namesMapping={verboseMap}
+          onContextMenu={handleContextMenu}
         />
       </PivotTableWrapper>
     </Styles>

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

@@ -77,7 +77,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     queriesData,
     formData,
     rawFormData,
-    hooks: { setDataMask = () => {} },
+    hooks: { setDataMask = () => {}, onContextMenu },
     filterState,
     datasource: { verboseMap = {}, columnFormats = {} },
   } = chartProps;
@@ -164,5 +164,6 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     metricsLayout,
     metricColorFormatters,
     dateFormatters,
+    onContextMenu,
   };
 }

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

@@ -18,7 +18,6 @@
  */
 
 import React from 'react';
-import { PivotData } from './utilities';
 import { TableRenderer } from './TableRenderers';
 
 class PivotTable extends React.PureComponent {
@@ -27,7 +26,7 @@ class PivotTable extends React.PureComponent {
   }
 }
 
-PivotTable.propTypes = PivotData.propTypes;
-PivotTable.defaultProps = PivotData.defaultProps;
+PivotTable.propTypes = TableRenderer.propTypes;
+PivotTable.defaultProps = TableRenderer.defaultProps;
 
 export default PivotTable;

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

@@ -700,6 +700,7 @@ export class TableRenderer extends React.Component {
           className="pvtVal"
           key={`pvtVal-${flatColKey}`}
           onClick={rowClickHandlers[flatColKey]}
+          onContextMenu={e => this.props.onContextMenu(e, colKey, rowKey)}
           style={style}
         >
           {agg.format(aggValue)}
@@ -717,6 +718,7 @@ export class TableRenderer extends React.Component {
           key="total"
           className="pvtTotal"
           onClick={rowTotalCallbacks[flatRowKey]}
+          onContextMenu={e => this.props.onContextMenu(e, undefined, rowKey)}
         >
           {agg.format(aggValue)}
         </td>
@@ -776,6 +778,7 @@ export class TableRenderer extends React.Component {
           className="pvtTotal pvtRowTotal"
           key={`total-${flatColKey}`}
           onClick={colTotalCallbacks[flatColKey]}
+          onContextMenu={e => this.props.onContextMenu(e, colKey, undefined)}
           style={{ padding: '5px' }}
         >
           {agg.format(aggValue)}
@@ -793,6 +796,7 @@ export class TableRenderer extends React.Component {
           key="total"
           className="pvtGrandTotal pvtRowTotal"
           onClick={grandTotalCallback}
+          onContextMenu={e => this.props.onContextMenu(e, undefined, undefined)}
         >
           {agg.format(aggValue)}
         </td>
@@ -886,5 +890,6 @@ export class TableRenderer extends React.Component {
 TableRenderer.propTypes = {
   ...PivotData.propTypes,
   tableOptions: PropTypes.object,
+  onContextMenu: PropTypes.func,
 };
 TableRenderer.defaultProps = { ...PivotData.defaultProps, tableOptions: {} };

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

@@ -26,6 +26,7 @@ import {
   NumberFormatter,
   QueryFormMetric,
   QueryFormColumn,
+  QueryObjectFilterClause,
 } from '@superset-ui/core';
 import { ColorFormatters } from '@superset-ui/chart-controls';
 
@@ -72,6 +73,11 @@ interface PivotTableCustomizeProps {
   dateFormatters: Record<string, DateFormatter | undefined>;
   legacy_order_by: QueryFormMetric[] | QueryFormMetric | null;
   order_desc: boolean;
+  onContextMenu?: (
+    filters: QueryObjectFilterClause[],
+    clientX: number,
+    clientY: number,
+  ) => void;
 }
 
 export type PivotTableQueryFormData = QueryFormData &