keycloak-scim/src/clients/scopes/EvaluateScopes.tsx
Erik Jan de Wit 29a1d82c7f
Initial version of the client scope tab for clients (#227)
* initial version of  client scope tab for clients

* initial version evaluate tab

* changed to use new adminCliend
and merged default and optional

* added add dialog

* removed "always" and "required" scopes

* better seach types dropdown layout

* added switch implementation
2020-11-24 15:11:13 -05:00

64 lines
1.7 KiB
TypeScript

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
ClipboardCopy,
Form,
FormGroup,
Select,
SelectOption,
SelectVariant,
Split,
SplitItem,
} from "@patternfly/react-core";
import { HelpItem } from "../../components/help-enabler/HelpItem";
import "./evaluate.css";
export const EvaluateScopes = () => {
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
// const [selected]
return (
<Form isHorizontal>
<FormGroup
label={t("rootUrl")}
fieldId="kc-root-url"
labelIcon={
<HelpItem
helpText="client-scopes-help:protocolMapper"
forLabel={t("protocolMapper")}
forID="protocolMapper"
/>
}
>
<Split hasGutter>
<SplitItem isFilled>
<Select
variant={SelectVariant.typeaheadMulti}
typeAheadAriaLabel="Select a state"
onToggle={() => setIsOpen(!isOpen)}
isOpen={isOpen}
aria-labelledby="test"
placeholderText="Select a state"
>
{/* {this.state.options.map((option, index) => (
<SelectOption
isDisabled={option.disabled}
key={index}
value={option.value}
{...(option.description && { description: option.description })}
/>
))} */}
</Select>
</SplitItem>
<SplitItem>
<ClipboardCopy className="keycloak__scopes_evaluate__clipboard-copy">
{isOpen}
</ClipboardCopy>
</SplitItem>
</Split>
</FormGroup>
</Form>
);
};