diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index 7799ba0384eeb..880ceecec2265 100644 --- a/site/src/components/Sidebar/Sidebar.tsx +++ b/site/src/components/Sidebar/Sidebar.tsx @@ -61,9 +61,11 @@ export const SettingsSidebarNavItem: FC = ({ 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 ( = ({
{permissions.viewDeploymentValues && ( - General + General )} {permissions.viewAllLicenses && ( - Licenses + Licenses )} {permissions.editDeploymentValues && ( - Appearance + + Appearance + )} {permissions.viewDeploymentValues && ( - User Authentication + + User Authentication + )} {permissions.viewDeploymentValues && ( - + External Authentication )} {/* Not exposing this yet since token exchange is not finished yet. - OAuth2 Applications */} {permissions.viewDeploymentValues && ( - Network + Network )} {permissions.readWorkspaceProxies && ( - + Workspace Proxies )} {permissions.viewDeploymentValues && ( - Security + Security )} {permissions.viewDeploymentValues && ( - Observability + + Observability + )} {permissions.viewAllUsers && ( - Users + Users )} {permissions.viewNotificationTemplate && ( - +
Notifications @@ -102,11 +108,13 @@ const DeploymentSettingsNavigation: FC = ({ )} {permissions.viewOrganizationIDPSyncSettings && ( - + IdP Organization Sync )} - {!isPremium && Premium} + {!isPremium && ( + Premium + )}
);