Refactor navigation menu components to streamline state management by removing objectMetadataItems and views props. Introduced local state retrieval for object metadata and core views, enhancing code clarity and reducing prop drilling across components.

packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx

@@ -3,24 +3,23 @@ import { isDefined } from 'twenty-shared/utils';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
+import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
-import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
-import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
-import { type View } from '@/views/types/View';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { coreViewsState } from '@/views/states/coreViewState';
 import { ViewKey } from '@/views/types/ViewKey';
+import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
 
 type WorkspaceNavigationMenuItemFolderSubItemProps = {
   navigationMenuItem: ProcessedNavigationMenuItem;
   index: number;
   arrayLength: number;
   selectedNavigationMenuItemIndex: number;
-  objectMetadataItems: ObjectMetadataItem[];
-  views: View[];
   onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
   selectedNavigationMenuItemId: string | null;
   isContextDragging: boolean;
@@ -31,8 +30,6 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({
   index,
   arrayLength,
   selectedNavigationMenuItemIndex,
-  objectMetadataItems,
-  views,
   onNavigationMenuItemClick,
   selectedNavigationMenuItemId,
   isContextDragging,
@@ -40,6 +37,9 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({
   const isNavigationMenuInEditMode = useAtomStateValue(
     isNavigationMenuInEditModeState,
   );
+  const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
+  const coreViews = useAtomStateValue(coreViewsState);
+  const views = coreViews.map(convertCoreViewToView);
   const objectMetadataItem =
     navigationMenuItem.itemType === NavigationMenuItemType.VIEW ||
     navigationMenuItem.itemType === NavigationMenuItemType.RECORD

packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx

@@ -35,7 +35,6 @@ import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/sta
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { WorkspaceDndKitContext } from '@/navigation/contexts/WorkspaceDndKitContext';
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
@@ -45,8 +44,6 @@ import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-dr
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
-import { coreViewsState } from '@/views/states/coreViewState';
-import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
 
 const StyledFolderContainer = styled.div<{ $isSelectedInEditMode: boolean }>`
   border: ${({ theme, $isSelectedInEditMode }) =>
@@ -104,9 +101,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
   const theme = useTheme();
   const { getIcon } = useIcons();
   const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT);
-  const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
-  const coreViews = useAtomStateValue(coreViewsState);
-  const views = coreViews.map(convertCoreViewToView);
   const location = useLocation();
   const navigate = useNavigate();
   const currentPath = location.pathname;
@@ -261,8 +255,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                       selectedNavigationMenuItemIndex={
                         selectedNavigationMenuItemIndex
                       }
-                      objectMetadataItems={objectMetadataItems}
-                      views={views}
                       onNavigationMenuItemClick={onNavigationMenuItemClick}
                       selectedNavigationMenuItemId={
                         selectedNavigationMenuItemId ?? null
@@ -349,8 +341,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                           selectedNavigationMenuItemIndex={
                             selectedNavigationMenuItemIndex
                           }
-                          objectMetadataItems={objectMetadataItems}
-                          views={views}
                           onNavigationMenuItemClick={onNavigationMenuItemClick}
                           selectedNavigationMenuItemId={
                             selectedNavigationMenuItemId ?? null

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent.tsx

@@ -4,6 +4,9 @@ import { WorkspaceNavigationMenuItemsFolder } from '@/navigation-menu-item/compo
 import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { coreViewsState } from '@/views/states/coreViewState';
+import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
 import type { ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { NavigationDrawerItemForObjectMetadataItem } from '@/object-metadata/components/NavigationDrawerItemForObjectMetadataItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
@@ -20,12 +23,13 @@ export const WorkspaceSectionItemContent = ({
   selectedNavigationMenuItemId,
   onNavigationMenuItemClick,
   onActiveObjectMetadataItemClick,
-  objectMetadataItems,
-  views,
 }: WorkspaceSectionItemContentProps) => {
   const isNavigationMenuInEditMode = useAtomStateValue(
     isNavigationMenuInEditModeState,
   );
+  const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
+  const coreViews = useAtomStateValue(coreViewsState);
+  const views = coreViews.map(convertCoreViewToView);
   const type = item.itemType;
 
   if (type === 'folder') {

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx

@@ -173,8 +173,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
             selectedNavigationMenuItemId={selectedNavigationMenuItemId}
             onNavigationMenuItemClick={onNavigationMenuItemClick}
             onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
-            objectMetadataItems={objectMetadataItems}
-            views={views}
             isAddMenuItemButtonVisible={isAddMenuItemButtonVisible}
             addToNavigationFallbackDestination={
               addToNavigationFallbackDestination
@@ -193,8 +191,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
             selectedNavigationMenuItemId={selectedNavigationMenuItemId}
             onNavigationMenuItemClick={onNavigationMenuItemClick}
             onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
-            objectMetadataItems={objectMetadataItems}
-            views={views}
             isAddMenuItemButtonVisible={isAddMenuItemButtonVisible}
             addToNavigationFallbackDestination={
               addToNavigationFallbackDestination

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx

@@ -29,8 +29,6 @@ export const WorkspaceSectionListDndKit = ({
   selectedNavigationMenuItemId,
   onNavigationMenuItemClick,
   onActiveObjectMetadataItemClick,
-  objectMetadataItems,
-  views,
   isAddMenuItemButtonVisible,
   addToNavigationFallbackDestination,
   onAddMenuItem,
@@ -65,8 +63,6 @@ export const WorkspaceSectionListDndKit = ({
               selectedNavigationMenuItemId={selectedNavigationMenuItemId}
               onNavigationMenuItemClick={onNavigationMenuItemClick}
               onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
-              objectMetadataItems={objectMetadataItems}
-              views={views}
             />
           </WorkspaceDndKitSortableItem>
         </React.Fragment>

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListHelloPangea.tsx

@@ -29,8 +29,6 @@ export const WorkspaceSectionListHelloPangea = ({
   selectedNavigationMenuItemId,
   onNavigationMenuItemClick,
   onActiveObjectMetadataItemClick,
-  objectMetadataItems,
-  views,
   isAddMenuItemButtonVisible,
   addToNavigationFallbackDestination,
   onAddMenuItem,
@@ -77,8 +75,6 @@ export const WorkspaceSectionListHelloPangea = ({
                     onActiveObjectMetadataItemClick={
                       onActiveObjectMetadataItemClick
                     }
-                    objectMetadataItems={objectMetadataItems}
-                    views={views}
                   />
                 }
               />

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes.ts

@@ -4,7 +4,6 @@ import type {
 } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
 import type { ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import type { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import type { View } from '@/views/types/View';
 
 export type EditModeProps = {
   isSelectedInEditMode: boolean;
@@ -23,8 +22,6 @@ export type WorkspaceSectionItemContentProps = {
     objectMetadataItem: ObjectMetadataItem,
     navigationMenuItemId: string,
   ) => void;
-  objectMetadataItems: ObjectMetadataItem[];
-  views: View[];
 };
 
 export type WorkspaceSectionListCommonProps = {
@@ -40,8 +37,6 @@ export type WorkspaceSectionListCommonProps = {
     objectMetadataItem: ObjectMetadataItem,
     navigationMenuItemId: string,
   ) => void;
-  objectMetadataItems: ObjectMetadataItem[];
-  views: View[];
   isAddMenuItemButtonVisible: boolean;
   addToNavigationFallbackDestination: {
     droppableId: string;