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.

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,
-          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),
+          objectOptionsDropdownRecordGroupHideState,
+          (currentHideState) => !currentHideState,
         );
       },
-    [
-      recordIndexRecordGroupIdsState,
-      objectOptionsDropdownRecordGroupHideState,
-      saveViewGroups,
-      recordIndexRecordIdsByGroupFamilyState,
-    ],
+    [objectOptionsDropdownRecordGroupHideState],
   );
 
   return {

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);

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) => (
         <RecordIndexBoardColumnLoaderEffect
           objectNameSingular={objectNameSingular}
           boardFieldMetadataId={recordIndexKanbanFieldMetadataId}

packages/twenty-front/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,
   });