@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
116 lines • 7.78 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { KeycloakSelect } from "../../ui-shared";
import { Button, ButtonVariant, Dropdown, DropdownItem, DropdownList, MenuToggle, Modal, ModalVariant, SelectOption, } from "@patternfly/react-core";
import { CaretDownIcon, CaretUpIcon, FilterIcon, } from "@patternfly/react-icons";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { clientScopeTypesDropdown, } from "../../components/client-scope/ClientScopeTypes";
import { ListEmptyState } from "../../ui-shared";
import { KeycloakDataTable } from "../../ui-shared";
import useToggle from "../../utils/useToggle";
import { getProtocolName } from "../../clients/utils";
import "./client-scopes.css";
var FilterType;
(function (FilterType) {
FilterType["Name"] = "Name";
FilterType["Protocol"] = "Protocol";
})(FilterType || (FilterType = {}));
var ProtocolType;
(function (ProtocolType) {
ProtocolType["All"] = "All";
ProtocolType["SAML"] = "SAML";
ProtocolType["OpenIDConnect"] = "OpenID Connect";
})(ProtocolType || (ProtocolType = {}));
export const AddScopeDialog = ({ clientScopes: scopes, clientName, open, toggleDialog, onAdd, isClientScopesConditionType, }) => {
const { t } = useTranslation();
const [addToggle, setAddToggle] = useState(false);
const [rows, setRows] = useState([]);
const [filterType, setFilterType] = useState(FilterType.Name);
const [protocolType, setProtocolType] = useState(ProtocolType.All);
const [isFilterTypeDropdownOpen, toggleIsFilterTypeDropdownOpen] = useToggle();
const [isProtocolTypeDropdownOpen, toggleIsProtocolTypeDropdownOpen] = useToggle(false);
const clientScopes = useMemo(() => {
if (protocolType === ProtocolType.OpenIDConnect) {
return scopes.filter((item) => item.protocol === "openid-connect");
}
else if (protocolType === ProtocolType.SAML) {
return scopes.filter((item) => item.protocol === "saml");
}
return scopes;
}, [scopes, filterType, protocolType]);
const action = (scope) => {
const scopes = rows.map((row) => {
return { scope: row, type: scope };
});
onAdd(scopes);
setAddToggle(false);
toggleDialog();
};
const onFilterTypeDropdownSelect = (filterType) => {
if (filterType === FilterType.Name) {
setFilterType(FilterType.Protocol);
}
else if (filterType === FilterType.Protocol) {
setFilterType(FilterType.Name);
setProtocolType(ProtocolType.All);
}
toggleIsFilterTypeDropdownOpen();
};
const onProtocolTypeDropdownSelect = (protocolType) => {
if (protocolType === ProtocolType.SAML) {
setProtocolType(ProtocolType.SAML);
}
else if (protocolType === ProtocolType.OpenIDConnect) {
setProtocolType(ProtocolType.OpenIDConnect);
}
else if (protocolType === ProtocolType.All) {
setProtocolType(ProtocolType.All);
}
toggleIsProtocolTypeDropdownOpen();
};
const protocolTypeOptions = [
_jsx(SelectOption, { value: ProtocolType.SAML, children: t("protocolTypes.saml") }, 1),
_jsx(SelectOption, { value: ProtocolType.OpenIDConnect, children: t("protocolTypes.openid-connect") }, 2),
_jsx(SelectOption, { value: ProtocolType.All, children: t("protocolTypes.all") }, 3),
];
return (_jsx(Modal, { variant: ModalVariant.medium, title: isClientScopesConditionType
? t("addClientScope")
: t("addClientScopesTo", { clientName }), isOpen: open, onClose: toggleDialog, actions: isClientScopesConditionType
? [
_jsx(Button, { id: "modal-add", "data-testid": "confirm", variant: ButtonVariant.primary, onClick: () => {
const scopes = rows.map((scope) => ({ scope }));
onAdd(scopes);
toggleDialog();
}, isDisabled: rows.length === 0, children: t("add") }, "add"),
_jsx(Button, { id: "modal-cancel", "data-testid": "cancel", variant: ButtonVariant.link, onClick: () => {
setRows([]);
toggleDialog();
}, children: t("cancel") }, "cancel"),
]
: [
_jsx(Dropdown, { popperProps: {
direction: "up",
}, onOpenChange: (isOpen) => setAddToggle(isOpen), className: "keycloak__client-scopes-add__add-dropdown", isOpen: addToggle, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, isDisabled: rows.length === 0, onClick: () => setAddToggle(!addToggle), variant: "primary", id: "add-dropdown", statusIcon: _jsx(CaretUpIcon, {}), children: t("add") })), children: _jsx(DropdownList, { children: clientScopeTypesDropdown(t, action) }) }, "add-dropdown"),
_jsx(Button, { id: "modal-cancel", variant: ButtonVariant.link, onClick: () => {
setRows([]);
toggleDialog();
}, children: t("cancel") }, "cancel"),
], children: _jsx(KeycloakDataTable, { loader: clientScopes, ariaLabelKey: "chooseAMapperType", searchPlaceholderKey: filterType === FilterType.Name ? "searchForClientScope" : undefined, isSearching: filterType !== FilterType.Name, searchTypeComponent: _jsx(Dropdown, { onSelect: () => {
onFilterTypeDropdownSelect(filterType);
}, onOpenChange: toggleIsFilterTypeDropdownOpen, toggle: (ref) => (_jsx(MenuToggle, { ref: ref, "data-testid": "filter-type-dropdown", id: "toggle-id-9", onClick: toggleIsFilterTypeDropdownOpen, icon: _jsx(FilterIcon, {}), statusIcon: _jsx(CaretDownIcon, {}), children: filterType })), isOpen: isFilterTypeDropdownOpen, children: _jsx(DropdownList, { children: _jsx(DropdownItem, { "data-testid": "filter-type-dropdown-item", children: filterType === FilterType.Name ? t("protocol") : t("name") }, "filter-type") }) }), toolbarItem: filterType === FilterType.Protocol && (_jsxs(_Fragment, { children: [_jsx(Dropdown, { onSelect: () => {
onFilterTypeDropdownSelect(filterType);
}, onOpenChange: toggleIsFilterTypeDropdownOpen, "data-testid": "filter-type-dropdown", toggle: (ref) => (_jsx(MenuToggle, { ref: ref, id: "toggle-id-9", onClick: toggleIsFilterTypeDropdownOpen, statusIcon: _jsx(CaretDownIcon, {}), icon: _jsx(FilterIcon, {}), children: filterType })), isOpen: isFilterTypeDropdownOpen, children: _jsx(DropdownList, { children: _jsx(DropdownItem, { "data-testid": "filter-type-dropdown-item", children: t("name") }, "filter-type") }) }), _jsx(KeycloakSelect, { className: "kc-protocolType-select", "aria-label": t("selectOne"), onToggle: toggleIsProtocolTypeDropdownOpen, onSelect: (value) => onProtocolTypeDropdownSelect(value.toString()), selections: protocolType, isOpen: isProtocolTypeDropdownOpen, children: protocolTypeOptions })] })), canSelectAll: true, onSelect: (rows) => setRows(rows), columns: [
{
name: "name",
},
{
name: "protocol",
displayKey: "protocol",
cellRenderer: (client) => { var _a; return getProtocolName(t, (_a = client.protocol) !== null && _a !== void 0 ? _a : "openid-connect"); },
},
{
name: "description",
},
], emptyState: _jsx(ListEmptyState, { message: t("emptyAddClientScopes"), instructions: t("emptyAddClientScopesInstructions") }) }) }));
};
//# sourceMappingURL=AddScopeDialog.js.map