From fa9dba834f286ba8abe031c01869db3aae640c6f Mon Sep 17 00:00:00 2001 From: Abdul Rahman Date: Tue, 10 Feb 2026 14:08:37 +0530 Subject: [PATCH] refactor: improve item type handling and component logic in CommandMenu Refactored the CommandMenuNavigationMenuItemEditPage and related hooks to enhance item type checks and streamline component logic. Updated imports for better organization and clarity, ensuring consistent handling of navigation menu item types. This change simplifies the logic for rendering components based on selected item types, improving overall code readability and maintainability. --- .../CommandMenuNavigationMenuItemEditPage.tsx | 27 ++++++++++--------- .../useSelectedNavigationMenuItemEditData.ts | 10 ++++--- .../getObjectMetadataForNavigationMenuItem.ts | 9 +++++-- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx index 288e8b7a587..2b6bd0a6c33 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNavigationMenuItemEditPage.tsx @@ -1,20 +1,20 @@ -import styled from '@emotion/styled'; -import { useLingui } from '@lingui/react/macro'; -import { useRecoilValue } from 'recoil'; import { CommandMenuList } from '@/command-menu/components/CommandMenuList'; import { CommandMenuEditFolderPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView'; -import { CommandMenuEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions'; -import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds'; import { CommandMenuEditLinkItemView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView'; import { CommandMenuEditObjectViewBase } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase'; +import { CommandMenuEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions'; import { CommandMenuEditOwnerSection } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection'; import { useNavigationMenuItemEditOrganizeActions } from '@/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditOrganizeActions'; import { useNavigationMenuItemEditSubView } from '@/command-menu/pages/navigation-menu-item/hooks/useNavigationMenuItemEditSubView'; import { useSelectedNavigationMenuItemEditData } from '@/command-menu/pages/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditData'; +import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds'; import { useUpdateLinkInDraft } from '@/navigation-menu-item/hooks/useUpdateLinkInDraft'; import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState'; import { NAVIGATION_MENU_ITEM_TYPE } from '@/navigation-menu-item/types/navigation-menu-item-type'; -import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item'; +import styled from '@emotion/styled'; +import { useLingui } from '@lingui/react/macro'; +import { useRecoilValue } from 'recoil'; +import { isDefined } from 'twenty-shared/utils'; const StyledCommandMenuPlaceholder = styled.p` color: ${({ theme }) => theme.font.color.tertiary}; @@ -89,14 +89,13 @@ export const CommandMenuNavigationMenuItemEditPage = () => { ); } - if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.LINK && !selectedItem) { - return null; - } - - if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.LINK) { + if ( + isDefined(selectedItem) && + selectedItem.itemType === NAVIGATION_MENU_ITEM_TYPE.LINK + ) { return ( updateLinkInDraft(linkId, { link })} onOpenFolderPicker={setFolderPicker} canMoveUp={canMoveUp} @@ -110,6 +109,10 @@ export const CommandMenuNavigationMenuItemEditPage = () => { ); } + if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.LINK) { + return null; + } + if (selectedItemType === NAVIGATION_MENU_ITEM_TYPE.FOLDER) { return ( { const selectedItemType = selectedItem?.itemType ?? null; const selectedItemObjectMetadata = selectedItem ? getObjectMetadataForNavigationMenuItem( - selectedItem as ProcessedNavigationMenuItem, + selectedItem, objectMetadataItems, views, ) @@ -38,7 +37,10 @@ export const useSelectedNavigationMenuItemEditData = () => { : (selectedItemObjectMetadata?.labelPlural ?? '') : null; - const processedItem = selectedItem as ProcessedNavigationMenuItem | undefined; + const processedItem = + selectedItem && selectedItem.itemType !== NAVIGATION_MENU_ITEM_TYPE.FOLDER + ? selectedItem + : undefined; return { selectedItem, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem.ts b/packages/twenty-front/src/modules/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem.ts index b5b62597fae..03e6844ee72 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem.ts @@ -1,11 +1,16 @@ import { isDefined } from 'twenty-shared/utils'; -import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems'; +import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { type View } from '@/views/types/View'; +type NavigationMenuItemWithItemType = Pick< + ProcessedNavigationMenuItem, + 'itemType' | 'viewId' | 'targetObjectMetadataId' +>; + export const getObjectMetadataForNavigationMenuItem = ( - navigationMenuItem: ProcessedNavigationMenuItem, + navigationMenuItem: NavigationMenuItemWithItemType, objectMetadataItems: ObjectMetadataItem[], views: View[], ): ObjectMetadataItem | null => {