Fix: prevent unexpected navigation when destroying record from side panel

packages/twenty-front/src/modules/command-menu-item/engine-command/hooks/useMountCommand.ts

@@ -20,6 +20,7 @@ type MountCommandParams = {
   availabilityType?: CommandMenuItemAvailabilityType;
   availabilityObjectMetadataId?: string | null;
   payload?: CommandMenuItemPayload | null;
+  isInSidePanel?: boolean;
 };
 
 export const useMountCommand = () => {
@@ -39,12 +40,14 @@ export const useMountCommand = () => {
       availabilityType,
       availabilityObjectMetadataId,
       payload,
+      isInSidePanel,
     }: MountCommandParams) => {
       const headlessEngineCommandContextApi = buildHeadlessCommandContextApi({
         store,
         contextStoreInstanceId,
         engineComponentKey,
         payload,
+        isInSidePanel,
       });
 
       const commandState = isDefined(frontComponentId)

packages/twenty-front/src/modules/command-menu-item/engine-command/record/components/DestroyRecordsCommand.tsx

@@ -4,14 +4,20 @@ import { DEFAULT_QUERY_PAGE_SIZE } from '@/object-record/constants/DefaultQueryP
 import { useIncrementalDestroyManyRecords } from '@/object-record/hooks/useIncrementalDestroyManyRecords';
 import { useRemoveSelectedRecordsFromRecordBoard } from '@/object-record/record-board/hooks/useRemoveSelectedRecordsFromRecordBoard';
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { t } from '@lingui/core/macro';
 import { AppPath, type RecordGqlOperationFilter } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const DestroyRecordsCommand = () => {
-  const { recordIndexId, objectMetadataItem, selectedRecords, graphqlFilter } =
-    useHeadlessCommandContextApi();
+  const {
+    recordIndexId,
+    objectMetadataItem,
+    selectedRecords,
+    graphqlFilter,
+    isInSidePanel,
+  } = useHeadlessCommandContextApi();
 
   if (!isDefined(recordIndexId) || !isDefined(objectMetadataItem)) {
     throw new Error(
@@ -22,6 +28,7 @@ export const DestroyRecordsCommand = () => {
   const isSingleRecord = selectedRecords.length === 1;
 
   const navigateApp = useNavigateApp();
+  const { closeSidePanelMenu } = useSidePanelMenu();
 
   const { resetTableRowSelection } = useResetTableRowSelection(recordIndexId);
   const { removeSelectedRecordsFromRecordBoard } =
@@ -56,9 +63,13 @@ export const DestroyRecordsCommand = () => {
     await incrementalDestroyManyRecords();
 
     if (isSingleRecord) {
-      navigateApp(AppPath.RecordIndexPage, {
-        objectNamePlural: objectMetadataItem.namePlural,
-      });
+      if (isInSidePanel) {
+        closeSidePanelMenu();
+      } else {
+        navigateApp(AppPath.RecordIndexPage, {
+          objectNamePlural: objectMetadataItem.namePlural,
+        });
+      }
     }
   };
 

packages/twenty-front/src/modules/command-menu-item/engine-command/types/HeadlessCommandContextApi.ts

@@ -22,6 +22,7 @@ export type HeadlessEngineCommandContextApi = {
   selectedRecords: ObjectRecord[];
   graphqlFilter: Nullable<RecordGqlOperationFilter>;
   payload: Nullable<CommandMenuItemPayload>;
+  isInSidePanel?: boolean;
 };
 
 export type HeadlessFrontComponentCommandContextApi =

packages/twenty-front/src/modules/command-menu-item/engine-command/utils/buildHeadlessCommandContextApi.ts

@@ -25,11 +25,13 @@ export const buildHeadlessCommandContextApi = ({
   contextStoreInstanceId,
   engineComponentKey,
   payload,
+  isInSidePanel,
 }: {
   store: Store;
   contextStoreInstanceId: string;
   engineComponentKey: EngineComponentKey;
   payload?: CommandMenuItemPayload | null;
+  isInSidePanel?: boolean;
 }): HeadlessEngineCommandContextApi => {
   const objectMetadataItemId = store.get(
     contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
@@ -127,5 +129,6 @@ export const buildHeadlessCommandContextApi = ({
     selectedRecords,
     graphqlFilter,
     payload: payload ?? null,
+    isInSidePanel: isInSidePanel ?? false,
   };
 };

packages/twenty-front/src/modules/command-menu-item/hooks/useCommandMenuItemClick.ts

@@ -81,6 +81,7 @@ export const useCommandMenuItemClick = ({
         availabilityType: item.availabilityType,
         availabilityObjectMetadataId: item.availabilityObjectMetadataId,
         payload: item.payload ?? undefined,
+        isInSidePanel: commandMenuContextApi.isInSidePanel,
       });
 
       return;

packages/twenty-front/src/modules/object-record/hooks/useDestroyManyRecords.ts

@@ -147,12 +147,17 @@ export const useDestroyManyRecords = ({
       objectMetadataNamePlural: objectMetadataItem.namePlural,
     });
 
-    removeNavigationMenuItemsByTargetRecordIds(recordIdsToDestroy);
+    const actualDestroyedRecordIds = destroyedRecords.map(
+      (record) => record.id,
+    );
+
+    removeNavigationMenuItemsByTargetRecordIds(actualDestroyedRecordIds);
 
     dispatchObjectRecordOperationBrowserEvent({
       objectMetadataItem,
       operation: {
         type: 'destroy-many',
+        destroyedRecordIds: actualDestroyedRecordIds,
       },
     });
 

packages/twenty-front/src/modules/object-record/hooks/useDestroyOneRecord.ts

@@ -2,14 +2,14 @@ import { useCallback } from 'react';
 
 import { triggerCreateRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect';
 import { triggerDestroyRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerDestroyRecordsOptimisticEffect';
+import { dispatchObjectRecordOperationBrowserEvent } from '@/browser-event/utils/dispatchObjectRecordOperationBrowserEvent';
 import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { useDestroyOneRecordMutation } from '@/object-record/hooks/useDestroyOneRecordMutation';
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
-import { dispatchObjectRecordOperationBrowserEvent } from '@/browser-event/utils/dispatchObjectRecordOperationBrowserEvent';
 import { getDestroyOneRecordMutationResponseField } from '@/object-record/utils/getDestroyOneRecordMutationResponseField';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 
@@ -94,6 +94,7 @@ export const useDestroyOneRecord = ({
         objectMetadataItem,
         operation: {
           type: 'destroy-one',
+          destroyedRecordId: idToDestroy,
         },
       });
 

packages/twenty-front/src/modules/object-record/hooks/useIncrementalDestroyManyRecords.ts

@@ -1,5 +1,6 @@
 import { triggerCreateRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect';
 import { triggerDestroyRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerDestroyRecordsOptimisticEffect';
+import { dispatchObjectRecordOperationBrowserEvent } from '@/browser-event/utils/dispatchObjectRecordOperationBrowserEvent';
 import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -12,7 +13,6 @@ import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions
 import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggregateQueries';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { dispatchObjectRecordOperationBrowserEvent } from '@/browser-event/utils/dispatchObjectRecordOperationBrowserEvent';
 import { getDestroyManyRecordsMutationResponseField } from '@/object-record/utils/getDestroyManyRecordsMutationResponseField';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { sleep } from '~/utils/sleep';
@@ -78,6 +78,8 @@ export const useIncrementalDestroyManyRecords = <T>({
       recordIdsToDestroy.length / mutationPageSize,
     );
 
+    const actualDestroyedRecordIds: string[] = [];
+
     for (let batchIndex = 0; batchIndex < numberOfBatches; batchIndex++) {
       const batchedIdsToDestroy = recordIdsToDestroy.slice(
         batchIndex * mutationPageSize,
@@ -88,7 +90,7 @@ export const useIncrementalDestroyManyRecords = <T>({
         .map((recordId) => getRecordFromCache(recordId, apolloCoreClient.cache))
         .filter(isDefined);
 
-      await apolloCoreClient
+      const response = await apolloCoreClient
         .mutate<Record<string, ObjectRecord[]>>({
           mutation: destroyManyRecordsMutation,
           variables: {
@@ -141,20 +143,39 @@ export const useIncrementalDestroyManyRecords = <T>({
           throw error;
         });
 
+      const destroyedRecordsForThisBatch =
+        response.data?.[mutationResponseField] ?? [];
+      actualDestroyedRecordIds.push(
+        ...destroyedRecordsForThisBatch.map((r) => r.id),
+      );
+
       if (delayInMsBetweenMutations > 0) {
         await sleep(delayInMsBetweenMutations);
       }
     }
+
+    return actualDestroyedRecordIds;
   };
 
   const incrementalDestroyManyRecords = async () => {
     let totalDestroyedCount = 0;
 
     await incrementalFetchAndMutate(
       async ({ recordIds, totalCount, abortSignal }) => {
-        await destroyManyRecordsBatch(recordIds, abortSignal);
-
-        totalDestroyedCount += recordIds.length;
+        const actualDestroyedRecordIds = await destroyManyRecordsBatch(
+          recordIds,
+          abortSignal,
+        );
+
+        totalDestroyedCount += actualDestroyedRecordIds.length;
+
+        dispatchObjectRecordOperationBrowserEvent({
+          objectMetadataItem,
+          operation: {
+            type: 'destroy-many',
+            destroyedRecordIds: actualDestroyedRecordIds,
+          },
+        });
 
         updateProgress(totalDestroyedCount, totalCount);
       },
@@ -164,13 +185,6 @@ export const useIncrementalDestroyManyRecords = <T>({
       objectMetadataNamePlural: objectMetadataItem.namePlural,
     });
 
-    dispatchObjectRecordOperationBrowserEvent({
-      objectMetadataItem,
-      operation: {
-        type: 'destroy-many',
-      },
-    });
-
     return totalDestroyedCount;
   };