@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
99 lines • 7.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useFetch } from "../ui-shared";
import { Button, Drawer, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DropdownItem, PageSection, PageSectionVariants, Tab, TabTitleText, Tabs, Tooltip, } from "@patternfly/react-core";
import { AngleLeftIcon, TreeIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { GroupBreadCrumbs } from "../components/bread-crumb/GroupBreadCrumbs";
import { PermissionsTab } from "../components/permission-tab/PermissionTab";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAccess } from "../context/access/Access";
import { useRealm } from "../context/realm-context/RealmContext";
import helpUrls from "../help-urls";
import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
import useToggle from "../utils/useToggle";
import { GroupAttributes } from "../groups/GroupAttributes";
import { GroupRoleMapping } from "../groups/GroupRoleMapping";
import { GroupTable } from "../groups/GroupTable";
import { GroupsModal } from "../groups/GroupsModal";
import { Members } from "../groups/Members";
import { useSubGroups } from "../groups/SubGroupsContext";
import { DeleteGroup } from "../groups/components/DeleteGroup";
import { GroupTree } from "../groups/components/GroupTree";
import { getId, getLastId } from "../groups/groupIdUtils";
import { toGroups } from "../groups/routes/Groups";
import "./GroupsSection.css";
export default function GroupsSection() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState(0);
const { subGroups, setSubGroups, currentGroup } = useSubGroups();
const { realm } = useRealm();
const [rename, setRename] = useState();
const [deleteOpen, toggleDeleteOpen] = useToggle();
const navigate = useNavigate();
const location = useLocation();
const id = getLastId(location.pathname);
const [open, toggle] = useToggle(true);
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
const { hasAccess } = useAccess();
const isFeatureEnabled = useIsFeatureEnabled();
const canViewPermissions = isFeatureEnabled(Feature.AdminFineGrainedAuthz) &&
hasAccess("manage-authorization", "manage-users", "manage-clients");
const canManageGroup = hasAccess("manage-users") || ((_b = (_a = currentGroup()) === null || _a === void 0 ? void 0 : _a.access) === null || _b === void 0 ? void 0 : _b.manage);
const canManageRoles = hasAccess("manage-users");
const canViewDetails = hasAccess("query-groups", "view-users") ||
hasAccess("manage-users", "query-groups");
const canViewMembers = hasAccess("view-users") ||
((_d = (_c = currentGroup()) === null || _c === void 0 ? void 0 : _c.access) === null || _d === void 0 ? void 0 : _d.viewMembers) ||
((_f = (_e = currentGroup()) === null || _e === void 0 ? void 0 : _e.access) === null || _f === void 0 ? void 0 : _f.manageMembers);
useFetch(async () => {
const ids = getId(location.pathname);
const isNavigationStateInValid = ids && ids.length > subGroups.length;
if (isNavigationStateInValid) {
const groups = [];
for (const i of ids) {
let group = undefined;
if (i !== "search") {
group = await adminClient.groups.findOne({ id: i });
}
else {
group = { name: t("searchGroups"), id: "search" };
}
if (group) {
groups.push(group);
}
else {
throw new Error(t("notFound"));
}
}
return groups;
}
return [];
}, (groups) => {
if (groups.length)
setSubGroups(groups);
}, [id]);
return (_jsxs(_Fragment, { children: [_jsx(DeleteGroup, { show: deleteOpen, toggleDialog: toggleDeleteOpen, selectedRows: [currentGroup()], refresh: () => {
navigate(toGroups({ realm }));
refresh();
} }), rename && (_jsx(GroupsModal, { id: id, rename: rename, refresh: (group) => {
refresh();
setSubGroups([...subGroups.slice(0, subGroups.length - 1), group]);
}, handleModalToggle: () => setRename(undefined) })), _jsx(PageSection, { variant: PageSectionVariants.light, className: "pf-v5-u-p-0", children: _jsx(Drawer, { isInline: true, isExpanded: open, position: "left", children: _jsx(DrawerContent, { panelContent: _jsx(DrawerPanelContent, { isResizable: true, children: _jsx(DrawerHead, { children: _jsx(GroupTree, { refresh: refresh, canViewDetails: canViewDetails }) }) }), children: _jsxs(DrawerContentBody, { children: [_jsx(Tooltip, { content: open ? t("hide") : t("show"), children: _jsx(Button, { "aria-label": open ? t("hide") : t("show"), variant: "plain", icon: open ? _jsx(AngleLeftIcon, {}) : _jsx(TreeIcon, {}), onClick: toggle }) }), _jsx(GroupBreadCrumbs, {}), _jsx(ViewHeader, { titleKey: !id ? "groups" : (_g = currentGroup()) === null || _g === void 0 ? void 0 : _g.name, subKey: !id ? "groupsDescription" : "", helpUrl: !id ? helpUrls.groupsUrl : "", divider: !id, dropdownItems: id && canManageGroup
? [
_jsx(DropdownItem, { "data-testid": "renameGroupAction", onClick: () => setRename(currentGroup()), children: t("renameGroup") }, "renameGroup"),
_jsx(DropdownItem, { "data-testid": "deleteGroup", onClick: toggleDeleteOpen, children: t("deleteGroup") }, "deleteGroup"),
]
: undefined }), subGroups.length > 0 && (_jsxs(Tabs, { inset: {
default: "insetNone",
md: "insetSm",
xl: "insetLg",
"2xl": "inset2xl",
}, activeKey: activeTab, onSelect: (_, key) => setActiveTab(key), isBox: true, mountOnEnter: true, unmountOnExit: true, children: [_jsx(Tab, { "data-testid": "groups", eventKey: 0, title: _jsx(TabTitleText, { children: t("childGroups") }), children: _jsx(GroupTable, { refresh: refresh }) }), canViewMembers && (_jsx(Tab, { "data-testid": "members", eventKey: 1, title: _jsx(TabTitleText, { children: t("members") }), children: _jsx(Members, {}) })), _jsx(Tab, { "data-testid": "attributes", eventKey: 2, title: _jsx(TabTitleText, { children: t("attributes") }), children: _jsx(GroupAttributes, {}) }), canManageRoles && (_jsx(Tab, { eventKey: 3, "data-testid": "role-mapping-tab", title: _jsx(TabTitleText, { children: t("roleMapping") }), children: _jsx(GroupRoleMapping, { id: id, name: (_h = currentGroup()) === null || _h === void 0 ? void 0 : _h.name }) })), canViewPermissions && (_jsx(Tab, { eventKey: 4, "data-testid": "permissionsTab", title: _jsx(TabTitleText, { children: t("permissions") }), children: _jsx(PermissionsTab, { id: id, type: "groups" }) }))] })), subGroups.length === 0 && _jsx(GroupTable, { refresh: refresh })] }) }) }, key) })] }));
}
//# sourceMappingURL=GroupsSection.js.map