Use anchor ref and force a compact menu

Author: kraenhansen

packages/compass-components/src/components/content-with-fallback.spec.tsx

@@ -48,7 +48,7 @@ describe('ContentWithFallback', function () {
     expect(screen.getByText('I am ready!')).to.exist;
   });
 
-  it('should render nothing when content is not ready on the first render', function () {
+  it('should render only the context menu when content is not ready on the first render', function () {
     const container = document.createElement('div');
 
     render(
@@ -59,8 +59,10 @@ describe('ContentWithFallback', function () {
     );
 
     expect(container.children.length).to.equal(1);
-    const [anchorElement] = container.children;
-    expect(anchorElement.getAttribute('data-testid')).to.equal('context-menu');
+    const [contextMenuContainer] = container.children;
+    expect(contextMenuContainer.getAttribute('data-testid')).to.equal(
+      'context-menu-container'
+    );
   });
 
   it('should render fallback when the timeout passes', async function () {

packages/compass-components/src/components/context-menu.spec.tsx

@@ -46,7 +46,7 @@ describe('useContextMenuItems', function () {
 
     // Should only find one context menu (from the parent provider)
     expect(
-      container.querySelectorAll('[data-testid="context-menu"]')
+      container.querySelectorAll('[data-testid="context-menu-container"]')
     ).to.have.length(1);
     // Should still render the trigger
     expect(screen.getByTestId(menuTestTriggerId)).to.exist;

packages/compass-components/src/components/context-menu.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
-
 import { css } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
@@ -14,9 +13,11 @@ import {
 
 export type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
 
+// TODO: Remove these once https://jira.mongodb.org/browse/LG-5013 is resolved
+
 const menuStyles = css({
-  paddingTop: spacing[100],
-  paddingBottom: spacing[100],
+  paddingTop: spacing[150],
+  paddingBottom: spacing[150],
 });
 
 const itemStyles = css({
@@ -39,33 +40,39 @@ export function ContextMenuProvider({
 
 export function ContextMenu({ menu }: ContextMenuWrapperProps) {
   const menuRef = useRef(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
 
   const { position, itemGroups } = menu;
 
-  useEffect(() => {
-    if (!menu.isOpen) {
-      menu.close();
-    }
-  }, [menu.isOpen]);
+  // TODO: Remove when https://jira.mongodb.org/browse/LG-5342 is resolved
+  if (anchorRef.current) {
+    anchorRef.current.style.left = `${position.x}px`;
+    anchorRef.current.style.top = `${position.y}px`;
+  }
 
   return (
-    <div
-      data-testid="context-menu"
-      style={{
-        position: 'absolute',
-        left: position.x,
-        top: position.y,
-        // This is to ensure the menu gets positioned correctly as the left and top updates
-        width: 1,
-        height: 1,
-      }}
-    >
+    <div data-testid="context-menu-container">
+      <div
+        data-testid="context-menu-anchor"
+        ref={anchorRef}
+        style={{
+          position: 'absolute',
+          left: position.x,
+          top: position.y,
+          // This is to ensure the menu gets positioned correctly as the left and top updates
+          width: 1,
+          height: 1,
+        }}
+      />
       <Menu
+        data-testid="context-menu"
+        refEl={anchorRef}
         ref={menuRef}
         open={menu.isOpen}
         setOpen={menu.close}
         justify="start"
         className={menuStyles}
+        maxHeight={Number.MAX_SAFE_INTEGER}
       >
         {itemGroups.map((items: ContextMenuItemGroup, groupIndex: number) => {
           return (