7665 handle the select all case inside the action menu (#7742)

Closes #7665 
- Handle select all
- Handle Filters

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -0,0 +1,30 @@
+import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
+import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
+import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
+import { ActionMenuDropdown } from '@/action-menu/components/ActionMenuDropdown';
+import { ActionMenuEffect } from '@/action-menu/components/ActionMenuEffect';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { useRecoilValue } from 'recoil';
+
+export const ActionMenu = ({ actionMenuId }: { actionMenuId: string }) => {
+  const contextStoreCurrentObjectMetadataId = useRecoilValue(
+    contextStoreCurrentObjectMetadataIdState,
+  );
+
+  return (
+    <>
+      {contextStoreCurrentObjectMetadataId && (
+        <ActionMenuComponentInstanceContext.Provider
+          value={{ instanceId: actionMenuId }}
+        >
+          <ActionMenuBar />
+          <ActionMenuDropdown />
+          <ActionMenuConfirmationModals />
+          <ActionMenuEffect />
+          <RecordActionMenuEntriesSetter />
+        </ActionMenuComponentInstanceContext.Provider>
+      )}
+    </>
+  );
+};

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

@@ -4,7 +4,7 @@ import { ActionMenuBarEntry } from '@/action-menu/components/ActionMenuBarEntry'
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -19,8 +19,8 @@ const StyledLabel = styled.div`
 `;
 
 export const ActionMenuBar = () => {
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
   );
 
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
@@ -42,9 +42,7 @@ export const ActionMenuBar = () => {
         scope: ActionBarHotkeyScope.ActionBar,
       }}
     >
-      <StyledLabel>
-        {contextStoreTargetedRecordIds.length} selected:
-      </StyledLabel>
+      <StyledLabel>{contextStoreNumberOfSelectedRecords} selected:</StyledLabel>
       {actionMenuEntries.map((entry, index) => (
         <ActionMenuBarEntry key={index} entry={entry} />
       ))}

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

@@ -64,7 +64,7 @@ export const ActionMenuDropdown = () => {
   return (
     <StyledContainerActionMenuDropdown
       position={actionMenuDropdownPosition}
-      className="context-menu"
+      className="action-menu-dropdown"
     >
       <Dropdown
         dropdownId={`action-menu-dropdown-${actionMenuId}`}

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

@@ -1,6 +1,6 @@
 import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@@ -8,8 +8,8 @@ import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 export const ActionMenuEffect = () => {
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
   );
 
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
@@ -26,17 +26,17 @@ export const ActionMenuEffect = () => {
   );
 
   useEffect(() => {
-    if (contextStoreTargetedRecordIds.length > 0 && !isDropdownOpen) {
+    if (contextStoreNumberOfSelectedRecords > 0 && !isDropdownOpen) {
       // 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.
       openActionBar();
     }
-    if (contextStoreTargetedRecordIds.length === 0) {
+    if (contextStoreNumberOfSelectedRecords === 0 && isDropdownOpen) {
       closeActionBar();
     }
   }, [
-    contextStoreTargetedRecordIds,
+    contextStoreNumberOfSelectedRecords,
     openActionBar,
     closeActionBar,
     isDropdownOpen,

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

@@ -5,7 +5,8 @@ import { RecoilRoot } from 'recoil';
 import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import { userEvent, waitFor, within } from '@storybook/test';
 import { IconCheckbox, IconTrash } from 'twenty-ui';
@@ -20,7 +21,11 @@ const meta: Meta<typeof ActionMenuBar> = {
     (Story) => (
       <RecoilRoot
         initializeState={({ set }) => {
-          set(contextStoreTargetedRecordIdsState, ['1', '2', '3']);
+          set(contextStoreTargetedRecordsRuleState, {
+            mode: 'selection',
+            selectedRecordIds: ['1', '2', '3'],
+          });
+          set(contextStoreNumberOfSelectedRecordsState, 3);
           set(
             actionMenuEntriesComponentState.atomFamily({
               instanceId: 'story-action-menu',