@keycloakify/keycloak-account-ui/groups/Groups.js

<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox, DataList, DataListCell, DataListItem, DataListItemCells, DataListItemRow, } from "@patternfly/react-core";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useEnvironment } from "../ui-shared";
import { getGroups } from "../api/methods";
import { Page } from "../components/page/Page";
import { usePromise } from "../utils/usePromise";
export const Groups = () => {
    const { t } = useTranslation();
    const context = useEnvironment();
    const [groups, setGroups] = useState([]);
    const [directMembership, setDirectMembership] = useState(false);
    usePromise((signal) => getGroups({ signal, context }), (groups) => {
        if (!directMembership) {
            groups.forEach((el) => getParents(el, groups, groups.map(({ path }) => path)));
        }
        setGroups(groups);
    }, [directMembership]);
    const getParents = (el, groups, groupsPaths) => {
        const parentPath = el.path.slice(0, el.path.lastIndexOf("/"));
        if (parentPath && !groupsPaths.includes(parentPath)) {
            el = {
                name: parentPath.slice(parentPath.lastIndexOf("/") + 1),
                path: parentPath,
            };
            groups.push(el);
            groupsPaths.push(parentPath);
            getParents(el, groups, groupsPaths);
        }
    };
    return (_jsx(Page, { title: t("groups"), description: t("groupDescriptionLabel"), children: _jsxs(DataList, { id: "groups-list", "aria-label": t("groups"), isCompact: true, children: [_jsx(DataListItem, { id: "groups-list-header", "aria-label": t("groupsListHeader"), children: _jsx(DataListItemRow, { children: _jsx(DataListItemCells, { dataListCells: [
                                _jsx(DataListCell, { children: _jsx(Checkbox, { label: t("directMembership"), id: "directMembership-checkbox", "data-testid": "directMembership-checkbox", isChecked: directMembership, onChange: (_event, checked) => setDirectMembership(checked) }) }, "directMembership-header"),
                            ] }) }) }), _jsx(DataListItem, { id: "groups-list-columns-names", "aria-label": t("groupsListColumnsNames"), children: _jsx(DataListItemRow, { children: _jsx(DataListItemCells, { dataListCells: [
                                _jsx(DataListCell, { width: 2, children: _jsx("strong", { children: t("name") }) }, "group-name-header"),
                                _jsx(DataListCell, { width: 2, children: _jsx("strong", { children: t("path") }) }, "group-path-header"),
                                _jsx(DataListCell, { width: 2, children: _jsx("strong", { children: t("directMembership") }) }, "group-direct-membership-header"),
                            ] }) }) }), groups.map((group, appIndex) => (_jsx(DataListItem, { id: `${appIndex}-group`, "aria-labelledby": "groups-list", children: _jsx(DataListItemRow, { children: _jsx(DataListItemCells, { dataListCells: [
                                _jsx(DataListCell, { "data-testid": `group[${appIndex}].name`, width: 2, children: group.name }, "name-" + appIndex),
                                _jsx(DataListCell, { id: `${appIndex}-group-path`, width: 2, children: group.path }, "path-" + appIndex),
                                _jsx(DataListCell, { id: `${appIndex}-group-directMembership`, width: 2, children: _jsx(Checkbox, { id: `${appIndex}-checkbox-directMembership`, isChecked: group.id != null, isDisabled: true }) }, "directMembership-" + appIndex),
                            ] }) }) }, "group-" + appIndex)))] }) }));
};
export default Groups;
//# sourceMappingURL=Groups.js.map