Add delete and restore event handling for table and board (#17489)

This PR adds what is required to handle soft-delete and restore SSE events in virtualized table and board. Restore is not handled in board for now as it requires respecting sorts when inserting record ids. Since virtualized table is refetching small chunks, we just refetch for now. The long term goal is to handle event handling without refetching in all main components, and also handle SSE events that have the same origin that the current tab. But for now we implement what is easily doable. # QA Delete between table and board (delete only) : https://github.com/user-attachments/assets/715dd44a-007a-44ab-bf49-5ef039cd57c3 Delete and restore between table and table : https://github.com/user-attachments/assets/f2122519-e969-491f-b71c-018d0f85bd86
2026-01-27 22:09:20 +01:00
parent 6b38686d87
commit 2ffe2d8aa6
15 changed files with 441 additions and 28 deletions
@@ -1,5 +1,6 @@
 import { triggerUpdateRecordOptimisticEffectByBatch } from '@/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffectByBatch';
 import { apiConfigState } from '@/client-config/states/apiConfigState';
+import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/hooks/useRemoveNavigationMenuItemByTargetRecordId';
 import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -16,11 +17,10 @@ import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useU
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { dispatchObjectRecordOperationBrowserEvent } from '@/object-record/utils/dispatchObjectRecordOperationBrowserEvent';
 import { getDeleteManyRecordsMutationResponseField } from '@/object-record/utils/getDeleteManyRecordsMutationResponseField';
-import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/hooks/useRemoveNavigationMenuItemByTargetRecordId';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
-import { FeatureFlagKey } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { sleep } from '~/utils/sleep';

 type useDeleteManyRecordProps = {
@@ -239,6 +239,7 @@ export const useDeleteManyRecords = ({
      objectMetadataItem,
      operation: {
        type: 'delete-many',
+        deletedRecordIds: recordIdsToDelete,
      },
    });

@@ -168,6 +168,7 @@ export const useDeleteOneRecord = ({
        objectMetadataItem,
        operation: {
          type: 'delete-one',
+          deletedRecordId: idToDelete,
        },
      });

@@ -1,4 +1,5 @@
 import { triggerUpdateRecordOptimisticEffectByBatch } from '@/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffectByBatch';
+import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/hooks/useRemoveNavigationMenuItemByTargetRecordId';
 import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -16,11 +17,10 @@ import { useRefetchAggregateQueries } from '@/object-record/hooks/useRefetchAggr
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { dispatchObjectRecordOperationBrowserEvent } from '@/object-record/utils/dispatchObjectRecordOperationBrowserEvent';
-import { useRemoveNavigationMenuItemByTargetRecordId } from '@/navigation-menu-item/hooks/useRemoveNavigationMenuItemByTargetRecordId';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useCallback } from 'react';
-import { FeatureFlagKey } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { sleep } from '~/utils/sleep';

 const DEFAULT_DELAY_BETWEEN_MUTATIONS_MS = 50;
@@ -252,6 +252,7 @@ export const useIncrementalDeleteManyRecords = <T>({
      objectMetadataItem,
      operation: {
        type: 'delete-many',
+        deletedRecordIds: allDeletedRecordIds,
      },
    });

@@ -203,6 +203,7 @@ export const useRestoreManyRecords = ({
        objectMetadataItem,
        operation: {
          type: 'restore-many',
+          restoredRecords: restoredRecordsForThisBatch,
        },
      });

@@ -1,5 +1,6 @@
 import { useListenToObjectRecordOperationBrowserEvent } from '@/object-record/hooks/useListenToObjectRecordOperationBrowserEvent';
 import { useGetShouldInitializeRecordBoardForUpdateInputs } from '@/object-record/record-board/hooks/useGetShouldInitializeRecordBoardForUpdateInputs';
+import { useRemoveRecordsFromBoard } from '@/object-record/record-board/hooks/useRemoveRecordsFromBoard';
 import { useTriggerRecordBoardInitialQuery } from '@/object-record/record-board/hooks/useTriggerRecordBoardInitialQuery';
 import { recordGroupFromGroupValueComponentFamilySelector } from '@/object-record/record-group/states/selectors/recordGroupFromGroupValueComponentFamilySelector';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
@@ -32,6 +33,8 @@ export const RecordBoardDataChangedEffect = () => {
      recordIndexRecordIdsByGroupComponentFamilyState,
    );

+  const { removeRecordsFromBoard } = useRemoveRecordsFromBoard();
+
  const handleObjectRecordOperation = useRecoilCallback(
    ({ snapshot }) =>
      (
@@ -126,6 +129,26 @@ export const RecordBoardDataChangedEffect = () => {
            }
            break;
          }
+          case 'delete-one': {
+            const removedRecordId = objectRecordOperation.deletedRecordId;
+
+            removeRecordsFromBoard({
+              recordIdsToRemove: [removedRecordId],
+            });
+            return;
+          }
+          case 'delete-many': {
+            const removedRecordIds = objectRecordOperation.deletedRecordIds;
+
+            removeRecordsFromBoard({
+              recordIdsToRemove: removedRecordIds,
+            });
+            return;
+          }
+          case 'restore-many':
+          case 'restore-one': {
+            return;
+          }
          default: {
            triggerRecordBoardInitialQuery();
          }
@@ -137,6 +160,7 @@ export const RecordBoardDataChangedEffect = () => {
      recordIndexGroupFieldMetadataItemCallbackState,
      recordGroupFromGroupValueCallbackState,
      recordIndexRecordIdsByGroupCallbackState,
+      removeRecordsFromBoard,
    ],
  );

@@ -0,0 +1,101 @@
+import { recordGroupFromGroupValueComponentFamilySelector } from '@/object-record/record-group/states/selectors/recordGroupFromGroupValueComponentFamilySelector';
+import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
+import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useRemoveRecordsFromBoard = () => {
+  const recordIndexGroupFieldMetadataItemCallbackState =
+    useRecoilComponentCallbackState(
+      recordIndexGroupFieldMetadataItemComponentState,
+    );
+
+  const recordGroupFromGroupValueFamilyCallbackState =
+    useRecoilComponentCallbackState(
+      recordGroupFromGroupValueComponentFamilySelector,
+    );
+
+  const recordIndexRecordIdsByGroupFamilyCallbackState =
+    useRecoilComponentCallbackState(
+      recordIndexRecordIdsByGroupComponentFamilyState,
+    );
+
+  const removeRecordsFromBoard = useRecoilCallback(
+    ({ snapshot, set }) =>
+      ({ recordIdsToRemove }: { recordIdsToRemove: string[] }) => {
+        const recordIdsToRemoveByGroup = new Map<string, string[]>();
+
+        for (const recordIdToRemove of recordIdsToRemove) {
+          const recordToRemove = getSnapshotValue(
+            snapshot,
+            recordStoreFamilyState(recordIdToRemove),
+          );
+
+          if (!isDefined(recordToRemove)) {
+            continue;
+          }
+
+          const recordIndexGroupFieldMetadataItem = getSnapshotValue(
+            snapshot,
+            recordIndexGroupFieldMetadataItemCallbackState,
+          );
+
+          if (!isDefined(recordIndexGroupFieldMetadataItem)) {
+            continue;
+          }
+
+          const recordGroupValue =
+            recordToRemove[recordIndexGroupFieldMetadataItem.name];
+
+          const recordGroupDefinitionFromGroupValue = getSnapshotValue(
+            snapshot,
+            recordGroupFromGroupValueFamilyCallbackState({ recordGroupValue }),
+          );
+
+          if (!isDefined(recordGroupDefinitionFromGroupValue)) {
+            continue;
+          }
+
+          const groupId = recordGroupDefinitionFromGroupValue.id;
+
+          if (!recordIdsToRemoveByGroup.has(groupId)) {
+            recordIdsToRemoveByGroup.set(groupId, []);
+          }
+
+          recordIdsToRemoveByGroup.get(groupId)?.push(recordIdToRemove);
+        }
+
+        for (const [
+          groupId,
+          recordIdsToRemoveInGroup,
+        ] of recordIdsToRemoveByGroup) {
+          const currentRecordIdsForGroup = getSnapshotValue(
+            snapshot,
+            recordIndexRecordIdsByGroupFamilyCallbackState(groupId),
+          );
+
+          const recordIdsWithoutRemovedRecords =
+            currentRecordIdsForGroup.filter(
+              (recordId) => !recordIdsToRemoveInGroup.includes(recordId),
+            );
+
+          set(
+            recordIndexRecordIdsByGroupFamilyCallbackState(groupId),
+            recordIdsWithoutRemovedRecords,
+          );
+        }
+      },
+    [
+      recordIndexGroupFieldMetadataItemCallbackState,
+      recordGroupFromGroupValueFamilyCallbackState,
+      recordIndexRecordIdsByGroupFamilyCallbackState,
+    ],
+  );
+
+  return {
+    removeRecordsFromBoard,
+  };
+};
@@ -1,9 +1,11 @@
 import { useListenToObjectRecordOperationBrowserEvent } from '@/object-record/hooks/useListenToObjectRecordOperationBrowserEvent';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
+import { SSE_TABLE_DEBOUNCE_TIME_IN_MS_TO_AVOID_SSE_OWN_EVENTS_RACE_CONDITION } from '@/object-record/record-table/virtualization/constants/SseTableDebounceTimeInMsToAvoidSseOwnEventsRaceCondition';
 import { useGetShouldResetTableVirtualizationForUpdateInputs } from '@/object-record/record-table/virtualization/hooks/useGetShouldResetTableVirtualizationForUpdateInputs';
 import { useResetVirtualizationBecauseDataChanged } from '@/object-record/record-table/virtualization/hooks/useResetVirtualizationBecauseDataChanged';
 import { type ObjectRecordOperationBrowserEventDetail } from '@/object-record/types/ObjectRecordOperationBrowserEventDetail';
+import { useDebouncedCallback } from 'use-debounce';

 export const RecordTableVirtualizedDataChangedEffect = () => {
  const { objectMetadataItem } = useRecordIndexContextOrThrow();
@@ -15,6 +17,14 @@ export const RecordTableVirtualizedDataChangedEffect = () => {
  const { getShouldResetTableVirtualizationForUpdateInputs } =
    useGetShouldResetTableVirtualizationForUpdateInputs();

+  const debouncedResertVirtualizationBecauseDataChanged = useDebouncedCallback(
+    resetVirtualizationBecauseDataChanged,
+    SSE_TABLE_DEBOUNCE_TIME_IN_MS_TO_AVOID_SSE_OWN_EVENTS_RACE_CONDITION,
+    {
+      leading: false,
+    },
+  );
+
  const handleObjectRecordOperation = (
    objectRecordOperationEventDetail: ObjectRecordOperationBrowserEventDetail,
  ) => {
@@ -34,10 +44,10 @@ export const RecordTableVirtualizedDataChangedEffect = () => {
        getShouldResetTableVirtualizationForUpdateInputs(updateInputs);

      if (shouldResetForUpdateOperation) {
-        resetVirtualizationBecauseDataChanged();
+        debouncedResertVirtualizationBecauseDataChanged();
      }
    } else {
-      resetVirtualizationBecauseDataChanged();
+      debouncedResertVirtualizationBecauseDataChanged();
    }
  };

@@ -0,0 +1 @@
+export const SSE_TABLE_DEBOUNCE_TIME_IN_MS_TO_AVOID_SSE_OWN_EVENTS_RACE_CONDITION = 50;
@@ -19,13 +19,21 @@ export type ObjectRecordOperation =
      createdRecord: ObjectRecord;
    }
  | {
-      type:
-        | 'create-many'
-        | 'destroy-one'
-        | 'destroy-many'
-        | 'delete-one'
-        | 'delete-many'
-        | 'restore-one'
-        | 'restore-many'
-        | 'merge-records';
+      type: 'delete-one';
+      deletedRecordId: string;
+    }
+  | {
+      type: 'delete-many';
+      deletedRecordIds: string[];
+    }
+  | {
+      type: 'restore-one';
+      restoredRecord: ObjectRecord;
+    }
+  | {
+      type: 'restore-many';
+      restoredRecords: ObjectRecord[];
+    }
+  | {
+      type: 'create-many' | 'merge-records' | 'destroy-one' | 'destroy-many';
    };
				`@@ -0,0 +1 @@`
				`export const SSE_TABLE_DEBOUNCE_TIME_IN_MS_TO_AVOID_SSE_OWN_EVENTS_RACE_CONDITION = 50;`