@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
129 lines • 8.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { KeycloakDataTable, useAlerts, useFetch, } from "../ui-shared";
import { CodeEditor, Language } from "@patternfly/react-code-editor";
import { ActionGroup, AlertVariant, Button, ButtonVariant, Divider, Flex, FlexItem, FormGroup, Label, PageSection, Radio, Title, ToolbarItem, } from "@patternfly/react-core";
import { omit } from "lodash-es";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { KeycloakSpinner } from "../ui-shared";
import { ListEmptyState } from "../ui-shared";
import { useRealm } from "../context/realm-context/RealmContext";
import { prettyPrintJSON } from "../util";
import { toAddClientProfile } from "../realm-settings/routes/AddClientProfile";
import { toClientProfile } from "../realm-settings/routes/ClientProfile";
import "./realm-settings-section.css";
export default function ProfilesTab() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const [tableProfiles, setTableProfiles] = useState();
const [globalProfiles, setGlobalProfiles] = useState();
const [selectedProfile, setSelectedProfile] = useState();
const [show, setShow] = useState(false);
const [code, setCode] = useState();
const [key, setKey] = useState(0);
useFetch(() => adminClient.clientPolicies.listProfiles({
includeGlobalProfiles: true,
}), (allProfiles) => {
var _a, _b;
setGlobalProfiles(allProfiles.globalProfiles);
const globalProfiles = (_a = allProfiles.globalProfiles) === null || _a === void 0 ? void 0 : _a.map((globalProfiles) => ({
...globalProfiles,
global: true,
}));
const profiles = (_b = allProfiles.profiles) === null || _b === void 0 ? void 0 : _b.map((profiles) => ({
...profiles,
global: false,
}));
const allClientProfiles = globalProfiles === null || globalProfiles === void 0 ? void 0 : globalProfiles.concat(profiles !== null && profiles !== void 0 ? profiles : []);
setTableProfiles(allClientProfiles || []);
setCode(JSON.stringify(allClientProfiles, null, 2));
}, [key]);
const loader = async () => tableProfiles !== null && tableProfiles !== void 0 ? tableProfiles : [];
const normalizeProfile = (profile) => omit(profile, "global");
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("deleteClientProfileConfirmTitle"),
messageKey: t("deleteClientProfileConfirm", {
profileName: selectedProfile === null || selectedProfile === void 0 ? void 0 : selectedProfile.name,
}),
continueButtonLabel: t("delete"),
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
const updatedProfiles = tableProfiles === null || tableProfiles === void 0 ? void 0 : tableProfiles.filter((profile) => profile.name !== (selectedProfile === null || selectedProfile === void 0 ? void 0 : selectedProfile.name) && !profile.global).map((profile) => normalizeProfile(profile));
try {
await adminClient.clientPolicies.createProfiles({
profiles: updatedProfiles,
globalProfiles,
});
addAlert(t("deleteClientSuccess"), AlertVariant.success);
setKey(key + 1);
}
catch (error) {
addError("deleteClientError", error);
}
},
});
const cellFormatter = (row) => (_jsxs(Link, { to: toClientProfile({
realm,
profileName: row.name,
}), children: [row.name, " ", row.global && _jsx(Label, { color: "blue", children: t("global") })] }, row.name));
if (!tableProfiles) {
return _jsx(KeycloakSpinner, {});
}
const save = async () => {
if (!code) {
return;
}
try {
const obj = JSON.parse(code);
const changedProfiles = obj
.filter((profile) => !profile.global)
.map((profile) => normalizeProfile(profile));
const changedGlobalProfiles = obj
.filter((profile) => profile.global)
.map((profile) => normalizeProfile(profile));
try {
await adminClient.clientPolicies.createProfiles({
profiles: changedProfiles,
globalProfiles: changedGlobalProfiles,
});
addAlert(t("updateClientProfilesSuccess"), AlertVariant.success);
setKey(key + 1);
}
catch (error) {
addError("updateClientProfilesError", error);
}
}
catch (error) {
addError("invalidJsonClientProfilesError", error);
}
};
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), _jsx(PageSection, { children: _jsxs(Flex, { className: "kc-profiles-config-section", children: [_jsx(FlexItem, { children: _jsx(Title, { headingLevel: "h1", size: "md", children: t("profilesConfigType") }) }), _jsx(FlexItem, { children: _jsx(Radio, { isChecked: !show, name: "profilesView", onChange: () => setShow(false), label: t("profilesConfigTypes.formView"), id: "formView-profilesView", className: "kc-form-radio-btn pf-v5-u-mr-sm pf-v5-u-ml-sm", "data-testid": "formView-profilesView" }) }), _jsx(FlexItem, { children: _jsx(Radio, { isChecked: show, name: "profilesView", onChange: () => setShow(true), label: t("profilesConfigTypes.jsonEditor"), id: "jsonEditor-profilesView", className: "kc-editor-radio-btn", "data-testid": "jsonEditor-profilesView" }) })] }) }), _jsx(Divider, {}), !show ? (_jsx(KeycloakDataTable, { ariaLabelKey: "profiles", searchPlaceholderKey: "clientProfileSearch", loader: loader, toolbarItem: _jsx(ToolbarItem, { children: _jsx(Button, { id: "createProfile", component: (props) => (_jsx(Link, { ...props, to: toAddClientProfile({ realm, tab: "profiles" }) })), "data-testid": "createProfile", children: t("createClientProfile") }) }), isRowDisabled: (value) => value.global, actions: [
{
title: t("delete"),
onRowClick: (profile) => {
setSelectedProfile(profile);
toggleDeleteDialog();
},
},
], columns: [
{
name: "name",
displayKey: t("name"),
cellRenderer: cellFormatter,
},
{
name: "description",
displayKey: t("clientProfileDescription"),
},
], emptyState: _jsx(ListEmptyState, { message: t("emptyClientProfiles"), instructions: t("emptyClientProfilesInstructions") }) }, tableProfiles.length)) : (_jsxs(FormGroup, { fieldId: "jsonEditor", children: [_jsx("div", { className: "pf-v5-u-mt-md pf-v5-u-ml-lg", children: _jsx(CodeEditor, { isLineNumbersVisible: true, isLanguageLabelVisible: true, isReadOnly: false, code: code, language: Language.json, height: "30rem", onChange: (value) => {
setCode(value !== null && value !== void 0 ? value : "");
} }) }), _jsx(ActionGroup, { children: _jsxs("div", { className: "pf-v5-u-mt-md", children: [_jsx(Button, { variant: ButtonVariant.primary, className: "pf-v5-u-mr-md pf-v5-u-ml-lg", onClick: save, "data-testid": "jsonEditor-saveBtn", children: t("save") }), _jsx(Button, { variant: ButtonVariant.link, onClick: () => {
setCode(prettyPrintJSON(tableProfiles));
}, "data-testid": "jsonEditor-reloadBtn", children: t("reload") })] }) })] }))] }));
}
//# sourceMappingURL=ProfilesTab.js.map