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

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

Browse Source 
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Abdul Rahman
2026-01-09 22:01:22 +05:30
committed by GitHub
parent 308973d7ca
commit b1c821b0e3
5 changed files with 37 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
+3 -12
View File
@@ -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 shouldHide = useShouldHideRecordGroup(recordBoardColumnId);
const isRecordGroupEmpty = useRecoilComponentFamilyValue(
emptyRecordGroupByIdComponentFamilyState,
recordBoardColumnId,
);
if (shouldHideEmptyRecordGroups && isRecordGroupEmpty) {
if (shouldHide) {
return null;
}
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderWrapper.tsx
+3 -12
View File
@@ -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 shouldHide = useShouldHideRecordGroup(columnId);
const isRecordGroupEmpty = useRecoilComponentFamilyValue(
emptyRecordGroupByIdComponentFamilyState,
columnId,
);
if (shouldHideEmptyRecordGroups && isRecordGroupEmpty) {
if (shouldHide) {
return null;
}
packages/twenty-front/src/modules/object-record/record-group/hooks/useShouldHideRecordGroup.ts
+17
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -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;
}