From 19fce0c77d2bb3cc94da654205785437299fb5c9 Mon Sep 17 00:00:00 2001 From: Weiko Date: Tue, 4 Mar 2025 14:58:36 +0100 Subject: [PATCH] Fix gap between releases and logout (#10649) ## Context A gap was introduced when we refactored the menu rendering as Logout menu item was handled differently in its own NavigationDrawer section which added the gap. To fix that we are moving the Logout to the menu rendering logic in useSettingsNavigationItems hook, allowing items to have onClick prop instead of a path. Before Screenshot 2025-03-04 at 14 36 55 After Screenshot 2025-03-04 at 14 36 38 --- .../components/SettingsNavigationDrawerItem.tsx | 4 +++- .../SettingsNavigationDrawerItems.tsx | 17 +---------------- .../hooks/useSettingsNavigationItems.tsx | 12 ++++++++++-- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx index 2eb6c7dd0..579c73bd8 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx @@ -16,7 +16,7 @@ export const SettingsNavigationDrawerItem = ({ item, subItemState, }: SettingsNavigationDrawerItemProps) => { - const href = getSettingsPath(item.path); + const href = item.path ? getSettingsPath(item.path) : ''; const pathName = useResolvedPath(href).pathname; const isActive = !!useMatch({ path: pathName, @@ -38,6 +38,7 @@ export const SettingsNavigationDrawerItem = ({ Icon={item.Icon} active={isActive} soon={item.soon} + onClick={item.onClick} /> ); @@ -52,6 +53,7 @@ export const SettingsNavigationDrawerItem = ({ Icon={item.Icon} active={isActive} soon={item.soon} + onClick={item.onClick} /> ); }; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx index 1190b8195..d0c659c1d 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx @@ -1,6 +1,3 @@ -import { IconDoorEnter } from 'twenty-ui'; - -import { useAuth } from '@/auth/hooks/useAuth'; import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper'; import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem'; import { @@ -8,19 +5,14 @@ import { SettingsNavigationSection, useSettingsNavigationItems, } from '@/settings/hooks/useSettingsNavigationItems'; -import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup'; import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection'; import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment'; -import { useLingui } from '@lingui/react/macro'; import { matchPath, resolvePath, useLocation } from 'react-router-dom'; import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; export const SettingsNavigationDrawerItems = () => { - const { signOut } = useAuth(); - const { t } = useLingui(); - const settingsNavigationItems: SettingsNavigationSection[] = useSettingsNavigationItems(); @@ -28,7 +20,7 @@ export const SettingsNavigationDrawerItems = () => { const getSelectedIndexForSubItems = (subItems: SettingsNavigationItem[]) => { return subItems.findIndex((subItem) => { - const href = getSettingsPath(subItem.path); + const href = subItem.path ? getSettingsPath(subItem.path) : ''; const pathName = resolvePath(href).pathname; return matchPath( @@ -115,13 +107,6 @@ export const SettingsNavigationDrawerItems = () => { ); })} - - - ); }; diff --git a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx index 249dc8420..30cdb1940 100644 --- a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx +++ b/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx @@ -6,6 +6,7 @@ import { IconColorSwatch, IconComponent, IconCurrencyDollar, + IconDoorEnter, IconFlask, IconFunction, IconHierarchy2, @@ -23,6 +24,7 @@ import { SettingsPath } from '@/types/SettingsPath'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; import { SettingsPermissions } from '~/generated/graphql'; +import { useAuth } from '@/auth/hooks/useAuth'; import { currentUserState } from '@/auth/states/currentUserState'; import { billingState } from '@/client-config/states/billingState'; import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState'; @@ -40,7 +42,8 @@ export type SettingsNavigationSection = { export type SettingsNavigationItem = { label: string; - path: SettingsPath; + path?: SettingsPath; + onClick?: () => void; Icon: IconComponent; indentationLevel?: NavigationDrawerItemIndentationLevel; matchSubPages?: boolean; @@ -63,7 +66,7 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => { const featureFlags = useFeatureFlagsMap(); const permissionMap = useSettingsPermissionMap(); - + const { signOut } = useAuth(); return [ { label: t`User`, @@ -193,6 +196,11 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => { path: SettingsPath.Releases, Icon: IconRocket, }, + { + label: t`Logout`, + onClick: signOut, + Icon: IconDoorEnter, + }, ], }, ];