@keycloakify/keycloak-admin-ui/PageHeader.js

Repackaged Keycloak Admin UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar, Divider, Dropdown, DropdownItem, DropdownList, Masthead, MastheadBrand, MastheadContent, MastheadToggle, MenuToggle, PageToggleButton, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
import { BarsIcon, EllipsisVIcon, HelpIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useHref } from "react-router-dom";
import { useEnvironment, useHelp } from "./ui-shared";
import { HelpHeader } from "./components/help-enabler/HelpHeader";
import { useRealm } from "./context/realm-context/RealmContext";
import { useWhoAmI } from "./context/whoami/WhoAmI";
import { toDashboard } from "./dashboard/routes/Dashboard";
const ManageAccountDropdownItem = () => {
    const { keycloak } = useEnvironment();
    const { t } = useTranslation();
    return (_jsx(DropdownItem, { id: "manage-account", onClick: () => keycloak.accountManagement(), children: t("manageAccount") }, "manage account"));
};
const SignOutDropdownItem = () => {
    const { keycloak } = useEnvironment();
    const { t } = useTranslation();
    return (_jsx(DropdownItem, { id: "sign-out", onClick: () => keycloak.logout({ redirectUri: "" }), children: t("signOut") }, "sign out"));
};
const ServerInfoDropdownItem = () => {
    const { realm } = useRealm();
    const { t } = useTranslation();
    return (_jsx(DropdownItem, { component: (props) => _jsx(Link, { ...props, to: toDashboard({ realm }) }), children: t("realmInfo") }, "server info"));
};
const HelpDropdownItem = () => {
    const { t } = useTranslation();
    const { enabled, toggleHelp } = useHelp();
    return (_jsx(DropdownItem, { "data-testId": "helpIcon", icon: _jsx(HelpIcon, {}), onClick: toggleHelp, children: enabled ? t("helpEnabled") : t("helpDisabled") }));
};
const kebabDropdownItems = [
    _jsx(ManageAccountDropdownItem, {}, "kebab Manage Account"),
    _jsx(ServerInfoDropdownItem, {}, "kebab Server Info"),
    _jsx(HelpDropdownItem, {}, "kebab Help"),
    _jsx(Divider, { component: "li" }, "kebab sign out separator"),
    _jsx(SignOutDropdownItem, {}, "kebab Sign out"),
];
const userDropdownItems = [
    _jsx(ManageAccountDropdownItem, {}, "Manage Account"),
    _jsx(ServerInfoDropdownItem, {}, "Server info"),
    _jsx(Divider, { component: "li" }, "sign out separator"),
    _jsx(SignOutDropdownItem, {}, "Sign out"),
];
const KebabDropdown = () => {
    const [isDropdownOpen, setDropdownOpen] = useState(false);
    return (_jsx(Dropdown, { isPlain: true, onOpenChange: (isOpen) => setDropdownOpen(isOpen), toggle: (ref) => (_jsx(MenuToggle, { id: "user-dropdown-kebab", ref: ref, variant: "plain", onClick: () => setDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen, children: _jsx(EllipsisVIcon, {}) })), isOpen: isDropdownOpen, children: _jsx(DropdownList, { children: kebabDropdownItems }) }));
};
const UserDropdown = () => {
    const { whoAmI } = useWhoAmI();
    const [isDropdownOpen, setDropdownOpen] = useState(false);
    return (_jsx(Dropdown, { isPlain: true, isOpen: isDropdownOpen, onOpenChange: (isOpen) => setDropdownOpen(isOpen), toggle: (ref) => (_jsx(MenuToggle, { id: "user-dropdown", ref: ref, onClick: () => setDropdownOpen(!isDropdownOpen), children: whoAmI.getDisplayName() })), children: _jsx(DropdownList, { children: userDropdownItems }) }));
};
export const Header = () => {
    var _a;
    const { environment, keycloak } = useEnvironment();
    const { t } = useTranslation();
    const { realm } = useRealm();
    const picture = (_a = keycloak.tokenParsed) === null || _a === void 0 ? void 0 : _a.picture;
    const logo = environment.logo ? environment.logo : "/logo.svg";
    const url = useHref(toDashboard({ realm }));
    const logoUrl = environment.logoUrl ? environment.logoUrl : url;
    return (_jsxs(Masthead, { children: [_jsx(MastheadToggle, { children: _jsx(PageToggleButton, { variant: "plain", "aria-label": t("navigation"), children: _jsx(BarsIcon, {}) }) }), _jsx(MastheadBrand, { href: logoUrl, children: _jsx("img", { src: environment.resourceUrl + logo, id: "masthead-logo", alt: t("logo"), "aria-label": t("logo"), className: "keycloak__pageheader_brand" }) }), _jsx(MastheadContent, { children: _jsx(Toolbar, { children: _jsxs(ToolbarContent, { children: [_jsx(ToolbarItem, { align: { default: "alignRight" }, visibility: {
                                    default: "hidden",
                                    md: "visible",
                                }, children: _jsx(HelpHeader, {}) }), _jsx(ToolbarItem, { align: { default: "alignLeft" }, visibility: {
                                    md: "hidden",
                                }, children: _jsx(KebabDropdown, {}) }), _jsx(ToolbarItem, { visibility: {
                                    default: "hidden",
                                    md: "visible",
                                }, children: _jsx(UserDropdown, {}) }), _jsx(ToolbarItem, { variant: "overflow-menu", align: { default: "alignRight" }, className: "pf-v5-u-m-0-on-lg", children: _jsx(Avatar, { src: picture || environment.resourceUrl + "/img_avatar.svg", alt: t("avatarImage"), "aria-label": t("avatarImage") }) })] }) }) })] }));
};
//# sourceMappingURL=PageHeader.js.map