Fix action menu dropdown (#8368)

Fix action menu dropdown not closing when clicking outside the table or
board and introduce helper functions to get the action menu component
ids.

packages/twenty-front/src/modules/action-menu/hooks/__tests__/useActionMenu.test.ts

@@ -1,3 +1,5 @@
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 import { useActionMenu } from '../useActionMenu';
@@ -23,6 +25,9 @@ jest.mock('@/ui/layout/dropdown/hooks/useDropdownV2', () => ({
 
 describe('useActionMenu', () => {
   const actionMenuId = 'test-action-menu';
+  const actionBarId = getActionBarIdFromActionMenuId(actionMenuId);
+  const actionMenuDropdownId =
+    getActionMenuDropdownIdFromActionMenuId(actionMenuId);
 
   it('should return the correct functions', () => {
     const { result } = renderHook(() => useActionMenu(actionMenuId));
@@ -40,10 +45,8 @@ describe('useActionMenu', () => {
       result.current.openActionMenuDropdown();
     });
 
-    expect(closeBottomBar).toHaveBeenCalledWith(`action-bar-${actionMenuId}`);
-    expect(openDropdown).toHaveBeenCalledWith(
-      `action-menu-dropdown-${actionMenuId}`,
-    );
+    expect(closeBottomBar).toHaveBeenCalledWith(actionBarId);
+    expect(openDropdown).toHaveBeenCalledWith(actionMenuDropdownId);
   });
 
   it('should call the correct functions when opening action bar', () => {
@@ -53,10 +56,8 @@ describe('useActionMenu', () => {
       result.current.openActionBar();
     });
 
-    expect(closeDropdown).toHaveBeenCalledWith(
-      `action-menu-dropdown-${actionMenuId}`,
-    );
-    expect(openBottomBar).toHaveBeenCalledWith(`action-bar-${actionMenuId}`);
+    expect(closeDropdown).toHaveBeenCalledWith(actionMenuDropdownId);
+    expect(openBottomBar).toHaveBeenCalledWith(actionBarId);
   });
 
   it('should call the correct function when closing action menu dropdown', () => {
@@ -66,9 +67,7 @@ describe('useActionMenu', () => {
       result.current.closeActionMenuDropdown();
     });
 
-    expect(closeDropdown).toHaveBeenCalledWith(
-      `action-menu-dropdown-${actionMenuId}`,
-    );
+    expect(closeDropdown).toHaveBeenCalledWith(actionMenuDropdownId);
   });
 
   it('should call the correct function when closing action bar', () => {
@@ -78,6 +77,6 @@ describe('useActionMenu', () => {
       result.current.closeActionBar();
     });
 
-    expect(closeBottomBar).toHaveBeenCalledWith(`action-bar-${actionMenuId}`);
+    expect(closeBottomBar).toHaveBeenCalledWith(actionBarId);
   });
 });

packages/twenty-front/src/modules/action-menu/hooks/useActionMenu.ts

@@ -1,3 +1,5 @@
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { useBottomBar } from '@/ui/layout/bottom-bar/hooks/useBottomBar';
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 
@@ -5,22 +7,26 @@ export const useActionMenu = (actionMenuId: string) => {
   const { openDropdown, closeDropdown } = useDropdownV2();
   const { openBottomBar, closeBottomBar } = useBottomBar();
 
+  const actionBarId = getActionBarIdFromActionMenuId(actionMenuId);
+  const actionMenuDropdownId =
+    getActionMenuDropdownIdFromActionMenuId(actionMenuId);
+
   const openActionMenuDropdown = () => {
-    closeBottomBar(`action-bar-${actionMenuId}`);
-    openDropdown(`action-menu-dropdown-${actionMenuId}`);
+    closeBottomBar(actionBarId);
+    openDropdown(actionMenuDropdownId);
   };
 
   const openActionBar = () => {
-    closeDropdown(`action-menu-dropdown-${actionMenuId}`);
-    openBottomBar(`action-bar-${actionMenuId}`);
+    closeDropdown(actionMenuDropdownId);
+    openBottomBar(actionBarId);
   };
 
   const closeActionMenuDropdown = () => {
-    closeDropdown(`action-menu-dropdown-${actionMenuId}`);
+    closeDropdown(actionMenuDropdownId);
   };
 
   const closeActionBar = () => {
-    closeBottomBar(`action-bar-${actionMenuId}`);
+    closeBottomBar(actionBarId);
   };
 
   return {