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

Closes #7665 - Handle select all - Handle Filters --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Oct 21, 2024 · 40152d3 · 40152d3
1 parent eaab2d0
commit 40152d3
Show file tree

Hide file tree

Showing 52 changed files with 785 additions and 424 deletions.
diff --git a/...t/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx b/...t/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx
@@ -1,51 +1,91 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
-import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
+import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 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 { useFetchAllRecordIds } from '@/object-record/hooks/useFetchAllRecordIds';
+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,
+  objectMetadataItem,
 }: {
   position: number;
+  objectMetadataItem: ObjectMetadataItem;
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
+  const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
+    useState(false);
+
+  const { resetTableRowSelection } = useRecordTable({
+    recordTableId: objectMetadataItem.namePlural,
+  });
+
+  const { deleteManyRecords } = useDeleteManyRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+  });
+
+  const { favorites, deleteFavorite } = useFavorites();
+
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
+  );
+
+  const contextStoreTargetedRecordsRule = useRecoilValue(
+    contextStoreTargetedRecordsRuleState,
   );
 
-  const contextStoreCurrentObjectMetadataId = useRecoilValue(
-    contextStoreCurrentObjectMetadataIdState,
+  const graphqlFilter = computeContextStoreFilters(
+    contextStoreTargetedRecordsRule,
+    objectMetadataItem,
   );
 
-  const { objectMetadataItem } = useObjectMetadataItemById({
-    objectId: contextStoreCurrentObjectMetadataId,
+  const { fetchAllRecordIds } = useFetchAllRecordIds({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    filter: graphqlFilter,
   });
 
-  const [isDeleteRecordsModalOpen, setIsDeleteRecordsModalOpen] =
-    useState(false);
+  const handleDeleteClick = useCallback(async () => {
+    const recordIdsToDelete = await fetchAllRecordIds();
 
-  const { deleteTableData } = useDeleteTableData({
-    objectNameSingular: objectMetadataItem?.nameSingular ?? '',
-    recordIndexId: objectMetadataItem?.namePlural ?? '',
-  });
+    resetTableRowSelection();
 
-  const handleDeleteClick = useCallback(() => {
-    deleteTableData(contextStoreTargetedRecordIds);
-  }, [deleteTableData, contextStoreTargetedRecordIds]);
+    for (const recordIdToDelete of recordIdsToDelete) {
+      const foundFavorite = favorites?.find(
+        (favorite) => favorite.recordId === recordIdToDelete,
+      );
 
-  const isRemoteObject = objectMetadataItem?.isRemote ?? false;
+      if (foundFavorite !== undefined) {
+        deleteFavorite(foundFavorite.id);
+      }
+    }
+
+    await deleteManyRecords(recordIdsToDelete, {
+      delayInMsBetweenRequests: 50,
+    });
+  }, [
+    deleteFavorite,
+    deleteManyRecords,
+    favorites,
+    fetchAllRecordIds,
+    resetTableRowSelection,
+  ]);
 
-  const numberOfSelectedRecords = contextStoreTargetedRecordIds.length;
+  const isRemoteObject = objectMetadataItem.isRemote;
 
   const canDelete =
-    !isRemoteObject && numberOfSelectedRecords < DELETE_MAX_COUNT;
+    !isRemoteObject &&
+    isDefined(contextStoreNumberOfSelectedRecords) &&
+    contextStoreNumberOfSelectedRecords < DELETE_MAX_COUNT &&
+    contextStoreNumberOfSelectedRecords > 0;
 
   useEffect(() => {
     if (canDelete) {
@@ -62,32 +102,38 @@ export const DeleteRecordsActionEffect = ({
           <ConfirmationModal
             isOpen={isDeleteRecordsModalOpen}
             setIsOpen={setIsDeleteRecordsModalOpen}
-            title={`Delete ${numberOfSelectedRecords} ${
-              numberOfSelectedRecords === 1 ? `record` : 'records'
+            title={`Delete ${contextStoreNumberOfSelectedRecords} ${
+              contextStoreNumberOfSelectedRecords === 1 ? `record` : 'records'
             }`}
             subtitle={`Are you sure you want to delete ${
-              numberOfSelectedRecords === 1 ? 'this record' : 'these records'
+              contextStoreNumberOfSelectedRecords === 1
+                ? 'this record'
+                : 'these records'
             }? ${
-              numberOfSelectedRecords === 1 ? 'It' : 'They'
+              contextStoreNumberOfSelectedRecords === 1 ? 'It' : 'They'
             } can be recovered from the Options menu.`}
             onConfirmClick={() => handleDeleteClick()}
             deleteButtonText={`Delete ${
-              numberOfSelectedRecords > 1 ? 'Records' : 'Record'
+              contextStoreNumberOfSelectedRecords > 1 ? 'Records' : 'Record'
             }`}
           />
         ),
       });
     } else {
       removeActionMenuEntry('delete');
     }
+
+    return () => {
+      removeActionMenuEntry('delete');
+    };
   }, [
-    canDelete,
     addActionMenuEntry,
-    removeActionMenuEntry,
-    isDeleteRecordsModalOpen,
-    numberOfSelectedRecords,
+    canDelete,
+    contextStoreNumberOfSelectedRecords,
     handleDeleteClick,
+    isDeleteRecordsModalOpen,
     position,
+    removeActionMenuEntry,
   ]);
 
   return null;

diff --git a/...t/src/modules/action-menu/actions/record-actions/components/ExportRecordsActionEffect.tsx b/...t/src/modules/action-menu/actions/record-actions/components/ExportRecordsActionEffect.tsx
@@ -1,38 +1,27 @@
 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 { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
 import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
 import { IconFileExport } from 'twenty-ui';
 
 export const ExportRecordsActionEffect = ({
   position,
+  objectMetadataItem,
 }: {
   position: number;
+  objectMetadataItem: ObjectMetadataItem;
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
-  const contextStoreCurrentObjectMetadataId = useRecoilValue(
-    contextStoreCurrentObjectMetadataIdState,
-  );
-
-  const { objectMetadataItem } = useObjectMetadataItemById({
-    objectId: contextStoreCurrentObjectMetadataId,
-  });
-
-  const baseTableDataParams = {
+  const { progress, download } = useExportRecordData({
     delayMs: 100,
-    objectNameSingular: objectMetadataItem?.nameSingular ?? '',
-    recordIndexId: objectMetadataItem?.namePlural ?? '',
-  };
-
-  const { progress, download } = useExportTableData({
-    ...baseTableDataParams,
-    filename: `${objectMetadataItem?.nameSingular}.csv`,
+    objectMetadataItem,
+    recordIndexId: objectMetadataItem.namePlural,
+    filename: `${objectMetadataItem.nameSingular}.csv`,
   });
 
   useEffect(() => {

diff --git a/...src/modules/action-menu/actions/record-actions/components/ManageFavoritesActionEffect.tsx b/...src/modules/action-menu/actions/record-actions/components/ManageFavoritesActionEffect.tsx
@@ -1,39 +1,36 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsRuleState';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
-import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui';
 
 export const ManageFavoritesActionEffect = ({
   position,
+  objectMetadataItem,
 }: {
   position: number;
+  objectMetadataItem: ObjectMetadataItem;
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
-  );
-  const contextStoreCurrentObjectMetadataId = useRecoilValue(
-    contextStoreCurrentObjectMetadataIdState,
+  const contextStoreTargetedRecordsRule = useRecoilValue(
+    contextStoreTargetedRecordsRuleState,
   );
 
   const { favorites, createFavorite, deleteFavorite } = useFavorites();
 
-  const selectedRecordId = contextStoreTargetedRecordIds[0];
+  const selectedRecordId =
+    contextStoreTargetedRecordsRule.mode === 'selection'
+      ? contextStoreTargetedRecordsRule.selectedRecordIds[0]
+      : undefined;
 
   const selectedRecord = useRecoilValue(
-    recordStoreFamilyState(selectedRecordId),
+    recordStoreFamilyState(selectedRecordId ?? ''),
   );
 
-  const { objectMetadataItem } = useObjectMetadataItemById({
-    objectId: contextStoreCurrentObjectMetadataId,
-  });
-
   const foundFavorite = favorites?.find(
     (favorite) => favorite.recordId === selectedRecordId,
   );

diff --git a/.../action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter.tsx b/.../action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter.tsx
@@ -1,13 +1,22 @@
 import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
 import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
 const actionEffects = [ExportRecordsActionEffect, DeleteRecordsActionEffect];
 
-export const MultipleRecordsActionMenuEntriesSetter = () => {
+export const MultipleRecordsActionMenuEntriesSetter = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
   return (
     <>
       {actionEffects.map((ActionEffect, index) => (
-        <ActionEffect key={index} position={index} />
+        <ActionEffect
+          key={index}
+          position={index}
+          objectMetadataItem={objectMetadataItem}
+        />
       ))}
     </>
   );

diff --git a/...c/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx b/...c/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx
@@ -1,20 +1,44 @@
 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 { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { useRecoilValue } from 'recoil';
 
 export const RecordActionMenuEntriesSetter = () => {
-  const contextStoreTargetedRecordIds = useRecoilValue(
-    contextStoreTargetedRecordIdsState,
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
   );
 
-  if (contextStoreTargetedRecordIds.length === 0) {
+  const contextStoreCurrentObjectMetadataId = useRecoilValue(
+    contextStoreCurrentObjectMetadataIdState,
+  );
+
+  const { objectMetadataItem } = useObjectMetadataItemById({
+    objectId: contextStoreCurrentObjectMetadataId ?? '',
+  });
+
+  if (!objectMetadataItem) {
+    throw new Error(
+      `Object metadata item not found for id ${contextStoreCurrentObjectMetadataId}`,
+    );
+  }
+
+  if (!contextStoreNumberOfSelectedRecords) {
     return null;
   }
 
-  if (contextStoreTargetedRecordIds.length === 1) {
-    return <SingleRecordActionMenuEntriesSetter />;
+  if (contextStoreNumberOfSelectedRecords === 1) {
+    return (
+      <SingleRecordActionMenuEntriesSetter
+        objectMetadataItem={objectMetadataItem}
+      />
+    );
   }
 
-  return <MultipleRecordsActionMenuEntriesSetter />;
+  return (
+    <MultipleRecordsActionMenuEntriesSetter
+      objectMetadataItem={objectMetadataItem}
+    />
+  );
 };
diff --git a/...les/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter.tsx b/...les/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter.tsx
@@ -1,8 +1,13 @@
 import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
 import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
 import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
-export const SingleRecordActionMenuEntriesSetter = () => {
+export const SingleRecordActionMenuEntriesSetter = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
   const actionEffects = [
     ManageFavoritesActionEffect,
     ExportRecordsActionEffect,
@@ -11,7 +16,11 @@ export const SingleRecordActionMenuEntriesSetter = () => {
   return (
     <>
       {actionEffects.map((ActionEffect, index) => (
-        <ActionEffect key={index} position={index} />
+        <ActionEffect
+          key={index}
+          position={index}
+          objectMetadataItem={objectMetadataItem}
+        />
       ))}
     </>
   );

diff --git a/packages/twenty-front/src/modules/action-menu/components/ActionMenu.tsx b/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>
+      )}
+    </>
+  );
+};