fix: table viz context menu (lightdash#3004)

Author: IrakliJani

packages/frontend/src/components/SimpleTable/CellContextMenu.tsx

@@ -1,37 +1,71 @@
-import { Menu, MenuItem } from '@blueprintjs/core';
-import { ContextMenu2 } from '@blueprintjs/popover2';
+import { Menu, Position } from '@blueprintjs/core';
+import { MenuItem2, Popover2 } from '@blueprintjs/popover2';
 import { ResultRow } from '@lightdash/common';
-import React from 'react';
+import { Cell } from '@tanstack/react-table';
+import { cloneElement, FC, isValidElement } from 'react';
 import { CellContextMenuProps, TableColumn } from '../common/Table/types';
 import { useUnderlyingDataContext } from '../UnderlyingData/UnderlyingDataProvider';
 
-export const CellContextMenu: React.FC<CellContextMenuProps> = ({
+interface ContextMenuProps {
+    cell: Cell<ResultRow>;
+    meta: TableColumn['meta'];
+}
+
+const ContextMenu: FC<ContextMenuProps> = ({ meta, cell }) => {
+    const { viewData } = useUnderlyingDataContext();
+
+    const value: ResultRow[0]['value'] = cell.getValue()?.value || {};
+
+    return (
+        <Menu>
+            <MenuItem2
+                text="View underlying data"
+                icon="layers"
+                onClick={() => {
+                    viewData(value, meta, cell.row.original || {});
+                }}
+            />
+        </Menu>
+    );
+};
+
+const CellContextMenu: FC<CellContextMenuProps> = ({
+    boundaryElement,
     children,
     cell,
+    onOpen,
+    onClose,
 }) => {
     const meta = cell.column.columnDef.meta as TableColumn['meta'];
     const item = meta?.item;
-    const { viewData } = useUnderlyingDataContext();
 
-    if (item) {
-        const value: ResultRow[0]['value'] = cell.getValue()?.value || {};
-        return (
-            <ContextMenu2
-                content={
-                    <Menu>
-                        <MenuItem
-                            text={`View underlying data`}
-                            icon={'layers'}
-                            onClick={(e) => {
-                                viewData(value, meta, cell.row.original || {});
-                            }}
-                        />
-                    </Menu>
-                }
-            >
-                {children}
-            </ContextMenu2>
-        );
+    if (!item || !boundaryElement) {
+        return <>{children}</>;
     }
-    return <>{children}</>;
+
+    return (
+        <Popover2
+            minimal
+            lazy
+            position={Position.BOTTOM_RIGHT}
+            boundary={boundaryElement}
+            content={<ContextMenu cell={cell} meta={meta} />}
+            renderTarget={({ ref, ...targetProps }) => {
+                if (isValidElement(children)) {
+                    return cloneElement(children, {
+                        ref,
+                        ...targetProps,
+                    });
+                } else {
+                    throw new Error(
+                        'CellContextMenu children must be a valid React element',
+                    );
+                }
+            }}
+            onOpening={onOpen}
+            onClosing={onClose}
+        />
+    );
 };
+
+export default CellContextMenu;

packages/frontend/src/components/SimpleTable/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import Table from '../common/Table';
 import { useVisualizationContext } from '../LightdashVisualization/VisualizationProvider';
 import { LoadingChart } from '../SimpleChart';
-import { CellContextMenu } from './CellContextMenu';
+import CellContextMenu from './CellContextMenu';
 import { TableWrapper } from './SimpleTable.styles';
 
 const SimpleTable: FC = () => {