8414 add records selection context inside the command menu (#8610)

Closes #8414



https://github.com/user-attachments/assets/a6aeb50a-b57d-43db-a839-4627c49b4155

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

@@ -43,7 +43,12 @@ export const RecordIndexActionMenuEffect = () => {
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
 
   useEffect(() => {
-    if (contextStoreNumberOfSelectedRecords > 0 && !isDropdownOpen) {
+    if (
+      contextStoreNumberOfSelectedRecords > 0 &&
+      !isDropdownOpen &&
+      !isRightDrawerOpen &&
+      !isCommandMenuOpened
+    ) {
       // We only handle opening the ActionMenuBar here, not the Dropdown.
       // The Dropdown is already managed by sync handlers for events like
       // right-click to open and click outside to close.
@@ -57,6 +62,8 @@ export const RecordIndexActionMenuEffect = () => {
     openActionBar,
     closeActionBar,
     isDropdownOpen,
+    isRightDrawerOpen,
+    isCommandMenuOpened,
   ]);
 
   useEffect(() => {

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

@@ -1,5 +1,6 @@
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ActionMenuEntryScope } from '@/action-menu/types/ActionMenuEntry';
 import { RightDrawerActionMenuDropdownHotkeyScope } from '@/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope';
 import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getRightDrawerActionMenuDropdownIdFromActionMenuId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -67,7 +68,8 @@ export const RightDrawerActionMenuDropdown = () => {
         <DropdownMenuItemsContainer>
           {actionMenuEntries
             .filter(
-              (actionMenuEntry) => actionMenuEntry.scope === 'record-selection',
+              (actionMenuEntry) =>
+                actionMenuEntry.scope === ActionMenuEntryScope.RecordSelection,
             )
             .map((actionMenuEntry, index) => (
               <MenuItem

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

@@ -5,7 +5,11 @@ import { RecoilRoot } from 'recoil';
 import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import {
+  ActionMenuEntry,
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
 import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
@@ -48,8 +52,8 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
 
             map.set('delete', {
               isPinned: true,
-              scope: 'record-selection',
-              type: 'standard',
+              scope: ActionMenuEntryScope.RecordSelection,
+              type: ActionMenuEntryType.Standard,
               key: 'delete',
               label: 'Delete',
               position: 0,

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

@@ -1,4 +1,8 @@
 import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry';
+import {
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
 import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
@@ -21,8 +25,8 @@ const markAsDoneMock = jest.fn();
 export const Default: Story = {
   args: {
     entry: {
-      type: 'standard',
-      scope: 'record-selection',
+      type: ActionMenuEntryType.Standard,
+      scope: ActionMenuEntryScope.RecordSelection,
       key: 'delete',
       label: 'Delete',
       position: 0,
@@ -35,8 +39,8 @@ export const Default: Story = {
 export const WithDangerAccent: Story = {
   args: {
     entry: {
-      type: 'standard',
-      scope: 'record-selection',
+      type: ActionMenuEntryType.Standard,
+      scope: ActionMenuEntryScope.RecordSelection,
       key: 'delete',
       label: 'Delete',
       position: 0,
@@ -50,8 +54,8 @@ export const WithDangerAccent: Story = {
 export const WithInteraction: Story = {
   args: {
     entry: {
-      type: 'standard',
-      scope: 'record-selection',
+      type: ActionMenuEntryType.Standard,
+      scope: ActionMenuEntryScope.RecordSelection,
       key: 'markAsDone',
       label: 'Mark as done',
       position: 0,

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

@@ -7,7 +7,11 @@ import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIn
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import {
+  ActionMenuEntry,
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui';
@@ -41,8 +45,8 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
           );
 
           map.set('delete', {
-            type: 'standard',
-            scope: 'record-selection',
+            type: ActionMenuEntryType.Standard,
+            scope: ActionMenuEntryScope.RecordSelection,
             key: 'delete',
             label: 'Delete',
             position: 0,
@@ -51,8 +55,8 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
           });
 
           map.set('markAsDone', {
-            type: 'standard',
-            scope: 'record-selection',
+            type: ActionMenuEntryType.Standard,
+            scope: ActionMenuEntryScope.RecordSelection,
             key: 'markAsDone',
             label: 'Mark as done',
             position: 1,
@@ -61,8 +65,8 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
           });
 
           map.set('addToFavorites', {
-            type: 'standard',
-            scope: 'record-selection',
+            type: ActionMenuEntryType.Standard,
+            scope: ActionMenuEntryScope.RecordSelection,
             key: 'addToFavorites',
             label: 'Add to favorites',
             position: 2,

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

@@ -5,7 +5,11 @@ import { RecoilRoot } from 'recoil';
 import { RightDrawerActionMenuDropdown } from '@/action-menu/components/RightDrawerActionMenuDropdown';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import {
+  ActionMenuEntry,
+  ActionMenuEntryScope,
+  ActionMenuEntryType,
+} from '@/action-menu/types/ActionMenuEntry';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { userEvent, waitFor, within } from '@storybook/test';
@@ -54,8 +58,8 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
           );
 
           map.set('addToFavorites', {
-            type: 'standard',
-            scope: 'record-selection',
+            type: ActionMenuEntryType.Standard,
+            scope: ActionMenuEntryScope.RecordSelection,
             key: 'addToFavorites',
             label: 'Add to favorites',
             position: 0,
@@ -64,8 +68,8 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
           });
 
           map.set('export', {
-            type: 'standard',
-            scope: 'record-selection',
+            type: ActionMenuEntryType.Standard,
+            scope: ActionMenuEntryScope.RecordSelection,
             key: 'export',
             label: 'Export',
             position: 1,
@@ -74,8 +78,8 @@ const meta: Meta<typeof RightDrawerActionMenuDropdown> = {
           });
 
           map.set('delete', {
-            type: 'standard',
-            scope: 'record-selection',
+            type: ActionMenuEntryType.Standard,
+            scope: ActionMenuEntryScope.RecordSelection,
             key: 'delete',
             label: 'Delete',
             position: 2,