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.
twentyhq · Dec 17, 2024 · 1851bb8 · 1851bb8
1 parent 5bd73e0
commit 1851bb8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 82 deletions.
diff --git a/...ges/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupVisibility.ts b/...ges/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/...les/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector.ts b/...les/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/...ty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx b/...ty-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) => (
         <RecordIndexBoardColumnLoaderEffect
           objectNameSingular={objectNameSingular}
           boardFieldMetadataId={recordIndexKanbanFieldMetadataId}

diff --git a/...src/modules/object-record/record-index/states/recordIndexRecordGroupHideComponentState.ts b/...src/modules/object-record/record-index/states/recordIndexRecordGroupHideComponentState.ts
@@ -4,6 +4,6 @@ import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewCompon
 export const recordIndexRecordGroupHideComponentState =
   createComponentStateV2<boolean>({
     key: 'recordIndexRecordGroupHideComponentState',
-    defaultValue: false,
+    defaultValue: true,
     componentInstanceContext: ViewComponentInstanceContext,
   });