@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
138 lines • 9.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { IconMapper, KeycloakDataTable, ListEmptyState, useAlerts, useFetch, } from "../ui-shared";
import { AlertVariant, Badge, Button, ButtonVariant, CardTitle, Checkbox, Dropdown, DropdownGroup, DropdownItem, DropdownList, Gallery, MenuToggle, PageSection, Split, SplitItem, Text, TextContent, TextVariants, ToolbarItem, } from "@patternfly/react-core";
import { groupBy, sortBy } from "lodash-es";
import { Fragment, 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 { ClickableCard } from "../components/keycloak-card/ClickableCard";
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 { toEditOrganization } from "../organizations/routes/EditOrganization";
import { upperCaseFormatter } from "../util";
import { ManageOrderDialog } from "../identity-providers/ManageOrderDialog";
import { toIdentityProvider } from "../identity-providers/routes/IdentityProvider";
import { toIdentityProviderCreate } from "../identity-providers/routes/IdentityProviderCreate";
const DetailLink = (identityProvider) => {
const { t } = useTranslation();
const { realm } = useRealm();
return (_jsxs(Link, { to: toIdentityProvider({
realm,
providerId: identityProvider.providerId,
alias: identityProvider.alias,
tab: "settings",
}), children: [identityProvider.displayName || identityProvider.alias, !identityProvider.enabled && (_jsx(Badge, { isRead: true, className: "pf-v5-u-ml-sm", children: t("disabled") }, `${identityProvider.providerId}-disabled`))] }, identityProvider.providerId));
};
const OrganizationLink = (identityProvider) => {
const { t } = useTranslation();
const { realm } = useRealm();
if (!(identityProvider === null || identityProvider === void 0 ? void 0 : identityProvider.organizationId)) {
return "—";
}
return (_jsx(Link, { to: toEditOrganization({
realm,
id: identityProvider.organizationId,
tab: "identityProviders",
}), children: t("organization") }, identityProvider.providerId));
};
export default function IdentityProvidersSection() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const identityProviders = groupBy(useServerInfo().identityProviders, "groupName");
const { realm } = useRealm();
const navigate = useNavigate();
const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1);
const [hide, setHide] = useState(false);
const [addProviderOpen, setAddProviderOpen] = useState(false);
const [manageDisplayDialog, setManageDisplayDialog] = useState(false);
const [hasProviders, setHasProviders] = useState(false);
const [selectedProvider, setSelectedProvider] = useState();
const { addAlert, addError } = useAlerts();
useFetch(async () => adminClient.identityProviders.find({ max: 1 }), (providers) => {
setHasProviders(providers.length === 1);
}, [key]);
const loader = async (first, max, search) => {
const params = {
first: first,
max: max,
realmOnly: hide,
};
if (search) {
params.search = search;
}
const providers = await adminClient.identityProviders.find(params);
return sortBy(providers, "alias");
};
const navigateToCreate = (providerId) => navigate(toIdentityProviderCreate({
realm,
providerId,
}));
const identityProviderOptions = () => Object.keys(identityProviders).map((group) => (_jsx(DropdownGroup, { label: group, children: sortBy(identityProviders[group], "name").map((provider) => (_jsx(DropdownItem, { value: provider.id, component: "a", "data-testid": provider.id, onClick: () => navigate(toIdentityProviderCreate({
realm,
providerId: provider.id,
})), children: provider.name }, provider.id))) }, group)));
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteProvider",
messageKey: t("deleteConfirm", { provider: selectedProvider === null || selectedProvider === void 0 ? void 0 : selectedProvider.alias }),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.identityProviders.del({
alias: selectedProvider.alias,
});
refresh();
addAlert(t("deletedSuccessIdentityProvider"), AlertVariant.success);
}
catch (error) {
addError("deleteErrorIdentityProvider", error);
}
},
});
return (_jsxs(_Fragment, { children: [_jsx(DeleteConfirm, {}), manageDisplayDialog && (_jsx(ManageOrderDialog, { hideRealmBasedIdps: hide, onClose: () => {
setManageDisplayDialog(false);
refresh();
} })), _jsx(ViewHeader, { titleKey: "identityProviders", subKey: "listExplain", helpUrl: helpUrls.identityProvidersUrl }), _jsxs(PageSection, { variant: !hasProviders ? "default" : "light", className: !hasProviders ? "" : "pf-v5-u-p-0", children: [!hasProviders && (_jsxs(_Fragment, { children: [_jsx(TextContent, { children: _jsx(Text, { component: TextVariants.p, children: t("getStarted") }) }), Object.keys(identityProviders).map((group) => (_jsxs(Fragment, { children: [_jsx(TextContent, { children: _jsxs(Text, { className: "pf-v5-u-mt-lg", component: TextVariants.h2, children: [group, ":"] }) }), _jsx("hr", { className: "pf-v5-u-mb-lg" }), _jsx(Gallery, { hasGutter: true, children: sortBy(identityProviders[group], "name").map((provider) => (_jsx(ClickableCard, { "data-testid": `${provider.id}-card`, onClick: () => navigateToCreate(provider.id), children: _jsx(CardTitle, { children: _jsxs(Split, { hasGutter: true, children: [_jsx(SplitItem, { children: _jsx(IconMapper, { icon: provider.id }) }), _jsx(SplitItem, { isFilled: true, children: provider.name })] }) }) }, provider.id))) })] }, group)))] })), hasProviders && (_jsx(KeycloakDataTable, { loader: loader, isPaginated: true, ariaLabelKey: "identityProviders", searchPlaceholderKey: "searchForProvider", toolbarItem: _jsxs(_Fragment, { children: [_jsx(ToolbarItem, { alignSelf: "center", children: _jsx(Checkbox, { label: t("hideOrganizationLinkedIdps"), id: "hideOrganizationLinkedIdps", "data-testid": "hideOrganizationLinkedIdps", isChecked: hide, onChange: (_event, check) => {
setHide(check);
refresh();
} }) }), _jsx(ToolbarItem, { children: _jsx(Dropdown, { "data-testid": "addProviderDropdown", onOpenChange: (isOpen) => setAddProviderOpen(isOpen), toggle: (ref) => (_jsx(MenuToggle, { ref: ref, onClick: () => setAddProviderOpen(!addProviderOpen), variant: "primary", children: t("addProvider") })), isOpen: addProviderOpen, children: _jsx(DropdownList, { children: identityProviderOptions() }) }) }), _jsx(ToolbarItem, { children: _jsx(Button, { "data-testid": "manageDisplayOrder", variant: "link", onClick: () => setManageDisplayDialog(true), children: t("manageDisplayOrder") }) })] }), actions: [
{
title: t("delete"),
onRowClick: (provider) => {
setSelectedProvider(provider);
toggleDeleteDialog();
},
},
], columns: [
{
name: "alias",
displayKey: "name",
cellRenderer: DetailLink,
},
{
name: "providerId",
displayKey: "providerDetails",
cellFormatters: [upperCaseFormatter()],
},
{
name: "organizationId",
displayKey: "linkedOrganization",
cellRenderer: OrganizationLink,
},
], emptyState: _jsx(ListEmptyState, { message: t("identityProviders"), instructions: t("emptyRealmBasedIdps"), isSearchVariant: true, secondaryActions: [
{
text: t("clearAllFilters"),
onClick: () => {
setHide(false);
refresh();
},
type: ButtonVariant.link,
},
] }) }, key))] })] }));
}
//# sourceMappingURL=IdentityProvidersSection.js.map