@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
117 lines • 9.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ListEmptyState, PaginatingTableToolbar, useAlerts, useFetch, } from "../../ui-shared";
import { Alert, AlertVariant, Button, PageSection, ToolbarItem, } from "@patternfly/react-core";
import { ExpandableRowContent, Table, TableText, Tbody, Td, Th, Thead, Tr, } from "@patternfly/react-table";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useAdminClient } from "../../admin-client";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { KeycloakSpinner } from "../../ui-shared";
import { useRealm } from "../../context/realm-context/RealmContext";
import { toNewPermission } from "../../clients/routes/NewPermission";
import { toCreateResource } from "../../clients/routes/NewResource";
import { toResourceDetails } from "../../clients/routes/Resource";
import { DetailCell } from "../../clients/authorization/DetailCell";
import { MoreLabel } from "../../clients/authorization/MoreLabel";
import { SearchDropdown } from "../../clients/authorization/SearchDropdown";
const UriRenderer = ({ row }) => {
var _a;
return (_jsxs(TableText, { wrapModifier: "truncate", children: [(_a = row.uris) === null || _a === void 0 ? void 0 : _a[0], " ", _jsx(MoreLabel, { array: row.uris })] }));
};
export const AuthorizationResources = ({ clientId, isDisabled = false, }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const navigate = useNavigate();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
const [resources, setResources] = useState();
const [selectedResource, setSelectedResource] = useState();
const [permissions, setPermission] = useState();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
const [max, setMax] = useState(10);
const [first, setFirst] = useState(0);
const [search, setSearch] = useState({});
useFetch(() => {
const params = {
first,
max: max + 1,
deep: false,
...search,
};
return adminClient.clients.listResources({
...params,
id: clientId,
});
}, (resources) => setResources(resources.map((resource) => ({ ...resource, isExpanded: false }))), [key, search, first, max]);
const fetchPermissions = async (id) => {
return adminClient.clients.listPermissionsByResource({
id: clientId,
resourceId: id,
});
};
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteResource",
children: (_jsxs(_Fragment, { children: [t("deleteResourceConfirm"), (permissions === null || permissions === void 0 ? void 0 : permissions.length) && (_jsx(Alert, { variant: "warning", isInline: true, isPlain: true, title: t("deleteResourceWarning"), className: "pf-v5-u-pt-lg", children: _jsx("p", { className: "pf-v5-u-pt-xs", children: permissions.map((permission) => (_jsx("strong", { className: "pf-v5-u-pr-md", children: permission.name }, permission.id))) }) }))] })),
continueButtonLabel: "confirm",
onConfirm: async () => {
try {
await adminClient.clients.delResource({
id: clientId,
resourceId: selectedResource === null || selectedResource === void 0 ? void 0 : selectedResource._id,
});
addAlert(t("resourceDeletedSuccess"), AlertVariant.success);
refresh();
}
catch (error) {
addError("resourceDeletedError", error);
}
},
});
if (!resources) {
return _jsx(KeycloakSpinner, {});
}
const noData = resources.length === 0;
const searching = Object.keys(search).length !== 0;
return (_jsxs(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: [_jsx(DeleteConfirm, {}), (!noData || searching) && (_jsx(PaginatingTableToolbar, { count: resources.length, first: first, max: max, onNextClick: setFirst, onPreviousClick: setFirst, onPerPageSelect: (first, max) => {
setFirst(first);
setMax(max);
}, toolbarItem: _jsxs(_Fragment, { children: [_jsx(ToolbarItem, { children: _jsx(SearchDropdown, { search: search, onSearch: setSearch, type: "resource" }) }), _jsx(ToolbarItem, { children: _jsx(Button, { "data-testid": "createResource", isDisabled: isDisabled, component: (props) => (_jsx(Link, { ...props, to: toCreateResource({ realm, id: clientId }) })), children: t("createResource") }) })] }), children: !noData && (_jsxs(Table, { "aria-label": t("resources"), variant: "compact", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { "aria-hidden": "true" }), _jsx(Th, { children: t("name") }), _jsx(Th, { children: t("displayName") }), _jsx(Th, { children: t("type") }), _jsx(Th, { children: t("owner") }), _jsx(Th, { children: t("uris") }), !isDisabled && (_jsxs(_Fragment, { children: [_jsx(Th, { "aria-hidden": "true" }), _jsx(Th, { "aria-hidden": "true" })] }))] }) }), resources.map((resource, rowIndex) => {
var _a;
return (_jsxs(Tbody, { isExpanded: resource.isExpanded, children: [_jsxs(Tr, { children: [_jsx(Td, { expand: {
rowIndex,
isExpanded: resource.isExpanded,
onToggle: (_, rowIndex) => {
const rows = resources.map((resource, index) => index === rowIndex
? {
...resource,
isExpanded: !resource.isExpanded,
}
: resource);
setResources(rows);
},
} }), _jsx(Td, { "data-testid": `name-column-${resource.name}`, children: _jsx(TableText, { wrapModifier: "truncate", children: _jsx(Link, { to: toResourceDetails({
realm,
id: clientId,
resourceId: resource._id,
}), children: resource.name }) }) }), _jsx(Td, { children: _jsx(TableText, { wrapModifier: "truncate", children: resource.displayName }) }), _jsx(Td, { children: _jsx(TableText, { wrapModifier: "truncate", children: resource.type }) }), _jsx(Td, { children: _jsx(TableText, { wrapModifier: "truncate", children: (_a = resource.owner) === null || _a === void 0 ? void 0 : _a.name }) }), _jsx(Td, { children: _jsx(UriRenderer, { row: resource }) }), !isDisabled && (_jsxs(_Fragment, { children: [_jsx(Td, { width: 10, children: _jsx(Button, { variant: "link", component: (props) => (_jsx(Link, { ...props, to: toNewPermission({
realm,
id: clientId,
permissionType: "resource",
selectedId: resource._id,
}) })), children: t("createPermission") }) }), _jsx(Td, { actions: {
items: [
{
title: t("delete"),
onClick: async () => {
setSelectedResource(resource);
setPermission(await fetchPermissions(resource._id));
toggleDeleteDialog();
},
},
],
} })] }))] }), _jsxs(Tr, { isExpanded: resource.isExpanded, children: [_jsx(Td, {}), _jsx(Td, { colSpan: 4, children: _jsx(ExpandableRowContent, { children: resource.isExpanded && (_jsx(DetailCell, { clientId: clientId, id: resource._id, uris: resource.uris })) }) })] }, `child-${resource._id}`)] }, resource._id));
})] })) })), noData && searching && (_jsx(ListEmptyState, { isSearchVariant: true, message: t("noSearchResults"), instructions: t("noSearchResultsInstructions") })), noData && !searching && (_jsx(ListEmptyState, { message: t("emptyResources"), instructions: t("emptyResourcesInstructions"), isDisabled: isDisabled, primaryActionText: t("createResource"), onPrimaryAction: () => navigate(toCreateResource({ realm, id: clientId })) }))] }));
};
//# sourceMappingURL=Resources.js.map