From cfec6c8e26c111b0d9c309ef9b2c4d2606dc79ce Mon Sep 17 00:00:00 2001 From: Abdul Rahman Date: Mon, 2 Mar 2026 07:15:03 +0530 Subject: [PATCH] Refactor navigation menu components to utilize isNavigationMenuInEditMode state for improved edit mode handling. This change enhances code clarity and consistency across various components by replacing direct isEditMode props with the new state management approach. --- ...rkspaceNavigationMenuItemFolderSubItem.tsx | 9 +++-- .../WorkspaceNavigationMenuItems.tsx | 10 ++--- .../WorkspaceNavigationMenuItemsFolder.tsx | 38 ++++++++++++------- ...igationDrawerItemForObjectMetadataItem.tsx | 17 +++++---- ...ionDrawerSectionForObjectMetadataItems.tsx | 3 -- ...onDrawerSectionForWorkspaceItemContent.tsx | 16 +++++--- ...vigationDrawerSectionForWorkspaceItems.tsx | 14 +++---- ...awerSectionForWorkspaceItemsListDndKit.tsx | 11 ++++-- ...ectionForWorkspaceItemsListHelloPangea.tsx | 11 ++++-- ...tionDrawerSectionForWorkspaceItemsTypes.ts | 2 - 10 files changed, 75 insertions(+), 56 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx index e012218d2f2..c8dd916b832 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem.tsx @@ -6,7 +6,9 @@ import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks 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 { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem'; import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment'; import { type View } from '@/views/types/View'; @@ -19,7 +21,6 @@ type WorkspaceNavigationMenuItemFolderSubItemProps = { selectedNavigationMenuItemIndex: number; objectMetadataItems: ObjectMetadataItem[]; views: View[]; - isEditMode: boolean; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; selectedNavigationMenuItemId: string | null; isContextDragging: boolean; @@ -32,11 +33,13 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({ selectedNavigationMenuItemIndex, objectMetadataItems, views, - isEditMode, onNavigationMenuItemClick, selectedNavigationMenuItemId, isContextDragging, }: WorkspaceNavigationMenuItemFolderSubItemProps) => { + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); const objectMetadataItem = navigationMenuItem.itemType === NavigationMenuItemType.VIEW || navigationMenuItem.itemType === NavigationMenuItemType.RECORD @@ -47,7 +50,7 @@ export const WorkspaceNavigationMenuItemFolderSubItem = ({ ) : null; const handleEditModeClick = - isEditMode && + isNavigationMenuInEditMode && isDefined(onNavigationMenuItemClick) && (navigationMenuItem.itemType === NavigationMenuItemType.LINK || isDefined(objectMetadataItem)) diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx index c9d07a64aec..e23aa5b1ad0 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx @@ -136,9 +136,6 @@ export const WorkspaceNavigationMenuItems = () => { }); }; - const isEditMode = - isNavigationMenuItemEditingEnabled && isNavigationMenuInEditMode; - if (loading) { return ; } @@ -150,7 +147,7 @@ export const WorkspaceNavigationMenuItems = () => { rightIcon={ isNavigationMenuItemEditingEnabled ? ( - {isEditMode ? ( + {isNavigationMenuInEditMode ? ( { ) : undefined } onAddMenuItem={ - isNavigationMenuItemEditingEnabled && isEditMode + isNavigationMenuItemEditingEnabled && isNavigationMenuInEditMode ? handleAddMenuItem : undefined } - isEditMode={isEditMode} selectedNavigationMenuItemId={selectedNavigationMenuItemInEditMode} onNavigationMenuItemClick={ - isEditMode ? handleNavigationMenuItemClick : undefined + isNavigationMenuInEditMode ? handleNavigationMenuItemClick : undefined } onActiveObjectMetadataItemClick={ isNavigationMenuItemEditingEnabled diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx index e25de0f6f16..f94f772be14 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx @@ -22,18 +22,19 @@ import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/N import { WorkspaceDndKitDroppableSlot } from '@/navigation-menu-item/components/WorkspaceDndKitDroppableSlot'; import { WorkspaceDndKitSortableItem } from '@/navigation-menu-item/components/WorkspaceDndKitSortableItem'; import { WorkspaceNavigationMenuItemFolderDragClone } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone'; +import { WorkspaceNavigationMenuItemFolderSubItem } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem'; import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault'; import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder'; import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds'; import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType'; -import { WorkspaceDndKitContext } from '@/navigation/contexts/WorkspaceDndKitContext'; import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext'; import { SortableDropTargetRefContext } from '@/navigation-menu-item/contexts/SortableDropTargetRefContext'; import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems'; +import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState'; import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsState'; -import { WorkspaceNavigationMenuItemFolderSubItem } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderSubItem'; 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'; @@ -76,7 +77,6 @@ type WorkspaceNavigationMenuItemsFolderProps = { folderColor?: string | null; navigationMenuItems: ProcessedNavigationMenuItem[]; isGroup: boolean; - isEditMode?: boolean; isSelectedInEditMode?: boolean; onEditModeClick?: () => void; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; @@ -91,7 +91,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({ folderColor, navigationMenuItems, isGroup, - isEditMode = false, isSelectedInEditMode = false, onEditModeClick, onNavigationMenuItemClick, @@ -99,6 +98,9 @@ export const WorkspaceNavigationMenuItemsFolder = ({ isDragging = false, }: WorkspaceNavigationMenuItemsFolderProps) => { const useDndKit = useContext(WorkspaceDndKitContext); + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); const theme = useTheme(); const { getIcon } = useIcons(); const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT); @@ -123,7 +125,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({ const isOpen = openNavigationMenuItemFolderIds.includes(folderId); const folderContentLengthForTree = - isEditMode && isSelectedInEditMode + isNavigationMenuInEditMode && isSelectedInEditMode ? navigationMenuItems.length + 1 : navigationMenuItems.length; @@ -160,7 +162,8 @@ export const WorkspaceNavigationMenuItemsFolder = ({ } }; - const shouldUseEditModeClick = isEditMode && isDefined(onEditModeClick); + const shouldUseEditModeClick = + isNavigationMenuInEditMode && isDefined(onEditModeClick); const handleClick = shouldUseEditModeClick ? (e?: React.MouseEvent) => { e?.stopPropagation(); @@ -236,7 +239,9 @@ export const WorkspaceNavigationMenuItemsFolder = ({ containAnimation > {navigationMenuItems.map((navigationMenuItem, index) => ( @@ -245,7 +250,9 @@ export const WorkspaceNavigationMenuItemsFolder = ({ id={navigationMenuItem.id} index={index} group={folderContentDroppableId} - disabled={!isEditMode || folderContentDropDisabled} + disabled={ + !isNavigationMenuInEditMode || folderContentDropDisabled + } > ( @@ -328,8 +337,10 @@ export const WorkspaceNavigationMenuItemsFolder = ({ draggableId={navigationMenuItem.id} index={index} isInsideScrollableContainer - isDragDisabled={!isEditMode} - disableInteractiveElementBlocking={isEditMode} + isDragDisabled={!isNavigationMenuInEditMode} + disableInteractiveElementBlocking={ + isNavigationMenuInEditMode + } itemComponent={ )} - {isEditMode && isSelectedInEditMode && ( + {isNavigationMenuInEditMode && isSelectedInEditMode && ( void; onActiveItemClickWhenNotInEditMode?: () => void; @@ -39,12 +39,14 @@ export type NavigationDrawerItemForObjectMetadataItemProps = { export const NavigationDrawerItemForObjectMetadataItem = ({ objectMetadataItem, navigationMenuItem, - isEditMode = false, isSelectedInEditMode = false, onEditModeClick, onActiveItemClickWhenNotInEditMode, isDragging = false, }: NavigationDrawerItemForObjectMetadataItemProps) => { + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled( FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED, ); @@ -100,18 +102,19 @@ export const NavigationDrawerItemForObjectMetadataItem = ({ }) + '/', ); - const shouldUseClickHandler = isEditMode + const shouldUseClickHandler = isNavigationMenuInEditMode ? Boolean(onEditModeClick) : isActive && Boolean(onActiveItemClickWhenNotInEditMode); const handleClick = shouldUseClickHandler - ? isEditMode + ? isNavigationMenuInEditMode ? onEditModeClick : onActiveItemClickWhenNotInEditMode : undefined; const shouldNavigate = - !isEditMode && !(isActive && onActiveItemClickWhenNotInEditMode); + !isNavigationMenuInEditMode && + !(isActive && onActiveItemClickWhenNotInEditMode); const isViewWithCustomName = isView && @@ -219,7 +222,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({ label={label} secondaryLabel={secondaryLabel} to={ - isEditMode || isDragging + isNavigationMenuInEditMode || isDragging ? undefined : shouldNavigate ? navigationPath @@ -231,7 +234,7 @@ export const NavigationDrawerItemForObjectMetadataItem = ({ active={isActive} isSelectedInEditMode={isSelectedInEditMode} isDragging={isDragging} - triggerEvent={isEditMode ? 'CLICK' : undefined} + triggerEvent={isNavigationMenuInEditMode ? 'CLICK' : undefined} /> ); }; diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx index aa308265f3f..06d4c792ab1 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx @@ -28,7 +28,6 @@ type NavigationDrawerSectionForObjectMetadataItemsProps = { isRemote: boolean; objectMetadataItems: ObjectMetadataItem[]; rightIcon?: React.ReactNode; - isEditMode?: boolean; selectedObjectMetadataItemId?: string | null; onObjectMetadataItemClick?: (objectMetadataItem: ObjectMetadataItem) => void; onActiveObjectMetadataItemClick?: ( @@ -41,7 +40,6 @@ export const NavigationDrawerSectionForObjectMetadataItems = ({ isRemote, objectMetadataItems, rightIcon, - isEditMode = false, selectedObjectMetadataItemId = null, onObjectMetadataItemClick, onActiveObjectMetadataItemClick, @@ -127,7 +125,6 @@ export const NavigationDrawerSectionForObjectMetadataItems = ({ { + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); const type = item.itemType; if (type === 'folder') { @@ -33,7 +37,6 @@ export const WorkspaceSectionItemContent = ({ folderColor={'color' in item ? (item.color ?? undefined) : undefined} navigationMenuItems={folderChildrenById.get(item.id) ?? []} isGroup={folderCount > 1} - isEditMode={isEditMode} isSelectedInEditMode={editModeProps.isSelectedInEditMode} onEditModeClick={editModeProps.onEditModeClick} onNavigationMenuItemClick={onNavigationMenuItemClick} @@ -48,8 +51,12 @@ export const WorkspaceSectionItemContent = ({ return ( void; - isEditMode?: boolean; selectedNavigationMenuItemId?: string | null; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void; onActiveObjectMetadataItemClick?: ( @@ -48,12 +48,14 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ items, rightIcon, onAddMenuItem, - isEditMode = false, selectedNavigationMenuItemId = null, onNavigationMenuItemClick, onActiveObjectMetadataItemClick, }: NavigationDrawerSectionForWorkspaceItemsProps) => { const { t } = useLingui(); + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); const workspaceDropDisabled = useIsDropDisabledForSection(true); const { toggleNavigationSection, isNavigationSectionOpen } = useNavigationSection('Workspace'); @@ -141,7 +143,7 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ }; const isAddMenuItemButtonVisible = - isEditMode && isDefined(onAddMenuItem) && !isDragging; + isNavigationMenuInEditMode && isDefined(onAddMenuItem) && !isDragging; if (flatItems.length === 0 && !isAddToNavigationDropTargetVisible) { return null; @@ -156,7 +158,7 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ label={sectionTitle} onClick={() => toggleNavigationSection()} rightIcon={rightIcon} - alwaysShowRightIcon={isEditMode} + alwaysShowRightIcon={isNavigationMenuInEditMode} /> {(isNavigationSectionOpen || isAddToNavigationDropTargetVisible) && @@ -167,7 +169,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ folderChildrenById={folderChildrenById} folderCount={folderCount} workspaceDropDisabled={workspaceDropDisabled} - isEditMode={isEditMode} isDragging={isDragging} selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} @@ -188,7 +189,6 @@ export const NavigationDrawerSectionForWorkspaceItems = ({ folderChildrenById={folderChildrenById} folderCount={folderCount} workspaceDropDisabled={workspaceDropDisabled} - isEditMode={isEditMode} isDragging={isDragging} selectedNavigationMenuItemId={selectedNavigationMenuItemId} onNavigationMenuItemClick={onNavigationMenuItemClick} diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx index 56a0f2122cb..27ae9cb5225 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx @@ -2,10 +2,12 @@ import styled from '@emotion/styled'; import React from 'react'; import { IconPlus } from 'twenty-ui/display'; -import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds'; import { WorkspaceDndKitDroppableSlot } from '@/navigation-menu-item/components/WorkspaceDndKitDroppableSlot'; import { WorkspaceDndKitSortableItem } from '@/navigation-menu-item/components/WorkspaceDndKitSortableItem'; +import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds'; +import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { WorkspaceSectionItemContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent'; import type { WorkspaceSectionListDndKitProps } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsTypes'; @@ -23,7 +25,6 @@ export const WorkspaceSectionListDndKit = ({ folderChildrenById, folderCount, workspaceDropDisabled, - isEditMode, isDragging, selectedNavigationMenuItemId, onNavigationMenuItemClick, @@ -35,6 +36,9 @@ export const WorkspaceSectionListDndKit = ({ onAddMenuItem, addMenuItemLabel, }: WorkspaceSectionListDndKitProps) => { + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); return ( { + const isNavigationMenuInEditMode = useAtomStateValue( + isNavigationMenuInEditModeState, + ); return ( ; folderCount: number; @@ -34,7 +33,6 @@ export type WorkspaceSectionListCommonProps = { folderChildrenById: Map; folderCount: number; workspaceDropDisabled: boolean; - isEditMode: boolean; isDragging: boolean; selectedNavigationMenuItemId: string | null; onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;