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

* feat: Adds drill to detail context menu to Table

* Improves context menu positioning

* Fixes Pivot Table typying

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

@@ -365,8 +365,8 @@ export default function PivotTableChart(props: PivotTableProps) {
   const handleContextMenu = useCallback(
     (
       e: MouseEvent,
-      colKey: DataRecordValue[] | undefined,
+      colKey: (string | number | boolean)[] | undefined,
-      rowKey: DataRecordValue[] | undefined,
+      rowKey: (string | number | boolean)[] | undefined,
     ) => {
       if (onContextMenu) {
         e.preventDefault();

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -23,6 +23,7 @@ import React, {
   HTMLProps,
   MutableRefObject,
   CSSProperties,
+  MouseEvent,
 } from 'react';
 import {
   useTable,
@@ -66,6 +67,7 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
   rowCount: number;
   wrapperRef?: MutableRefObject<HTMLDivElement>;
   onColumnOrderChange: () => void;
+  onContextMenu?: (value: D, clientX: number, clientY: number) => void;
 }
 
 export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
@@ -98,6 +100,7 @@ export default typedMemo(function DataTable<D extends object>({
   serverPagination,
   wrapperRef: userWrapperRef,
   onColumnOrderChange,
+  onContextMenu,
   ...moreUseTableOptions
 }: DataTableProps<D>): JSX.Element {
   const tableHooks: PluginHook<D>[] = [
@@ -270,7 +273,20 @@ export default typedMemo(function DataTable<D extends object>({
             prepareRow(row);
             const { key: rowKey, ...rowProps } = row.getRowProps();
             return (
-              <tr key={rowKey || row.id} {...rowProps}>
+              <tr
+                key={rowKey || row.id}
+                {...rowProps}
+                onContextMenu={(e: MouseEvent) => {
+                  if (onContextMenu) {
+                    e.preventDefault();
+                    onContextMenu(
+                      row.original,
+                      e.nativeEvent.clientX,
+                      e.nativeEvent.clientY,
+                    );
+                  }
+                }}
+              >
                 {row.cells.map(cell =>
                   cell.render('Cell', { key: cell.column.id }),
                 )}

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -39,6 +39,7 @@ import {
   ensureIsArray,
   GenericDataType,
   getTimeFormatterForGranularity,
+  QueryObjectFilterClause,
   styled,
   t,
   tn,
@@ -205,6 +206,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     sticky = true, // whether to use sticky header
     columnColorFormatters,
     allowRearrangeColumns = false,
+    onContextMenu,
   } = props;
   const timestampFormatter = useCallback(
     value => getTimeFormatterForGranularity(timeGrain)(value),
@@ -576,6 +578,24 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
   const { width: widthFromState, height: heightFromState } = tableSize;
 
+  const handleContextMenu =
+    onContextMenu && !isRawRecords
+      ? (value: D, clientX: number, clientY: number) => {
+          const filters: QueryObjectFilterClause[] = [];
+          columnsMeta.forEach(col => {
+            if (!col.isMetric) {
+              filters.push({
+                col: col.key,
+                op: '==',
+                val: value[col.key] as string | number | boolean,
+                formattedVal: String(value[col.key]),
+              });
+            }
+          });
+          onContextMenu(filters, clientX, clientY);
+        }
+      : undefined;
+
   return (
     <Styles>
       <DataTable<D>
@@ -598,6 +618,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         selectPageSize={pageSize !== null && SelectPageSize}
         // not in use in Superset, but needed for unit tests
         sticky={sticky}
+        onContextMenu={handleContextMenu}
       />
     </Styles>
   );

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

@@ -204,7 +204,11 @@ const transformProps = (
     queriesData = [],
     filterState,
     ownState: serverPaginationData,
-    hooks: { onAddFilter: onChangeFilter, setDataMask = () => {} },
+    hooks: {
+      onAddFilter: onChangeFilter,
+      setDataMask = () => {},
+      onContextMenu,
+    },
   } = chartProps;
 
   const {
@@ -274,6 +278,7 @@ const transformProps = (
     columnColorFormatters,
     timeGrain,
     allowRearrangeColumns,
+    onContextMenu,
   };
 };
 

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

@@ -30,6 +30,7 @@ import {
   ChartDataResponseResult,
   QueryFormData,
   SetDataMaskHook,
+  QueryObjectFilterClause,
 } from '@superset-ui/core';
 import { ColorFormatters, ColumnConfig } from '@superset-ui/chart-controls';
 
@@ -111,6 +112,11 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   onChangeFilter?: ChartProps['hooks']['onAddFilter'];
   columnColorFormatters?: ColorFormatters;
   allowRearrangeColumns?: boolean;
+  onContextMenu?: (
+    filters: QueryObjectFilterClause[],
+    clientX: number,
+    clientY: number,
+  ) => void;
 }
 
 export default {};