From 1851bb84761acc6667b42a70ef0d44624368d70c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Tue, 17 Dec 2024 11:54:41 +0100 Subject: [PATCH] feat: hide empty record group default true (#9090) Fix #8969 Previously we were putting hide default record group to `false` in record group mode. Also the mode was saved in the current view by changing the visibility boolean of each record group. As we want to hide by default, this PR instead is using a different logic so it's totally based on the front-end side. --- .../hooks/useRecordGroupVisibility.ts | 77 ++----------------- .../visibleRecordGroupIdsComponentSelector.ts | 30 ++++++-- .../components/RecordIndexBoardDataLoader.tsx | 8 +- ...ecordIndexRecordGroupHideComponentState.ts | 2 +- 4 files changed, 35 insertions(+), 82 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts index 734dc61c86..405d637e2d 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts @@ -1,15 +1,10 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState'; -import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState'; -import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; -import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups'; -import { mapRecordGroupDefinitionsToViewGroups } from '@/views/utils/mapRecordGroupDefinitionsToViewGroups'; import { recordGroupDefinitionToViewGroup } from '@/views/utils/recordGroupDefinitionToViewGroup'; import { useRecoilCallback } from 'recoil'; -import { isDefined } from '~/utils/isDefined'; type UseRecordGroupVisibilityParams = { viewBarId: string; @@ -18,20 +13,10 @@ type UseRecordGroupVisibilityParams = { export const useRecordGroupVisibility = ({ viewBarId, }: UseRecordGroupVisibilityParams) => { - const recordIndexRecordGroupIdsState = useRecoilComponentCallbackStateV2( - recordGroupIdsComponentState, - ); - - const recordIndexRecordIdsByGroupFamilyState = - useRecoilComponentCallbackStateV2( - recordIndexRecordIdsByGroupComponentFamilyState, - viewBarId, - ); - const objectOptionsDropdownRecordGroupHideState = useRecoilComponentCallbackStateV2(recordIndexRecordGroupHideComponentState); - const { saveViewGroup, saveViewGroups } = useSaveCurrentViewGroups(viewBarId); + const { saveViewGroup } = useSaveCurrentViewGroups(viewBarId); const handleVisibilityChange = useRecoilCallback( ({ set }) => @@ -50,66 +35,14 @@ export const useRecordGroupVisibility = ({ ); const handleHideEmptyRecordGroupChange = useRecoilCallback( - ({ snapshot, set }) => + ({ set }) => async () => { - const updatedRecordGroupDefinitions: RecordGroupDefinition[] = []; - const recordGroupIds = getSnapshotValue( - snapshot, - recordIndexRecordGroupIdsState, - ); - - const currentHideState = getSnapshotValue( - snapshot, + set( objectOptionsDropdownRecordGroupHideState, - ); - const newHideState = !currentHideState; - - set(objectOptionsDropdownRecordGroupHideState, newHideState); - - for (const recordGroupId of recordGroupIds) { - const recordGroup = getSnapshotValue( - snapshot, - recordGroupDefinitionFamilyState(recordGroupId), - ); - - if (!isDefined(recordGroup)) { - throw new Error( - `Record group with id ${recordGroupId} not found in snapshot`, - ); - } - - const recordGroupRowIds = getSnapshotValue( - snapshot, - recordIndexRecordIdsByGroupFamilyState(recordGroupId), - ); - - if (recordGroupRowIds.length > 0) { - continue; - } - - const updatedRecordGroup = { - ...recordGroup, - isVisible: !newHideState, - }; - - set( - recordGroupDefinitionFamilyState(recordGroupId), - updatedRecordGroup, - ); - - updatedRecordGroupDefinitions.push(updatedRecordGroup); - } - - saveViewGroups( - mapRecordGroupDefinitionsToViewGroups(updatedRecordGroupDefinitions), + (currentHideState) => !currentHideState, ); }, - [ - recordIndexRecordGroupIdsState, - objectOptionsDropdownRecordGroupHideState, - saveViewGroups, - recordIndexRecordIdsByGroupFamilyState, - ], + [objectOptionsDropdownRecordGroupHideState], ); return { diff --git a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts index 9ff30316c2..abd766868e 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts @@ -3,7 +3,9 @@ import { recordGroupIdsComponentState } from '@/object-record/record-group/state import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition'; import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupSort'; import { recordGroupSortedInsert } from '@/object-record/record-group/utils/recordGroupSortedInsert'; +import { recordIndexRecordGroupHideComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentState'; import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState'; +import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState'; import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2'; import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext'; @@ -27,6 +29,11 @@ export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2< instanceId, }), ); + const hideEmptyRecordGroup = get( + recordIndexRecordGroupHideComponentState.atomFamily({ + instanceId, + }), + ); const result: RecordGroupDefinition[] = []; @@ -49,13 +56,26 @@ export const visibleRecordGroupIdsComponentSelector = createComponentSelectorV2< const recordGroupDefinition = get( recordGroupDefinitionFamilyState(recordGroupId), ); + const recordIds = get( + recordIndexRecordIdsByGroupComponentFamilyState.atomFamily({ + instanceId, + familyKey: recordGroupId, + }), + ); - if ( - isDefined(recordGroupDefinition) && - recordGroupDefinition.isVisible - ) { - recordGroupSortedInsert(result, recordGroupDefinition, comparator); + if (!isDefined(recordGroupDefinition)) { + continue; } + + if (hideEmptyRecordGroup && recordIds.length === 0) { + continue; + } + + if (!recordGroupDefinition.isVisible) { + continue; + } + + recordGroupSortedInsert(result, recordGroupDefinition, comparator); } return result.map(({ id }) => id); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx index e8bd37d053..9c189ee05c 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx @@ -1,7 +1,7 @@ import { useRecoilValue } from 'recoil'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; -import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector'; +import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState'; import { RecordIndexBoardColumnLoaderEffect } from '@/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect'; import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -19,8 +19,8 @@ export const RecordIndexBoardDataLoader = ({ objectNameSingular, }); - const visibleRecordGroupIds = useRecoilComponentValueV2( - visibleRecordGroupIdsComponentSelector, + const recordGroupIds = useRecoilComponentValueV2( + recordGroupIdsComponentState, ); const recordIndexKanbanFieldMetadataId = useRecoilValue( @@ -33,7 +33,7 @@ export const RecordIndexBoardDataLoader = ({ return ( <> - {visibleRecordGroupIds.map((recordGroupId, index) => ( + {recordGroupIds.map((recordGroupId, index) => ( ({ key: 'recordIndexRecordGroupHideComponentState', - defaultValue: false, + defaultValue: true, componentInstanceContext: ViewComponentInstanceContext, });