fix: refresh virtualized table when field metadata is updated ( #16388 )

packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneFieldMetadataItem.ts

@@ -5,12 +5,15 @@ import {
 
 import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
 import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItems';
+import { lastFieldMetadataItemUpdateState } from '@/object-metadata/states/lastFieldMetadataItemUpdateState';
 import { type MetadataRequestResult } from '@/object-metadata/types/MetadataRequestResult.type';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
 import { ApolloError } from '@apollo/client';
 import { t } from '@lingui/core/macro';
+import { useSetRecoilState } from 'recoil';
 import { CrudOperationType } from 'twenty-shared/types';
+import { v4 as uuidv4 } from 'uuid';
 
 export const useUpdateOneFieldMetadataItem = () => {
   const { refreshObjectMetadataItems } =
@@ -26,6 +29,10 @@ export const useUpdateOneFieldMetadataItem = () => {
 
   const { enqueueErrorSnackBar } = useSnackBar();
 
+  const setLastFieldMetadataItemUpdate = useSetRecoilState(
+    lastFieldMetadataItemUpdateState,
+  );
+
   const updateOneFieldMetadataItem = async ({
     objectMetadataId,
     fieldMetadataIdToUpdate,
@@ -60,6 +67,12 @@ export const useUpdateOneFieldMetadataItem = () => {
       await refreshObjectMetadataItems();
       await refreshCoreViewsByObjectMetadataId(objectMetadataId);
 
+      setLastFieldMetadataItemUpdate({
+        fieldMetadataItemId: fieldMetadataIdToUpdate,
+        objectMetadataId,
+        id: uuidv4(),
+      });
+
       return {
         status: 'successful',
         response,

packages/twenty-front/src/modules/object-metadata/states/lastFieldMetadataItemUpdateState.ts

@@ -0,0 +1,8 @@
+import type { FieldMetadataItemUpdate } from '@/object-metadata/types/FieldMetadataItemUpdate';
+import { createState } from 'twenty-ui/utilities';
+
+export const lastFieldMetadataItemUpdateState =
+  createState<FieldMetadataItemUpdate | null>({
+    key: 'lastFieldMetadataItemUpdateState',
+    defaultValue: null,
+  });

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItemUpdate.ts

@@ -0,0 +1,5 @@
+export type FieldMetadataItemUpdate = {
+  fieldMetadataItemId: string;
+  objectMetadataId: string;
+  id: string;
+};

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffectsWrapper.tsx

@@ -5,6 +5,7 @@ import { RecordTableBodyFocusKeyboardEffect } from '@/object-record/record-table
 import { RecordTableRecordGroupBodyEffects } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupBodyEffects';
 import { RecordTableNoRecordGroupScrollToPreviousRecordEffect } from '@/object-record/record-table/virtualization/components/RecordTableNoRecordGroupScrollToPreviousRecordEffect';
 import { RecordTableVirtualizedInitialDataLoadEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedInitialDataLoadEffect';
+import { RecordTableVirtualizedFieldMetadataUpdateEffect } from '@/object-record/record-table/virtualization/components/RecordTableVirtualizedFieldMetadataUpdateEffect';
 
 export interface RecordTableBodyEffectsWrapperProps {
   hasRecordGroups: boolean;
@@ -23,6 +24,7 @@ export const RecordTableBodyEffectsWrapper = ({
         <>
           <RecordTableNoRecordGroupScrollToPreviousRecordEffect />
           <RecordTableVirtualizedInitialDataLoadEffect />
+          <RecordTableVirtualizedFieldMetadataUpdateEffect />
         </>
       )}
       <RecordTableBodyEscapeHotkeyEffect />

packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableVirtualizedFieldMetadataUpdateEffect.tsx

@@ -0,0 +1,58 @@
+import { lastFieldMetadataItemUpdateState } from '@/object-metadata/states/lastFieldMetadataItemUpdateState';
+import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
+import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
+import { useResetVirtualizationBecauseDataChanged } from '@/object-record/record-table/virtualization/hooks/useResetVirtualizationBecauseDataChanged';
+import { lastProcessedFieldMetadataUpdateIdComponentState } from '@/object-record/record-table/virtualization/states/lastProcessedFieldMetadataUpdateIdComponentState';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+export const RecordTableVirtualizedFieldMetadataUpdateEffect = () => {
+  const { objectNameSingular } = useRecordTableContextOrThrow();
+
+  const { resetVirtualizationBecauseDataChanged } =
+    useResetVirtualizationBecauseDataChanged(objectNameSingular);
+
+  const visibleRecordFields = useRecoilComponentValue(
+    visibleRecordFieldsComponentSelector,
+  );
+
+  const lastFieldMetadataItemUpdate = useRecoilValue(
+    lastFieldMetadataItemUpdateState,
+  );
+
+  const [
+    lastProcessedFieldMetadataUpdateId,
+    setLastProcessedFieldMetadataUpdateId,
+  ] = useRecoilComponentState(lastProcessedFieldMetadataUpdateIdComponentState);
+
+  useEffect(() => {
+    if (!lastFieldMetadataItemUpdate) {
+      return;
+    }
+
+    if (lastFieldMetadataItemUpdate.id === lastProcessedFieldMetadataUpdateId) {
+      return;
+    }
+
+    const isFieldInCurrentView = visibleRecordFields.some(
+      (field) =>
+        field.fieldMetadataItemId ===
+        lastFieldMetadataItemUpdate.fieldMetadataItemId,
+    );
+
+    if (isFieldInCurrentView) {
+      setLastProcessedFieldMetadataUpdateId(lastFieldMetadataItemUpdate.id);
+      resetVirtualizationBecauseDataChanged();
+    }
+  }, [
+    lastFieldMetadataItemUpdate,
+    lastProcessedFieldMetadataUpdateId,
+    setLastProcessedFieldMetadataUpdateId,
+    visibleRecordFields,
+    resetVirtualizationBecauseDataChanged,
+  ]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/object-record/record-table/virtualization/states/lastProcessedFieldMetadataUpdateIdComponentState.ts

@@ -0,0 +1,9 @@
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+export const lastProcessedFieldMetadataUpdateIdComponentState =
+  createComponentState<string | null>({
+    key: 'lastProcessedFieldMetadataUpdateIdComponentState',
+    componentInstanceContext: ContextStoreComponentInstanceContext,
+    defaultValue: null,
+  });