feat: table record group

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx

@@ -3,15 +3,18 @@ import {
   IconChevronLeft,
   IconSettings,
   MenuItem,
+  MenuItemSelect,
   UndecoratedLink,
   useIcons,
 } from 'twenty-ui';
 
 import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
 
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect';
 import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
 import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField';
+import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
 import { useHandleRecordGroupField } from '@/object-record/record-index/hooks/useHandleRecordGroupField';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -23,6 +26,7 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
+import { isDefined } from '~/utils/isDefined';
 
 export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   const { getIcon } = useIcons();
@@ -43,16 +47,22 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
     hiddenRecordGroupIdsComponentSelector,
   );
 
+  const recordGroupFieldMetadataItem = useRecoilComponentValueV2(
+    recordGroupFieldMetadataComponentState,
+  );
+
   const {
     recordGroupFieldSearchInput,
     setRecordGroupFieldSearchInput,
     filteredRecordGroupFieldMetadataItems,
   } = useSearchRecordGroupField();
 
-  const { handleRecordGroupFieldChange, resetRecordGroupField } =
-    useHandleRecordGroupField({
-      viewBarComponentId: recordIndexId,
-    });
+  const {
+    handleRecordGroupFieldChange: setRecordGroupField,
+    resetRecordGroupField,
+  } = useHandleRecordGroupField({
+    viewBarComponentId: recordIndexId,
+  });
 
   const newFieldSettingsUrl = getSettingsPagePath(
     SettingsPath.ObjectNewFieldSelect,
@@ -66,6 +76,18 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
     navigationMemorizedUrlState,
   );
 
+  const handleResetRecordGroupField = () => {
+    resetRecordGroupField();
+    closeDropdown();
+  };
+
+  const handleRecordGroupFieldChange = (
+    fieldMetadataItem: FieldMetadataItem,
+  ) => {
+    setRecordGroupField(fieldMetadataItem);
+    closeDropdown();
+  };
+
   useEffect(() => {
     if (
       currentContentId === 'hiddenRecordGroups' &&
@@ -90,13 +112,16 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
         onChange={(event) => setRecordGroupFieldSearchInput(event.target.value)}
       />
       <DropdownMenuItemsContainer>
-        <MenuItem text="None" onClick={resetRecordGroupField} />
+        <MenuItemSelect
+          text="None"
+          selected={!isDefined(recordGroupFieldMetadataItem)}
+          onClick={handleResetRecordGroupField}
+        />
         {filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => (
-          <MenuItem
+          <MenuItemSelect
             key={fieldMetadataItem.id}
-            onClick={() => {
-              handleRecordGroupFieldChange(fieldMetadataItem);
-            }}
+            selected={fieldMetadataItem.id === recordGroupFieldMetadataItem?.id}
+            onClick={() => handleRecordGroupFieldChange(fieldMetadataItem)}
             LeftIcon={getIcon(fieldMetadataItem.icon)}
             text={fieldMetadataItem.label}
           />

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

@@ -16,8 +16,8 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-boar
 import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
-import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
@@ -69,12 +69,13 @@ export const RecordBoard = () => {
     visibleRecordGroupIdsComponentSelector,
   );
 
-  const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
-    recordIndexRowIdsByGroupComponentFamilyState,
-  );
+  const recordIndexRecordIdsByGroupFamilyState =
+    useRecoilComponentCallbackStateV2(
+      recordIndexRecordIdsByGroupComponentFamilyState,
+    );
 
-  const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
-    recordIndexAllRowIdsComponentState,
+  const recordIndexAllRecordIdsState = useRecoilComponentCallbackStateV2(
+    recordIndexAllRecordIdsComponentSelector,
   );
 
   const { resetRecordSelection, setRecordAsSelected } =
@@ -97,14 +98,14 @@ export const RecordBoard = () => {
       () => {
         const allRecordIds = getSnapshotValue(
           snapshot,
-          recordIndexAllRowIdsState,
+          recordIndexAllRecordIdsState,
         );
 
         for (const recordId of allRecordIds) {
           setRecordAsSelected(recordId, true);
         }
       },
-    [recordIndexAllRowIdsState, setRecordAsSelected],
+    [recordIndexAllRecordIdsState, setRecordAsSelected],
   );
 
   useScopedHotkeys('ctrl+a,meta+a', selectAll, TableHotkeyScope.Table);
@@ -137,7 +138,7 @@ export const RecordBoard = () => {
 
         const destinationRecordByGroupIds = getSnapshotValue(
           snapshot,
-          recordIndexRowIdsByGroupFamilyState(destinationRecordGroupId),
+          recordIndexRecordIdsByGroupFamilyState(destinationRecordGroupId),
         );
         const otherRecordIdsInDestinationColumn =
           sourceRecordGroupId === destinationRecordGroupId
@@ -172,7 +173,7 @@ export const RecordBoard = () => {
         });
       },
     [
-      recordIndexRowIdsByGroupFamilyState,
+      recordIndexRecordIdsByGroupFamilyState,
       selectFieldMetadataItem,
       updateOneRecord,
     ],

packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts

@@ -3,8 +3,7 @@ import { useRecoilCallback } from 'recoil';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
-import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@@ -22,24 +21,15 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
     recordBoardId,
   );
 
-  const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
-    recordIndexAllRowIdsComponentState,
-    recordBoardId,
-  );
-
-  const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
-    recordIndexRowIdsByGroupComponentFamilyState,
-    recordBoardId,
-  );
+  const recordIndexRecordIdsByGroupFamilyState =
+    useRecoilComponentCallbackStateV2(
+      recordIndexRecordIdsByGroupComponentFamilyState,
+      recordBoardId,
+    );
 
   const setRecordIds = useRecoilCallback(
     ({ set, snapshot }) =>
       (records: ObjectRecord[]) => {
-        const existingAllRowIds = getSnapshotValue(
-          snapshot,
-          recordIndexAllRowIdsState,
-        );
-
         const recordGroupIds = getSnapshotValue(
           snapshot,
           visibleRecordGroupIdsSelector,
@@ -53,7 +43,7 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
 
           const existingRecordGroupRowIds = getSnapshotValue(
             snapshot,
-            recordIndexRowIdsByGroupFamilyState(recordGroupId),
+            recordIndexRecordIdsByGroupFamilyState(recordGroupId),
           );
 
           const recordGroupFieldMetadata = getSnapshotValue(
@@ -75,32 +65,16 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
 
           if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) {
             set(
-              recordIndexRowIdsByGroupFamilyState(recordGroupId),
+              recordIndexRecordIdsByGroupFamilyState(recordGroupId),
               recordGroupRowIds,
             );
           }
         }
-
-        const allRowIds: string[] = [];
-
-        for (const recordGroupId of recordGroupIds) {
-          const tableRowIdsByGroup = getSnapshotValue(
-            snapshot,
-            recordIndexRowIdsByGroupFamilyState(recordGroupId),
-          );
-
-          allRowIds.push(...tableRowIdsByGroup);
-        }
-
-        if (!isDeeplyEqual(existingAllRowIds, allRowIds)) {
-          set(recordIndexAllRowIdsState, allRowIds);
-        }
       },
     [
       visibleRecordGroupIdsSelector,
-      recordIndexRowIdsByGroupFamilyState,
+      recordIndexRecordIdsByGroupFamilyState,
       recordGroupFieldMetadataState,
-      recordIndexAllRowIdsState,
     ],
   );
 

packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts

@@ -2,9 +2,7 @@ import { useRecoilCallback } from 'recoil';
 
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
-import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
-import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@@ -13,44 +11,28 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { isDefined } from '~/utils/isDefined';
 
 export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
-  const recordGroupIdsState = useRecoilComponentCallbackStateV2(
-    recordGroupIdsComponentState,
-    recordBoardId,
-  );
-
   const recordGroupFieldMetadataState = useRecoilComponentCallbackStateV2(
     recordGroupFieldMetadataComponentState,
     recordBoardId,
   );
 
-  const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
-    recordIndexAllRowIdsComponentState,
-    recordBoardId,
-  );
-
-  const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
-    recordIndexRowIdsByGroupComponentFamilyState,
-    recordBoardId,
-  );
+  const recordIndexRecordIdsByGroupFamilyState =
+    useRecoilComponentCallbackStateV2(
+      recordIndexRecordIdsByGroupComponentFamilyState,
+      recordBoardId,
+    );
 
   const setRecordIdsForColumn = useRecoilCallback(
     ({ set, snapshot }) =>
       (currentRecordGroupId: string, records: ObjectRecord[]) => {
-        const existingAllRowIds = getSnapshotValue(
-          snapshot,
-          recordIndexAllRowIdsState,
-        );
-
-        const recordGroupIds = getSnapshotValue(snapshot, recordGroupIdsState);
-
         const recordGroup = getSnapshotValue(
           snapshot,
           recordGroupDefinitionFamilyState(currentRecordGroupId),
         );
 
         const existingRecordGroupRowIds = getSnapshotValue(
           snapshot,
-          recordIndexRowIdsByGroupFamilyState(currentRecordGroupId),
+          recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId),
         );
 
         const recordGroupFieldMetadata = getSnapshotValue(
@@ -72,35 +54,12 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
 
         if (!isDeeplyEqual(existingRecordGroupRowIds, recordGroupRowIds)) {
           set(
-            recordIndexRowIdsByGroupFamilyState(currentRecordGroupId),
+            recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId),
             recordGroupRowIds,
           );
         }
-
-        const allRowIds: string[] = [];
-
-        for (const recordGroupId of recordGroupIds) {
-          const tableRowIdsByGroup =
-            recordGroupId !== currentRecordGroupId
-              ? getSnapshotValue(
-                  snapshot,
-                  recordIndexRowIdsByGroupFamilyState(recordGroupId),
-                )
-              : recordGroupRowIds;
-
-          allRowIds.push(...tableRowIdsByGroup);
-        }
-
-        if (!isDeeplyEqual(existingAllRowIds, allRowIds)) {
-          set(recordIndexAllRowIdsState, allRowIds);
-        }
       },
-    [
-      recordGroupIdsState,
-      recordIndexRowIdsByGroupFamilyState,
-      recordGroupFieldMetadataState,
-      recordIndexAllRowIdsState,
-    ],
+    [recordIndexRecordIdsByGroupFamilyState, recordGroupFieldMetadataState],
   );
 
   return {

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

@@ -4,7 +4,7 @@ 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 { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
-import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 import { useRecoilValue } from 'recoil';
 
@@ -31,8 +31,8 @@ export const RecordBoardColumn = ({
     recordGroupDefinitionFamilyState(recordBoardColumnId),
   );
 
-  const recordRowIdsByGroup = useRecoilComponentFamilyValueV2(
-    recordIndexRowIdsByGroupComponentFamilyState,
+  const recordIdsByGroup = useRecoilComponentFamilyValueV2(
+    recordIndexRecordIdsByGroupComponentFamilyState,
     recordBoardColumnId,
   );
 
@@ -44,17 +44,17 @@ export const RecordBoardColumn = ({
     <RecordBoardColumnContext.Provider
       value={{
         columnDefinition: recordGroupDefinition,
-        recordCount: recordRowIdsByGroup.length,
+        recordCount: recordIdsByGroup.length,
         columnId: recordBoardColumnId,
-        recordIds: recordRowIdsByGroup,
+        recordIds: recordIdsByGroup,
       }}
     >
       <Droppable droppableId={recordBoardColumnId}>
         {(droppableProvided) => (
           <StyledColumn>
             <RecordBoardColumnCardsContainer
               droppableProvided={droppableProvided}
-              recordIds={recordRowIdsByGroup}
+              recordIds={recordIdsByGroup}
             />
           </StyledColumn>
         )}