@keycloakify/keycloak-account-ui
Version:
<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
103 lines • 12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Chip, ChipGroup, Dropdown, DropdownItem, DropdownList, MenuToggle, OverflowMenu, OverflowMenuContent, OverflowMenuControl, OverflowMenuDropdownItem, OverflowMenuGroup, OverflowMenuItem, Spinner, } from "@patternfly/react-core";
import { EditAltIcon, EllipsisVIcon, ExternalLinkAltIcon, Remove2Icon, ShareAltIcon, } from "@patternfly/react-icons";
import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr, } from "@patternfly/react-table";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ContinueCancelModal, useAlerts, useEnvironment, } from "../ui-shared";
import { fetchPermission, fetchResources, updatePermissions } from "../api";
import { getPermissionRequests } from "../api/methods";
import { usePromise } from "../utils/usePromise";
import { EditTheResource } from "../resources/EditTheResource";
import { PermissionRequest } from "../resources/PermissionRequest";
import { ResourceToolbar } from "../resources/ResourceToolbar";
import { ShareTheResource } from "../resources/ShareTheResource";
import { SharedWith } from "../resources/SharedWith";
export const ResourcesTab = ({ isShared = false }) => {
const { t } = useTranslation();
const context = useEnvironment();
const { addAlert, addError } = useAlerts();
const [params, setParams] = useState({
first: "0",
max: "5",
});
const [links, setLinks] = useState();
const [resources, setResources] = useState();
const [details, setDetails] = useState({});
const [key, setKey] = useState(1);
const refresh = () => setKey(key + 1);
usePromise(async (signal) => {
const result = await fetchResources({ signal, context }, params, isShared);
if (!isShared)
await Promise.all(result.data.map(async (r) => (r.shareRequests = await getPermissionRequests(r._id, {
signal,
context,
}))));
return result;
}, ({ data, links }) => {
setResources(data);
setLinks(links);
}, [params, key]);
if (!resources) {
return _jsx(Spinner, {});
}
const fetchPermissions = async (id) => {
var _a;
let permissions = ((_a = details[id]) === null || _a === void 0 ? void 0 : _a.permissions) || [];
if (!details[id]) {
permissions = await fetchPermission({ context }, id);
}
return permissions;
};
const removeShare = async (resource) => {
try {
const permissions = (await fetchPermissions(resource._id)).map(({ username }) => ({
username,
scopes: [],
}));
await updatePermissions(context, resource._id, permissions);
setDetails({});
addAlert(t("unShareSuccess"));
}
catch (error) {
addError(t("unShareError", { error }).toString());
}
};
const toggleOpen = async (id, field, open) => {
const permissions = await fetchPermissions(id);
setDetails(Object.assign(Object.assign({}, details), { [id]: Object.assign(Object.assign({}, details[id]), { [field]: open, permissions }) }));
};
return (_jsxs(_Fragment, { children: [_jsx(ResourceToolbar, { onFilter: (name) => setParams(Object.assign(Object.assign({}, params), { name })), count: resources.length, first: parseInt(params["first"]), max: parseInt(params["max"]), onNextClick: () => setParams((links === null || links === void 0 ? void 0 : links.next) || {}), onPreviousClick: () => setParams((links === null || links === void 0 ? void 0 : links.prev) || {}), onPerPageSelect: (first, max) => setParams({ first: `${first}`, max: `${max}` }), hasNext: !!(links === null || links === void 0 ? void 0 : links.next) }), _jsxs(Table, { "aria-label": t("resources"), children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { "aria-hidden": "true" }), _jsx(Th, { children: t("resourceName") }), _jsx(Th, { children: t("application") }), _jsx(Th, { "aria-hidden": isShared, children: !isShared ? t("permissionRequests") : "" })] }) }), resources.map((resource, index) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
return (_jsxs(Tbody, { isExpanded: (_a = details[resource._id]) === null || _a === void 0 ? void 0 : _a.rowOpen, children: [_jsxs(Tr, { children: [_jsx(Td, { "data-testid": `expand-${resource.name}`, expand: !isShared
? {
isExpanded: ((_b = details[resource._id]) === null || _b === void 0 ? void 0 : _b.rowOpen) || false,
rowIndex: index,
onToggle: () => {
var _a;
return toggleOpen(resource._id, "rowOpen", !((_a = details[resource._id]) === null || _a === void 0 ? void 0 : _a.rowOpen));
},
}
: undefined }), _jsx(Td, { dataLabel: t("resourceName"), "data-testid": `row[${index}].name`, children: resource.name }), _jsx(Td, { dataLabel: t("application"), children: _jsxs("a", { href: resource.client.baseUrl, children: [resource.client.name || resource.client.clientId, " ", _jsx(ExternalLinkAltIcon, {})] }) }), _jsxs(Td, { dataLabel: t("permissionRequests"), children: [resource.shareRequests &&
resource.shareRequests.length > 0 && (_jsx(PermissionRequest, { resource: resource, refresh: () => refresh() })), _jsx(ShareTheResource, { resource: resource, permissions: (_c = details[resource._id]) === null || _c === void 0 ? void 0 : _c.permissions, open: ((_d = details[resource._id]) === null || _d === void 0 ? void 0 : _d.shareDialogOpen) || false, onClose: () => setDetails({}) }), ((_e = details[resource._id]) === null || _e === void 0 ? void 0 : _e.editDialogOpen) && (_jsx(EditTheResource, { resource: resource, permissions: (_f = details[resource._id]) === null || _f === void 0 ? void 0 : _f.permissions, onClose: () => setDetails({}) }))] }), isShared ? (_jsx(Td, { children: resource.scopes.length > 0 && (_jsx(ChipGroup, { categoryName: t("permissions"), children: resource.scopes.map((scope) => (_jsx(Chip, { isReadOnly: true, children: scope.displayName || scope.name }, scope.name))) })) })) : (_jsx(Td, { isActionCell: true, children: _jsxs(OverflowMenu, { breakpoint: "lg", children: [_jsx(OverflowMenuContent, { children: _jsxs(OverflowMenuGroup, { groupType: "button", children: [_jsx(OverflowMenuItem, { children: _jsxs(Button, { "data-testid": `share-${resource.name}`, variant: "link", onClick: () => toggleOpen(resource._id, "shareDialogOpen", true), children: [_jsx(ShareAltIcon, {}), " ", t("share")] }) }), _jsx(OverflowMenuItem, { children: _jsx(Dropdown, { popperProps: {
position: "right",
}, onOpenChange: (isOpen) => toggleOpen(resource._id, "contextOpen", isOpen), toggle: (ref) => {
var _a;
return (_jsx(MenuToggle, { variant: "plain", ref: ref, onClick: () => {
var _a;
return toggleOpen(resource._id, "contextOpen", !((_a = details[resource._id]) === null || _a === void 0 ? void 0 : _a.contextOpen));
}, isExpanded: (_a = details[resource._id]) === null || _a === void 0 ? void 0 : _a.contextOpen, children: _jsx(EllipsisVIcon, {}) }));
}, isOpen: !!((_g = details[resource._id]) === null || _g === void 0 ? void 0 : _g.contextOpen), children: _jsxs(DropdownList, { children: [_jsxs(DropdownItem, { isDisabled: ((_j = (_h = details[resource._id]) === null || _h === void 0 ? void 0 : _h.permissions) === null || _j === void 0 ? void 0 : _j.length) ===
0, onClick: () => toggleOpen(resource._id, "editDialogOpen", true), children: [_jsx(EditAltIcon, {}), " ", t("edit")] }), _jsx(ContinueCancelModal, { buttonTitle: _jsxs(_Fragment, { children: [_jsx(Remove2Icon, {}), " ", t("unShare")] }), modalTitle: t("unShare"), continueLabel: t("confirm"), cancelLabel: t("cancel"), component: DropdownItem, onContinue: () => removeShare(resource), isDisabled: ((_l = (_k = details[resource._id]) === null || _k === void 0 ? void 0 : _k.permissions) === null || _l === void 0 ? void 0 : _l.length) ===
0, children: t("unShareAllConfirm") })] }) }) })] }) }), _jsx(OverflowMenuControl, { children: _jsx(Dropdown, { popperProps: {
position: "right",
}, onOpenChange: (isOpen) => toggleOpen(resource._id, "contextOpen", isOpen), toggle: (ref) => {
var _a;
return (_jsx(MenuToggle, { variant: "plain", ref: ref, isExpanded: (_a = details[resource._id]) === null || _a === void 0 ? void 0 : _a.contextOpen, onClick: () => {
var _a;
return toggleOpen(resource._id, "contextOpen", !((_a = details[resource._id]) === null || _a === void 0 ? void 0 : _a.contextOpen));
}, children: _jsx(EllipsisVIcon, {}) }));
}, isOpen: !!((_m = details[resource._id]) === null || _m === void 0 ? void 0 : _m.contextOpen), children: _jsxs(DropdownList, { children: [_jsxs(OverflowMenuDropdownItem, { isShared: true, onClick: () => toggleOpen(resource._id, "shareDialogOpen", true), children: [_jsx(ShareAltIcon, {}), " ", t("share")] }, "share"), _jsxs(OverflowMenuDropdownItem, { isShared: true, onClick: () => toggleOpen(resource._id, "editDialogOpen", true), isDisabled: ((_p = (_o = details[resource._id]) === null || _o === void 0 ? void 0 : _o.permissions) === null || _p === void 0 ? void 0 : _p.length) === 0, children: [_jsx(EditAltIcon, {}), " ", t("edit")] }, "edit"), _jsx(ContinueCancelModal, { buttonTitle: _jsxs(_Fragment, { children: [_jsx(Remove2Icon, {}), " ", t("unShare")] }), modalTitle: t("unShare"), continueLabel: t("confirm"), cancelLabel: t("cancel"), component: OverflowMenuDropdownItem, onContinue: () => removeShare(resource), isDisabled: ((_r = (_q = details[resource._id]) === null || _q === void 0 ? void 0 : _q.permissions) === null || _r === void 0 ? void 0 : _r.length) === 0, children: t("unShareAllConfirm") }, "unShare")] }) }) })] }) }))] }), _jsx(Tr, { isExpanded: ((_s = details[resource._id]) === null || _s === void 0 ? void 0 : _s.rowOpen) || false, children: _jsx(Td, { colSpan: 4, textCenter: true, children: _jsx(ExpandableRowContent, { children: _jsx(SharedWith, { permissions: (_t = details[resource._id]) === null || _t === void 0 ? void 0 : _t.permissions }) }) }) })] }, resource.name));
})] })] }));
};
//# sourceMappingURL=ResourcesTab.js.map