@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
159 lines • 7.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useAlerts, useFetch, useHelp } from "../ui-shared";
import { Alert, AlertVariant, ButtonVariant, DropdownItem, PageSection, Tab, TabTitleText, } from "@patternfly/react-core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { AllClientScopes, ClientScope, changeScope, } from "../components/client-scope/ClientScopeTypes";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { KeycloakSpinner } from "../ui-shared";
import { RoleMapping } from "../components/role-mapping/RoleMapping";
import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useRealm } from "../context/realm-context/RealmContext";
import { convertFormValuesToObject } from "../util";
import { useParams } from "../utils/useParams";
import { MapperList } from "../client-scopes/details/MapperList";
import { ScopeForm } from "../client-scopes/details/ScopeForm";
import { toClientScope, } from "../client-scopes/routes/ClientScope";
import { toClientScopes } from "../client-scopes/routes/ClientScopes";
import { toMapper } from "../client-scopes/routes/Mapper";
export default function EditClientScope() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const navigate = useNavigate();
const { realm } = useRealm();
const { id } = useParams();
const { addAlert, addError } = useAlerts();
const { enabled } = useHelp();
const [clientScope, setClientScope] = useState();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
useFetch(async () => {
const clientScope = await adminClient.clientScopes.findOne({ id });
if (!clientScope) {
throw new Error(t("notFound"));
}
return {
...clientScope,
type: await determineScopeType(clientScope),
};
}, (clientScope) => {
setClientScope(clientScope);
}, [key, id]);
async function determineScopeType(clientScope) {
const defaultScopes = await adminClient.clientScopes.listDefaultClientScopes();
const hasDefaultScope = defaultScopes.find((defaultScope) => defaultScope.name === clientScope.name);
if (hasDefaultScope) {
return ClientScope.default;
}
const optionalScopes = await adminClient.clientScopes.listDefaultOptionalClientScopes();
const hasOptionalScope = optionalScopes.find((optionalScope) => optionalScope.name === clientScope.name);
return hasOptionalScope ? ClientScope.optional : AllClientScopes.none;
}
const useTab = (tab) => useRoutableTab(toClientScope({
realm,
id,
tab,
}));
const settingsTab = useTab("settings");
const mappersTab = useTab("mappers");
const scopeTab = useTab("scope");
const onSubmit = async (formData) => {
var _a;
const clientScope = convertFormValuesToObject({
...formData,
name: (_a = formData.name) === null || _a === void 0 ? void 0 : _a.trim().replace(/ /g, "_"),
});
try {
await adminClient.clientScopes.update({ id }, clientScope);
await changeScope(adminClient, { ...clientScope, id }, clientScope.type);
addAlert(t("updateSuccessClientScope"), AlertVariant.success);
}
catch (error) {
addError("updateErrorClientScope", error);
}
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("deleteClientScope", {
count: 1,
name: clientScope === null || clientScope === void 0 ? void 0 : clientScope.name,
}),
messageKey: "deleteConfirmClientScopes",
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.clientScopes.del({ id });
addAlert(t("deletedSuccessClientScope"), AlertVariant.success);
navigate(toClientScopes({ realm }));
}
catch (error) {
addError("deleteErrorClientScope", error);
}
},
});
const assignRoles = async (rows) => {
try {
const realmRoles = rows
.filter((row) => row.client === undefined)
.map((row) => row.role)
.flat();
await adminClient.clientScopes.addRealmScopeMappings({
id,
}, realmRoles);
await Promise.all(rows
.filter((row) => row.client !== undefined)
.map((row) => adminClient.clientScopes.addClientScopeMappings({
id,
client: row.client.id,
}, [row.role])));
addAlert(t("roleMappingUpdatedSuccess"), AlertVariant.success);
}
catch (error) {
addError("roleMappingUpdatedError", error);
}
};
const addMappers = async (mappers) => {
if (!Array.isArray(mappers)) {
const mapper = mappers;
navigate(toMapper({
realm,
id: clientScope.id,
mapperId: mapper.id,
}));
}
else {
try {
await adminClient.clientScopes.addMultipleProtocolMappers({ id: clientScope.id }, mappers);
refresh();
addAlert(t("mappingCreatedSuccess"), AlertVariant.success);
}
catch (error) {
addError("mappingCreatedError", error);
}
}
};
const onDelete = async (mapper) => {
try {
await adminClient.clientScopes.delProtocolMapper({
id: clientScope.id,
mapperId: mapper.id,
});
addAlert(t("mappingDeletedSuccess"), AlertVariant.success);
refresh();
}
catch (error) {
addError("mappingDeletedError", error);
}
return true;
};
if (!clientScope) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), _jsx(ViewHeader, { titleKey: clientScope.name, dropdownItems: [
_jsx(DropdownItem, { onClick: toggleDeleteDialog, children: t("delete") }, "delete"),
], badges: [{ text: clientScope.protocol }], divider: false }), _jsx(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: _jsxs(RoutableTabs, { isBox: true, children: [_jsx(Tab, { id: "settings", "data-testid": "settings", title: _jsx(TabTitleText, { children: t("settings") }), ...settingsTab, children: _jsx(PageSection, { variant: "light", children: _jsx(ScopeForm, { save: onSubmit, clientScope: clientScope }) }) }), _jsx(Tab, { id: "mappers", "data-testid": "mappers", title: _jsx(TabTitleText, { children: t("mappers") }), ...mappersTab, children: _jsx(MapperList, { model: clientScope, onAdd: addMappers, onDelete: onDelete, detailLink: (id) => toMapper({ realm, id: clientScope.id, mapperId: id }) }) }), _jsxs(Tab, { id: "scope", "data-testid": "scopeTab", title: _jsx(TabTitleText, { children: t("scope") }), ...scopeTab, children: [enabled && (_jsx(PageSection, { children: _jsx(Alert, { variant: "info", isInline: true, title: t("clientScopesRolesScope"), component: "h2" }) })), _jsx(RoleMapping, { id: clientScope.id, name: clientScope.name, type: "clientScopes", save: assignRoles })] })] }) })] }));
}
//# sourceMappingURL=EditClientScope.js.map