UNPKG

@keycloakify/keycloak-admin-ui

Version:
43 lines 3.48 kB
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Avatar, DropdownItem, Masthead, MastheadBrand, MastheadContent, MastheadToggle, PageToggleButton, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core"; import { BarsIcon } from "@patternfly/react-icons"; import { useTranslation } from "react-i18next"; import { DefaultAvatar } from "../../ui-shared/masthead/DefaultAvatar"; import { KeycloakDropdown } from "../../ui-shared/masthead/KeycloakDropdown"; function loggedInUserName(token, t) { if (!token) { return t("unknownUser"); } const givenName = token.given_name; const familyName = token.family_name; const preferredUsername = token.preferred_username; if (givenName && familyName) { return t("fullName", { givenName, familyName }); } return givenName || familyName || preferredUsername || t("unknownUser"); } const KeycloakMasthead = ({ keycloak, brand: { src, alt, className, ...brandProps }, avatar, features: { hasLogout = true, hasManageAccount = true, hasUsername = true, } = {}, kebabDropdownItems, dropdownItems = [], toolbarItems, ...rest }) => { var _a; const { t } = useTranslation(); const extraItems = []; if (hasManageAccount) { extraItems.push(_jsx(DropdownItem, { onClick: () => keycloak.accountManagement(), children: t("manageAccount") }, "manageAccount")); } if (hasLogout) { extraItems.push(_jsx(DropdownItem, { onClick: () => keycloak.logout(), children: t("signOut") }, "signOut")); } const picture = (_a = keycloak.idTokenParsed) === null || _a === void 0 ? void 0 : _a.picture; return (_jsxs(Masthead, { ...rest, children: [_jsx(MastheadToggle, { children: _jsx(PageToggleButton, { variant: "plain", "aria-label": t("navigation"), children: _jsx(BarsIcon, {}) }) }), _jsx(MastheadBrand, { ...brandProps, children: _jsx("img", { src: src, alt: alt, className: className }) }), _jsx(MastheadContent, { children: _jsx(Toolbar, { children: _jsxs(ToolbarContent, { children: [toolbarItems === null || toolbarItems === void 0 ? void 0 : toolbarItems.map((item, index) => (_jsx(ToolbarItem, { align: { default: "alignRight" }, children: item }, index))), _jsx(ToolbarItem, { visibility: { default: "hidden", md: "visible", }, children: _jsx(KeycloakDropdown, { "data-testid": "options", dropDownItems: [...dropdownItems, extraItems], title: hasUsername ? loggedInUserName(keycloak.idTokenParsed, t) : undefined }) }), _jsx(ToolbarItem, { align: { default: "alignLeft" }, visibility: { md: "hidden", }, children: _jsx(KeycloakDropdown, { "data-testid": "options-kebab", isKebab: true, dropDownItems: [ ...(kebabDropdownItems || dropdownItems), extraItems, ] }) }), _jsx(ToolbarItem, { variant: "overflow-menu", align: { default: "alignRight" }, className: "pf-v5-u-m-0-on-lg", children: picture || (avatar === null || avatar === void 0 ? void 0 : avatar.src) ? (_jsx(Avatar, { src: picture, alt: t("avatar"), ...avatar })) : (_jsx(DefaultAvatar, { ...avatar })) })] }) }) })] })); }; export default KeycloakMasthead; //# sourceMappingURL=Masthead.js.map