@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
30 lines • 4.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Badge, Button, Divider, Dropdown, DropdownList, Level, LevelItem, MenuToggle, PageSection, Switch, Text, TextContent, Toolbar, ToolbarContent, ToolbarItem, } from "@patternfly/react-core";
import { useState, isValidElement, Fragment, } from "react";
import { useTranslation } from "react-i18next";
import { FormattedLink } from "../../components/external-link/FormattedLink";
import { useHelp, HelpItem } from "../../ui-shared";
import "../../help-urls";
export const ViewHeader = ({ actionsDropdownId, className, titleKey, badges, isDropdownDisabled, subKey, helpUrl, dropdownItems, lowerDropdownMenuTitle, lowerDropdownItems, lowerButton, isEnabled = true, onToggle, divider = true, helpTextKey, isReadOnly = false, }) => {
const { t, i18n } = useTranslation();
const { enabled } = useHelp();
const [isDropdownOpen, setDropdownOpen] = useState(false);
const [isLowerDropdownOpen, setIsLowerDropdownOpen] = useState(false);
const onDropdownToggle = () => {
setDropdownOpen(!isDropdownOpen);
};
const onLowerDropdownToggle = () => {
setIsLowerDropdownOpen(!isLowerDropdownOpen);
};
const toKey = (value) => value.replace(/\s/g, "-");
return (_jsxs(_Fragment, { children: [_jsxs(PageSection, { variant: "light", children: [_jsxs(Level, { hasGutter: true, children: [_jsx(LevelItem, { children: _jsxs(Level, { children: [_jsx(LevelItem, { children: _jsx(TextContent, { className: "pf-v5-u-mr-sm", children: _jsx(Text, { className: className, component: "h1", "data-testid": "view-header", children: i18n.exists(titleKey) ? t(titleKey) : titleKey }) }) }), badges && (_jsx(LevelItem, { children: badges.map((badge, index) => (_jsxs(Fragment, { children: [!isValidElement(badge.text) && (_jsxs(Fragment, { children: [_jsx(Badge, { "data-testid": badge.id, isRead: badge.readonly, children: badge.text }), " "] }, badge.text)), isValidElement(badge.text) && badge.text, " "] }, index))) }))] }) }), _jsx(LevelItem, { children: _jsx(Toolbar, { className: "pf-v5-u-p-0", children: _jsxs(ToolbarContent, { children: [onToggle && (_jsxs(ToolbarItem, { children: [_jsx(Switch, { id: `${toKey(titleKey)}-switch`, "data-testid": `${titleKey}-switch`, label: t("enabled"), labelOff: t("disabled"), className: "pf-v5-u-mr-lg", isDisabled: isReadOnly, isChecked: isEnabled, "aria-label": t("enabled"), onChange: (_event, value) => {
onToggle(value);
} }), helpTextKey && (_jsx(HelpItem, { helpText: t(helpTextKey), fieldLabelId: `${toKey(titleKey)}-switch` }))] })), dropdownItems && (_jsx(ToolbarItem, { children: _jsx(Dropdown, { popperProps: {
position: "right",
}, onOpenChange: onDropdownToggle, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, isDisabled: isDropdownDisabled, id: actionsDropdownId, onClick: onDropdownToggle, "data-testid": "action-dropdown", children: t("action") })), isOpen: isDropdownOpen, children: _jsx(DropdownList, { children: dropdownItems }) }) }))] }) }) })] }), enabled && (_jsx(TextContent, { id: "view-header-subkey", children: _jsxs(Text, { children: [isValidElement(subKey)
? subKey
: subKey
? t(subKey)
: "", helpUrl && (_jsx(FormattedLink, { title: t("learnMore"), href: helpUrl, isInline: true, className: "pf-v5-u-ml-md" }))] }) })), lowerDropdownItems && (_jsx(Dropdown, { className: "keycloak__user-federation__dropdown", onOpenChange: onLowerDropdownToggle, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, onClick: onLowerDropdownToggle, variant: "primary", id: "ufToggleId", children: t(lowerDropdownMenuTitle) })), isOpen: isLowerDropdownOpen, children: _jsx(DropdownList, { children: lowerDropdownItems }) })), lowerButton && (_jsx(Button, { variant: lowerButton.variant, onClick: lowerButton.onClick, "data-testid": "viewHeader-lower-btn", children: lowerButton.lowerButtonTitle }))] }), divider && _jsx(Divider, { component: "div" })] }));
};
//# sourceMappingURL=ViewHeader.js.map