7665 handle the select all case inside the action menu

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx

@@ -1,13 +1,15 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
+import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
 import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { DELETE_MAX_COUNT } from '@/object-record/constants/DeleteMaxCount';
-import { useDeleteTableData } from '@/object-record/record-index/options/hooks/useDeleteTableData';
+import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
+import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useCallback, useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconTrash } from 'twenty-ui';
+import { IconTrash, isDefined } from 'twenty-ui';
 
 export const DeleteRecordsActionEffect = ({
   position,
@@ -16,10 +18,6 @@ export const DeleteRecordsActionEffect = ({
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
-  );
-
   const contextStoreCurrentObjectMetadataId = useRecoilValue(
     contextStoreCurrentObjectMetadataIdState,
   );
@@ -31,21 +29,52 @@ export const DeleteRecordsActionEffect = ({
   const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
     useState(false);
 
-  const { deleteTableData } = useDeleteTableData({
+  const { resetTableRowSelection } = useRecordTable({
+    recordTableId: objectMetadataItem?.namePlural ?? '',
+  });
+
+  const { deleteManyRecords } = useDeleteManyRecords({
     objectNameSingular: objectMetadataItem?.nameSingular ?? '',
-    recordIndexId: objectMetadataItem?.namePlural ?? '',
   });
+  const { favorites, deleteFavorite } = useFavorites();
 
-  const handleDeleteClick = useCallback(() => {
-    deleteTableData(contextStoreTargetedRecordIds);
-  }, [deleteTableData, contextStoreTargetedRecordIds]);
+  const { totalCount: numberOfSelectedRecords, records: recordsToDelete } =
+    useContextStoreSelectedRecords({
+      recordGqlFields: {
+        id: true,
+      },
+    });
 
-  const isRemoteObject = objectMetadataItem?.isRemote ?? false;
+  const recordIdsToDelete = recordsToDelete.map((record) => record.id);
+
+  const handleDeleteClick = useCallback(
+    async (recordIdsToDelete: string[]) => {
+      resetTableRowSelection();
+
+      for (const recordIdToDelete of recordIdsToDelete) {
+        const foundFavorite = favorites?.find(
+          (favorite) => favorite.recordId === recordIdToDelete,
+        );
 
-  const numberOfSelectedRecords = contextStoreTargetedRecordIds.length;
+        if (foundFavorite !== undefined) {
+          deleteFavorite(foundFavorite.id);
+        }
+      }
+
+      await deleteManyRecords(recordIdsToDelete, {
+        delayInMsBetweenRequests: 50,
+      });
+    },
+    [deleteFavorite, deleteManyRecords, favorites, resetTableRowSelection],
+  );
+
+  const isRemoteObject = objectMetadataItem?.isRemote ?? false;
 
   const canDelete =
-    !isRemoteObject && numberOfSelectedRecords < DELETE_MAX_COUNT;
+    !isRemoteObject &&
+    isDefined(numberOfSelectedRecords) &&
+    numberOfSelectedRecords < DELETE_MAX_COUNT &&
+    numberOfSelectedRecords > 0;
 
   useEffect(() => {
     if (canDelete) {
@@ -70,7 +99,7 @@ export const DeleteRecordsActionEffect = ({
             }? ${
               numberOfSelectedRecords === 1 ? 'It' : 'They'
             } can be recovered from the Options menu.`}
-            onConfirmClick={() => handleDeleteClick()}
+            onConfirmClick={() => handleDeleteClick(recordIdsToDelete)}
             deleteButtonText={`Delete ${
               numberOfSelectedRecords > 1 ? 'Records' : 'Record'
             }`}
@@ -80,6 +109,10 @@ export const DeleteRecordsActionEffect = ({
     } else {
       removeActionMenuEntry('delete');
     }
+
+    return () => {
+      removeActionMenuEntry('delete');
+    };
   }, [
     canDelete,
     addActionMenuEntry,
@@ -88,6 +121,7 @@ export const DeleteRecordsActionEffect = ({
     numberOfSelectedRecords,
     handleDeleteClick,
     position,
+    recordIdsToDelete,
   ]);
 
   return null;

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/ExportRecordsActionEffect.tsx

@@ -1,10 +1,11 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import {
   displayedExportProgress,
-  useExportTableData,
-} from '@/object-record/record-index/options/hooks/useExportTableData';
+  useExportRecordData,
+} from '@/action-menu/hooks/useExportRecordData';
+import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconFileExport } from 'twenty-ui';
@@ -30,7 +31,7 @@ export const ExportRecordsActionEffect = ({
     recordIndexId: objectMetadataItem?.namePlural ?? '',
   };
 
-  const { progress, download } = useExportTableData({
+  const { progress, download } = useExportRecordData({
     ...baseTableDataParams,
     filename: `${objectMetadataItem?.nameSingular}.csv`,
   });

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/ManageFavoritesActionEffect.tsx

@@ -1,6 +1,6 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
 import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { contextStoreTargetedRecordsState } from '@/context-store/states/contextStoreTargetedRecordsState';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
@@ -15,16 +15,19 @@ export const ManageFavoritesActionEffect = ({
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
+  const contextStoreTargetedRecords = useRecoilValue(
+    contextStoreTargetedRecordsState,
   );
   const contextStoreCurrentObjectMetadataId = useRecoilValue(
     contextStoreCurrentObjectMetadataIdState,
   );
 
   const { favorites, createFavorite, deleteFavorite } = useFavorites();
 
-  const selectedRecordId = contextStoreTargetedRecordIds[0];
+  const selectedRecordId =
+    contextStoreTargetedRecords.selectedRecordIds === 'all'
+      ? ''
+      : contextStoreTargetedRecords.selectedRecordIds[0];
 
   const selectedRecord = useRecoilValue(
     recordStoreFamilyState(selectedRecordId),

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx

@@ -1,18 +1,15 @@
 import { MultipleRecordsActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter';
 import { SingleRecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
-import { useRecoilValue } from 'recoil';
+import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
 
 export const RecordActionMenuEntriesSetter = () => {
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
-  );
+  const { totalCount } = useContextStoreSelectedRecords({ limit: 1 });
 
-  if (contextStoreTargetedRecordIds.length === 0) {
+  if (!totalCount) {
     return null;
   }
 
-  if (contextStoreTargetedRecordIds.length === 1) {
+  if (totalCount === 1) {
     return <SingleRecordActionMenuEntriesSetter />;
   }
 

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 }}
+        >
+          <ActionMenuEffect />
+          <RecordActionMenuEntriesSetter />
+          <ActionMenuBar />
+          <ActionMenuDropdown />
+          <ActionMenuConfirmationModals />
+        </ActionMenuComponentInstanceContext.Provider>
+      )}
+    </>
+  );
+};

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

@@ -4,11 +4,10 @@ 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 { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
 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';
-import { useRecoilValue } from 'recoil';
 
 const StyledLabel = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -19,9 +18,10 @@ const StyledLabel = styled.div`
 `;
 
 export const ActionMenuBar = () => {
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
-  );
+  const { totalCount: numberOfSelectedRecords } =
+    useContextStoreSelectedRecords({
+      limit: 1,
+    });
 
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
     ActionMenuComponentInstanceContext,
@@ -42,9 +42,7 @@ export const ActionMenuBar = () => {
         scope: ActionBarHotkeyScope.ActionBar,
       }}
     >
-      <StyledLabel>
-        {contextStoreTargetedRecordIds.length} selected:
-      </StyledLabel>
+      <StyledLabel>{numberOfSelectedRecords} selected:</StyledLabel>
       {actionMenuEntries.map((entry, index) => (
         <ActionMenuBarEntry key={index} entry={entry} />
       ))}

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

@@ -1,17 +1,20 @@
 import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { contextStoreTargetedRecordsState } from '@/context-store/states/contextStoreTargetedRecordsState';
+import { isOneRecordOrMoreSelected } from '@/context-store/utils/isOneRecordOrMoreSelected';
 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';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 export const ActionMenuEffect = () => {
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
+  const contextStoreTargetedRecords = useRecoilValue(
+    contextStoreTargetedRecordsState,
   );
 
+  const selectedRecords = contextStoreTargetedRecords.selectedRecordIds;
+
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
     ActionMenuComponentInstanceContext,
   );
@@ -26,20 +29,21 @@ export const ActionMenuEffect = () => {
   );
 
   useEffect(() => {
-    if (contextStoreTargetedRecordIds.length > 0 && !isDropdownOpen) {
+    if (isOneRecordOrMoreSelected(selectedRecords) && !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 (!isOneRecordOrMoreSelected(selectedRecords) && isDropdownOpen) {
       closeActionBar();
     }
   }, [
-    contextStoreTargetedRecordIds,
+    contextStoreTargetedRecords,
     openActionBar,
     closeActionBar,
     isDropdownOpen,
+    selectedRecords,
   ]);
 
   return null;

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

@@ -5,7 +5,7 @@ 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 { contextStoreTargetedRecordsState } from '@/context-store/states/contextStoreTargetedRecordsState';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import { userEvent, waitFor, within } from '@storybook/test';
 import { IconCheckbox, IconTrash } from 'twenty-ui';
@@ -20,7 +20,10 @@ const meta: Meta<typeof ActionMenuBar> = {
     (Story) => (
       <RecoilRoot
         initializeState={({ set }) => {
-          set(contextStoreTargetedRecordIdsState, ['1', '2', '3']);
+          set(contextStoreTargetedRecordsState, {
+            selectedRecordIds: ['1', '2', '3'],
+            excludedRecordIds: [],
+          });
           set(
             actionMenuEntriesComponentState.atomFamily({
               instanceId: 'story-action-menu',

packages/twenty-front/src/modules/object-record/record-index/options/hooks/__tests__/useExportTableData.test.ts → packages/twenty-front/src/modules/action-menu/hooks/__tests__/useExportRecordData.test.ts

@@ -7,7 +7,7 @@ import {
   displayedExportProgress,
   download,
   generateCsv,
-} from '../useExportTableData';
+} from '../useExportRecordData';
 
 jest.useFakeTimers();
 

packages/twenty-front/src/modules/object-record/record-index/options/hooks/useExportTableData.ts → packages/twenty-front/src/modules/action-menu/hooks/useExportRecordData.ts

@@ -4,10 +4,11 @@ import { useMemo } from 'react';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
 import { useProcessRecordsForCSVExport } from '@/object-record/record-index/options/hooks/useProcessRecordsForCSVExport';
+
 import {
-  useTableData,
   UseTableDataOptions,
-} from '@/object-record/record-index/options/hooks/useTableData';
+  useRecordData,
+} from '@/object-record/record-index/options/hooks/useRecordData';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
@@ -138,7 +139,7 @@ type UseExportTableDataOptions = Omit<UseTableDataOptions, 'callback'> & {
   filename: string;
 };
 
-export const useExportTableData = ({
+export const useExportRecordData = ({
   delayMs,
   filename,
   maximumRequests = 100,
@@ -160,7 +161,7 @@ export const useExportTableData = ({
     [filename, processRecordsForCSVExport],
   );
 
-  const { getTableData: download, progress } = useTableData({
+  const { getTableData: download, progress } = useRecordData({
     delayMs,
     maximumRequests,
     objectNameSingular,