@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
114 lines • 7.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useAlerts, useFetch } from "../ui-shared";
import { AlertVariant, ButtonVariant, CardTitle, DropdownItem, Gallery, GalleryItem, Icon, PageSection, Split, SplitItem, Text, TextContent, TextVariants, } from "@patternfly/react-core";
import { DatabaseIcon } from "@patternfly/react-icons";
import { useMemo, 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 { ClickableCard } from "../components/keycloak-card/ClickableCard";
import { KeycloakCard } from "../components/keycloak-card/KeycloakCard";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import helpUrls from "../help-urls";
import { toUpperCase } from "../util";
import { ManagePriorityDialog } from "../user-federation/ManagePriorityDialog";
import { toCustomUserFederation } from "../user-federation/routes/CustomUserFederation";
import { toNewCustomUserFederation } from "../user-federation/routes/NewCustomUserFederation";
import { toUserFederationKerberos } from "../user-federation/routes/UserFederationKerberos";
import { toUserFederationLdap } from "../user-federation/routes/UserFederationLdap";
import "./user-federation.css";
export default function UserFederationSection() {
var _a;
const { adminClient } = useAdminClient();
const [userFederations, setUserFederations] = useState();
const { addAlert, addError } = useAlerts();
const { t } = useTranslation();
const { realm, realmRepresentation } = useRealm();
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const navigate = useNavigate();
const [manageDisplayDialog, setManageDisplayDialog] = useState(false);
const providers = ((_a = useServerInfo().componentTypes) === null || _a === void 0 ? void 0 : _a["org.keycloak.storage.UserStorageProvider"]) || [];
useFetch(async () => {
const testParams = {
parentId: realmRepresentation.id,
type: "org.keycloak.storage.UserStorageProvider",
};
return adminClient.components.find(testParams);
}, (userFederations) => {
setUserFederations(userFederations);
}, [key]);
const ufAddProviderDropdownItems = useMemo(() => providers.map((p) => (_jsx(DropdownItem, { onClick: () => navigate(toNewCustomUserFederation({ realm, providerId: p.id })), children: p.id.toUpperCase() == "LDAP"
? p.id.toUpperCase()
: toUpperCase(p.id) }, p.id))), []);
const lowerButtonProps = {
variant: "link",
onClick: () => setManageDisplayDialog(true),
lowerButtonTitle: t("managePriorities"),
};
let cards;
const [currentCard, setCurrentCard] = useState("");
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("userFedDeleteConfirmTitle"),
messageKey: t("userFedDeleteConfirm"),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.components.del({ id: currentCard });
refresh();
addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
}
catch (error) {
addError("userFedDeleteError", error);
}
},
});
const toggleDeleteForCard = (id) => {
setCurrentCard(id);
toggleDeleteDialog();
};
const cardSorter = (card1, card2) => {
const a = `${card1.name}`;
const b = `${card2.name}`;
return a < b ? -1 : 1;
};
const toDetails = (providerId, id) => {
switch (providerId) {
case "ldap":
return toUserFederationLdap({ realm, id });
case "kerberos":
return toUserFederationKerberos({ realm, id });
default:
return toCustomUserFederation({ realm, providerId, id });
}
};
if (userFederations) {
cards = userFederations.sort(cardSorter).map((userFederation, index) => {
var _a, _b, _c, _d;
return (_jsx(GalleryItem, { className: "keycloak-admin--user-federation__gallery-item", children: _jsx(KeycloakCard, { to: toDetails(userFederation.providerId, userFederation.id), dropdownItems: [
_jsx(DropdownItem, { onClick: () => {
toggleDeleteForCard(userFederation.id);
}, "data-testid": "card-delete", children: t("delete") }, `${index}-cardDelete`),
], title: userFederation.name, footerText: toUpperCase(userFederation.providerId), labelText: ((_b = (_a = userFederation.config) === null || _a === void 0 ? void 0 : _a["enabled"]) === null || _b === void 0 ? void 0 : _b[0]) !== "false"
? t("enabled")
: t("disabled"), labelColor: ((_d = (_c = userFederation.config) === null || _c === void 0 ? void 0 : _c["enabled"]) === null || _d === void 0 ? void 0 : _d[0]) !== "false"
? "blue"
: "gray" }) }, index));
});
}
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), manageDisplayDialog && userFederations && (_jsx(ManagePriorityDialog, { onClose: () => setManageDisplayDialog(false), components: userFederations.filter((p) => { var _a; return (_a = p.config) === null || _a === void 0 ? void 0 : _a.enabled; }) })), _jsx(ViewHeader, { titleKey: "userFederation", subKey: "userFederationExplain", helpUrl: helpUrls.userFederationUrl, ...(userFederations && userFederations.length > 0
? {
lowerDropdownItems: ufAddProviderDropdownItems,
lowerDropdownMenuTitle: "addNewProvider",
lowerButton: lowerButtonProps,
}
: {}) }), _jsx(PageSection, { children: userFederations && userFederations.length > 0 ? (_jsx(Gallery, { hasGutter: true, children: cards })) : (_jsxs(_Fragment, { children: [_jsx(TextContent, { children: _jsx(Text, { component: TextVariants.p, children: t("getStarted") }) }), _jsx(TextContent, { children: _jsx(Text, { className: "pf-v5-u-mt-lg", component: TextVariants.h2, children: t("providers") }) }), _jsx("hr", { className: "pf-v5-u-mb-lg" }), _jsx(Gallery, { hasGutter: true, children: providers.map((p) => (_jsx(ClickableCard, { onClick: () => navigate(toNewCustomUserFederation({ realm, providerId: p.id })), "data-testid": `${p.id}-card`, children: _jsx(CardTitle, { children: _jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { children: _jsx(Icon, { size: "lg", children: _jsx(DatabaseIcon, {}) }) }), _jsx(SplitItem, { isFilled: true, children: t("addProvider", {
provider: toUpperCase(p.id),
count: 4,
}) })] }) }) }, p.id))) })] })) })] }));
}
//# sourceMappingURL=UserFederationSection.js.map