libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

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

Browse source 
* 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
1 changed files with 135 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
View file

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