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:
parent
5e5f9acda6
commit
12977d929c
1 changed files with 135 additions and 117 deletions
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue