Fixed context menu on index page (#9316)

Fixes https://github.com/twentyhq/twenty/issues/8970

The context menu wasn't working because of wrong architecture with the
Dropdown component, as it's a unique behavior (no clickable component
and portal) it also required refactoring a bit the Dropdown component.

- Context menu now uses a portal
- Fixed dropdown offset without clickable component (now using a
fallback anchor component)
- Fixed React array key props

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -5,30 +5,22 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro
 import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { MenuItem } from 'twenty-ui';
-import { PositionType } from '../types/PositionType';
 
-type StyledContainerProps = {
-  position: PositionType;
-};
+const StyledDropdownMenuContainer = styled.div`
+  width: 100%;
+  height: 100%;
 
-const StyledContainerActionMenuDropdown = styled.div<StyledContainerProps>`
-  align-items: flex-start;
   display: flex;
   flex-direction: column;
-
-  left: ${(props) => `${props.position.x}px`};
-  position: fixed;
-  top: ${(props) => `${props.position.y}px`};
-
-  transform: translateX(-50%);
-  width: 0;
-  height: 0;
+  justify-content: center;
+  align-items: center;
 `;
 
 export const RecordIndexActionMenuDropdown = () => {
@@ -40,10 +32,13 @@ export const RecordIndexActionMenuDropdown = () => {
     ActionMenuComponentInstanceContext,
   );
 
+  const dropdownId = getActionMenuDropdownIdFromActionMenuId(actionMenuId);
+  const { closeDropdown } = useDropdown(dropdownId);
+
   const actionMenuDropdownPosition = useRecoilValue(
     extractComponentState(
       recordIndexActionMenuDropdownPositionComponentState,
-      getActionMenuDropdownIdFromActionMenuId(actionMenuId),
+      dropdownId,
     ),
   );
 
@@ -55,32 +50,37 @@ export const RecordIndexActionMenuDropdown = () => {
     : undefined;
 
   return (
-    <StyledContainerActionMenuDropdown
-      position={actionMenuDropdownPosition}
-      className="action-menu-dropdown"
-    >
-      <Dropdown
-        dropdownId={getActionMenuDropdownIdFromActionMenuId(actionMenuId)}
-        dropdownHotkeyScope={{
-          scope: ActionMenuDropdownHotkeyScope.ActionMenuDropdown,
-        }}
-        data-select-disable
-        dropdownMenuWidth={width}
-        dropdownComponents={
+    <Dropdown
+      dropdownId={dropdownId}
+      dropdownHotkeyScope={{
+        scope: ActionMenuDropdownHotkeyScope.ActionMenuDropdown,
+      }}
+      data-select-disable
+      dropdownMenuWidth={width}
+      dropdownPlacement="bottom-start"
+      dropdownStrategy="absolute"
+      dropdownOffset={{
+        x: actionMenuDropdownPosition.x ?? 0,
+        y: actionMenuDropdownPosition.y ?? 0,
+      }}
+      dropdownComponents={
+        <StyledDropdownMenuContainer className="action-menu-dropdown">
           <DropdownMenuItemsContainer>
-            {actionMenuEntries.map((item, index) => (
+            {actionMenuEntries.map((item) => (
               <MenuItem
-                key={index}
+                key={item.key}
                 LeftIcon={item.Icon}
-                onClick={item.onClick}
+                onClick={() => {
+                  item.onClick?.();
+                  closeDropdown();
+                }}
                 accent={item.accent}
                 text={item.label}
               />
             ))}
           </DropdownMenuItemsContainer>
-        }
-        avoidPortal
-      />
-    </StyledContainerActionMenuDropdown>
+        </StyledDropdownMenuContainer>
+      }
+    />
   );
 };

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -120,13 +120,5 @@ export const WithInteractions: Story = {
     const deleteButton = await canvas.findByText('Delete');
     await userEvent.click(deleteButton);
     expect(deleteMock).toHaveBeenCalled();
-
-    const markAsDoneButton = await canvas.findByText('Mark as done');
-    await userEvent.click(markAsDoneButton);
-    expect(markAsDoneMock).toHaveBeenCalled();
-
-    const addToFavoritesButton = await canvas.findByText('Add to favorites');
-    await userEvent.click(addToFavoritesButton);
-    expect(addToFavoritesMock).toHaveBeenCalled();
   },
 };