@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
107 lines • 6.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, ButtonVariant, PageSection, ToolbarItem, } from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { ListEmptyState } from "../../ui-shared";
import { KeycloakDataTable } from "../../ui-shared";
import { useRealm } from "../../context/realm-context/RealmContext";
import { toEditAttributesGroup } from "../../realm-settings/routes/EditAttributesGroup";
import { toNewAttributesGroup } from "../../realm-settings/routes/NewAttributesGroup";
import { useUserProfile } from "../../realm-settings/user-profile/UserProfileContext";
import useLocale from "../../utils/useLocale";
import { useAdminClient } from "../../admin-client";
export const AttributesGroupTab = ({ setTableData, }) => {
const { adminClient } = useAdminClient();
const { config, save } = useUserProfile();
const { t } = useTranslation();
const combinedLocales = useLocale();
const navigate = useNavigate();
const { realm } = useRealm();
const [key, setKey] = useState(0);
const [groupToDelete, setGroupToDelete] = useState();
// Refresh data in table when config changes.
useEffect(() => setKey((value) => value + 1), [config]);
async function loader() {
var _a;
return (_a = config === null || config === void 0 ? void 0 : config.groups) !== null && _a !== void 0 ? _a : [];
}
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteDialogTitle",
children: (_jsxs(Trans, { i18nKey: "deleteDialogDescription", children: [" ", _jsx("strong", { children: { group: groupToDelete === null || groupToDelete === void 0 ? void 0 : groupToDelete.name } }), "."] })),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
var _a, _b, _c;
const groups = ((_a = config === null || config === void 0 ? void 0 : config.groups) !== null && _a !== void 0 ? _a : []).filter((group) => group !== groupToDelete);
const translationsForDisplayHeaderToDelete = (_b = groupToDelete === null || groupToDelete === void 0 ? void 0 : groupToDelete.displayHeader) === null || _b === void 0 ? void 0 : _b.substring(2, (groupToDelete === null || groupToDelete === void 0 ? void 0 : groupToDelete.displayHeader.length) - 1);
const translationsForDisplayDescriptionToDelete = (_c = groupToDelete === null || groupToDelete === void 0 ? void 0 : groupToDelete.displayDescription) === null || _c === void 0 ? void 0 : _c.substring(2, (groupToDelete === null || groupToDelete === void 0 ? void 0 : groupToDelete.displayDescription.length) - 1);
try {
await Promise.all(combinedLocales.map(async (locale) => {
try {
const response = await adminClient.realms.getRealmLocalizationTexts({
realm,
selectedLocale: locale,
});
if (response) {
await adminClient.realms.deleteRealmLocalizationTexts({
realm,
selectedLocale: locale,
key: translationsForDisplayHeaderToDelete,
});
await adminClient.realms.deleteRealmLocalizationTexts({
realm,
selectedLocale: locale,
key: translationsForDisplayDescriptionToDelete,
});
const updatedData = await adminClient.realms.getRealmLocalizationTexts({
realm,
selectedLocale: locale,
});
setTableData([updatedData]);
}
}
catch (_a) {
console.error(`Error removing translations for ${locale}`);
}
}));
save({ ...config, groups }, {
successMessageKey: "deleteSuccess",
errorMessageKey: "deleteAttributeGroupError",
});
}
catch (error) {
console.error(`Error removing translations or updating attributes group: ${error}`);
}
},
});
function deleteAttributeGroup(group) {
setGroupToDelete(group);
toggleDeleteDialog();
}
return (_jsxs(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: [_jsx(DeleteConfirm, {}), _jsx(KeycloakDataTable, { loader: loader, ariaLabelKey: "tableTitle", toolbarItem: _jsx(ToolbarItem, { children: _jsx(Button, { component: (props) => (_jsx(Link, { "data-testid": "create-attributes-groups-action", ...props, to: toNewAttributesGroup({ realm }) })), children: t("createGroupText") }) }), columns: [
{
name: "name",
displayKey: "columnName",
cellRenderer: (group) => (_jsx(Link, { to: toEditAttributesGroup({
realm,
name: group.name,
}), children: group.name })),
},
{
name: "displayHeader",
displayKey: "columnDisplayName",
},
{
name: "displayDescription",
displayKey: "columnDisplayDescription",
},
], actions: [
{
title: t("delete"),
onRowClick: deleteAttributeGroup,
},
], emptyState: _jsx(ListEmptyState, { message: t("emptyStateMessage"), instructions: t("emptyStateInstructions"), primaryActionText: t("createGroupText"), onPrimaryAction: () => navigate(toNewAttributesGroup({ realm })) }) }, key)] }));
};
//# sourceMappingURL=AttributesGroupTab.js.map