109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Button,
|
|
ButtonVariant,
|
|
Dropdown,
|
|
DropdownToggle,
|
|
Modal,
|
|
ModalVariant,
|
|
DropdownDirection,
|
|
} from "@patternfly/react-core";
|
|
import { CaretUpIcon } from "@patternfly/react-icons";
|
|
import type ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepresentation";
|
|
|
|
import {
|
|
ClientScopeType,
|
|
clientScopeTypesDropdown,
|
|
} from "../../components/client-scope/ClientScopeTypes";
|
|
import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
|
|
|
|
import "./client-scopes.css";
|
|
|
|
export type AddScopeDialogProps = {
|
|
clientScopes: ClientScopeRepresentation[];
|
|
open: boolean;
|
|
toggleDialog: () => void;
|
|
onAdd: (
|
|
scopes: { scope: ClientScopeRepresentation; type: ClientScopeType }[]
|
|
) => void;
|
|
};
|
|
|
|
export const AddScopeDialog = ({
|
|
clientScopes,
|
|
open,
|
|
toggleDialog,
|
|
onAdd,
|
|
}: AddScopeDialogProps) => {
|
|
const { t } = useTranslation("clients");
|
|
const [addToggle, setAddToggle] = useState(false);
|
|
const [rows, setRows] = useState<ClientScopeRepresentation[]>([]);
|
|
|
|
const loader = () => Promise.resolve(clientScopes);
|
|
|
|
const action = (scope: ClientScopeType) => {
|
|
const scopes = rows.map((row) => {
|
|
return { scope: row, type: scope };
|
|
});
|
|
onAdd(scopes);
|
|
setAddToggle(false);
|
|
toggleDialog();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
variant={ModalVariant.medium}
|
|
title={t("addClientScopesTo", { clientId: "test" })}
|
|
isOpen={open}
|
|
onClose={toggleDialog}
|
|
actions={[
|
|
<Dropdown
|
|
className="keycloak__client-scopes-add__add-dropdown"
|
|
id="add-dropdown"
|
|
key="add-dropdown"
|
|
direction={DropdownDirection.up}
|
|
isOpen={addToggle}
|
|
toggle={
|
|
<DropdownToggle
|
|
isDisabled={rows.length === 0}
|
|
onToggle={() => setAddToggle(!addToggle)}
|
|
isPrimary
|
|
toggleIndicator={CaretUpIcon}
|
|
id="add-scope-toggle"
|
|
>
|
|
{t("common:add")}
|
|
</DropdownToggle>
|
|
}
|
|
dropdownItems={clientScopeTypesDropdown(t, action)}
|
|
/>,
|
|
<Button
|
|
id="modal-cancel"
|
|
key="cancel"
|
|
variant={ButtonVariant.link}
|
|
onClick={() => {
|
|
setRows([]);
|
|
toggleDialog();
|
|
}}
|
|
>
|
|
{t("common:cancel")}
|
|
</Button>,
|
|
]}
|
|
>
|
|
<KeycloakDataTable
|
|
loader={loader}
|
|
ariaLabelKey="client-scopes:chooseAMapperType"
|
|
searchPlaceholderKey="client-scopes:searchFor"
|
|
canSelectAll
|
|
onSelect={(rows) => setRows(rows)}
|
|
columns={[
|
|
{
|
|
name: "name",
|
|
},
|
|
{
|
|
name: "description",
|
|
},
|
|
]}
|
|
/>
|
|
</Modal>
|
|
);
|
|
};
|