fix: make changes required by the review

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

@@ -45,7 +45,7 @@ const StyledContainerContainer = styled.div`
 const StyledBoardContentContainer = styled.div`
   display: flex;
   flex-direction: column;
-  height: calc(100% - 48px);;
+  height: calc(100% - 48px);
 `;
 
 const RecordBoardScrollRestoreEffect = () => {
@@ -69,11 +69,6 @@ export const RecordBoard = () => {
   const { resetRecordSelection, setRecordAsSelected } =
     useRecordBoardSelection(recordBoardId);
 
-  // const isPersistingViewGroups = useRecoilComponentValueV2(
-  //   isPersistingViewGroupsComponentState,
-  //   recordBoardId,
-  // );
-
   useListenClickOutsideByClassName({
     classNames: ['record-board-card'],
     excludeClassNames: ['bottom-bar', 'action-menu-dropdown'],

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

@@ -1,13 +1,13 @@
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { useRecordGroupStates } from '@/object-record/record-group/hooks/useRecordGroupStates';
+import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups';
 import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
 import { RecordGroupAction } from '@/object-record/record-group/types/RecordGroupActions';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useCallback, useContext, useMemo } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { IconEyeOff, IconSettings } from 'twenty-ui';
 
@@ -27,7 +27,7 @@ export const useRecordGroupActions = () => {
     objectNameSingular,
   });
 
-  const { viewGroupFieldMetadataItem } = useRecordGroupStates({
+  const { viewGroupFieldMetadataItem } = useRecordGroups({
     objectNameSingular,
   });
 

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

@@ -1,13 +1,13 @@
 import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useCallback } from 'react';
 
-import { moveArrayItem } from '~/utils/array/moveArrayItem';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
-import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
-import { mapGroupDefinitionsToViewGroups } from '@/views/utils/mapGroupDefinitionsToViewGroups';
-import { useRecordGroupStates } from '@/object-record/record-group/hooks/useRecordGroupStates';
+import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups';
 import { recordGroupDefinitionState } from '@/object-record/record-group/states/recordGroupDefinitionState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
+import { mapRecordGroupDefinitionsToViewGroups } from '@/views/utils/mapRecordGroupDefinitionsToViewGroups';
+import { moveArrayItem } from '~/utils/array/moveArrayItem';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type UseRecordGroupHandlersParams = {
   objectNameSingular: string;
@@ -22,7 +22,7 @@ export const useRecordGroupReorder = ({
     recordGroupDefinitionState,
   );
 
-  const { visibleRecordGroups } = useRecordGroupStates({
+  const { visibleRecordGroups } = useRecordGroups({
     objectNameSingular,
   });
 
@@ -47,7 +47,7 @@ export const useRecordGroupReorder = ({
       );
 
       setRecordIndexGroupDefinitions(updatedGroups);
-      saveViewGroups(mapGroupDefinitionsToViewGroups(updatedGroups));
+      saveViewGroups(mapRecordGroupDefinitionsToViewGroups(updatedGroups));
     },
     [saveViewGroups, setRecordIndexGroupDefinitions, visibleRecordGroups],
   );

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

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 
-import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
-import { mapGroupDefinitionsToViewGroups } from '@/views/utils/mapGroupDefinitionsToViewGroups';
+import { recordGroupDefinitionState } from '@/object-record/record-group/states/recordGroupDefinitionState';
 import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { recordGroupDefinitionState } from '@/object-record/record-group/states/recordGroupDefinitionState';
+import { useSaveCurrentViewGroups } from '@/views/hooks/useSaveCurrentViewGroups';
+import { mapRecordGroupDefinitionsToViewGroups } from '@/views/utils/mapRecordGroupDefinitionsToViewGroups';
 
 type UseRecordGroupVisibilityParams = {
   viewBarId: string;
@@ -32,7 +32,9 @@ export const useRecordGroupVisibility = ({
 
       setRecordIndexGroupDefinitions(updatedGroupsDefinitions);
 
-      saveViewGroups(mapGroupDefinitionsToViewGroups(updatedGroupsDefinitions));
+      saveViewGroups(
+        mapRecordGroupDefinitionsToViewGroups(updatedGroupsDefinitions),
+      );
     },
     [
       recordIndexGroupDefinitions,

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

@@ -4,13 +4,13 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { recordGroupDefinitionState } from '@/object-record/record-group/states/recordGroupDefinitionState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
-type UseRecordGroupStatesParams = {
+type UseRecordGroupsParams = {
   objectNameSingular: string;
 };
 
-export const useRecordGroupStates = ({
+export const useRecordGroups = ({
   objectNameSingular,
-}: UseRecordGroupStatesParams) => {
+}: UseRecordGroupsParams) => {
   const recordIndexGroupDefinitions = useRecoilComponentValueV2(
     recordGroupDefinitionState,
   );

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -21,6 +21,9 @@ import {
   useExportRecordData,
 } from '@/action-menu/hooks/useExportRecordData';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecordGroupReorder } from '@/object-record/record-group/hooks/useRecordGroupReorder';
+import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups';
+import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
 import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
 import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable';
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
@@ -38,14 +41,11 @@ import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemTog
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
+import { ViewGroupsVisibilityDropdownSection } from '@/views/components/ViewGroupsVisibilityDropdownSection';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewType } from '@/views/types/ViewType';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { ViewGroupsVisibilityDropdownSection } from '@/views/components/ViewGroupsVisibilityDropdownSection';
-import { useRecordGroupStates } from '@/object-record/record-group/hooks/useRecordGroupStates';
-import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
-import { useRecordGroupReorder } from '@/object-record/record-group/hooks/useRecordGroupReorder';
 
 type RecordIndexOptionsMenu =
   | 'viewGroups'
@@ -126,7 +126,7 @@ export const RecordIndexOptionsDropdownContent = ({
     hiddenRecordGroups,
     visibleRecordGroups,
     viewGroupFieldMetadataItem,
-  } = useRecordGroupStates({
+  } = useRecordGroups({
     objectNameSingular: objectMetadataItem.nameSingular,
   });
   const { handleVisibilityChange: handleRecordGroupVisibilityChange } =
@@ -176,16 +176,9 @@ export const RecordIndexOptionsDropdownContent = ({
     navigationMemorizedUrlState,
   );
 
-  const viewGroupMenuItem =
+  const isViewGroupMenuItemVisible =
     viewGroupFieldMetadataItem &&
-    (visibleRecordGroups.length > 0 || hiddenRecordGroups.length > 0) ? (
-      <MenuItem
-        onClick={() => handleSelectMenu('viewGroups')}
-        LeftIcon={getIcon(currentViewWithCombinedFiltersAndSorts?.icon)}
-        text={viewGroupFieldMetadataItem.label}
-        hasSubMenu
-      />
-    ) : null;
+    (visibleRecordGroups.length > 0 || hiddenRecordGroups.length > 0);
 
   useEffect(() => {
     if (currentMenu === 'hiddenViewGroups' && hiddenRecordGroups.length === 0) {
@@ -197,7 +190,14 @@ export const RecordIndexOptionsDropdownContent = ({
     <>
       {!currentMenu && (
         <DropdownMenuItemsContainer>
-          {viewGroupMenuItem}
+          {isViewGroupMenuItemVisible && (
+            <MenuItem
+              onClick={() => handleSelectMenu('viewGroups')}
+              LeftIcon={getIcon(currentViewWithCombinedFiltersAndSorts?.icon)}
+              text={viewGroupFieldMetadataItem.label}
+              hasSubMenu
+            />
+          )}
           <MenuItem
             onClick={() => handleSelectMenu('fields')}
             LeftIcon={IconTag}

packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx

@@ -6,16 +6,16 @@ import {
 import { useRef } from 'react';
 import { IconEye, IconEyeOff, Tag } from 'twenty-ui';
 
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
-import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import {
   RecordGroupDefinition,
   RecordGroupDefinitionType,
 } from '@/object-record/record-group/types/RecordGroupDefinition';
-import { isDefined } from '~/utils/isDefined';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
+import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
+import { isDefined } from '~/utils/isDefined';
 
 type ViewGroupsVisibilityDropdownSectionProps = {
   viewGroups: RecordGroupDefinition[];
@@ -53,31 +53,6 @@ export const ViewGroupsVisibilityDropdownSection = ({
 
   const ref = useRef<HTMLDivElement>(null);
 
-  const renderItem = (
-    viewGroup: RecordGroupDefinition,
-    viewGroupIndex: number,
-  ) => {
-    const isNoValueType = viewGroup.type === RecordGroupDefinitionType.NoValue;
-
-    return (
-      <MenuItemDraggable
-        key={viewGroup.id}
-        text={
-          <Tag
-            variant={!isNoValueType ? 'solid' : 'outline'}
-            color={!isNoValueType ? viewGroup.color : 'transparent'}
-            text={viewGroup.title}
-            weight={!isNoValueType ? 'regular' : 'medium'}
-          />
-        }
-        iconButtons={getIconButtons(viewGroupIndex, viewGroup)}
-        accent={showDragGrip ? 'placeholder' : 'default'}
-        showGrip={showDragGrip}
-        isDragDisabled={!isDraggable}
-      />
-    );
-  };
-
   return (
     <div ref={ref}>
       {showSubheader && (
@@ -87,9 +62,35 @@ export const ViewGroupsVisibilityDropdownSection = ({
         {!!viewGroups.length && (
           <>
             {!isDraggable ? (
-              viewGroups.map((viewGroup, viewGroupIndex) =>
-                renderItem(viewGroup, viewGroupIndex),
-              )
+              viewGroups.map((viewGroup, viewGroupIndex) => (
+                <MenuItemDraggable
+                  key={viewGroup.id}
+                  text={
+                    <Tag
+                      variant={
+                        viewGroup.type !== RecordGroupDefinitionType.NoValue
+                          ? 'solid'
+                          : 'outline'
+                      }
+                      color={
+                        viewGroup.type !== RecordGroupDefinitionType.NoValue
+                          ? viewGroup.color
+                          : 'transparent'
+                      }
+                      text={viewGroup.title}
+                      weight={
+                        viewGroup.type !== RecordGroupDefinitionType.NoValue
+                          ? 'regular'
+                          : 'medium'
+                      }
+                    />
+                  }
+                  iconButtons={getIconButtons(viewGroupIndex, viewGroup)}
+                  accent={showDragGrip ? 'placeholder' : 'default'}
+                  showGrip={showDragGrip}
+                  isDragDisabled={!isDraggable}
+                />
+              ))
             ) : (
               <DraggableList
                 onDragEnd={handleOnDrag}
@@ -100,7 +101,41 @@ export const ViewGroupsVisibilityDropdownSection = ({
                         key={viewGroup.id}
                         draggableId={viewGroup.id}
                         index={viewGroupIndex + 1}
-                        itemComponent={renderItem(viewGroup, viewGroupIndex)}
+                        itemComponent={
+                          <MenuItemDraggable
+                            key={viewGroup.id}
+                            text={
+                              <Tag
+                                variant={
+                                  viewGroup.type !==
+                                  RecordGroupDefinitionType.NoValue
+                                    ? 'solid'
+                                    : 'outline'
+                                }
+                                color={
+                                  viewGroup.type !==
+                                  RecordGroupDefinitionType.NoValue
+                                    ? viewGroup.color
+                                    : 'transparent'
+                                }
+                                text={viewGroup.title}
+                                weight={
+                                  viewGroup.type !==
+                                  RecordGroupDefinitionType.NoValue
+                                    ? 'regular'
+                                    : 'medium'
+                                }
+                              />
+                            }
+                            iconButtons={getIconButtons(
+                              viewGroupIndex,
+                              viewGroup,
+                            )}
+                            accent={showDragGrip ? 'placeholder' : 'default'}
+                            showGrip={showDragGrip}
+                            isDragDisabled={!isDraggable}
+                          />
+                        }
                       />
                     ))}
                   </>

packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewGroups.ts

@@ -1,14 +1,13 @@
 import { useRecoilCallback } from 'recoil';
 
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
 import { useGetViewFromCache } from '@/views/hooks/useGetViewFromCache';
 import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { ViewGroup } from '@/views/types/ViewGroup';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-import { usePersistViewGroupRecords } from '@/views/hooks/internal/usePersistViewGroupRecords';
-import { ViewGroup } from '@/views/types/ViewGroup';
-import { isPersistingViewGroupsComponentState } from '@/views/states/isPersistingViewGroupsComponentState';
 
 export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
   const { createViewGroupRecords, updateViewGroupRecords } =
@@ -21,11 +20,6 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
     viewBarComponentId,
   );
 
-  const isPersistingViewGroupsCallbackState = useRecoilComponentCallbackStateV2(
-    isPersistingViewGroupsComponentState,
-    viewBarComponentId,
-  );
-
   const saveViewGroups = useRecoilCallback(
     ({ set, snapshot }) =>
       async (viewGroupsToSave: ViewGroup[]) => {
@@ -37,8 +31,6 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
           return;
         }
 
-        set(isPersistingViewGroupsCallbackState, true);
-
         const view = await getViewFromCache(currentViewId);
 
         if (isUndefinedOrNull(view)) {
@@ -89,14 +81,11 @@ export const useSaveCurrentViewGroups = (viewBarComponentId?: string) => {
           createViewGroupRecords(viewGroupsToCreate, view),
           updateViewGroupRecords(viewGroupsToUpdate),
         ]);
-
-        set(isPersistingViewGroupsCallbackState, false);
       },
     [
       createViewGroupRecords,
       currentViewIdCallbackState,
       getViewFromCache,
-      isPersistingViewGroupsCallbackState,
       updateViewGroupRecords,
     ],
   );

packages/twenty-front/src/modules/views/states/isPersistingViewGroupsComponentState.ts

@@ -1,9 +0,0 @@
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-
-export const isPersistingViewGroupsComponentState =
-  createComponentStateV2<boolean>({
-    key: 'isPersistingViewGroupsComponentState',
-    defaultValue: false,
-    componentInstanceContext: ViewComponentInstanceContext,
-  });

packages/twenty-front/src/modules/views/utils/mapRecordGroupDefinitionsToViewGroups.ts

@@ -1,7 +1,7 @@
 import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { ViewGroup } from '@/views/types/ViewGroup';
 
-export const mapGroupDefinitionsToViewGroups = (
+export const mapRecordGroupDefinitionsToViewGroups = (
   groupDefinitions: RecordGroupDefinition[],
 ): ViewGroup[] => {
   return groupDefinitions.map(

packages/twenty-front/src/modules/views/utils/mapViewGroupsToGroupDefinitions.ts

@@ -1,12 +1,12 @@
 import { isDefined } from '~/utils/isDefined';
 
-import { ViewGroup } from '@/views/types/ViewGroup';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import {
   RecordGroupDefinition,
   RecordGroupDefinitionNoValue,
   RecordGroupDefinitionType,
 } from '@/object-record/record-group/types/RecordGroupDefinition';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { ViewGroup } from '@/views/types/ViewGroup';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const mapViewGroupsToGroupDefinitions = ({
@@ -35,7 +35,7 @@ export const mapViewGroupsToGroupDefinitions = ({
       `Select Field ${objectMetadataItem.nameSingular} has no options`,
     );
   }
-  const groupDefinitionsFromViewGroups = viewGroups
+  const recordGroupDefinitionsFromViewGroups = viewGroups
     .map((viewGroup) => {
       // It's actually check right above
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -66,14 +66,14 @@ export const mapViewGroupsToGroupDefinitions = ({
       type: RecordGroupDefinitionType.NoValue,
       value: null,
       position:
-        groupDefinitionsFromViewGroups
+        recordGroupDefinitionsFromViewGroups
           .map((option) => option.position)
           .reduce((a, b) => Math.max(a, b), 0) + 1,
       isVisible: true,
     } satisfies RecordGroupDefinitionNoValue;
 
-    return [...groupDefinitionsFromViewGroups, noValueColumn];
+    return [...recordGroupDefinitionsFromViewGroups, noValueColumn];
   }
 
-  return groupDefinitionsFromViewGroups;
+  return recordGroupDefinitionsFromViewGroups;
 };