Implement hide empty groups for grouped table view (#16494)

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

Author: abdulrahmancodes

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx

@@ -3,13 +3,11 @@ import { Droppable } from '@hello-pangea/dnd';
 
 import { RecordBoardColumnCardsContainer } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { emptyRecordGroupByIdComponentFamilyState } from '@/object-record/record-group/states/emptyRecordGroupByIdComponentFamilyState';
+import { useShouldHideRecordGroup } from '@/object-record/record-group/hooks/useShouldHideRecordGroup';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
-import { recordIndexShouldHideEmptyRecordGroupsComponentState } from '@/object-record/record-index/states/recordIndexShouldHideEmptyRecordGroupsComponentState';
 import { DragAndDropLibraryLegacyReRenderBreaker } from '@/ui/drag-and-drop/components/DragAndDropReRenderBreaker';
 import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -44,16 +42,9 @@ export const RecordBoardColumn = ({
     recordBoardColumnId,
   );
 
-  const shouldHideEmptyRecordGroups = useRecoilComponentValue(
-    recordIndexShouldHideEmptyRecordGroupsComponentState,
-  );
-
-  const isRecordGroupEmpty = useRecoilComponentFamilyValue(
-    emptyRecordGroupByIdComponentFamilyState,
-    recordBoardColumnId,
-  );
+  const shouldHide = useShouldHideRecordGroup(recordBoardColumnId);
 
-  if (shouldHideEmptyRecordGroups && isRecordGroupEmpty) {
+  if (shouldHide) {
     return null;
   }
 

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderWrapper.tsx

@@ -1,11 +1,9 @@
 import { RecordBoardColumnHeader } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeader';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { emptyRecordGroupByIdComponentFamilyState } from '@/object-record/record-group/states/emptyRecordGroupByIdComponentFamilyState';
+import { useShouldHideRecordGroup } from '@/object-record/record-group/hooks/useShouldHideRecordGroup';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
-import { recordIndexShouldHideEmptyRecordGroupsComponentState } from '@/object-record/record-index/states/recordIndexShouldHideEmptyRecordGroupsComponentState';
 import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -27,16 +25,9 @@ export const RecordBoardColumnHeaderWrapper = ({
     columnId,
   );
 
-  const shouldHideEmptyRecordGroups = useRecoilComponentValue(
-    recordIndexShouldHideEmptyRecordGroupsComponentState,
-  );
-
-  const isRecordGroupEmpty = useRecoilComponentFamilyValue(
-    emptyRecordGroupByIdComponentFamilyState,
-    columnId,
-  );
+  const shouldHide = useShouldHideRecordGroup(columnId);
 
-  if (shouldHideEmptyRecordGroups && isRecordGroupEmpty) {
+  if (shouldHide) {
     return null;
   }
 

packages/twenty-front/src/modules/object-record/record-group/hooks/useShouldHideRecordGroup.ts

@@ -0,0 +1,17 @@
+import { emptyRecordGroupByIdComponentFamilyState } from '@/object-record/record-group/states/emptyRecordGroupByIdComponentFamilyState';
+import { recordIndexShouldHideEmptyRecordGroupsComponentState } from '@/object-record/record-index/states/recordIndexShouldHideEmptyRecordGroupsComponentState';
+import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+
+export const useShouldHideRecordGroup = (recordGroupId: string): boolean => {
+  const shouldHideEmptyRecordGroups = useRecoilComponentValue(
+    recordIndexShouldHideEmptyRecordGroupsComponentState,
+  );
+
+  const isRecordGroupEmpty = useRecoilComponentFamilyValue(
+    emptyRecordGroupByIdComponentFamilyState,
+    recordGroupId,
+  );
+
+  return shouldHideEmptyRecordGroups && isRecordGroupEmpty;
+};

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx

@@ -1,4 +1,5 @@
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
+import { useShouldHideRecordGroup } from '@/object-record/record-group/hooks/useShouldHideRecordGroup';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder';
@@ -15,6 +16,8 @@ import { isDefined } from 'twenty-shared/utils';
 export const RecordTableRecordGroupRows = () => {
   const currentRecordGroupId = useCurrentRecordGroupId();
 
+  const shouldHide = useShouldHideRecordGroup(currentRecordGroupId);
+
   const allRecordIds = useRecoilComponentValue(
     recordIndexAllRecordIdsComponentSelector,
   );
@@ -34,6 +37,10 @@ export const RecordTableRecordGroupRows = () => {
     [allRecordIds],
   );
 
+  if (shouldHide) {
+    return null;
+  }
+
   if (!isRecordGroupTableSectionToggled) {
     return null;
   }

packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx

@@ -5,6 +5,7 @@ import { useCallback } from 'react';
 import { RecordBoardColumnHeaderAggregateDropdown } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown';
 import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
+import { useShouldHideRecordGroup } from '@/object-record/record-group/hooks/useShouldHideRecordGroup';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
@@ -117,6 +118,8 @@ export const RecordTableRecordGroupSection = () => {
 
   const currentRecordGroupId = useCurrentRecordGroupId();
 
+  const shouldHide = useShouldHideRecordGroup(currentRecordGroupId);
+
   const { objectMetadataItem } = useRecordTableContextOrThrow();
 
   const recordGroup = useRecoilValue(
@@ -178,6 +181,10 @@ export const RecordTableRecordGroupSection = () => {
     sumOfWidthOfVisibleRecordFieldsAfterLabelIdentifierField +
     sumOfBorderWidthForFields;
 
+  if (shouldHide) {
+    return null;
+  }
+
   if (!isDefined(recordGroup)) {
     return null;
   }