mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Implemented CRUD for view filter group and removed old states (#10590)

Browse Source 
This PR implements CRUD for view filter groups with the new logic as
already done for view filters and view sorts.

It also completely removes the old combined view filter group states and
usage.

This PR is quite big but the impact is limited since it only changes
advanced filters module, which is under feature flag at the moment, and
it is already in a broken state so unusable, even if someone activates
the feature flag.
This commit is contained in:
Lucas Bordeau
2025-03-04 13:16:02 +01:00
committed by GitHub
parent 9d80d2a8ef
commit aba20dae11
54 changed files with 304 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/views/hooks/__tests__/useApplyCurrentViewFiltersToCurrentRecordFilters.test.tsx
View File

@ -104,8 +104,8 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
value: mockViewFilter.value,
displayValue: mockViewFilter.displayValue,
operand: mockViewFilter.operand,
viewFilterGroupId: mockViewFilter.viewFilterGroupId,
positionInViewFilterGroup: mockViewFilter.positionInViewFilterGroup,
recordFilterGroupId: mockViewFilter.viewFilterGroupId,
positionInRecordFilterGroup: mockViewFilter.positionInViewFilterGroup,
label: mockFieldMetadataItem.label,
type: getFilterTypeFromFieldType(mockFieldMetadataItem.type),
} satisfies RecordFilter,

4
packages/twenty-front/src/modules/views/hooks/__tests__/useApplyViewFiltersToCurrentRecordFilters.test.tsx
View File

@ -70,8 +70,8 @@ describe('useApplyViewFiltersToCurrentRecordFilters', () => {
value: mockViewFilter.value,
displayValue: mockViewFilter.displayValue,
operand: mockViewFilter.operand,
viewFilterGroupId: mockViewFilter.viewFilterGroupId,
positionInViewFilterGroup: mockViewFilter.positionInViewFilterGroup,
recordFilterGroupId: mockViewFilter.viewFilterGroupId,
positionInRecordFilterGroup: mockViewFilter.positionInViewFilterGroup,
label: mockFieldMetadataItem.label,
type: getFilterTypeFromFieldType(mockFieldMetadataItem.type),
} satisfies RecordFilter,

7
packages/twenty-front/src/modules/views/hooks/useChangeView.ts
View File

@ -1,15 +1,10 @@
import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
import { useSetViewInUrl } from '@/views/hooks/useSetViewInUrl';
export const useChangeView = (viewBarComponentId?: string) => {
const { resetUnsavedViewStates } =
useResetUnsavedViewStates(viewBarComponentId);
export const useChangeView = () => {
const { setViewInUrl } = useSetViewInUrl();
const changeView = async (viewId: string) => {
setViewInUrl(viewId);
resetUnsavedViewStates(viewId);
};
return { changeView };

25
packages/twenty-front/src/modules/views/hooks/useCreateViewFromCurrentView.ts
View File

@ -2,6 +2,7 @@ import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
@ -14,12 +15,12 @@ import { usePersistViewFilterGroupRecords } from '@/views/hooks/internal/usePers
import { usePersistViewFilterRecords } from '@/views/hooks/internal/usePersistViewFilterRecords';
import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
import { usePersistViewSortRecords } from '@/views/hooks/internal/usePersistViewSortRecords';
import { useGetViewFilterGroupsCombined } from '@/views/hooks/useGetCombinedViewFilterGroups';
import { isPersistingViewFieldsState } from '@/views/states/isPersistingViewFieldsState';
import { GraphQLView } from '@/views/types/GraphQLView';
import { View } from '@/views/types/View';
import { ViewGroup } from '@/views/types/ViewGroup';
import { ViewType } from '@/views/types/ViewType';
import { mapRecordFilterGroupToViewFilterGroup } from '@/views/utils/mapRecordFilterGroupToViewFilterGroup';
import { mapRecordFilterToViewFilter } from '@/views/utils/mapRecordFilterToViewFilter';
import { mapRecordSortToViewSort } from '@/views/utils/mapRecordSortToViewSort';
import { useRecoilCallback } from 'recoil';
@ -39,9 +40,6 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
const { createViewFieldRecords } = usePersistViewFieldRecords();
const { getViewFilterGroupsCombined } =
useGetViewFilterGroupsCombined(viewBarComponentId);
const { createViewSortRecords } = usePersistViewSortRecords();
const { createViewGroupRecords } = usePersistViewGroupRecords();
@ -57,6 +55,10 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
fetchPolicy: 'network-only',
});
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
);
const currentRecordSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
);
@ -165,8 +167,12 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
}
if (shouldCopyFiltersAndSortsAndAggregate === true) {
const sourceViewCombinedFilterGroups = getViewFilterGroupsCombined(
sourceView.id,
const viewFilterGroupsToCreate = currentRecordFilterGroups.map(
(recordFilterGroup) =>
mapRecordFilterGroupToViewFilterGroup({
recordFilterGroup,
view: newView,
}),
);
const viewSortsToCreate = currentRecordSorts.map(
@ -178,10 +184,7 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
await createViewSortRecords(viewSortsToCreate, newView);
await createViewFilterRecords(viewFiltersToCreate, newView);
await createViewFilterGroupRecords(
sourceViewCombinedFilterGroups,
newView,
);
await createViewFilterGroupRecords(viewFilterGroupsToCreate, newView);
}
await findManyRecords();
@ -193,13 +196,13 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
createViewFieldRecords,
findManyRecords,
objectMetadataItem.fields,
getViewFilterGroupsCombined,
createViewGroupRecords,
createViewSortRecords,
createViewFilterRecords,
createViewFilterGroupRecords,
currentRecordFilters,
currentRecordSorts,
currentRecordFilterGroups,
],
);

68
packages/twenty-front/src/modules/views/hooks/useGetCombinedViewFilterGroups.ts
View File

@ -1,68 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
import { getCombinedViewFilterGroups } from '@/views/utils/getCombinedViewFilterGroups';
import { isDefined } from 'twenty-shared';
export const useGetViewFilterGroupsCombined = (viewBarComponentId?: string) => {
const unsavedToUpsertViewFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(
unsavedToUpsertViewFilterGroupsComponentFamilyState,
viewBarComponentId,
);
const unsavedToDeleteViewFilterGroupIdsCallbackState =
useRecoilComponentCallbackStateV2(
unsavedToDeleteViewFilterGroupIdsComponentFamilyState,
viewBarComponentId,
);
const getViewFilterGroupsCombined = useRecoilCallback(
({ snapshot }) =>
(viewId: string) => {
const view = snapshot
.getLoadable(
prefetchViewFromViewIdFamilySelector({
viewId,
}),
)
.getValue();
if (!isDefined(view)) {
throw new Error(
`Cannot get view with id ${viewId}, because it cannot be found in client cache data.`,
);
}
const unsavedToUpsertViewFilterGroups = getSnapshotValue(
snapshot,
unsavedToUpsertViewFilterGroupsCallbackState({ viewId: view.id }),
);
const unsavedToDeleteViewFilterGroupIds = getSnapshotValue(
snapshot,
unsavedToDeleteViewFilterGroupIdsCallbackState({ viewId: view.id }),
);
const combinedViewFilterGroups = getCombinedViewFilterGroups(
view.viewFilterGroups ?? [],
unsavedToUpsertViewFilterGroups,
unsavedToDeleteViewFilterGroupIds,
);
return combinedViewFilterGroups;
},
[
unsavedToDeleteViewFilterGroupIdsCallbackState,
unsavedToUpsertViewFilterGroupsCallbackState,
],
);
return {
getViewFilterGroupsCombined,
};
};

27
packages/twenty-front/src/modules/views/hooks/useGetCurrentView.ts
View File

@ -6,14 +6,10 @@ import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefe
import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
import { prefetchViewsFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchViewsFromObjectMetadataItemFamilySelector';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
import { isCurrentViewKeyIndexComponentState } from '@/views/states/isCurrentViewIndexComponentState';
import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
import { getCombinedViewFilterGroups } from '@/views/utils/getCombinedViewFilterGroups';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared';
@ -52,7 +48,6 @@ export const useGetCurrentView = (viewBarInstanceId?: string) => {
instanceId,
);
const viewId = currentViewId ?? indexView?.id;
const currentView = currentViewFromViewId ?? indexView;
useEffect(() => {
@ -65,18 +60,6 @@ export const useGetCurrentView = (viewBarInstanceId?: string) => {
}),
);
const unsavedToUpsertViewFilterGroups = useRecoilComponentFamilyValueV2(
unsavedToUpsertViewFilterGroupsComponentFamilyState,
{ viewId },
instanceId,
);
const unsavedToDeleteViewFilterGroupIds = useRecoilComponentFamilyValueV2(
unsavedToDeleteViewFilterGroupIdsComponentFamilyState,
{ viewId },
instanceId,
);
if (!isDefined(currentView)) {
return {
instanceId,
@ -86,18 +69,8 @@ export const useGetCurrentView = (viewBarInstanceId?: string) => {
};
}
const currentViewWithCombinedFiltersAndSorts = {
...currentView,
viewFilterGroups: getCombinedViewFilterGroups(
currentView.viewFilterGroups ?? [],
unsavedToUpsertViewFilterGroups,
unsavedToDeleteViewFilterGroupIds,
),
};
return {
instanceId,
currentViewWithCombinedFiltersAndSorts,
viewsOnCurrentObject: viewsOnCurrentObject ?? [],
currentViewId,
};

34
packages/twenty-front/src/modules/views/hooks/useResetUnsavedViewStates.ts
View File

@ -1,34 +0,0 @@
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
import { useRecoilCallback } from 'recoil';
export const useResetUnsavedViewStates = (viewBarInstanceId?: string) => {
const unsavedToDeleteViewFilterGroupIdsCallbackState =
useRecoilComponentCallbackStateV2(
unsavedToDeleteViewFilterGroupIdsComponentFamilyState,
viewBarInstanceId,
);
const unsavedToUpsertViewFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(
unsavedToUpsertViewFilterGroupsComponentFamilyState,
viewBarInstanceId,
);
const resetUnsavedViewStates = useRecoilCallback(
({ set }) =>
(viewId: string) => {
set(unsavedToDeleteViewFilterGroupIdsCallbackState({ viewId }), []);
set(unsavedToUpsertViewFilterGroupsCallbackState({ viewId }), []);
},
[
unsavedToUpsertViewFilterGroupsCallbackState,
unsavedToDeleteViewFilterGroupIdsCallbackState,
],
);
return {
resetUnsavedViewStates,
};
};

128
packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFiltersAndSorts.ts
View File

@ -1,131 +1,21 @@
import { useRecoilCallback } from 'recoil';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { usePersistViewFilterGroupRecords } from '@/views/hooks/internal/usePersistViewFilterGroupRecords';
import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
import { useSaveRecordFilterGroupsToViewFilterGroups } from '@/views/hooks/useSaveRecordFilterGroupsToViewFilterGroups';
import { useSaveRecordFiltersToViewFilters } from '@/views/hooks/useSaveRecordFiltersToViewFilters';
import { useSaveRecordSortsToViewSorts } from '@/views/hooks/useSaveRecordSortsToViewSorts';
import { unsavedToDeleteViewFilterGroupIdsComponentFamilyState } from '@/views/states/unsavedToDeleteViewFilterGroupIdsComponentFamilyState';
import { unsavedToUpsertViewFilterGroupsComponentFamilyState } from '@/views/states/unsavedToUpsertViewFilterGroupsComponentFamilyState';
import { isDefined } from 'twenty-shared';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
export const useSaveCurrentViewFiltersAndSorts = (
viewBarComponentId?: string,
) => {
const { getViewFromPrefetchState } = useGetViewFromPrefetchState();
const currentViewIdCallbackState = useRecoilComponentCallbackStateV2(
contextStoreCurrentViewIdComponentState,
viewBarComponentId,
);
const unsavedToUpsertViewFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(
unsavedToUpsertViewFilterGroupsComponentFamilyState,
viewBarComponentId,
);
const unsavedToDeleteViewFilterGroupIdsCallbackState =
useRecoilComponentCallbackStateV2(
unsavedToDeleteViewFilterGroupIdsComponentFamilyState,
viewBarComponentId,
);
const {
createViewFilterGroupRecords,
deleteViewFilterGroupRecords,
updateViewFilterGroupRecords,
} = usePersistViewFilterGroupRecords();
const { resetUnsavedViewStates } =
useResetUnsavedViewStates(viewBarComponentId);
const saveViewFilterGroups = useRecoilCallback(
({ snapshot }) =>
async (viewId: string) => {
const unsavedToDeleteViewFilterGroupIds = getSnapshotValue(
snapshot,
unsavedToDeleteViewFilterGroupIdsCallbackState({ viewId }),
);
const unsavedToUpsertViewFilterGroups = getSnapshotValue(
snapshot,
unsavedToUpsertViewFilterGroupsCallbackState({ viewId }),
);
const view = await getViewFromPrefetchState(viewId);
if (isUndefinedOrNull(view)) {
return;
}
const viewFilterGroupsToCreate = unsavedToUpsertViewFilterGroups.filter(
(viewFilterGroup) =>
!view.viewFilterGroups?.some(
(viewFilterGroupToFilter) =>
viewFilterGroupToFilter.id === viewFilterGroup.id,
),
);
const viewFilterGroupsToUpdate = unsavedToUpsertViewFilterGroups.filter(
(viewFilterGroup) =>
view.viewFilterGroups?.some(
(viewFilterGroupToFilter) =>
viewFilterGroupToFilter.id === viewFilterGroup.id,
),
);
await createViewFilterGroupRecords(viewFilterGroupsToCreate, view);
await updateViewFilterGroupRecords(viewFilterGroupsToUpdate);
await deleteViewFilterGroupRecords(unsavedToDeleteViewFilterGroupIds);
},
[
getViewFromPrefetchState,
createViewFilterGroupRecords,
deleteViewFilterGroupRecords,
unsavedToDeleteViewFilterGroupIdsCallbackState,
unsavedToUpsertViewFilterGroupsCallbackState,
updateViewFilterGroupRecords,
],
);
export const useSaveCurrentViewFiltersAndSorts = () => {
const { saveRecordFilterGroupsToViewFilterGroups } =
useSaveRecordFilterGroupsToViewFilterGroups();
const { saveRecordFiltersToViewFilters } =
useSaveRecordFiltersToViewFilters();
const { saveRecordSortsToViewSorts } = useSaveRecordSortsToViewSorts();
const saveCurrentViewFilterAndSorts = useRecoilCallback(
({ snapshot }) =>
async (viewIdFromProps?: string) => {
const currentViewId = snapshot
.getLoadable(currentViewIdCallbackState)
.getValue();
if (!isDefined(currentViewId)) {
return;
}
const viewId = viewIdFromProps ?? currentViewId;
await saveViewFilterGroups(viewId);
await saveRecordSortsToViewSorts();
await saveRecordFiltersToViewFilters();
resetUnsavedViewStates(viewId);
},
[
currentViewIdCallbackState,
resetUnsavedViewStates,
saveViewFilterGroups,
saveRecordFiltersToViewFilters,
saveRecordSortsToViewSorts,
],
);
const saveCurrentViewFilterAndSorts = async () => {
await saveRecordSortsToViewSorts();
await saveRecordFiltersToViewFilters();
await saveRecordFilterGroupsToViewFilterGroups();
};
return {
saveCurrentViewFilterAndSorts,

85
packages/twenty-front/src/modules/views/hooks/useSaveRecordFilterGroupsToViewFilterGroups.ts Normal file
View File

@ -0,0 +1,85 @@
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { usePersistViewFilterGroupRecords } from '@/views/hooks/internal/usePersistViewFilterGroupRecords';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { getViewFilterGroupsToCreate } from '@/views/utils/getViewFilterGroupsToCreate';
import { getViewFilterGroupsToDelete } from '@/views/utils/getViewFilterGroupsToDelete';
import { getViewFilterGroupsToUpdate } from '@/views/utils/getViewFilterGroupsToUpdate';
import { mapRecordFilterGroupToViewFilterGroup } from '@/views/utils/mapRecordFilterGroupToViewFilterGroup';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared';
export const useSaveRecordFilterGroupsToViewFilterGroups = () => {
const {
createViewFilterGroupRecords,
updateViewFilterGroupRecords,
deleteViewFilterGroupRecords,
} = usePersistViewFilterGroupRecords();
const { currentView } = useGetCurrentViewOnly();
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
const saveRecordFilterGroupsToViewFilterGroups = useRecoilCallback(
({ snapshot }) =>
async () => {
if (!isDefined(currentView)) {
return;
}
const currentViewFilterGroups = currentView?.viewFilterGroups ?? [];
const currentRecordFilterGroups = getSnapshotValue(
snapshot,
currentRecordFilterGroupsCallbackState,
);
const newViewFilterGroups = currentRecordFilterGroups.map(
(recordFilterGroup) =>
mapRecordFilterGroupToViewFilterGroup({
recordFilterGroup,
view: currentView,
}),
);
const viewFilterGroupsToCreate = getViewFilterGroupsToCreate(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupsToDelete = getViewFilterGroupsToDelete(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupsToUpdate = getViewFilterGroupsToUpdate(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterIdsToDelete = viewFilterGroupsToDelete.map(
(viewFilter) => viewFilter.id,
);
await createViewFilterGroupRecords(
viewFilterGroupsToCreate,
currentView,
);
await updateViewFilterGroupRecords(viewFilterGroupsToUpdate);
await deleteViewFilterGroupRecords(viewFilterIdsToDelete);
},
[
createViewFilterGroupRecords,
deleteViewFilterGroupRecords,
updateViewFilterGroupRecords,
currentRecordFilterGroupsCallbackState,
currentView,
],
);
return {
saveRecordFilterGroupsToViewFilterGroups,
};
};