@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
143 lines • 9.28 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PaginatingTableToolbar, useFetch } from "../../ui-shared";
import { Breadcrumb, BreadcrumbItem, Button, DataList, DataListAction, DataListCell, DataListCheck, DataListItem, DataListItemCells, DataListItemRow, Modal, ModalVariant, } from "@patternfly/react-core";
import { AngleRightIcon } from "@patternfly/react-icons";
import { Fragment, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAdminClient } from "../../admin-client";
import { ListEmptyState } from "../../ui-shared";
import { GroupPath } from "../../components/group/GroupPath";
import "./group-picker-dialog.css";
export const GroupPickerDialog = ({ id, type, filterGroups, text, canBrowse = true, isMove = false, onClose, onConfirm, }) => {
var _a;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const [selectedRows, setSelectedRows] = useState([]);
const [navigation, setNavigation] = useState([]);
const [groups, setGroups] = useState([]);
const [filter, setFilter] = useState("");
const [joinedGroups, setJoinedGroups] = useState([]);
const [groupId, setGroupId] = useState();
const [isSearching, setIsSearching] = useState(false);
const [max, setMax] = useState(10);
const [first, setFirst] = useState(0);
const [count, setCount] = useState(0);
const currentGroup = () => navigation[navigation.length - 1];
useFetch(async () => {
let group;
let groups;
let existingUserGroups;
if (!groupId) {
const args = {
first,
max: max + 1,
};
if (isSearching) {
args.search = filter;
}
groups = await adminClient.groups.find(args);
}
else {
if (!navigation.map(({ id }) => id).includes(groupId)) {
group = await adminClient.groups.findOne({ id: groupId });
if (!group) {
throw new Error(t("notFound"));
}
}
const args = {
first,
max,
parentId: groupId,
};
groups = await adminClient.groups.listSubGroups(args);
}
if (id) {
existingUserGroups = await adminClient.users.listGroups({
id,
});
}
return { group, groups, existingUserGroups };
}, async ({ group: selectedGroup, groups, existingUserGroups }) => {
setJoinedGroups(existingUserGroups || []);
if (selectedGroup) {
setNavigation([...navigation, selectedGroup]);
setCount(selectedGroup.subGroupCount);
}
groups.forEach((group) => {
group.checked = !!selectedRows.find((r) => r.id === group.id);
});
setGroups(groups);
if (isSearching || !groupId) {
setCount(groups.length);
}
}, [groupId, filter, first, max]);
const isRowDisabled = (row) => {
return [
...joinedGroups.map((item) => item.id),
...(filterGroups || []).map((group) => group.id),
].some((group) => group === (row === null || row === void 0 ? void 0 : row.id));
};
return (_jsx(Modal, { variant: isSearching ? ModalVariant.medium : ModalVariant.small, title: t(text.title, {
group1: (_a = filterGroups === null || filterGroups === void 0 ? void 0 : filterGroups[0]) === null || _a === void 0 ? void 0 : _a.name,
group2: navigation.length ? currentGroup().name : t("root"),
}), isOpen: true, onClose: onClose, actions: [
_jsx(Button, { "data-testid": `${text.ok}-button`, variant: "primary", form: "group-form", onClick: () => {
onConfirm(type === "selectMany"
? selectedRows
: navigation.length
? [currentGroup()]
: undefined);
}, isDisabled: type === "selectMany" && selectedRows.length === 0, children: t(text.ok) }, "confirm"),
], children: _jsxs(PaginatingTableToolbar, { count: count, first: first, max: max, onNextClick: setFirst, onPreviousClick: setFirst, onPerPageSelect: (first, max) => {
setFirst(first);
setMax(max);
}, inputGroupName: "search", inputGroupOnEnter: (search) => {
setFilter(search);
setIsSearching(search !== "");
setFirst(0);
setMax(10);
setNavigation([]);
setGroupId(undefined);
}, inputGroupPlaceholder: t("searchForGroups"), children: [_jsxs(Breadcrumb, { children: [navigation.length > 0 && (_jsx(BreadcrumbItem, { children: _jsx(Button, { variant: "link", onClick: () => {
setGroupId(undefined);
setNavigation([]);
setFirst(0);
setMax(10);
}, children: t("groups") }) }, "home")), navigation.map((group, i) => (_jsxs(BreadcrumbItem, { children: [navigation.length - 1 !== i && (_jsx(Button, { variant: "link", onClick: () => {
setGroupId(group.id);
setNavigation([...navigation].slice(0, i));
setFirst(0);
setMax(10);
}, children: group.name })), navigation.length - 1 === i && group.name] }, i)))] }), _jsx(DataList, { "aria-label": t("groups"), isCompact: true, children: groups.slice(0, max).map((group) => {
var _a, _b;
return (_jsxs(Fragment, { children: [(!isSearching ||
((_a = group.name) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase().includes(filter.toLocaleUpperCase()))) && (_jsx(GroupRow, { group: group, isRowDisabled: isRowDisabled, onSelect: setGroupId, type: type, isSearching: isSearching, setIsSearching: setIsSearching, selectedRows: selectedRows, setSelectedRows: setSelectedRows, canBrowse: canBrowse }, group.id)), isSearching &&
((_b = group.subGroups) === null || _b === void 0 ? void 0 : _b.map((g) => (_jsx(GroupRow, { group: g, isRowDisabled: isRowDisabled, onSelect: setGroupId, type: type, isSearching: isSearching, setIsSearching: setIsSearching, selectedRows: selectedRows, setSelectedRows: setSelectedRows, canBrowse: canBrowse }, g.id))))] }, group.id));
}) }), groups.length === 0 && !isSearching && (_jsx(ListEmptyState, { hasIcon: false, message: t("moveGroupEmpty"), instructions: isMove ? t("moveGroupEmptyInstructions") : undefined })), groups.length === 0 && isSearching && (_jsx(ListEmptyState, { message: t("noSearchResults"), instructions: t("noSearchResultsInstructions") }))] }) }));
};
const GroupRow = ({ group, type, isRowDisabled, isSearching, setIsSearching, onSelect, selectedRows, setSelectedRows, canBrowse, }) => {
const { t } = useTranslation();
return (_jsx(DataListItem, { "aria-labelledby": group.name, id: group.id, onClick: (e) => {
if (type === "selectOne") {
onSelect(group.id);
}
else if (e.target.type !== "checkbox" &&
group.subGroupCount !== 0) {
onSelect(group.id);
setIsSearching(false);
}
}, children: _jsxs(DataListItemRow, { className: `join-group-dialog-row${isRowDisabled(group) ? "-m-disabled" : ""}`, "data-testid": group.name, children: [type === "selectMany" && (_jsx(DataListCheck, { className: "kc-join-group-modal-check", "data-testid": `${group.name}-check`, "aria-label": group.name, checked: group.checked, isDisabled: isRowDisabled(group), onChange: (_event, checked) => {
group.checked = checked;
let newSelectedRows = [];
if (!group.checked) {
newSelectedRows = selectedRows.filter((r) => r.id !== group.id);
}
else {
newSelectedRows = [...selectedRows, group];
}
setSelectedRows(newSelectedRows);
}, "aria-labelledby": `select-${group.name}` })), _jsx(DataListItemCells, { dataListCells: [
_jsx(DataListCell, { className: "keycloak-groups-group-path", children: isSearching ? (_jsx(GroupPath, { id: `select-${group.name}`, group: group })) : (_jsx("span", { id: `select-${group.name}`, children: group.name })) }, `name-${group.id}`),
] }), _jsx(DataListAction, { id: "actions", "aria-labelledby": `select-${group.name}`, "aria-label": t("groupName"), isPlainButtonAction: true, children: (canBrowse || type === "selectOne") && group.subGroupCount !== 0 && (_jsx(Button, { variant: "link", "aria-label": t("select"), children: _jsx(AngleRightIcon, {}) })) })] }) }, group.id));
};
//# sourceMappingURL=GroupPickerDialog.js.map