@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
138 lines • 7.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakDataTable, KeycloakSelect, SelectVariant, useFetch, } from "../../ui-shared";
import { Button, ButtonVariant, PageSection, SelectOption, } from "@patternfly/react-core";
import { FilterIcon } from "@patternfly/react-icons";
import { cellWidth } from "@patternfly/react-table";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useAdminClient } from "../../admin-client";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { KeycloakSpinner } from "../../ui-shared";
import { ListEmptyState } from "../../ui-shared";
import { useRealm } from "../../context/realm-context/RealmContext";
import { emptyFormatter } from "../../util";
import useFormatDate from "../../utils/useFormatDate";
import useToggle from "../../utils/useToggle";
import { toKeysTab } from "../../realm-settings/routes/KeysTab";
import "../realm-settings-section.css";
const FILTER_OPTIONS = ["ACTIVE", "PASSIVE", "DISABLED"];
const SelectFilter = ({ onFilter }) => {
const { t } = useTranslation();
const [filterType, setFilterType] = useState(FILTER_OPTIONS[0]);
const [filterDropdownOpen, toggleFilter] = useToggle();
return (_jsx(KeycloakSelect, { width: 300, "data-testid": "filter-type-select", isOpen: filterDropdownOpen, className: "kc-filter-type-select", variant: SelectVariant.single, onToggle: toggleFilter, toggleIcon: _jsx(FilterIcon, {}), onSelect: (value) => {
const filter = FILTER_OPTIONS.find((o) => o === value.toString()) ||
FILTER_OPTIONS[0];
setFilterType(filter);
onFilter(filter);
toggleFilter();
}, selections: filterType, "aria-label": t("selectFilterType"), children: FILTER_OPTIONS.map((option) => (_jsx(SelectOption, { "data-testid": `${option}-option`, value: option, children: t(`keysFilter.${option}`) }, option))) }));
};
export const KeysListTab = ({ realmComponents }) => {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const navigate = useNavigate();
const formatDate = useFormatDate();
const [publicKey, setPublicKey] = useState("");
const [certificate, setCertificate] = useState("");
const { realm } = useRealm();
const [keyData, setKeyData] = useState();
const [filteredKeyData, setFilteredKeyData] = useState();
useFetch(async () => {
var _a;
const keysMetaData = await adminClient.realms.getKeys({ realm });
return (_a = keysMetaData.keys) === null || _a === void 0 ? void 0 : _a.map((key) => {
const provider = realmComponents.find((component) => component.id === key.providerId);
return { ...key, provider: provider === null || provider === void 0 ? void 0 : provider.name };
});
}, setKeyData, []);
const [togglePublicKeyDialog, PublicKeyDialog] = useConfirmDialog({
titleKey: t("publicKey"),
messageKey: publicKey,
continueButtonLabel: "close",
continueButtonVariant: ButtonVariant.primary,
onConfirm: () => Promise.resolve(),
});
const [toggleCertificateDialog, CertificateDialog] = useConfirmDialog({
titleKey: t("certificate"),
messageKey: certificate,
continueButtonLabel: "close",
continueButtonVariant: ButtonVariant.primary,
onConfirm: () => Promise.resolve(),
});
if (!keyData) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(PageSection, { variant: "light", padding: { default: "noPadding" }, children: [_jsx(PublicKeyDialog, {}), _jsx(CertificateDialog, {}), _jsx(KeycloakDataTable, { isNotCompact: true, className: "kc-keys-list", loader: filteredKeyData || keyData, ariaLabelKey: "keysList", searchPlaceholderKey: "searchKey", searchTypeComponent: _jsx(SelectFilter, { onFilter: (filterType) => setFilteredKeyData(filterType !== FILTER_OPTIONS[0]
? keyData.filter(({ status }) => status === filterType)
: undefined) }), columns: [
{
name: "algorithm",
displayKey: "algorithm",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(15)],
},
{
name: "type",
displayKey: "type",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "kid",
displayKey: "kid",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "use",
displayKey: "use",
cellFormatters: [emptyFormatter()],
transforms: [cellWidth(10)],
},
{
name: "provider",
displayKey: "provider",
cellRenderer: ({ provider }) => provider || "-",
transforms: [cellWidth(10)],
},
{
name: "validTo",
displayKey: "validTo",
cellRenderer: ({ validTo }) => validTo ? formatDate(new Date(validTo)) : "-",
transforms: [cellWidth(10)],
},
{
name: "publicKeys",
displayKey: "publicKeys",
cellRenderer: ({ type, publicKey, certificate }) => {
if (type === "EC") {
return (_jsx(Button, { onClick: () => {
togglePublicKeyDialog();
setPublicKey(publicKey);
}, variant: "secondary", id: "kc-public-key", children: t("publicKey") }));
}
else if (type === "RSA") {
return (_jsxs("div", { className: "button-wrapper", children: [_jsx(Button, { onClick: () => {
togglePublicKeyDialog();
setPublicKey(publicKey);
}, variant: "secondary", id: publicKey, children: t("publicKey") }), _jsx(Button, { onClick: () => {
toggleCertificateDialog();
setCertificate(certificate);
}, variant: "secondary", id: certificate, className: "kc-certificate", children: t("certificate") })] }));
}
else if (type === "OKP") {
return (_jsx(Button, { onClick: () => {
togglePublicKeyDialog();
setPublicKey(publicKey);
}, variant: "secondary", id: "kc-public-key", children: t("publicKey") }));
}
else
return "";
},
transforms: [cellWidth(20)],
},
], isSearching: !!filteredKeyData, emptyState: _jsx(ListEmptyState, { hasIcon: true, message: t("noKeys"), instructions: t("noKeysDescription"), primaryActionText: t("addProvider"), onPrimaryAction: () => navigate(toKeysTab({ realm, tab: "providers" })) }) })] }));
};
//# sourceMappingURL=KeysListTab.js.map