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

removed use of deprecated page header (#31467)

Browse source 
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-07-24 16:57:43 +02:00 committed by GitHub
parent b769e65641
commit 50a8c01370
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 64 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
js/apps/account-ui/src/root/Header.tsx
View file

@ -49,7 +49,6 @@ export const Header = () => {
data-testid="page-header"
keycloak={keycloak}
features={{ hasManageAccount: false }}
showNavToggle
brand={{
href: indexHref,
src: joinPath(environment.resourceUrl, brandImage),

112
js/libs/ui-shared/src/masthead/Masthead.tsx
View file

@ -1,17 +1,19 @@
import {
Avatar,
AvatarProps,
Brand,
BrandProps,
DropdownItem,
Masthead,
MastheadBrand,
MastheadBrandProps,
MastheadContent,
MastheadMainProps,
MastheadToggle,
PageToggleButton,
Toolbar,
ToolbarContent,
ToolbarItem,
} from "@patternfly/react-core";
import {
PageHeader,
PageHeaderProps,
PageHeaderTools,
PageHeaderToolsGroup,
PageHeaderToolsItem,
} from "@patternfly/react-core/deprecated";
import { BarsIcon } from "@patternfly/react-icons";
import { TFunction } from "i18next";
import Keycloak, { type KeycloakTokenParsed } from "keycloak-js";
import { ReactNode } from "react";
@ -38,11 +40,9 @@ function loggedInUserName(
return givenName || familyName || preferredUsername || t("unknownUser");
}
type BrandLogo = BrandProps & {
href: string;
};
type BrandLogo = MastheadBrandProps;
type KeycloakMastheadProps = PageHeaderProps & {
type KeycloakMastheadProps = MastheadMainProps & {
keycloak: Keycloak;
brand: BrandLogo;
avatar?: AvatarProps;
@ -58,7 +58,7 @@ type KeycloakMastheadProps = PageHeaderProps & {
const KeycloakMasthead = ({
keycloak,
brand: { href: brandHref, ...brandProps },
brand: { src, alt, className, ...brandProps },
avatar,
features: {
hasLogout = true,
@ -92,14 +92,41 @@ const KeycloakMasthead = ({
const picture = keycloak.idTokenParsed?.picture;
return (
<PageHeader
{...rest}
logo={<Brand {...brandProps} />}
logoProps={{ href: brandHref }}
headerTools={
<PageHeaderTools>
<PageHeaderToolsGroup>
<PageHeaderToolsItem
<Masthead {...rest}>
<MastheadToggle>
<PageToggleButton variant="plain" aria-label={t("navigation")}>
<BarsIcon />
</PageToggleButton>
</MastheadToggle>
<MastheadBrand {...brandProps}>
<img src={src} alt={alt} className={className} />
</MastheadBrand>
<MastheadContent>
<Toolbar>
<ToolbarContent>
{toolbarItems?.map((item, index) => (
<ToolbarItem key={index} align={{ default: "alignRight" }}>
{item}
</ToolbarItem>
))}
<ToolbarItem
visibility={{
default: "hidden",
md: "visible",
}} /** this user dropdown is hidden on mobile sizes */
>
<KeycloakDropdown
data-testid="options"
dropDownItems={[...dropdownItems, extraItems]}
title={
hasUsername
? loggedInUserName(keycloak.idTokenParsed, t)
: undefined
}
/>
</ToolbarItem>
<ToolbarItem
align={{ default: "alignLeft" }}
visibility={{
md: "hidden",
}}
@ -112,33 +139,22 @@ const KeycloakMasthead = ({
extraItems,
]}
/>
</PageHeaderToolsItem>
<PageHeaderToolsItem>{toolbarItems}</PageHeaderToolsItem>
<PageHeaderToolsItem
visibility={{
default: "hidden",
md: "visible",
}}
</ToolbarItem>
<ToolbarItem
variant="overflow-menu"
align={{ default: "alignRight" }}
className="pf-v5-u-m-0-on-lg"
>
<KeycloakDropdown
data-testid="options"
dropDownItems={[...dropdownItems, extraItems]}
title={
hasUsername
? loggedInUserName(keycloak.idTokenParsed, t)
: undefined
}
/>
</PageHeaderToolsItem>
</PageHeaderToolsGroup>
{picture || avatar?.src ? (
<Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
) : (
<DefaultAvatar {...avatar} />
)}
</PageHeaderTools>
}
/>
{picture || avatar?.src ? (
<Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
) : (
<DefaultAvatar {...avatar} />
)}
</ToolbarItem>
</ToolbarContent>
</Toolbar>
</MastheadContent>
</Masthead>
);
};