@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
142 lines • 8.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { AlertVariant, Button, ButtonVariant, InputGroup, InputGroupItem, PageSection, TextInput, Toolbar, ToolbarGroup, ToolbarItem, } from "@patternfly/react-core";
import { SearchIcon } from "@patternfly/react-icons";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useAdminClient } from "../../admin-client";
import { DraggableTable } from "../../authentication/components/DraggableTable";
import { useAlerts } from "../../ui-shared";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
import { useRealm } from "../../context/realm-context/RealmContext";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { KEY_PROVIDER_TYPE } from "../../util";
import useToggle from "../../utils/useToggle";
import { toKeyProvider } from "../../realm-settings/routes/KeyProvider";
import { KeyProviderModal } from "../../realm-settings/keys/key-providers/KeyProviderModal";
import { KeyProvidersPicker } from "../../realm-settings/keys/key-providers/KeyProvidersPicker";
import "../realm-settings-section.css";
export const KeysProvidersTab = ({ realmComponents, refresh, }) => {
var _a, _b;
const { adminClient } = useAdminClient();
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const { realm } = useRealm();
const [searchVal, setSearchVal] = useState("");
const [filteredComponents, setFilteredComponents] = useState([]);
const [isCreateModalOpen, handleModalToggle] = useToggle();
const serverInfo = useServerInfo();
const keyProviderComponentTypes = (_b = (_a = serverInfo.componentTypes) === null || _a === void 0 ? void 0 : _a[KEY_PROVIDER_TYPE]) !== null && _b !== void 0 ? _b : [];
const [providerOpen, toggleProviderOpen] = useToggle();
const [defaultUIDisplayName, setDefaultUIDisplayName] = useState();
const [selectedComponent, setSelectedComponent] = useState();
const components = useMemo(() => realmComponents.map((component) => {
const provider = keyProviderComponentTypes.find((componentType) => component.providerId === componentType.id);
return {
...component,
providerDescription: provider === null || provider === void 0 ? void 0 : provider.helpText,
};
}), [realmComponents]);
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
titleKey: "deleteProviderTitle",
messageKey: t("deleteProviderConfirm", {
provider: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.name,
}),
continueButtonLabel: "delete",
continueButtonVariant: ButtonVariant.danger,
onConfirm: async () => {
try {
await adminClient.components.del({
id: selectedComponent.id,
realm: realm,
});
refresh();
addAlert(t("deleteProviderSuccess"), AlertVariant.success);
}
catch (error) {
addError("deleteProviderError", error);
}
},
});
const onSearch = () => {
if (searchVal !== "") {
setSearchVal(searchVal);
const filteredComponents = components.filter((component) => {
var _a, _b;
return ((_a = component.name) === null || _a === void 0 ? void 0 : _a.includes(searchVal)) ||
((_b = component.providerId) === null || _b === void 0 ? void 0 : _b.includes(searchVal));
});
setFilteredComponents(filteredComponents);
}
else {
setSearchVal("");
setFilteredComponents(components);
}
};
const handleKeyDown = (e) => {
if (e.key === "Enter") {
onSearch();
}
};
const handleInputChange = (value) => {
setSearchVal(value);
};
return (_jsxs(_Fragment, { children: [providerOpen && (_jsx(KeyProvidersPicker, { onClose: () => toggleProviderOpen(), onConfirm: (provider) => {
handleModalToggle();
setDefaultUIDisplayName(provider);
toggleProviderOpen();
} })), isCreateModalOpen && defaultUIDisplayName && (_jsx(KeyProviderModal, { providerType: defaultUIDisplayName, onClose: () => {
handleModalToggle();
refresh();
} })), _jsx(DeleteConfirm, {}), _jsxs(PageSection, { variant: "light", padding: { default: "noPadding" }, children: [_jsx(Toolbar, { children: _jsxs(ToolbarGroup, { className: "providers-toolbar", children: [_jsx(ToolbarItem, { children: _jsxs(InputGroup, { children: [_jsx(InputGroupItem, { isFill: true, children: _jsx(TextInput, { name: "inputGroupName", id: "inputGroupName", "data-testid": "provider-search-input", type: "search", "aria-label": t("search"), placeholder: t("search"), onChange: (_event, value) => handleInputChange(value), onKeyDown: handleKeyDown }) }), _jsx(InputGroupItem, { children: _jsx(Button, { variant: ButtonVariant.control, "aria-label": t("search"), onClick: onSearch, children: _jsx(SearchIcon, {}) }) })] }) }), _jsx(ToolbarItem, { children: _jsx(Button, { "data-testid": "addProviderDropdown", className: "add-provider-dropdown", onClick: () => toggleProviderOpen(), children: t("addProvider") }) })] }) }), _jsx(DraggableTable, { variant: "compact", className: "kc-draggable-table", keyField: "id", data: filteredComponents.length === 0 ? components : filteredComponents, onDragFinish: async (_, itemOrder) => {
const updateAll = components.map((component) => {
const componentToSave = { ...component };
delete componentToSave.providerDescription;
return adminClient.components.update({ id: component.id }, {
...componentToSave,
config: {
priority: [
(itemOrder.length -
itemOrder.indexOf(component.id) +
100).toString(),
],
},
});
});
try {
await Promise.all(updateAll);
refresh();
addAlert(t("saveProviderListSuccess"), AlertVariant.success);
}
catch (error) {
addError("saveProviderError", error);
}
}, columns: [
{
name: "name",
displayKey: "name",
cellRenderer: (component) => (_jsx(Link, { "data-testid": "provider-name-link", to: toKeyProvider({
realm,
id: component.id,
providerType: component.providerId,
}), children: component.name }, component.name)),
},
{
name: "providerId",
displayKey: "provider",
},
{
name: "providerDescription",
displayKey: "providerDescription",
},
], actions: [
{
title: t("delete"),
onClick: (_key, _idx, component) => {
setSelectedComponent(component);
toggleDeleteDialog();
},
},
] })] })] }));
};
//# sourceMappingURL=KeysProvidersTab.js.map