keycloak-scim/src/client-scopes/add/components/ClientSelectComponent.tsx
Jenny bf236cb7f3
Client policies(conditions): add correct form fields for all condition types (#1430)
* add create client policy form; WIP

add client policy tests

checkout realm settings test from master

RealmSettingsPage.ts master

remove comment and add missing translation

fix tests

PR feedback from Jon and Erik

rebase

editClientPolicy

edit client policy

add client policy conditions form

fix bug in create form

remove comment

update help text

fixes

breadcrumbs

add support for adding multiple conditions, deleting conditions, and list conditions in data table

clean up names

add delete functionality to conditions form

PR feedback from Jon

useMemo for conditions

remove comments and logs

remove unused hook

PR feedback from Jon

messages

rename message

rebase

remove duplicate value

fixed multi select bug

conditionConfigs wip

add all config fields, labels, and help text for condition types

wip config POST

config post is working

fix bug in multiline string POST

fix any client empty config

client scopes config wip

fix config settings for client-updater-context

fix client access type config

clean up configuration conditionals

add aria label to resolve critical axe issue

Apply suggestions from code review

Co-authored-by: Jon Koops <jonkoops@gmail.com>

address PR feedback from Jon

fix undef error

PR feedback from Stan

add util function

* fix import stmt

* revert change to route

* fix profile create values

* fix paths
2021-11-01 18:18:27 -04:00

87 lines
2.3 KiB
TypeScript

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Controller, useFormContext } from "react-hook-form";
import {
FormGroup,
Select,
SelectOption,
SelectVariant,
} from "@patternfly/react-core";
import type { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import type { ComponentProps } from "./components";
import { convertToHyphens } from "../../../util";
export const ClientSelectComponent = ({
name,
label,
helpText,
defaultValue,
}: ComponentProps) => {
const { t } = useTranslation("client-scopes");
const { control } = useFormContext();
const [open, setOpen] = useState(false);
const [clients, setClients] = useState<JSX.Element[]>();
const [search, setSearch] = useState("");
const adminClient = useAdminClient();
useFetch(
() => {
const params: ClientQuery = {
max: 20,
};
if (search) {
params.clientId = search;
params.search = true;
}
return adminClient.clients.find(params);
},
(clients) =>
setClients(
clients.map((option) => (
<SelectOption key={option.id} value={option.clientId} />
))
),
[search]
);
return (
<FormGroup
label={t(label!)}
labelIcon={
<HelpItem helpText={t(helpText!)} forLabel={t(label!)} forID={name!} />
}
fieldId={name!}
>
<Controller
name={`config.${convertToHyphens(name!)}`}
defaultValue={defaultValue || ""}
control={control}
render={({ onChange, value }) => (
<Select
toggleId={name}
variant={SelectVariant.typeahead}
onToggle={(open) => setOpen(open)}
isOpen={open}
selections={value}
onFilter={(_, value) => {
setSearch(value);
return clients;
}}
onSelect={(_, value) => {
onChange(value.toString());
setOpen(false);
}}
aria-label={t(label!)}
>
{clients}
</Select>
)}
/>
</FormGroup>
);
};