@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
139 lines • 7.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useAlerts, useFetch } from "../../../ui-shared";
import { ActionGroup, AlertVariant, Button, ButtonVariant, DropdownItem, PageSection, } from "@patternfly/react-core";
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useAdminClient } from "../../../admin-client";
import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../../../components/form/FormAccess";
import { KeycloakSpinner } from "../../../ui-shared";
import { ViewHeader } from "../../../components/view-header/ViewHeader";
import { useParams } from "../../../utils/useParams";
import { toAuthorizationTab } from "../../../clients/routes/AuthenticationTab";
import { toPolicyDetails, } from "../../../clients/routes/PolicyDetails";
import { Aggregate } from "../../../clients/authorization/policy/Aggregate";
import { Client } from "../../../clients/authorization/policy/Client";
import { ClientScope } from "../../../clients/authorization/policy/ClientScope";
import { Group } from "../../../clients/authorization/policy/Group";
import { JavaScript } from "../../../clients/authorization/policy/JavaScript";
import { LogicSelector } from "../../../clients/authorization/policy/LogicSelector";
import { NameDescription } from "../../../clients/authorization/policy/NameDescription";
import { Regex } from "../../../clients/authorization/policy/Regex";
import { Role } from "../../../clients/authorization/policy/Role";
import { Time } from "../../../clients/authorization/policy/Time";
import { User } from "../../../clients/authorization/policy/User";
import "./policy-details.css";
const COMPONENTS = {
aggregate: Aggregate,
client: Client,
user: User,
"client-scope": ClientScope,
group: Group,
regex: Regex,
role: Role,
time: Time,
js: JavaScript,
};
export const isValidComponentType = (value) => value in COMPONENTS;
export default function PolicyDetails() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { id, realm, policyId, policyType } = useParams();
const navigate = useNavigate();
const form = useForm();
const { reset, handleSubmit } = form;
const { addAlert, addError } = useAlerts();
const [policy, setPolicy] = useState();
const isDisabled = policyType === "js";
useFetch(async () => {
if (policyId) {
const result = await Promise.all([
adminClient.clients.findOnePolicy({
id,
type: policyType,
policyId,
}),
adminClient.clients.getAssociatedPolicies({
id,
permissionId: policyId,
}),
]);
if (!result[0]) {
throw new Error(t("notFound"));
}
return {
policy: result[0],
policies: result[1].map((p) => p.id),
};
}
return {};
}, ({ policy, policies }) => {
reset({ ...policy, policies });
setPolicy(policy);
}, [id, policyType, policyId]);
const onSubmit = async (policy) => {
var _a, _b, _c;
// remove entries that only have the boolean set and no id
policy.groups = (_a = policy.groups) === null || _a === void 0 ? void 0 : _a.filter((g) => g.id);
policy.clientScopes = (_b = policy.clientScopes) === null || _b === void 0 ? void 0 : _b.filter((c) => c.id);
policy.roles = (_c = policy.roles) === null || _c === void 0 ? void 0 : _c.filter((r) => r.id).map((r) => ({ ...r, required: r.required || false }));
try {
if (policyId) {
await adminClient.clients.updatePolicy({ id, type: policyType, policyId }, policy);
}
else {
const result = await adminClient.clients.createPolicy({ id, type: policyType }, policy);
navigate(toPolicyDetails({
realm,
id,
policyType,
policyId: result.id,
}));
}
addAlert(t((policyId ? "update" : "create") + "PolicySuccess"), AlertVariant.success);
}
catch (error) {
addError("policySaveError", error);
}
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deletePolicy",
messageKey: "deletePolicyConfirm",
continueButtonLabel: "confirm",
onConfirm: async () => {
try {
await adminClient.clients.delPolicy({
id,
policyId,
});
addAlert(t("policyDeletedSuccess"), AlertVariant.success);
navigate(toAuthorizationTab({ realm, clientId: id, tab: "policies" }));
}
catch (error) {
addError("policyDeletedError", error);
}
},
});
if (policyId && !policy) {
return _jsx(KeycloakSpinner, {});
}
function getComponentType() {
return isValidComponentType(policyType)
? COMPONENTS[policyType]
: COMPONENTS["js"];
}
const ComponentType = getComponentType();
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), _jsx(ViewHeader, { titleKey: policyId ? policy === null || policy === void 0 ? void 0 : policy.name : t("createPolicyOfType", { policyType }), dropdownItems: policyId
? [
_jsx(DropdownItem, { "data-testid": "delete-policy", onClick: () => toggleDeleteDialog(), children: t("delete") }, "delete"),
]
: undefined }), _jsx(PageSection, { variant: "light", children: _jsxs(FormAccess, { isHorizontal: true, onSubmit: handleSubmit(onSubmit), role: "anyone" // if you get this far it means you have access
, children: [_jsxs(FormProvider, { ...form, children: [_jsx(NameDescription, { isDisabled: isDisabled }), _jsx(ComponentType, {}), _jsx(LogicSelector, { isDisabled: isDisabled })] }), _jsx(ActionGroup, { children: _jsxs("div", { className: "pf-v5-u-mt-md", children: [_jsx(Button, { isDisabled: isDisabled, variant: ButtonVariant.primary, className: "pf-v5-u-mr-md", type: "submit", "data-testid": "save", children: t("save") }), _jsx(Button, { variant: "link", "data-testid": "cancel", component: (props) => (_jsx(Link, { ...props, to: toAuthorizationTab({
realm,
clientId: id,
tab: "policies",
}) })), children: t("cancel") })] }) })] }) })] }));
}
//# sourceMappingURL=PolicyDetails.js.map