Create attribute - required toggle in general settings (#2279)

* fixed required in general settings

* feedback

* indentation fix

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk 2022-03-21 14:46:01 +00:00 committed by GitHub
parent 5e5f9acda6
commit 12977d929c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -13,7 +13,7 @@ import {
} from "@patternfly/react-core";
import { useTranslation } from "react-i18next";
import { HelpItem } from "../../../components/help-enabler/HelpItem";
import { Controller, useFormContext } from "react-hook-form";
import { Controller, useFormContext, useWatch } from "react-hook-form";
import { FormAccess } from "../../../components/form-access/FormAccess";
import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
@ -21,8 +21,10 @@ import "../../realm-settings-section.css";
const ENABLED_REQUIRED_WHEN = ["Always", "Scopes are requested"] as const;
const REQUIRED_FOR = [
{ label: "Both users and admins", value: ["admin", "user"]}, { label: "Only users", value: "user" },{ label: "Only admins", value: "admin" }
] as const;
{ label: "Both users and admins", value: ["admin", "user"] },
{ label: "Only users", value: ["user"] },
{ label: "Only admins", value: ["admin"] },
] as const;
export const AttributeGeneralSettings = () => {
const { t } = useTranslation("realm-settings");
@ -37,6 +39,12 @@ export const AttributeGeneralSettings = () => {
const [enabledWhenSelection, setEnabledWhenSelection] = useState("Always");
const [requiredWhenSelection, setRequiredWhenSelection] = useState("Always");
const requiredToggle = useWatch({
control: form.control,
name: "required",
defaultValue: false,
});
useFetch(
() => adminClient.clientScopes.find(),
(clientScopes) => {
@ -225,21 +233,29 @@ export const AttributeGeneralSettings = () => {
>
<Controller
name="required"
defaultValue={["false"]}
defaultValue={false}
control={form.control}
render={({ onChange, value }) => (
<Switch
id={"kc-required"}
isDisabled={false}
onChange={(value) => onChange([`${value}`])}
isChecked={value[0] === "true"}
onChange={(value) => {
onChange(value);
form.setValue("required", value);
}}
isChecked={value === true}
label={t("common:on")}
labelOff={t("common:off")}
/>
)}
></Controller>
</FormGroup>
<FormGroup label={t("requiredFor")} fieldId="requiredFor" hasNoPaddingTop>
{requiredToggle && (
<>
<FormGroup
label={t("requiredFor")}
fieldId="requiredFor"
hasNoPaddingTop
>
<Controller
name="roles"
data-testid="requiredFor"
@ -254,7 +270,7 @@ export const AttributeGeneralSettings = () => {
data-testid={option}
isChecked={value === option.value}
name="roles"
onChange={() => onChange(Array.isArray(option.value) ? option.value : [option.value])}
onChange={() => onChange(option.value)}
label={option.label}
className="kc-requiredFor-option"
/>
@ -345,6 +361,8 @@ export const AttributeGeneralSettings = () => {
)}
/>
</FormGroup>
</>
)}
</FormAccess>
);
};