libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

Fix current page highlight in Account UI sidebar navigation (#30403)

Browse source 
Correctly set the isActive attribute for NavItems
in the PageNav. Also corrects the link for the
"Personal info" page in the content.json (no
double slash)

Fixes #30383

Signed-off-by: René Zeidler <rene.zeidler@gmx.de>
This commit is contained in:
ReneZeidler 2024-06-13 14:38:43 +02:00 committed by GitHub
parent 8f72a77582
commit 8031703228
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/apps/account-ui/public/content.json
View file

@ -1,5 +1,5 @@
[
{ "label": "personalInfo", "path": "/" },
{ "label": "personalInfo", "path": "" },
{
"label": "accountSecurity",
"children": [

17
js/apps/account-ui/src/root/PageNav.tsx
View file

@ -17,7 +17,6 @@ import {
} from "react";
import { useTranslation } from "react-i18next";
import {
To,
matchPath,
useHref,
useLinkClickHandler,
@ -92,7 +91,7 @@ function NavMenuItem({ menuItem }: NavMenuItemProps) {
if ("path" in menuItem) {
return (
<NavLink to={menuItem.path} isActive={isActive}>
<NavLink path={menuItem.path} isActive={isActive}>
{t(menuItem.label)}
</NavLink>
);
@ -116,31 +115,35 @@ function NavMenuItem({ menuItem }: NavMenuItemProps) {
);
}
function getFullUrl(path: string) {
return `${new URL(environment.baseUrl).pathname}${path}`;
}
function matchMenuItem(currentPath: string, menuItem: MenuItem): boolean {
if ("path" in menuItem) {
return !!matchPath(menuItem.path, currentPath);
return !!matchPath(getFullUrl(menuItem.path), currentPath);
}
return menuItem.children.some((child) => matchMenuItem(currentPath, child));
}
type NavLinkProps = {
to: To;
path: string;
isActive: boolean;
};
export const NavLink = ({
to,
path,
isActive,
children,
}: PropsWithChildren<NavLinkProps>) => {
const menuItemPath = `${new URL(environment.baseUrl).pathname}${to}`;
const menuItemPath = getFullUrl(path);
const href = useHref(menuItemPath);
const handleClick = useLinkClickHandler(menuItemPath);
return (
<NavItem
data-testid={to}
data-testid={path}
to={href}
isActive={isActive}
onClick={(event) =>