wip

gagik · gagik · commit 73bfc317be5a · 2025-06-18T11:15:05.000+02:00
diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
@@ -29,7 +29,7 @@ import { palette } from '@leafygreen-ui/palette';
 import { Icon } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
 import VisibleFieldsToggle from './visible-field-toggle';
-import { useContextMenuItems } from '../context-menu';
+import { useFieldContextMenu } from '../../hooks/use-element-context-menu';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -411,16 +411,6 @@ export const calculateShowMoreToggleOffset = ({
   return spacerWidth + editableOffset + expandIconSize;
 };
 
-// Helper function to check if a string is a URL
-const isValidUrl = (str: string): boolean => {
-  try {
-    const url = new URL(str);
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch {
-    return false;
-  }
-};
-
 export const HadronElement: React.FunctionComponent<{
   value: HadronElementType;
   editable: boolean;
@@ -460,27 +450,10 @@ export const HadronElement: React.FunctionComponent<{
   } = useHadronElement(element);
 
   // Add context menu hook for the field
-  const fieldContextMenuRef = useContextMenuItems([
-    {
-      label: 'Copy field & value',
-      onAction: () => {
-        const fieldStr = `${key.value}: ${objectToIdiomaticEJSON(
-          value.originalValue
-        )}`;
-        void navigator.clipboard.writeText(fieldStr);
-      },
-    },
-    ...(type.value === 'String' && isValidUrl(value.value)
-      ? [
-          {
-            label: 'Open URL in browser',
-            onAction: () => {
-              window.open(value.value, '_blank', 'noopener');
-            },
-          },
-        ]
-      : []),
-  ]);
+  const fieldContextMenuRef = useFieldContextMenu({
+    element,
+    fieldName: key.value,
+  });
 
   const toggleExpanded = () => {
     if (expanded) {
diff --git a/packages/compass-components/src/hooks/use-element-context-menu.ts b/packages/compass-components/src/hooks/use-element-context-menu.ts
@@ -0,0 +1,62 @@
+import { useContextMenuItems } from '../components/context-menu';
+import { Element } from 'hadron-document';
+import { objectToIdiomaticEJSON } from 'hadron-document';
+
+// Helper function to check if a string is a URL
+export const isValidUrl = (str: string): boolean => {
+  try {
+    const url = new URL(str);
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch {
+    return false;
+  }
+};
+
+export interface useFieldContextMenuProps {
+  element: Element | undefined | null;
+  fieldName: string;
+}
+
+export function useFieldContextMenu({
+  element,
+  fieldName,
+}: useFieldContextMenuProps) {
+  return useContextMenuItems([
+    ...(element
+      ? [
+          {
+            label: 'Copy field & value',
+            onAction: () => {
+              const fieldStr = `${fieldName}: ${objectToIdiomaticEJSON(
+                element.currentValue
+              )}`;
+              void navigator.clipboard.writeText(fieldStr);
+            },
+          },
+          {
+            label: 'Copy value',
+            onAction: () => {
+              const valueStr = objectToIdiomaticEJSON(element.currentValue);
+              void navigator.clipboard.writeText(valueStr);
+            },
+          },
+          ...(element.currentType === 'String' &&
+          typeof element.currentValue === 'string' &&
+          isValidUrl(element.currentValue)
+            ? [
+                {
+                  label: 'Open URL in browser',
+                  onAction: () => {
+                    window.open(
+                      element.currentValue as string,
+                      '_blank',
+                      'noopener'
+                    );
+                  },
+                },
+              ]
+            : []),
+        ]
+      : []),
+  ]);
+}
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
@@ -215,3 +215,4 @@ export {
 export { SelectList } from './components/select-list';
 export { ParagraphSkeleton } from '@leafygreen-ui/skeleton-loader';
 export { InsightsChip } from './components/insights-chip';
+export { useFieldContextMenu } from './hooks/use-element-context-menu';
diff --git a/packages/compass-context-menu/src/context-menu-provider.tsx b/packages/compass-context-menu/src/context-menu-provider.tsx
@@ -6,11 +6,13 @@ import React, {
   createContext,
   useContext,
 } from 'react';
-import type { ContextMenuContext, ContextMenuState } from './types';
+import type { ContextMenuContextType, ContextMenuState } from './types';
 import type { EnhancedMouseEvent } from './context-menu-content';
 import { getContextMenuContent } from './context-menu-content';
 
-export const Context = createContext<ContextMenuContext | null>(null);
+export const ContextMenuContext = createContext<ContextMenuContextType | null>(
+  null
+);
 
 export function ContextMenuProvider({
   children,
@@ -22,7 +24,7 @@ export function ContextMenuProvider({
   }>;
 }) {
   // Check if there's already a parent context menu provider
-  const parentContext = useContext(Context);
+  const parentContext = useContext(ContextMenuContext);
 
   const [menu, setMenu] = useState<ContextMenuState>({
     isOpen: false,
@@ -92,9 +94,9 @@ export function ContextMenuProvider({
   const Wrapper = wrapper ?? React.Fragment;
 
   return (
-    <Context.Provider value={value}>
+    <ContextMenuContext.Provider value={value}>
       {children}
       <Wrapper menu={{ ...menu, close }} />
-    </Context.Provider>
+    </ContextMenuContext.Provider>
   );
 }
diff --git a/packages/compass-context-menu/src/index.ts b/packages/compass-context-menu/src/index.ts
@@ -1,5 +1,8 @@
 export { useContextMenu } from './use-context-menu';
-export { ContextMenuProvider } from './context-menu-provider';
+export {
+  ContextMenuProvider,
+  ContextMenuContext,
+} from './context-menu-provider';
 export type {
   ContextMenuItem,
   ContextMenuItemGroup,
diff --git a/packages/compass-context-menu/src/types.ts b/packages/compass-context-menu/src/types.ts
@@ -16,7 +16,7 @@ export type ContextMenuWrapperProps = {
   menu: ContextMenuState & { close: () => void };
 };
 
-export type ContextMenuContext = {
+export type ContextMenuContextType = {
   close(): void;
 };
 
diff --git a/packages/compass-context-menu/src/use-context-menu.tsx b/packages/compass-context-menu/src/use-context-menu.tsx
@@ -1,6 +1,6 @@
 import type { RefCallback } from 'react';
 import { useContext, useMemo, useRef } from 'react';
-import { Context } from './context-menu-provider';
+import { ContextMenuContext } from './context-menu-provider';
 import { appendContextMenuContent } from './context-menu-content';
 import type { ContextMenuItem } from './types';
 
@@ -19,7 +19,7 @@ export type ContextMenuMethods<T extends ContextMenuItem> = {
 export function useContextMenu<
   T extends ContextMenuItem = ContextMenuItem
 >(): ContextMenuMethods<T> {
-  const context = useContext(Context);
+  const context = useContext(ContextMenuContext);
   const previous = useRef<null | [HTMLElement, (event: MouseEvent) => void]>(
     null
   );
diff --git a/packages/compass-crud/src/components/table-view/cell-renderer.tsx b/packages/compass-crud/src/components/table-view/cell-renderer.tsx
@@ -10,13 +10,12 @@ import {
   css,
   Icon,
   IconButton,
-  LeafyGreenProvider,
   spacing,
   withDarkMode,
-  useContextMenuItems,
+  useFieldContextMenu,
+  LeafyGreenProvider,
 } from '@mongodb-js/compass-components';
 import { type Document, Element } from 'hadron-document';
-import { objectToIdiomaticEJSON } from 'hadron-document';
 import type { ICellRendererParams } from 'ag-grid-community';
 import type { GridActions, TableHeaderType } from '../../stores/grid-store';
 import type { CrudActions } from '../../stores/crud-store';
@@ -94,6 +93,7 @@ const decrypdedIconStyles = css({
 
 interface CellContentProps {
   element: Element | undefined | null;
+  fieldName: string;
   cellState:
     | typeof UNEDITABLE
     | typeof EMPTY
@@ -111,13 +111,20 @@ const CellContent: React.FC<CellContentProps> = ({
   cellState,
   onUndo,
   onExpand,
+  fieldName,
 }) => {
   const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
   const isEmpty = element === undefined || element === null;
   const handleElementEvent = useCallback(() => {
     forceUpdate();
   }, []);
 
+  // Context menu functionality
+  const cellContextMenuRef = useFieldContextMenu({
+    element,
+    fieldName,
+  });
+
   // Subscribe to element events
   useEffect(() => {
     if (!isEmpty && element) {
@@ -148,7 +155,7 @@ const CellContent: React.FC<CellContentProps> = ({
     }
   }, [element]);
 
-  const renderContent = useCallback(() => {
+  const renderContent = useMemo(() => {
     if (cellState === EMPTY || !element) {
       return 'No field';
     }
@@ -192,7 +199,7 @@ const CellContent: React.FC<CellContentProps> = ({
 
     return (
       <div className={className}>
-        <div className={cellContainerStyle}>
+        <div ref={cellContextMenuRef} className={cellContainerStyle}>
           {element.decrypted && (
             <span
               data-testid="hadron-document-element-decrypted-icon"
@@ -206,7 +213,7 @@ const CellContent: React.FC<CellContentProps> = ({
         </div>
       </div>
     );
-  }, [element, elementLength, cellState]);
+  }, [element, elementLength, cellState, cellContextMenuRef]);
 
   const canUndo =
     cellState === ADDED ||
@@ -222,7 +229,7 @@ const CellContent: React.FC<CellContentProps> = ({
     <>
       {canUndo && <CellUndoButton alignLeft={canExpand} onClick={onUndo} />}
       {canExpand && <CellExpandButton onClick={onExpand} />}
-      {renderContent()}
+      {renderContent}
     </>
   );
 };
@@ -256,75 +263,8 @@ const CellRenderer: React.FC<CellRendererProps> = ({
 }) => {
   const element = value as Element | undefined | null;
 
-  const isEmpty = element === undefined || element === null;
   const [isDeleted, setIsDeleted] = useState(false);
 
-  // Helper function to check if a string is a URL
-  const isValidUrl = useCallback((str: string): boolean => {
-    try {
-      const url = new URL(str);
-      return url.protocol === 'http:' || url.protocol === 'https:';
-    } catch {
-      return false;
-    }
-  }, []);
-
-  // Add context menu functionality
-  const contextMenuRef = useContextMenuItems([
-    ...(element && !isEmpty
-      ? [
-          {
-            label: 'Copy field & value',
-            onAction: () => {
-              const fieldName = column.getColId();
-              const fieldStr = `${fieldName}: ${objectToIdiomaticEJSON(
-                element.currentValue
-              )}`;
-              void navigator.clipboard.writeText(fieldStr);
-            },
-          },
-        ]
-      : []),
-    ...(element &&
-    element.currentType === 'String' &&
-    isValidUrl(element.currentValue)
-      ? [
-          {
-            label: 'Open URL in browser',
-            onAction: () => {
-              window.open(element.currentValue, '_blank', 'noopener');
-            },
-          },
-        ]
-      : []),
-    ...(element &&
-    (element.currentType === 'Object' || element.currentType === 'Array')
-      ? [
-          {
-            label: 'Expand field',
-            onAction: () => {
-              handleDrillDown({
-                stopPropagation: () => {},
-              } as React.MouseEvent);
-            },
-          },
-        ]
-      : []),
-    ...(cellState === ADDED ||
-    cellState === EDITED ||
-    cellState === INVALID ||
-    cellState === DELETED
-      ? [
-          {
-            label: 'Undo changes',
-            onAction: () => {
-              handleUndo({ stopPropagation: () => {} } as React.MouseEvent);
-            },
-          },
-        ]
-      : []),
-  ]);
-
   const isEditable = useMemo(() => {
     /* Can't get the editable() function from here, so have to reevaluate */
     let editable = true;
@@ -357,7 +297,7 @@ const CellRenderer: React.FC<CellRendererProps> = ({
 
   if (!isEditable) {
     cellState = UNEDITABLE;
-  } else if (isEmpty || isDeleted) {
+  } else if (!element || isDeleted) {
     cellState = EMPTY;
   } else if (!element.isCurrentTypeValid()) {
     cellState = INVALID;
@@ -393,10 +333,10 @@ const CellRenderer: React.FC<CellRendererProps> = ({
     [
       element,
       node.data.hadronDocument,
+      cellState,
       elementRemoved,
       elementAdded,
       elementTypeChanged,
-      cellState,
     ]
   );
 
@@ -424,7 +364,7 @@ const CellRenderer: React.FC<CellRendererProps> = ({
     // `ag-grid` renders this component outside of the context chain
     // so we re-supply the dark mode theme here.
     <LeafyGreenProvider darkMode={darkMode}>
-      <div ref={contextMenuRef}>
+      <div>
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus*/}
         <div
           className={
@@ -435,6 +375,7 @@ const CellRenderer: React.FC<CellRendererProps> = ({
         >
           <CellContent
             element={element}
+            fieldName={column.getColId()}
             cellState={cellState}
             onUndo={handleUndo}
             onExpand={handleDrillDown}
diff --git a/packages/compass-crud/src/components/table-view/full-width-cell-renderer.tsx b/packages/compass-crud/src/components/table-view/full-width-cell-renderer.tsx
