Skip to content

fix: ensure active Deployment Page nav links are highlighted #16092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 10, 2025
Merged

fix: ensure active Deployment Page nav links are highlighted #16092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions site/src/components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,11 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
href,
end,
}) => {
// useMatch is necessary to verify if the current path matches the href on the initial render of the route
// 2025-01-10: useMatch is a workaround for a bug we encountered when you
// pass a render function to NavLink's className prop, and try to access
// NavLinks's isActive state value for the conditional styling. isActive
// wasn't always evaluating to true when it should be, but useMatch worked
const matchResult = useMatch(href);

return (
<NavLink
end={end}
Expand Down
36 changes: 22 additions & 14 deletions site/src/modules/management/DeploymentSidebarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,57 +56,65 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
<div>
<div className="flex flex-col gap-1">
{permissions.viewDeploymentValues && (
<SidebarNavItem href="general">General</SidebarNavItem>
<SidebarNavItem href="/deployment/general">General</SidebarNavItem>
)}
{permissions.viewAllLicenses && (
<SidebarNavItem href="licenses">Licenses</SidebarNavItem>
<SidebarNavItem href="/deployment/licenses">Licenses</SidebarNavItem>
)}
{permissions.editDeploymentValues && (
<SidebarNavItem href="appearance">Appearance</SidebarNavItem>
<SidebarNavItem href="/deployment/appearance">
Appearance
</SidebarNavItem>
)}
{permissions.viewDeploymentValues && (
<SidebarNavItem href="userauth">User Authentication</SidebarNavItem>
<SidebarNavItem href="/deployment/userauth">
User Authentication
</SidebarNavItem>
)}
{permissions.viewDeploymentValues && (
<SidebarNavItem href="external-auth">
<SidebarNavItem href="/deployment/external-auth">
External Authentication
</SidebarNavItem>
)}
{/* Not exposing this yet since token exchange is not finished yet.
<SidebarNavItem href="oauth2-provider/ap>
<SidebarNavItem href="oauth2-provider/ap">
OAuth2 Applications
</SidebarNavItem>*/}
{permissions.viewDeploymentValues && (
<SidebarNavItem href="network">Network</SidebarNavItem>
<SidebarNavItem href="/deployment/network">Network</SidebarNavItem>
)}
{permissions.readWorkspaceProxies && (
<SidebarNavItem href="workspace-proxies">
<SidebarNavItem href="/deployment/workspace-proxies">
Workspace Proxies
</SidebarNavItem>
)}
{permissions.viewDeploymentValues && (
<SidebarNavItem href="security">Security</SidebarNavItem>
<SidebarNavItem href="/deployment/security">Security</SidebarNavItem>
)}
{permissions.viewDeploymentValues && (
<SidebarNavItem href="observability">Observability</SidebarNavItem>
<SidebarNavItem href="/deployment/observability">
Observability
</SidebarNavItem>
)}
{permissions.viewAllUsers && (
<SidebarNavItem href="users">Users</SidebarNavItem>
<SidebarNavItem href="/deployment/users">Users</SidebarNavItem>
)}
{permissions.viewNotificationTemplate && (
<SidebarNavItem href="notifications">
<SidebarNavItem href="/deployment/notifications">
<div className="flex flex-row items-center gap-2">
<span>Notifications</span>
<FeatureStageBadge contentType="beta" size="sm" />
</div>
</SidebarNavItem>
)}
{permissions.viewOrganizationIDPSyncSettings && (
<SidebarNavItem href="idp-org-sync">
<SidebarNavItem href="/deployment/idp-org-sync">
IdP Organization Sync
</SidebarNavItem>
)}
{!isPremium && <SidebarNavItem href="premium">Premium</SidebarNavItem>}
{!isPremium && (
<SidebarNavItem href="/deployment/premium">Premium</SidebarNavItem>
)}
</div>
</div>
);
Expand Down
Loading