From c23961fa817598b0b676b9df7d4bf9fa3efb21d4 Mon Sep 17 00:00:00 2001 From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com> Date: Tue, 31 Mar 2026 22:21:01 +0530 Subject: [PATCH] Fix navbar object color not updating immediately when changed in edit mode (#19075) https://github.com/user-attachments/assets/f2a8f2af-b92f-4d2e-9570-fe66f0a3eca0 --- .../utils/isValidObjectNavigationMenuItem.ts | 19 +++++++++++++++++++ .../hooks/useSaveNavigationMenuItemsDraft.ts | 5 +---- .../components/SidePanelEditColorOption.tsx | 19 ++++++++++++++++++- .../SidePanelEditObjectViewBase.tsx | 8 ++++---- .../utils/getObjectMetadataColorUpdates.ts | 16 ++++------------ 5 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 packages/twenty-front/src/modules/navigation-menu-item/common/utils/isValidObjectNavigationMenuItem.ts diff --git a/packages/twenty-front/src/modules/navigation-menu-item/common/utils/isValidObjectNavigationMenuItem.ts b/packages/twenty-front/src/modules/navigation-menu-item/common/utils/isValidObjectNavigationMenuItem.ts new file mode 100644 index 0000000000..a7ae477585 --- /dev/null +++ b/packages/twenty-front/src/modules/navigation-menu-item/common/utils/isValidObjectNavigationMenuItem.ts @@ -0,0 +1,19 @@ +import { isNonEmptyString } from '@sniptt/guards'; +import { type NavigationMenuItem } from '~/generated-metadata/graphql'; + +import { isNavigationMenuItemObject } from '@/navigation-menu-item/common/utils/isNavigationMenuItemObject'; +import { isDefined } from 'twenty-shared/utils'; + +type ObjectNavigationMenuItem = Omit< + NavigationMenuItem, + 'targetObjectMetadataId' +> & { + targetObjectMetadataId: string; +}; + +export const isValidObjectNavigationMenuItem = ( + item?: NavigationMenuItem, +): item is ObjectNavigationMenuItem => + isDefined(item) && + isNavigationMenuItemObject(item) && + isNonEmptyString(item.targetObjectMetadataId); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft.ts index d272218a95..e0c60c7357 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft.ts @@ -10,7 +10,6 @@ import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/commo import { buildUpdateInputsFromDraft } from '@/navigation-menu-item/edit/utils/buildUpdateInputsFromDraft'; import { getObjectMetadataColorUpdates } from '@/navigation-menu-item/edit/utils/getObjectMetadataColorUpdates'; import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem'; -import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector'; import { useStore } from 'jotai'; export const useSaveNavigationMenuItemsDraft = () => { @@ -29,11 +28,9 @@ export const useSaveNavigationMenuItemsDraft = () => { return; } - const objectMetadataItems = store.get(objectMetadataItemsSelector.atom); - const colorUpdates = getObjectMetadataColorUpdates({ draft, - objectMetadataItems, + currentItems, }); for (const { idToUpdate, color } of colorUpdates) { diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption.tsx index f659af88b3..2389abdecd 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption.tsx @@ -1,4 +1,8 @@ import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown'; +import { useUpdateMetadataStoreDraft } from '@/metadata-store/hooks/useUpdateMetadataStoreDraft'; +import { type FlatObjectMetadataItem } from '@/metadata-store/types/FlatObjectMetadataItem'; +import { isValidObjectNavigationMenuItem } from '@/navigation-menu-item/common/utils/isValidObjectNavigationMenuItem'; +import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem'; import { useUpdateNavigationMenuItemInDraft } from '@/navigation-menu-item/edit/hooks/useUpdateNavigationMenuItemInDraft'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -15,8 +19,8 @@ import { DEFAULT_COLOR_LABELS, MenuItemSelectColor, } from 'twenty-ui/navigation'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color'; const StyledMenuStyleText = styled.span` @@ -37,6 +41,8 @@ export const SidePanelEditColorOption = ({ const { updateNavigationMenuItemInDraft } = useUpdateNavigationMenuItemInDraft(); const { closeDropdown } = useCloseDropdown(); + const { updateInDraft, applyChanges } = useUpdateMetadataStoreDraft(); + const { selectedItem } = useSelectedNavigationMenuItemEditItem(); const [searchValue, setSearchValue] = useState(''); const themeColor = color ?? 'gray'; @@ -56,6 +62,17 @@ export const SidePanelEditColorOption = ({ updateNavigationMenuItemInDraft(navigationMenuItemId, { color: selectedColor, }); + + if (isValidObjectNavigationMenuItem(selectedItem)) { + updateInDraft('objectMetadataItems', [ + { + id: selectedItem.targetObjectMetadataId, + color: selectedColor, + } as FlatObjectMetadataItem, + ]); + applyChanges(); + } + closeDropdown(NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID); }; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditObjectViewBase.tsx b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditObjectViewBase.tsx index 4ce668ce4e..631a122a10 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditObjectViewBase.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelEditObjectViewBase.tsx @@ -1,16 +1,16 @@ import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector'; import { getNavigationMenuItemColor } from '@/navigation-menu-item/common/utils/getNavigationMenuItemColor'; -import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular'; import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor'; -import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector'; -import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; -import { SidePanelList } from '@/side-panel/components/SidePanelList'; +import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular'; import { SidePanelEditColorOption } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditColorOption'; import { type OrganizeActionsProps, SidePanelEditOrganizeActions, } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions'; import { getOrganizeActionsSelectableItemIds } from '@/navigation-menu-item/edit/side-panel/utils/getOrganizeActionsSelectableItemIds'; +import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector'; +import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; +import { SidePanelList } from '@/side-panel/components/SidePanelList'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { viewsSelector } from '@/views/states/selectors/viewsSelector'; import { useLingui } from '@lingui/react/macro'; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/edit/utils/getObjectMetadataColorUpdates.ts b/packages/twenty-front/src/modules/navigation-menu-item/edit/utils/getObjectMetadataColorUpdates.ts index a9ad074b41..c1de85fc38 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/edit/utils/getObjectMetadataColorUpdates.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/edit/utils/getObjectMetadataColorUpdates.ts @@ -3,8 +3,6 @@ import { isDefined } from 'twenty-shared/utils'; import { type NavigationMenuItem } from '~/generated-metadata/graphql'; -import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem'; - type ObjectMetadataColorUpdate = { idToUpdate: string; color: string; @@ -12,10 +10,10 @@ type ObjectMetadataColorUpdate = { export const getObjectMetadataColorUpdates = ({ draft, - objectMetadataItems, + currentItems, }: { draft: NavigationMenuItem[]; - objectMetadataItems: EnrichedObjectMetadataItem[]; + currentItems: NavigationMenuItem[]; }): ObjectMetadataColorUpdate[] => { const updates: ObjectMetadataColorUpdate[] = []; @@ -30,15 +28,9 @@ export const getObjectMetadataColorUpdates = ({ continue; } - const objectMetadataItem = objectMetadataItems.find( - (item) => item.id === draftItem.targetObjectMetadataId, - ); + const currentItem = currentItems.find((item) => item.id === draftItem.id); - if (!isDefined(objectMetadataItem)) { - continue; - } - - if (objectMetadataItem.color === draftItem.color) { + if (currentItem?.color === draftItem.color) { continue; }