Added my PR review comments after the merge (#1605)

This commit is contained in:
Erik Jan de Wit 2021-11-29 13:51:31 +01:00 committed by GitHub
parent 8c62acfd63
commit f4f52ad2c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 91 additions and 134 deletions

View file

@ -17,11 +17,12 @@ import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/
import { useParams } from "react-router";
import type { EditClientPolicyConditionParams } from "../../realm-settings/routes/EditCondition";
import { GroupPickerDialog } from "../group/GroupPickerDialog";
import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
export const MultivaluedChipsComponent = ({
defaultValue,
name,
label,
helpText,
}: ComponentProps) => {
const { t } = useTranslation("dynamic");
const { control } = useFormContext();
@ -31,9 +32,6 @@ export const MultivaluedChipsComponent = ({
const [clientScopes, setClientScopes] = useState<ClientScopeRepresentation[]>(
[]
);
const [selectedGroups, setSelectedGroups] = useState<GroupRepresentation[]>(
[]
);
useFetch(
() => adminClient.clientScopes.find(),
@ -49,26 +47,9 @@ export const MultivaluedChipsComponent = ({
return (
<FormGroup
label={
name === "scopes"
? t("realm-settings:clientScopesCondition")
: t("common:groups")
}
id={name === "scopes" ? "expected-scopes" : "expected-groups"}
label={t(label!)}
labelIcon={
<HelpItem
helpText={
name === "scopes"
? t("realm-settings-help:clientScopesConditionTooltip")
: t("realm-settings-help:clientUpdaterSourceGroupsTooltip")
}
forLabel={
name === "scopes"
? t("clientScopes")
: t("clientUpdaterSourceGroups")
}
forID={name!}
/>
<HelpItem helpText={t(helpText!)} forLabel={label!} forID={name!} />
}
fieldId={name!}
>
@ -77,95 +58,84 @@ export const MultivaluedChipsComponent = ({
control={control}
defaultValue={[defaultValue]}
rules={{ required: true }}
render={({ onChange, value }) => {
return (
<>
{open && name === "scopes" && (
<AddScopeDialog
clientScopes={clientScopes.filter(
(scope) => !value.includes(scope.name!)
)}
isClientScopesConditionType
open={open}
toggleDialog={() => setOpen(!open)}
onAdd={(scopes) => {
onChange([
...value,
...scopes
.map((scope) => scope.scope)
.map((item) => item.name!),
]);
}}
/>
)}
{open && name === "groups" && (
<GroupPickerDialog
type="selectMany"
text={{
title: "users:selectGroups",
ok: "users:join",
}}
onConfirm={(groups) => {
onChange([...value, ...groups.map((group) => group.name)]);
setSelectedGroups([...selectedGroups!, ...groups]);
setOpen(false);
}}
onClose={() => {
setOpen(false);
}}
filterGroups={value}
/>
)}
{value.length === 0 && !conditionName && (
<TextInput
type="text"
id="kc-scopes"
value={value}
data-testid="client-scope-input"
name="config.client-scopes"
isDisabled
/>
)}
<ChipGroup
className="kc-client-scopes-chip-group"
isClosable
onClick={() => {
onChange([]);
if (name === "groups") {
setSelectedGroups([]);
}
render={({ onChange, value }) => (
<>
{open && name === "scopes" && (
<AddScopeDialog
clientScopes={clientScopes.filter(
(scope) => !value.includes(scope.name!)
)}
isClientScopesConditionType
open={open}
toggleDialog={() => setOpen(!open)}
onAdd={(scopes) => {
onChange([
...value,
...scopes
.map((scope) => scope.scope)
.map((item) => item.name!),
]);
}}
>
{value.map((currentChip: string) => (
<Chip
key={currentChip}
onClick={() => {
onChange(
value.filter((item: string) => item !== currentChip)
);
if (name === "groups") {
setSelectedGroups(
value.filter((item: string) => item !== currentChip)
);
}
}}
>
{currentChip}
</Chip>
))}
</ChipGroup>
<Button
data-testid="select-scope-button"
variant="secondary"
onClick={() => {
toggleModal();
/>
)}
{open && name === "groups" && (
<GroupPickerDialog
type="selectMany"
text={{
title: "users:selectGroups",
ok: "users:join",
}}
>
{t("common:select")}
</Button>
</>
);
}}
onConfirm={(groups) => {
onChange([...value, ...groups.map((group) => group.name)]);
setOpen(false);
}}
onClose={() => {
setOpen(false);
}}
filterGroups={value}
/>
)}
{value.length === 0 && !conditionName && (
<TextInput
type="text"
id="kc-scopes"
value={value}
data-testid="client-scope-input"
name="config.client-scopes"
isDisabled
/>
)}
<ChipGroup
className="kc-client-scopes-chip-group"
isClosable
onClick={() => {
onChange([]);
}}
>
{value.map((currentChip: string) => (
<Chip
key={currentChip}
onClick={() => {
onChange(
value.filter((item: string) => item !== currentChip)
);
}}
>
{currentChip}
</Chip>
))}
</ChipGroup>
<Button
data-testid="select-scope-button"
variant="secondary"
onClick={() => {
toggleModal();
}}
>
{t("common:select")}
</Button>
</>
)}
/>
</FormGroup>
);

View file

@ -168,7 +168,7 @@ export default {
"client-updater-source-groups": {
label: "Groups",
tooltip:
"Name of groups to check. Condition evaluates to true if the entity, who creates/updates client is member of some of the specified groups. Configured groups are specified by their simple name, which must match to the name of the Keycloak group. No support for group hierarchy is used here.}",
"Name of groups to check. Condition evaluates to true if the entity, who creates/updates client is member of some of the specified groups. Configured groups are specified by their simple name, which must match to the name of the Keycloak group. No support for group hierarchy is used here.",
},
"client-updater-trusted-hosts": {
label: "Trusted hosts",

View file

@ -291,35 +291,22 @@ export default function NewClientPolicyCondition() {
<FormProvider {...form}>
{conditionProperties.map((property) => {
const componentType = property.type!;
if (
property.name === "roles" &&
(conditionType === "client-roles" ||
conditionName === "client-roles")
) {
if (property.name === "roles") {
return <MultivaluedRoleComponent {...property} />;
} else if (
property.name === "scopes" &&
(conditionType === "client-scopes" ||
conditionName === "client-scopes")
) {
}
if (property.name === "scopes" || property.name === "groups") {
return (
<MultivaluedChipsComponent
defaultValue="offline_access"
defaultValue={
property.name === "scopes" ? "offline_access" : "topgroup"
}
{...property}
/>
);
} else if (
property.name === "groups" &&
(conditionType === "client-updater-source-groups" ||
conditionName === "client-updater-source-groups")
) {
return (
<MultivaluedChipsComponent
defaultValue="topgroup"
{...property}
/>
);
} else if (isValidComponentType(componentType)) {
}
if (isValidComponentType(componentType)) {
const Component = COMPONENTS[componentType];
return <Component key={property.name} {...property} />;
} else {