@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
107 lines • 6.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { KeycloakDataTable, useAlerts, useFetch, useHelp, } from "../ui-shared";
import { AlertVariant, Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, MenuToggle, Popover, Text, TextContent, ToolbarItem, } from "@patternfly/react-core";
import { EllipsisVIcon, QuestionCircleIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
import { KeycloakSpinner } from "../ui-shared";
import { ListEmptyState } from "../ui-shared";
import { useRealm } from "../context/realm-context/RealmContext";
import { toUserFederation } from "../user-federation/routes/UserFederation";
import useToggle from "../utils/useToggle";
import { useAccess } from "../context/access/Access";
export const DefaultsGroupsTab = () => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const [isKebabOpen, toggleKebab] = useToggle();
const [isGroupPickerOpen, toggleGroupPicker] = useToggle();
const [defaultGroups, setDefaultGroups] = useState();
const [selectedRows, setSelectedRows] = useState([]);
const [key, setKey] = useState(0);
const [load, setLoad] = useState(0);
const reload = () => setLoad(load + 1);
const { realm } = useRealm();
const { addAlert, addError } = useAlerts();
const { enabled } = useHelp();
const { hasAccess } = useAccess();
const canAddOrRemoveGroups = hasAccess("view-users", "manage-realm");
useFetch(() => adminClient.realms.getDefaultGroups({ realm }), (groups) => {
setDefaultGroups(groups);
setKey(key + 1);
}, [load]);
const loader = () => Promise.resolve(defaultGroups);
const removeGroup = async () => {
try {
await Promise.all(selectedRows.map((group) => adminClient.realms.removeDefaultGroup({
realm,
id: group.id,
})));
addAlert(t("groupRemove", { count: selectedRows.length }), AlertVariant.success);
setSelectedRows([]);
}
catch (error) {
addError("groupRemoveError", error);
}
reload();
};
const addGroups = async (groups) => {
try {
await Promise.all(groups.map((group) => adminClient.realms.addDefaultGroup({
realm,
id: group.id,
})));
addAlert(t("defaultGroupAdded", { count: groups.length }), AlertVariant.success);
}
catch (error) {
addError("defaultGroupAddedError", error);
}
reload();
};
const [toggleRemoveDialog, RemoveDialog] = useConfirmDialog({
titleKey: t("removeConfirmTitle", { count: selectedRows.length }),
messageKey: t("removeConfirm", { count: selectedRows.length }),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: removeGroup,
});
if (!defaultGroups) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(_Fragment, { children: [_jsx(RemoveDialog, {}), isGroupPickerOpen && (_jsx(GroupPickerDialog, { type: "selectMany", text: {
title: "addDefaultGroups",
ok: "add",
}, onConfirm: (groups) => {
addGroups(groups || []);
toggleGroupPicker();
}, onClose: toggleGroupPicker })), enabled && (_jsx(Popover, { bodyContent: _jsxs(Trans, { i18nKey: "defaultGroupsHelp", children: [" ", _jsx(Link, { to: toUserFederation({ realm }) }), "."] }), children: _jsx(TextContent, { className: "keycloak__section_intro__help", style: {
paddingLeft: "var(--pf-v5-c-page__main-section--PaddingLeft)",
}, children: _jsxs(Text, { children: [_jsx(QuestionCircleIcon, {}), " ", t("whatIsDefaultGroups")] }) }) })), _jsx(KeycloakDataTable, { canSelectAll: true, onSelect: (rows) => setSelectedRows([...rows]), loader: loader, ariaLabelKey: "defaultGroups", searchPlaceholderKey: "searchForGroups", toolbarItem: canAddOrRemoveGroups && (_jsxs(_Fragment, { children: [_jsx(ToolbarItem, { children: _jsx(Button, { "data-testid": "openCreateGroupModal", variant: "primary", onClick: toggleGroupPicker, children: t("addGroups") }) }), _jsx(ToolbarItem, { children: _jsx(Dropdown, { onOpenChange: toggleKebab, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, isExpanded: isKebabOpen, variant: "plain", onClick: toggleKebab, isDisabled: selectedRows.length === 0, children: _jsx(EllipsisVIcon, {}) })), isOpen: isKebabOpen, shouldFocusToggleOnSelect: true, children: _jsx(DropdownList, { children: _jsx(DropdownItem, { component: "button", onClick: () => {
toggleRemoveDialog();
toggleKebab();
}, children: t("remove") }, "action") }) }) })] })), actions: canAddOrRemoveGroups
? [
{
title: t("remove"),
onRowClick: (group) => {
setSelectedRows([group]);
toggleRemoveDialog();
return Promise.resolve(false);
},
},
]
: [], columns: [
{
name: "name",
displayKey: "groupName",
},
{
name: "path",
displayKey: "path",
},
], emptyState: _jsx(ListEmptyState, { hasIcon: true, message: t("noDefaultGroups"), instructions: _jsxs(Trans, { i18nKey: "noDefaultGroupsInstructions", children: [" ", _jsx(Link, { className: "pf-v5-u-font-weight-light", to: toUserFederation({ realm }), role: "navigation", "aria-label": t("identityBrokeringLink") }), "Add groups..."] }), primaryActionText: canAddOrRemoveGroups ? t("addGroups") : "", onPrimaryAction: toggleGroupPicker }) }, key)] }));
};
//# sourceMappingURL=DefaultGroupsTab.js.map