@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
106 lines • 7.46 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { HelpItem, TextControl, useAlerts, useFetch, } from "../../ui-shared";
import { ActionGroup, Alert, AlertVariant, Button, ButtonVariant, DropdownItem, FormGroup, 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 { DefaultSwitchControl } from "../../components/SwitchControl";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { FormAccess } from "../../components/form/FormAccess";
import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
import { KeycloakSpinner } from "../../ui-shared";
import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
import { ViewHeader } from "../../components/view-header/ViewHeader";
import { useAccess } from "../../context/access/Access";
import { convertFormValuesToObject, convertToFormValues } from "../../util";
import { useParams } from "../../utils/useParams";
import { toAuthorizationTab } from "../../clients/routes/AuthenticationTab";
import { toResourceDetails } from "../../clients/routes/Resource";
import { ScopePicker } from "../../clients/authorization/ScopePicker";
import "./resource-details.css";
export default function ResourceDetails() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const [client, setClient] = useState();
const [resource, setResource] = useState();
const [permissions, setPermission] = useState();
const { addAlert, addError } = useAlerts();
const form = useForm({
mode: "onChange",
});
const { setValue, handleSubmit } = form;
const { id, resourceId, realm } = useParams();
const navigate = useNavigate();
const setupForm = (resource = {}) => {
convertToFormValues(resource, setValue);
};
const { hasAccess } = useAccess();
const isDisabled = !hasAccess("manage-authorization");
useFetch(() => Promise.all([
adminClient.clients.findOne({ id }),
resourceId
? adminClient.clients.getResource({ id, resourceId })
: Promise.resolve(undefined),
resourceId
? adminClient.clients.listPermissionsByResource({ id, resourceId })
: Promise.resolve(undefined),
]), ([client, resource, permissions]) => {
if (!client) {
throw new Error(t("notFound"));
}
setClient(client);
setPermission(permissions);
setResource(resource);
setupForm(resource);
}, []);
const submit = async (submitted) => {
const resource = convertFormValuesToObject(submitted);
try {
if (resourceId) {
await adminClient.clients.updateResource({ id, resourceId }, resource);
}
else {
const result = await adminClient.clients.createResource({ id }, resource);
setResource(resource);
navigate(toResourceDetails({ realm, id, resourceId: result._id }));
}
addAlert(t((resourceId ? "update" : "create") + "ResourceSuccess"), AlertVariant.success);
}
catch (error) {
addError("resourceSaveError", error);
}
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteResource",
children: (_jsxs(_Fragment, { children: [t("deleteResourceConfirm"), (permissions === null || permissions === void 0 ? void 0 : permissions.length) !== 0 && (_jsx(Alert, { variant: "warning", isInline: true, isPlain: true, title: t("deleteResourceWarning"), className: "pf-v5-u-pt-lg", children: _jsx("p", { className: "pf-v5-u-pt-xs", children: permissions === null || permissions === void 0 ? void 0 : permissions.map((permission) => (_jsx("strong", { className: "pf-v5-u-pr-md", children: permission.name }, permission.id))) }) }))] })),
continueButtonLabel: "confirm",
onConfirm: async () => {
try {
await adminClient.clients.delResource({
id,
resourceId: resourceId,
});
addAlert(t("resourceDeletedSuccess"), AlertVariant.success);
navigate(toAuthorizationTab({ realm, clientId: id, tab: "resources" }));
}
catch (error) {
addError("resourceDeletedError", error);
}
},
});
if (!client) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), _jsx(ViewHeader, { titleKey: resourceId ? resource === null || resource === void 0 ? void 0 : resource.name : "createResource", dropdownItems: resourceId
? [
_jsx(DropdownItem, { "data-testid": "delete-resource", isDisabled: isDisabled, onClick: () => toggleDeleteDialog(), children: t("delete") }, "delete"),
]
: undefined }), _jsx(PageSection, { variant: "light", children: _jsx(FormProvider, { ...form, children: _jsxs(FormAccess, { isHorizontal: true, role: "manage-authorization", className: "keycloak__resource-details__form", onSubmit: handleSubmit(submit), children: [_jsx(TextControl, { name: resourceId ? "owner.name" : "", label: t("owner"), labelIcon: t("ownerHelp"), defaultValue: client.clientId, readOnly: true }), _jsx(TextControl, { name: "name", label: t("name"), labelIcon: t("resourceNameHelp"), rules: { required: t("required") } }), _jsx(TextControl, { name: "displayName", label: t("displayName"), labelIcon: t("displayNameHelp"), rules: { required: t("required") } }), _jsx(TextControl, { name: "type", label: t("type"), labelIcon: t("resourceDetailsTypeHelp") }), _jsx(FormGroup, { label: t("uris"), fieldId: "uris", labelIcon: _jsx(HelpItem, { helpText: t("urisHelp"), fieldLabelId: "uris" }), children: _jsx(MultiLineInput, { name: "uris", type: "url", "aria-label": t("uris"), addButtonLabel: "addUri" }) }), _jsx(ScopePicker, { clientId: id }), _jsx(TextControl, { name: "icon_uri", label: t("iconUri"), labelIcon: t("iconUriHelp"), type: "url" }), _jsx(DefaultSwitchControl, { name: "ownerManagedAccess", label: t("ownerManagedAccess"), labelIcon: t("ownerManagedAccessHelp") }), _jsx(FormGroup, { hasNoPaddingTop: true, label: t("resourceAttribute"), labelIcon: _jsx(HelpItem, { helpText: t("resourceAttributeHelp"), fieldLabelId: "resourceAttribute" }), fieldId: "resourceAttribute", children: _jsx(KeyValueInput, { name: "attributes", isDisabled: isDisabled }) }), _jsx(ActionGroup, { children: _jsxs("div", { className: "pf-v5-u-mt-md", children: [_jsx(Button, { variant: ButtonVariant.primary, 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: "resources",
}) })), children: t("cancel") })] }) })] }) }) })] }));
}
//# sourceMappingURL=ResourceDetails.js.map