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

Parkreiner · web-flow · commit 8b9763dd2c5d · 2025-01-10T09:58:42.000-05:00
## Changes made
- Updated links in the deployment settings page to ensure that they're
highlighted properly
- Updated comment about previous PR to make sure it's clear why we
needed a workaround.
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
@@ -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}
diff --git a/site/src/modules/management/DeploymentSidebarView.tsx b/site/src/modules/management/DeploymentSidebarView.tsx
@@ -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>
 	);
