diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexLoadBaseOnContextStoreEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexLoadBaseOnContextStoreEffect.tsx index e00623fba2..10370b59e1 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexLoadBaseOnContextStoreEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexLoadBaseOnContextStoreEffect.tsx @@ -18,16 +18,21 @@ export const RecordIndexLoadBaseOnContextStoreEffect = () => { FeatureFlagKey.IS_CALENDAR_WEEK_VIEW_ENABLED, ); - const currentViewLoadKey = isDefined(contextStoreCurrentViewId) - ? `${contextStoreCurrentViewId}-${isCalendarWeekViewEnabled}` - : undefined; - const [loadedViewKey, setLoadedViewKey] = useState(); const view = useAtomFamilySelectorValue(viewFromViewIdFamilySelector, { viewId: contextStoreCurrentViewId ?? '', }); + const viewGroupsSignature = (view?.viewGroups ?? []) + .map((viewGroup) => viewGroup.id) + .sort() + .join(','); + + const currentViewLoadKey = isDefined(contextStoreCurrentViewId) + ? `${contextStoreCurrentViewId}-${isCalendarWeekViewEnabled}-${viewGroupsSignature}` + : undefined; + const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow(); useEffect(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/__tests__/RecordIndexLoadBaseOnContextStoreEffect.test.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/__tests__/RecordIndexLoadBaseOnContextStoreEffect.test.tsx index a9f23e882d..05126a1b58 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/__tests__/RecordIndexLoadBaseOnContextStoreEffect.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/__tests__/RecordIndexLoadBaseOnContextStoreEffect.test.tsx @@ -84,4 +84,47 @@ describe('RecordIndexLoadBaseOnContextStoreEffect', () => { FeatureFlagKey.IS_CALENDAR_WEEK_VIEW_ENABLED, ); }); + + it('reloads the persisted view state when the view groups change', () => { + const viewWithGroups = { + id: 'view-id', + viewGroups: [{ id: 'group-1' }], + }; + useAtomFamilySelectorValueMock.mockReturnValue(viewWithGroups); + + const { rerender } = render(); + + expect(loadRecordIndexStates).toHaveBeenCalledTimes(1); + + rerender(); + + expect(loadRecordIndexStates).toHaveBeenCalledTimes(1); + + useAtomFamilySelectorValueMock.mockReturnValue({ + ...viewWithGroups, + viewGroups: [...viewWithGroups.viewGroups, { id: 'group-2' }], + }); + rerender(); + + expect(loadRecordIndexStates).toHaveBeenCalledTimes(2); + }); + + it('does not reload when the view groups are only reordered', () => { + useAtomFamilySelectorValueMock.mockReturnValue({ + id: 'view-id', + viewGroups: [{ id: 'group-1' }, { id: 'group-2' }], + }); + + const { rerender } = render(); + + expect(loadRecordIndexStates).toHaveBeenCalledTimes(1); + + useAtomFamilySelectorValueMock.mockReturnValue({ + id: 'view-id', + viewGroups: [{ id: 'group-2' }, { id: 'group-1' }], + }); + rerender(); + + expect(loadRecordIndexStates).toHaveBeenCalledTimes(1); + }); });