@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
192 lines • 10 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useAlerts, useFetch } from "../ui-shared";
import { AlertVariant, ButtonVariant, DropdownItem, PageSection, Tab, TabTitleText, } from "@patternfly/react-core";
import { useState } from "react";
import { FormProvider, useForm, useWatch, } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useMatch, useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { toClient } from "../clients/routes/Client";
import { ClientRoleRoute, toClientRole, } from "../clients/routes/ClientRole";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { AttributesForm, } from "../components/key-value-form/AttributeForm";
import { arrayToKeyValue, keyValueToArray, } from "../components/key-value-form/key-value-convert";
import { KeycloakSpinner } from "../ui-shared";
import { PermissionsTab } from "../components/permission-tab/PermissionTab";
import { RoleForm } from "../components/role-form/RoleForm";
import { AddRoleMappingModal } from "../components/role-mapping/AddRoleMappingModal";
import { RoleMapping } from "../components/role-mapping/RoleMapping";
import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAccess } from "../context/access/Access";
import { useRealm } from "../context/realm-context/RealmContext";
import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";
import { useParams } from "../utils/useParams";
import { UsersInRoleTab } from "../realm-roles/UsersInRoleTab";
import { RealmRoleRoute, toRealmRole } from "../realm-roles/routes/RealmRole";
import { toRealmRoles } from "../realm-roles/routes/RealmRoles";
export default function RealmRoleTabs() {
const { adminClient } = useAdminClient();
const isFeatureEnabled = useIsFeatureEnabled();
const { t } = useTranslation();
const form = useForm({
mode: "onChange",
});
const { control, reset, setValue } = form;
const navigate = useNavigate();
const { id, clientId } = useParams();
const { realm: realmName, realmRepresentation: realm } = useRealm();
const [key, setKey] = useState(0);
const [attributes, setAttributes] = useState();
const refresh = () => setKey(key + 1);
const { addAlert, addError } = useAlerts();
const { hasAccess } = useAccess();
const canViewPermissionsTab = hasAccess("query-clients", "manage-authorization");
const [canManageClientRole, setCanManageClientRole] = useState(false);
const [open, setOpen] = useState(false);
const convert = (role) => {
const { attributes, ...rest } = role;
return {
attributes: arrayToKeyValue(attributes),
...rest,
};
};
const roleName = useWatch({
control,
defaultValue: undefined,
name: "name",
});
const composites = useWatch({
control,
defaultValue: false,
name: "composite",
});
useFetch(async () => adminClient.roles.findOneById({ id }), (role) => {
if (!role) {
throw new Error(t("notFound"));
}
const convertedRole = convert(role);
reset(convertedRole);
setAttributes(convertedRole.attributes);
}, [key]);
useFetch(async () => adminClient.clients.findOne({ id: clientId }), (client) => {
var _a;
if (clientId)
setCanManageClientRole((_a = client === null || client === void 0 ? void 0 : client.access) === null || _a === void 0 ? void 0 : _a.manage);
}, []);
const onSubmit = async (formValues) => {
var _a;
try {
const { attributes, ...rest } = formValues;
const roleRepresentation = rest;
roleRepresentation.name = (_a = roleRepresentation.name) === null || _a === void 0 ? void 0 : _a.trim();
roleRepresentation.attributes = keyValueToArray(attributes);
if (!clientId) {
await adminClient.roles.updateById({ id }, roleRepresentation);
}
else {
await adminClient.clients.updateRole({ id: clientId, roleName: formValues.name }, roleRepresentation);
}
setAttributes(attributes);
addAlert(t("roleSaveSuccess"), AlertVariant.success);
}
catch (error) {
addError("roleSaveError", error);
}
};
const realmRoleMatch = useMatch(RealmRoleRoute.path);
const clientRoleMatch = useMatch(ClientRoleRoute.path);
const toOverview = () => {
if (realmRoleMatch) {
return toRealmRoles({ realm: realmName });
}
if (clientRoleMatch) {
return toClient({
realm: realmName,
clientId: clientRoleMatch.params.clientId,
tab: "roles",
});
}
throw new Error("Roles overview route could not be determined.");
};
const toTab = (tab) => {
if (realmRoleMatch) {
return toRealmRole({
realm: realmName,
id,
tab,
});
}
if (clientRoleMatch) {
return toClientRole({
realm: realmName,
id,
clientId: clientRoleMatch.params.clientId,
tab: tab,
});
}
throw new Error("Route could not be determined.");
};
const useTab = (tab) => useRoutableTab(toTab(tab));
const detailsTab = useTab("details");
const associatedRolesTab = useTab("associated-roles");
const attributesTab = useTab("attributes");
const usersInRoleTab = useTab("users-in-role");
const permissionsTab = useTab("permissions");
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "roleDeleteConfirm",
messageKey: t("roleDeleteConfirmDialog", {
selectedRoleName: roleName || t("createRole"),
}),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
if (!clientId) {
await adminClient.roles.delById({ id });
}
else {
await adminClient.clients.delRole({
id: clientId,
roleName: roleName,
});
}
addAlert(t("roleDeletedSuccess"), AlertVariant.success);
navigate(toOverview());
}
catch (error) {
addError("roleDeleteError", error);
}
},
});
const addComposites = async (composites) => {
try {
await adminClient.roles.createComposite({ roleId: id, realm: realm.realm }, composites);
refresh();
navigate(toTab("associated-roles"));
addAlert(t("addAssociatedRolesSuccess"), AlertVariant.success);
}
catch (error) {
addError("addAssociatedRolesError", error);
}
};
const isDefaultRole = (name) => (realm === null || realm === void 0 ? void 0 : realm.defaultRole) && realm.defaultRole.name === name;
if (!realm) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), open && (_jsx(AddRoleMappingModal, { id: id, type: "roles", name: roleName, onAssign: (rows) => addComposites(rows.map((r) => r.role)), onClose: () => setOpen(false) })), _jsx(ViewHeader, { titleKey: roleName, badges: [
{
id: "composite-role-badge",
text: composites ? t("composite") : "",
readonly: true,
},
], actionsDropdownId: "roles-actions-dropdown", dropdownItems: [
_jsx(DropdownItem, { component: "button", onClick: () => {
toggleDeleteDialog();
}, children: t("deleteRole") }, "delete-role"),
], divider: false }), _jsx(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: _jsx(FormProvider, { ...form, children: _jsxs(RoutableTabs, { isBox: true, mountOnEnter: true, defaultLocation: toTab("details"), children: [_jsx(Tab, { title: _jsx(TabTitleText, { children: t("details") }), ...detailsTab, children: _jsx(RoleForm, { form: form, onSubmit: onSubmit, role: clientRoleMatch ? "manage-clients" : "manage-realm", cancelLink: clientRoleMatch
? toClient({ realm: realmName, clientId, tab: "roles" })
: toRealmRoles({ realm: realmName }), editMode: true }) }), _jsx(Tab, { "data-testid": "associatedRolesTab", title: _jsx(TabTitleText, { children: t("associatedRolesText") }), ...associatedRolesTab, children: _jsx(RoleMapping, { name: roleName, id: id, type: "roles", isManager: true, save: (rows) => addComposites(rows.map((r) => r.role)) }) }), !isDefaultRole(roleName) && (_jsx(Tab, { "data-testid": "attributesTab", className: "kc-attributes-tab", title: _jsx(TabTitleText, { children: t("attributes") }), ...attributesTab, children: _jsx(AttributesForm, { form: form, save: onSubmit, fineGrainedAccess: canManageClientRole, reset: () => setValue("attributes", attributes, { shouldDirty: false }) }) })), !isDefaultRole(roleName) && (_jsx(Tab, { title: _jsx(TabTitleText, { children: t("usersInRole") }), ...usersInRoleTab, children: _jsx(UsersInRoleTab, { "data-cy": "users-in-role-tab" }) })), isFeatureEnabled(Feature.AdminFineGrainedAuthz) &&
canViewPermissionsTab && (_jsx(Tab, { title: _jsx(TabTitleText, { children: t("permissions") }), ...permissionsTab, children: _jsx(PermissionsTab, { id: id, type: "roles" }) }))] }) }) })] }));
}
//# sourceMappingURL=RealmRoleTabs.js.map