houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

breaking (soft) - Migrate viewGroup.fieldMetadataId -> view.mainGroupByFieldMetadataId (2/3) (#16277)

Browse Source 
Should be merged once https://github.com/twentyhq/twenty/pull/16206 has
been released + command run to prod

In this PR
- Remove usage of viewGroup.fieldMetadataId, both in BE and FE states. 
- But we still need to properly populate it until we fully remove
viewGroup.fieldMetadataId from db and ORM entity (upcoming 3rd PR out of
3). fieldMetadataId was removed from CoreViewGroup type and
CreateViewGroupInput and is determined BE-side based on the associated
view's mainGroupByFieldMetadataId. **I expect this means a downtime on
viewGroup creation, until both FE and BE are deployed and cache is
flushed.** This seems acceptable to me as it only regards viewGroup
creation.
    - this information is replaced by view.mainGroupByFieldMetadataID
- Handle view group creation, update and deletion in the BE as a
side-effect of a view creation, update or deletion. Optimistic effects
are still used
- Add validation at view creation or update regarding
mainGroupByFieldMetadata

Left to do in 3rd PR
- Remove viewGroup.fieldMetadataId from db and ORM entity
- Restore feature allowing to update an existing grouped view's group by
field (already OK on BE side but need to rebuild FE optimistic)
This commit is contained in:
Marie
2025-12-05 15:00:03 +01:00
committed by GitHub
parent 17d88a074b
commit 7ce22d5c7e
87 changed files with 1338 additions and 1067 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu.ts
+6 -6
View File
@@ -42,7 +42,6 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
({
id: v4(),
__typename: 'ViewGroup',
fieldMetadataId: randomFieldForKanban,
fieldValue: option.value,
isVisible: true,
position: index,
@@ -55,14 +54,15 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
fieldValue: '',
position: viewGroupsToCreate.length,
isVisible: true,
fieldMetadataId: randomFieldForKanban,
} satisfies ViewGroup);
await createViewGroups({
inputs: viewGroupsToCreate.map(({ __typename, ...viewGroup }) => ({
...viewGroup,
viewId: currentViewId,
})),
createCoreViewGroupInputs: {
inputs: viewGroupsToCreate.map(({ __typename, ...viewGroup }) => ({
...viewGroup,
viewId: currentViewId,
})),
},
});
return viewGroupsToCreate;
packages/twenty-front/src/modules/object-record/record-drag/hooks/useProcessTableWithGroupRecordDrop.ts
+13 -6
View File
@@ -8,12 +8,14 @@ import { originalDragSelectionComponentState } from '@/object-record/record-drag
import { processGroupDrop } from '@/object-record/record-drag/utils/processGroupDrop';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId';
import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
import { useModal } from '@/ui/layout/modal/hooks/useModal';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
export const useProcessTableWithGroupRecordDrop = () => {
@@ -47,6 +49,10 @@ export const useProcessTableWithGroupRecordDrop = () => {
originalDragSelectionComponentState,
);
const groupFieldMetadata = useRecoilComponentValue(
recordIndexGroupFieldMetadataItemComponentState,
);
const processTableWithGroupRecordDrop = useRecoilCallback(
({ snapshot }) =>
(result: DropResult) => {
@@ -63,7 +69,7 @@ export const useProcessTableWithGroupRecordDrop = () => {
}
const fieldMetadata = objectMetadataItem.fields.find(
(field) => field.id === destinationRecordGroup.fieldMetadataId,
(field) => field.id === groupFieldMetadata?.id,
);
if (!isDefined(fieldMetadata)) {
@@ -110,14 +116,15 @@ export const useProcessTableWithGroupRecordDrop = () => {
});
},
[
currentRecordSortsCallbackState,
objectMetadataItem.fields,
recordIdsByGroupFamilyState,
updateOneRow,
openModal,
selectedRowIdsSelector,
originalDragSelectionCallbackState,
isDraggingRecordCallbackState,
selectedRowIdsSelector,
currentRecordSortsCallbackState,
recordIdsByGroupFamilyState,
groupFieldMetadata?.id,
openModal,
updateOneRow,
],
);
packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupFilter.ts
+8 -4
View File
@@ -1,21 +1,25 @@
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useMemo } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useRecordGroupFilter = (fields: FieldMetadataItem[]) => {
const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
const groupFieldMetadata = useRecoilComponentValue(
recordIndexGroupFieldMetadataItemComponentState,
);
const recordGroupFilter = useMemo(() => {
if (isDefined(currentRecordGroupDefinition)) {
const fieldMetadataItem = fields.find(
(fieldMetadataItem) =>
fieldMetadataItem.id === currentRecordGroupDefinition.fieldMetadataId,
(fieldMetadataItem) => fieldMetadataItem.id === groupFieldMetadata?.id,
);
if (!fieldMetadataItem) {
throw new Error(
`Field metadata item with id ${currentRecordGroupDefinition.fieldMetadataId} not found`,
`Field metadata item with id ${groupFieldMetadata?.id} not found`,
);
}
@@ -31,7 +35,7 @@ export const useRecordGroupFilter = (fields: FieldMetadataItem[]) => {
}
return {};
}, [currentRecordGroupDefinition, fields]);
}, [currentRecordGroupDefinition, fields, groupFieldMetadata?.id]);
return { recordGroupFilter };
};
packages/twenty-front/src/modules/object-record/record-group/hooks/useReorderRecordGroups.ts
+16 -4
View File
@@ -3,7 +3,9 @@ import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRec
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { visibleRecordGroupIdsComponentFamilySelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentFamilySelector';
import { type RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
import { type ViewType } from '@/views/types/ViewType';
@@ -37,6 +39,10 @@ export const useReorderRecordGroups = ({
const { saveViewGroups } = useSaveCurrentViewGroups();
const groupFieldMetadata = useRecoilComponentValue(
recordIndexGroupFieldMetadataItemComponentState,
);
const reorderRecordGroups = useRecoilCallback(
({ snapshot }) =>
({ fromIndex, toIndex }: ReorderRecordGroupsParams) => {
@@ -80,17 +86,23 @@ export const useReorderRecordGroups = ({
];
}, []);
setRecordGroups(
updatedRecordGroups,
if (!isDefined(groupFieldMetadata?.id)) {
throw new Error('mainGroupByFieldMetadataId is required');
}
setRecordGroups({
mainGroupByFieldMetadataId: groupFieldMetadata?.id,
recordGroups: updatedRecordGroups,
recordIndexId,
objectMetadataItem.id,
);
objectMetadataItemId: objectMetadataItem.id,
});
saveViewGroups(
mapRecordGroupDefinitionsToViewGroups(updatedRecordGroups),
);
},
[
objectMetadataItem.id,
groupFieldMetadata?.id,
recordIndexId,
saveViewGroups,
setRecordGroups,
packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroups.ts
+30 -15
View File
@@ -16,11 +16,17 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const useSetRecordGroups = () => {
const setRecordGroups = useRecoilCallback(
({ snapshot, set }) =>
(
recordGroups: RecordGroupDefinition[],
recordIndexId: string,
objectMetadataItemId: string,
) => {
({
mainGroupByFieldMetadataId,
recordGroups,
recordIndexId,
objectMetadataItemId,
}: {
mainGroupByFieldMetadataId: string;
recordGroups: RecordGroupDefinition[];
recordIndexId: string;
objectMetadataItemId: string;
}) => {
const objectMetadataItems = snapshot
.getLoadable(objectMetadataItemsState)
.getValue();
@@ -40,7 +46,8 @@ export const useSetRecordGroups = () => {
instanceId: recordIndexId,
}),
);
const fieldMetadataId = recordGroups?.[0]?.fieldMetadataId;
const fieldMetadataId = mainGroupByFieldMetadataId;
const fieldMetadata = fieldMetadataId
? objectMetadataItem.fields.find(
(field) => field.id === fieldMetadataId,
@@ -105,26 +112,34 @@ export const useSetRecordGroups = () => {
);
const setRecordGroupsFromViewGroups = useCallback(
(
viewId: string,
viewGroups: ViewGroup[],
objectMetadataItem: ObjectMetadataItem,
) => {
({
viewId,
mainGroupByFieldMetadataId,
viewGroups,
objectMetadataItem,
}: {
viewId: string;
mainGroupByFieldMetadataId: string;
viewGroups: ViewGroup[];
objectMetadataItem: ObjectMetadataItem;
}) => {
const recordIndexId = getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
viewId,
);
const newGroupDefinitions = mapViewGroupsToRecordGroupDefinitions({
mainGroupByFieldMetadataId,
objectMetadataItem,
viewGroups,
});
setRecordGroups(
newGroupDefinitions,
setRecordGroups({
mainGroupByFieldMetadataId,
recordGroups: newGroupDefinitions,
recordIndexId,
objectMetadataItem.id,
);
objectMetadataItemId: objectMetadataItem.id,
});
},
[setRecordGroups],
);
packages/twenty-front/src/modules/object-record/record-group/types/RecordGroupDefinition.ts
-1
View File
@@ -6,7 +6,6 @@ export const enum RecordGroupDefinitionType {
export type RecordGroupDefinition = {
id: string;
fieldMetadataId: string;
type: RecordGroupDefinitionType;
title: string;
value: string | null;
packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleRecordGroupField.ts
+39 -36
View File
@@ -2,17 +2,21 @@ import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/useLoadRecordIndexStates';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { usePersistView } from '@/views/hooks/internal/usePersistView';
import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroup';
import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
import { type ViewGroup } from '@/views/types/ViewGroup';
import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import { type CoreView } from '~/generated/graphql';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
export const useHandleRecordGroupField = () => {
const { createViewGroups, deleteViewGroups } = usePersistViewGroupRecords();
const { deleteViewGroups } = usePersistViewGroupRecords();
const currentViewIdCallbackState = useRecoilComponentCallbackState(
contextStoreCurrentViewIdComponentState,
@@ -25,6 +29,7 @@ export const useHandleRecordGroupField = () => {
const { setRecordGroupsFromViewGroups } = useSetRecordGroups();
const { updateView } = usePersistView();
const { loadRecordIndexStates } = useLoadRecordIndexStates();
const handleRecordGroupFieldChange = useRecoilCallback(
({ snapshot }) =>
@@ -50,16 +55,29 @@ export const useHandleRecordGroupField = () => {
return;
}
await updateView({
const updatedViewResult = await updateView({
id: view.id,
input: {
mainGroupByFieldMetadataId: fieldMetadataItem.id,
},
});
if (updatedViewResult.status === 'successful') {
const updatedCoreView = updatedViewResult.response.data
?.updateCoreView as CoreView;
if (isDefined(updatedCoreView)) {
const updatedViewConverted = convertCoreViewToView(updatedCoreView);
await loadRecordIndexStates(
updatedViewConverted,
objectMetadataItem,
);
}
}
const existingGroupKeys = new Set(
view.viewGroups.map(
(group) => `${group.fieldMetadataId}:${group.fieldValue}`,
(group) => `${view.mainGroupByFieldMetadataId}:${group.fieldValue}`,
),
);
@@ -79,7 +97,6 @@ export const useHandleRecordGroupField = () => {
fieldValue: option.value,
isVisible: true,
position: index,
fieldMetadataId: fieldMetadataItem.id,
}) satisfies ViewGroup,
);
@@ -93,45 +110,23 @@ export const useHandleRecordGroupField = () => {
fieldValue: '',
isVisible: true,
position: fieldMetadataItem.options.length,
fieldMetadataId: fieldMetadataItem.id,
} satisfies ViewGroup);
}
const viewGroupsToDelete = view.viewGroups.filter(
(group) => group.fieldMetadataId !== fieldMetadataItem.id,
);
const newViewGroupsList = [
...view.viewGroups.filter(
(group) => group.fieldMetadataId === fieldMetadataItem.id,
(_group) =>
view.mainGroupByFieldMetadataId === fieldMetadataItem.id,
),
...viewGroupsToCreate,
];
setRecordGroupsFromViewGroups(
view.id,
newViewGroupsList,
setRecordGroupsFromViewGroups({
viewId: view.id,
mainGroupByFieldMetadataId: fieldMetadataItem.id,
viewGroups: newViewGroupsList,
objectMetadataItem,
);
if (viewGroupsToCreate.length > 0) {
await createViewGroups({
inputs: viewGroupsToCreate.map(({ __typename, ...viewGroup }) => ({
...viewGroup,
viewId: view.id,
})),
});
}
if (viewGroupsToDelete.length > 0) {
await deleteViewGroups(
viewGroupsToDelete.map((group) => ({
input: {
id: group.id,
},
})),
);
}
});
},
[
currentViewIdCallbackState,
@@ -139,8 +134,7 @@ export const useHandleRecordGroupField = () => {
updateView,
setRecordGroupsFromViewGroups,
objectMetadataItem,
createViewGroups,
deleteViewGroups,
loadRecordIndexStates,
],
);
@@ -173,7 +167,16 @@ export const useHandleRecordGroupField = () => {
})),
);
setRecordGroupsFromViewGroups(view.id, [], objectMetadataItem);
if (!isDefined(view.mainGroupByFieldMetadataId)) {
throw new Error('mainGroupByFieldMetadataId is required');
}
setRecordGroupsFromViewGroups({
viewId: view.id,
mainGroupByFieldMetadataId: view.mainGroupByFieldMetadataId,
viewGroups: [],
objectMetadataItem,
});
},
[
deleteViewGroups,
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexStates.ts
+7 -6
View File
@@ -178,11 +178,12 @@ export const useLoadRecordIndexStates = () => {
onViewFieldsChange(view.viewFields, objectMetadataItem);
setRecordGroupsFromViewGroups(
view.id,
view.viewGroups,
setRecordGroupsFromViewGroups({
viewId: view.id,
mainGroupByFieldMetadataId: view.mainGroupByFieldMetadataId ?? '',
viewGroups: view.viewGroups,
objectMetadataItem,
);
});
setContextStoreTargetedRecordsRuleComponentState((prev) => ({
...prev,
@@ -199,9 +200,9 @@ export const useLoadRecordIndexStates = () => {
view.calendarFieldMetadataId ?? null,
);
if (isDefined(view.viewGroups?.[0]?.fieldMetadataId)) {
if (isDefined(view.mainGroupByFieldMetadataId)) {
const recordIndexGroupFieldMetadataItemId =
view.viewGroups?.[0]?.fieldMetadataId;
view.mainGroupByFieldMetadataId;
const { fieldMetadataItem: recordIndexGroupFieldMetadataItem } =
getFieldMetadataItemByIdOrThrow(
packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew.tsx
+7 -1
View File
@@ -1,9 +1,11 @@
import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useCreateNewIndexRecord } from '@/object-record/record-table/hooks/useCreateNewIndexRecord';
import { RecordTableActionRow } from '@/object-record/record-table/record-table-row/components/RecordTableActionRow';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
import { IconPlus } from 'twenty-ui/display';
@@ -17,12 +19,16 @@ export const RecordTableRecordGroupSectionAddNew = () => {
recordGroupDefinitionFamilyState(currentRecordGroupId),
);
const mainGroupByFieldMetadata = useRecoilComponentValue(
recordIndexGroupFieldMetadataItemComponentState,
);
const { createNewIndexRecord } = useCreateNewIndexRecord({
objectMetadataItem,
});
const fieldMetadataItem = objectMetadataItem.fields.find(
(field) => field.id === recordGroup?.fieldMetadataId,
(field) => field.id === mainGroupByFieldMetadata?.id,
);
const objectPermissions = useObjectPermissionsForObject(