@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
157 lines • 9.97 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useAlerts, useEnvironment } from "../ui-shared";
import { AlertVariant, Badge, Button, ButtonVariant, PageSection, Tab, TabTitleText, ToolbarItem, Tooltip, } from "@patternfly/react-core";
import { WarningTriangleIcon } from "@patternfly/react-icons";
import { TableText, cellWidth } from "@patternfly/react-table";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../admin-client";
import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
import { FormattedLink } from "../components/external-link/FormattedLink";
import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs";
import { KeycloakDataTable } from "../ui-shared";
import { ViewHeader } from "../components/view-header/ViewHeader";
import { useAccess } from "../context/access/Access";
import { useRealm } from "../context/realm-context/RealmContext";
import helpUrls from "../help-urls";
import { emptyFormatter, exportClient } from "../util";
import { convertClientToUrl } from "../utils/client-url";
import { translationFormatter } from "../utils/translationFormatter";
import { InitialAccessTokenList } from "../clients/initial-access/InitialAccessTokenList";
import { ClientRegistration } from "../clients/registration/ClientRegistration";
import { toAddClient } from "../clients/routes/AddClient";
import { toClient } from "../clients/routes/Client";
import { toClients } from "../clients/routes/Clients";
import { toImportClient } from "../clients/routes/ImportClient";
import { getProtocolName, isRealmClient } from "../clients/utils";
const ClientDetailLink = (client) => {
var _a;
const { t } = useTranslation();
const { realm } = useRealm();
return (_jsxs(TableText, { wrapModifier: "truncate", children: [_jsxs(Link, { to: toClient({ realm, clientId: client.id, tab: "settings" }), children: [client.clientId, !client.enabled && (_jsx(Badge, { isRead: true, className: "pf-v5-u-ml-sm", children: t("disabled") }, `${client.id}-disabled`))] }, client.id), ((_a = client.attributes) === null || _a === void 0 ? void 0 : _a["is_temporary_admin"]) === "true" && (_jsx(Tooltip, { content: t("temporaryService"), children: _jsx(WarningTriangleIcon, { className: "pf-v5-u-ml-sm", id: "temporary-admin-label" }) }))] }));
};
const ClientName = (client) => {
const { t } = useTranslation();
return (_jsx(TableText, { wrapModifier: "truncate", children: translationFormatter(t)(client.name) }));
};
const ClientDescription = (client) => (_jsx(TableText, { wrapModifier: "truncate", children: emptyFormatter()(client.description) }));
const ClientHomeLink = (client) => {
const { environment } = useEnvironment();
const href = convertClientToUrl(client, environment);
if (!href) {
return "—";
}
return (_jsx(FormattedLink, { href: href, "data-testid": `client-home-url-${client.clientId}` }));
};
const ToolbarItems = () => {
const { t } = useTranslation();
const { realm } = useRealm();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-clients");
if (!isManager)
return _jsx("span", {});
return (_jsxs(_Fragment, { children: [_jsx(ToolbarItem, { children: _jsx(Button, { component: (props) => _jsx(Link, { ...props, to: toAddClient({ realm }) }), children: t("createClient") }) }), _jsx(ToolbarItem, { children: _jsx(Button, { component: (props) => (_jsx(Link, { ...props, to: toImportClient({ realm }) })), variant: "link", "data-testid": "importClient", children: t("importClient") }) })] }));
};
export default function ClientsSection() {
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
const [key, setKey] = useState(0);
const refresh = () => setKey(new Date().getTime());
const [selectedClient, setSelectedClient] = useState();
const { hasAccess } = useAccess();
const isManager = hasAccess("manage-clients");
const loader = async (first, max, search) => {
const params = {
first: first,
max: max,
};
if (search) {
params.clientId = search;
params.search = true;
}
return adminClient.clients.find({ ...params });
};
const useTab = (tab) => useRoutableTab(toClients({ realm, tab }));
const listTab = useTab("list");
const initialAccessTokenTab = useTab("initial-access-token");
const clientRegistrationTab = useTab("client-registration");
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: t("clientDelete", { clientId: selectedClient === null || selectedClient === void 0 ? void 0 : selectedClient.clientId }),
messageKey: "clientDeleteConfirm",
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.clients.del({
id: selectedClient.id,
});
addAlert(t("clientDeletedSuccess"), AlertVariant.success);
refresh();
}
catch (error) {
addError("clientDeleteError", error);
}
},
});
return (_jsxs(_Fragment, { children: [_jsx(ViewHeader, { titleKey: "clientList", subKey: "clientsExplain", helpUrl: helpUrls.clientsUrl, divider: false }), _jsx(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: _jsxs(RoutableTabs, { mountOnEnter: true, isBox: true, defaultLocation: toClients({
realm,
tab: "list",
}), children: [_jsxs(Tab, { "data-testid": "list", title: _jsx(TabTitleText, { children: t("clientsList") }), ...listTab, children: [_jsx(DeleteConfirm, {}), _jsx(KeycloakDataTable, { loader: loader, isPaginated: true, ariaLabelKey: "clientList", searchPlaceholderKey: "searchForClient", toolbarItem: _jsx(ToolbarItems, {}), actionResolver: (rowData) => {
var _a;
const client = rowData.data;
const actions = [
{
title: t("export"),
onClick() {
exportClient(client);
},
},
];
if (!isRealmClient(client) &&
(isManager || ((_a = client.access) === null || _a === void 0 ? void 0 : _a.configure))) {
actions.push({
title: t("delete"),
onClick() {
setSelectedClient(client);
toggleDeleteDialog();
},
});
}
return actions;
}, columns: [
{
name: "clientId",
displayKey: "clientId",
transforms: [cellWidth(20)],
cellRenderer: ClientDetailLink,
},
{
name: "clientName",
displayKey: "clientName",
transforms: [cellWidth(20)],
cellRenderer: ClientName,
},
{
name: "protocol",
displayKey: "type",
transforms: [cellWidth(10)],
cellRenderer: (client) => { var _a; return getProtocolName(t, (_a = client.protocol) !== null && _a !== void 0 ? _a : "openid-connect"); },
},
{
name: "description",
displayKey: "description",
transforms: [cellWidth(30)],
cellRenderer: ClientDescription,
},
{
name: "baseUrl",
displayKey: "homeURL",
transforms: [cellWidth(20)],
cellRenderer: ClientHomeLink,
},
] }, key)] }), _jsx(Tab, { "data-testid": "initialAccessToken", title: _jsx(TabTitleText, { children: t("initialAccessToken") }), ...initialAccessTokenTab, children: _jsx(InitialAccessTokenList, {}) }), _jsx(Tab, { "data-testid": "registration", title: _jsx(TabTitleText, { children: t("clientRegistration") }), ...clientRegistrationTab, children: _jsx(ClientRegistration, {}) })] }) })] }));
}
//# sourceMappingURL=ClientsSection.js.map