@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
146 lines • 11.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { HelpItem, KeycloakDataTable, KeycloakSelect, SelectVariant, useFetch, useHelp, } from "../../ui-shared";
import { ClipboardCopy, Form, FormGroup, Grid, GridItem, PageSection, SelectOption, Split, SplitItem, Tab, TabContent, Tabs, TabTitleText, Text, TextContent, } from "@patternfly/react-core";
import { QuestionCircleIcon } from "@patternfly/react-icons";
import { useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { UserSelect } from "../../components/users/UserSelect";
import { useAccess } from "../../context/access/Access";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { prettyPrintJSON } from "../../util";
import { GeneratedCodeTab } from "../../clients/scopes/GeneratedCodeTab";
import "./evaluate.css";
const ProtocolMappers = ({ protocolMappers, }) => {
const [key, setKey] = useState(0);
useEffect(() => {
setKey(key + 1);
}, [protocolMappers]);
return (_jsx(KeycloakDataTable, { loader: () => Promise.resolve(protocolMappers), ariaLabelKey: "effectiveProtocolMappers", searchPlaceholderKey: "searchForProtocol", "data-testid": "effective-protocol-mappers", columns: [
{
name: "mapperName",
displayKey: "name",
},
{
name: "containerName",
displayKey: "parentClientScope",
},
{
name: "type.category",
displayKey: "category",
},
{
name: "type.priority",
displayKey: "priority",
},
] }, key));
};
const EffectiveRoles = ({ effectiveRoles, }) => {
const [key, setKey] = useState(0);
useEffect(() => {
setKey(key + 1);
}, [effectiveRoles]);
return (_jsx(KeycloakDataTable, { loader: () => Promise.resolve(effectiveRoles), ariaLabelKey: "effectiveRoleScopeMappings", searchPlaceholderKey: "searchForRole", "data-testid": "effective-role-scope-mappings", columns: [
{
name: "name",
displayKey: "role",
},
{
name: "containerId",
displayKey: "origin",
},
] }, key));
};
export const EvaluateScopes = ({ clientId, protocol }) => {
const { adminClient } = useAdminClient();
const prefix = "openid";
const { t } = useTranslation();
const { enabled } = useHelp();
const { realm } = useRealm();
const mapperTypes = useServerInfo().protocolMapperTypes[protocol];
const [selectableScopes, setSelectableScopes] = useState([]);
const [isScopeOpen, setIsScopeOpen] = useState(false);
const [selected, setSelected] = useState([prefix]);
const [activeTab, setActiveTab] = useState(0);
const [key, setKey] = useState("");
const refresh = () => setKey(`${new Date().getTime()}`);
const [effectiveRoles, setEffectiveRoles] = useState([]);
const [protocolMappers, setProtocolMappers] = useState([]);
const [accessToken, setAccessToken] = useState("");
const [userInfo, setUserInfo] = useState("");
const [idToken, setIdToken] = useState("");
const tabContent1 = useRef(null);
const tabContent2 = useRef(null);
const tabContent3 = useRef(null);
const tabContent4 = useRef(null);
const tabContent5 = useRef(null);
const form = useForm();
const { hasAccess } = useAccess();
const hasViewUsers = hasAccess("view-users");
useFetch(() => adminClient.clients.listOptionalClientScopes({ id: clientId }), (optionalClientScopes) => setSelectableScopes(optionalClientScopes), []);
useFetch(async () => {
const scope = selected.join(" ");
const effectiveRoles = await adminClient.clients.evaluatePermission({
id: clientId,
roleContainer: realm,
scope,
type: "granted",
});
const mapperList = (await adminClient.clients.evaluateListProtocolMapper({
id: clientId,
scope,
}));
return {
mapperList,
effectiveRoles,
};
}, ({ mapperList, effectiveRoles }) => {
setEffectiveRoles(effectiveRoles);
mapperList.map((mapper) => {
mapper.type = mapperTypes.find((type) => type.id === mapper.protocolMapper);
});
setProtocolMappers(mapperList);
refresh();
}, [selected]);
useFetch(async () => {
const scope = selected.join(" ");
const user = form.getValues("user");
if (!user)
return [];
return await Promise.all([
adminClient.clients.evaluateGenerateAccessToken({
id: clientId,
userId: user[0],
scope,
}),
adminClient.clients.evaluateGenerateUserInfo({
id: clientId,
userId: user[0],
scope,
}),
adminClient.clients.evaluateGenerateIdToken({
id: clientId,
userId: user[0],
scope,
}),
]);
}, ([accessToken, userInfo, idToken]) => {
setAccessToken(prettyPrintJSON(accessToken));
setUserInfo(prettyPrintJSON(userInfo));
setIdToken(prettyPrintJSON(idToken));
}, [form.getValues("user"), selected]);
return (_jsxs(_Fragment, { children: [_jsxs(PageSection, { variant: "light", children: [enabled && (_jsx(TextContent, { className: "keycloak__section_intro__help", children: _jsxs(Text, { children: [_jsx(QuestionCircleIcon, {}), " ", t("evaluateExplain")] }) })), _jsxs(Form, { isHorizontal: true, children: [_jsx(FormGroup, { label: t("scopeParameter"), fieldId: "scopeParameter", labelIcon: _jsx(HelpItem, { helpText: t("scopeParameterHelp"), fieldLabelId: "scopeParameter" }), children: _jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { isFilled: true, children: _jsx(KeycloakSelect, { toggleId: "scopeParameter", variant: SelectVariant.typeaheadMulti, typeAheadAriaLabel: t("scopeParameter"), onToggle: () => setIsScopeOpen(!isScopeOpen), isOpen: isScopeOpen, selections: selected, onSelect: (value) => {
const option = value;
if (selected.includes(option)) {
if (option !== prefix) {
setSelected(selected.filter((item) => item !== option));
}
}
else {
setSelected([...selected, option]);
}
}, "aria-labelledby": t("scopeParameter"), placeholderText: t("scopeParameterPlaceholder"), children: selectableScopes.map((option, index) => (_jsx(SelectOption, { value: option.name, children: option.name }, index))) }) }), _jsx(SplitItem, { children: _jsx(ClipboardCopy, { className: "keycloak__scopes_evaluate__clipboard-copy", children: selected.join(" ") }) })] }) }), hasViewUsers && (_jsx(FormProvider, { ...form, children: _jsx(UserSelect, { name: "user", label: "users", helpText: t("userHelp"), defaultValue: "", variant: SelectVariant.typeahead, isRequired: true }) }))] })] }), _jsxs(Grid, { hasGutter: true, className: "keycloak__scopes_evaluate__tabs", children: [_jsxs(GridItem, { span: 8, children: [_jsx(TabContent, { "aria-labelledby": "pf-tab-0-effectiveProtocolMappers", eventKey: 0, id: "effectiveProtocolMappers", ref: tabContent1, children: _jsx(ProtocolMappers, { protocolMappers: protocolMappers }) }), _jsx(TabContent, { "aria-labelledby": "pf-tab-0-effectiveRoleScopeMappings", eventKey: 1, id: "effectiveRoleScopeMappings", ref: tabContent2, hidden: true, children: _jsx(EffectiveRoles, { effectiveRoles: effectiveRoles }) }), _jsx(TabContent, { "aria-labelledby": t("generatedAccessToken"), eventKey: 2, id: "tab-generated-access-token", ref: tabContent3, hidden: true, children: _jsx(GeneratedCodeTab, { text: accessToken, user: form.getValues("user"), label: "generatedAccessToken" }) }), _jsx(TabContent, { "aria-labelledby": t("generatedIdToken"), eventKey: 3, id: "tab-generated-id-token", ref: tabContent4, hidden: true, children: _jsx(GeneratedCodeTab, { text: idToken, user: form.getValues("user"), label: "generatedIdToken" }) }), _jsx(TabContent, { "aria-labelledby": t("generatedUserInfo"), eventKey: 4, id: "tab-generated-user-info", ref: tabContent5, hidden: true, children: _jsx(GeneratedCodeTab, { text: userInfo, user: form.getValues("user"), label: "generatedUserInfo" }) })] }), _jsx(GridItem, { span: 4, children: _jsxs(Tabs, { id: "tabs", isVertical: true, activeKey: activeTab, onSelect: (_, key) => setActiveTab(key), children: [_jsx(Tab, { id: "effectiveProtocolMappers", "aria-controls": "effectiveProtocolMappers", "data-testid": "effective-protocol-mappers-tab", eventKey: 0, title: _jsxs(TabTitleText, { children: [t("effectiveProtocolMappers"), " ", _jsx(HelpItem, { fieldLabelId: "effectiveProtocolMappers", helpText: t("effectiveProtocolMappersHelp"), noVerticalAlign: false, unWrap: true })] }), tabContentRef: tabContent1 }), _jsx(Tab, { id: "effectiveRoleScopeMappings", "aria-controls": "effectiveRoleScopeMappings", "data-testid": "effective-role-scope-mappings-tab", eventKey: 1, title: _jsxs(TabTitleText, { children: [t("effectiveRoleScopeMappings"), " ", _jsx(HelpItem, { fieldLabelId: "effectiveRoleScopeMappings", helpText: t("effectiveRoleScopeMappingsHelp"), noVerticalAlign: false, unWrap: true })] }), tabContentRef: tabContent2 }), _jsx(Tab, { id: "generatedAccessToken", "aria-controls": "generatedAccessToken", "data-testid": "generated-access-token-tab", eventKey: 2, title: _jsxs(TabTitleText, { children: [t("generatedAccessToken"), " ", _jsx(HelpItem, { fieldLabelId: "generatedAccessToken", helpText: t("generatedAccessTokenHelp"), noVerticalAlign: false, unWrap: true })] }), tabContentRef: tabContent3 }), _jsx(Tab, { id: "generatedIdToken", "aria-controls": "generatedIdToken", "data-testid": "generated-id-token-tab", eventKey: 3, title: _jsxs(TabTitleText, { children: [t("generatedIdToken"), " ", _jsx(HelpItem, { fieldLabelId: "generatedIdToken", helpText: t("generatedIdTokenHelp"), noVerticalAlign: false, unWrap: true })] }), tabContentRef: tabContent4 }), _jsx(Tab, { id: "generatedUserInfo", "aria-controls": "generatedUserInfo", "data-testid": "generated-user-info-tab", eventKey: 4, title: _jsxs(TabTitleText, { children: [t("generatedUserInfo"), " ", _jsx(HelpItem, { fieldLabelId: "generatedUserInfo", helpText: t("generatedUserInfoHelp"), noVerticalAlign: false, unWrap: true })] }), tabContentRef: tabContent5 })] }, key) })] })] }));
};
//# sourceMappingURL=EvaluateScopes.js.map