@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
72 lines • 4.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { TextControl, 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 { FormAccess } from "../../components/form/FormAccess";
import { ViewHeader } from "../../components/view-header/ViewHeader";
import { useParams } from "../../utils/useParams";
import useToggle from "../../utils/useToggle";
import { toAuthorizationTab } from "../../clients/routes/AuthenticationTab";
import { DeleteScopeDialog } from "../../clients/authorization/DeleteScopeDialog";
export default function ScopeDetails() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { id, scopeId, realm } = useParams();
const navigate = useNavigate();
const { addAlert, addError } = useAlerts();
const [deleteDialog, toggleDeleteDialog] = useToggle();
const [scope, setScope] = useState();
const form = useForm({
mode: "onChange",
});
const { reset, handleSubmit } = form;
useFetch(async () => {
if (scopeId) {
const scope = await adminClient.clients.getAuthorizationScope({
id,
scopeId,
});
if (!scope) {
throw new Error(t("notFound"));
}
return scope;
}
}, (scope) => {
setScope(scope);
reset({ ...scope });
}, []);
const onSubmit = async (scope) => {
try {
if (scopeId) {
await adminClient.clients.updateAuthorizationScope({ id, scopeId }, scope);
setScope(scope);
}
else {
await adminClient.clients.createAuthorizationScope({ id }, {
name: scope.name,
displayName: scope.displayName,
iconUri: scope.iconUri,
});
navigate(toAuthorizationTab({ realm, clientId: id, tab: "scopes" }));
}
addAlert(t((scopeId ? "update" : "create") + "ScopeSuccess"), AlertVariant.success);
}
catch (error) {
addError("scopeSaveError", error);
}
};
return (_jsxs(_Fragment, { children: [_jsx(DeleteScopeDialog, { clientId: id, open: deleteDialog, toggleDialog: toggleDeleteDialog, selectedScope: scope, refresh: () => navigate(toAuthorizationTab({ realm, clientId: id, tab: "scopes" })) }), _jsx(ViewHeader, { titleKey: scopeId ? scope === null || scope === void 0 ? void 0 : scope.name : t("createAuthorizationScope"), dropdownItems: scopeId
? [
_jsx(DropdownItem, { "data-testid": "delete-resource", onClick: () => toggleDeleteDialog(), children: t("delete") }, "delete"),
]
: undefined }), _jsx(PageSection, { variant: "light", children: _jsx(FormProvider, { ...form, children: _jsxs(FormAccess, { isHorizontal: true, role: "manage-authorization", onSubmit: handleSubmit(onSubmit), children: [_jsx(TextControl, { name: "name", label: t("name"), labelIcon: t("scopeNameHelp"), rules: { required: t("required") } }), _jsx(TextControl, { name: "displayName", label: t("displayName"), labelIcon: t("scopeDisplayNameHelp") }), _jsx(TextControl, { name: "iconUri", label: t("iconUri"), labelIcon: t("iconUriHelp") }), _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") }), !scope ? (_jsx(Button, { variant: "link", "data-testid": "cancel", component: (props) => (_jsx(Link, { ...props, to: toAuthorizationTab({
realm,
clientId: id,
tab: "scopes",
}) })), children: t("cancel") })) : (_jsx(Button, { variant: "link", "data-testid": "revert", onClick: () => reset({ ...scope }), children: t("revert") }))] }) })] }) }) })] }));
}
//# sourceMappingURL=ScopeDetails.js.map