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

Use react-hook-form v7 for scope details form (#3953)

Browse source
This commit is contained in:
Jon Koops 2022-12-07 10:03:51 +01:00 committed by GitHub
parent b4d001bd82
commit c1f545fb4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
apps/admin-ui/src/clients/authorization/ScopeDetails.tsx
View file

@ -1,8 +1,4 @@
import { useState } from "react"; import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/scopeRepresentation";
import { useParams } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom-v5-compat";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { import {
ActionGroup, ActionGroup,
AlertVariant, AlertVariant,
@ -13,19 +9,25 @@ import {
PageSection, PageSection,
ValidatedOptions, ValidatedOptions,
} from "@patternfly/react-core"; } from "@patternfly/react-core";
import { useState } from "react";
import { useForm } from "react-hook-form-v7";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom-v5-compat";
import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/scopeRepresentation"; import { useAlerts } from "../../components/alert/Alerts";
import type { ScopeDetailsParams } from "../routes/Scope";
import { FormAccess } from "../../components/form-access/FormAccess"; import { FormAccess } from "../../components/form-access/FormAccess";
import { HelpItem } from "../../components/help-enabler/HelpItem"; import { HelpItem } from "../../components/help-enabler/HelpItem";
import { ViewHeader } from "../../components/view-header/ViewHeader";
import { toAuthorizationTab } from "../routes/AuthenticationTab";
import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
import { useAlerts } from "../../components/alert/Alerts";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput"; import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
import { ViewHeader } from "../../components/view-header/ViewHeader";
import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
import useToggle from "../../utils/useToggle"; import useToggle from "../../utils/useToggle";
import { toAuthorizationTab } from "../routes/AuthenticationTab";
import type { ScopeDetailsParams } from "../routes/Scope";
import { DeleteScopeDialog } from "./DeleteScopeDialog"; import { DeleteScopeDialog } from "./DeleteScopeDialog";
type FormFields = Omit<ScopeRepresentation, "resources">;
export default function ScopeDetails() { export default function ScopeDetails() {
const { t } = useTranslation("clients"); const { t } = useTranslation("clients");
const { id, scopeId, realm } = useParams<ScopeDetailsParams>(); const { id, scopeId, realm } = useParams<ScopeDetailsParams>();
@ -41,7 +43,7 @@ export default function ScopeDetails() {
reset, reset,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
} = useForm<ScopeRepresentation>({ } = useForm<FormFields>({
mode: "onChange", mode: "onChange",
}); });
@ -65,7 +67,7 @@ export default function ScopeDetails() {
[] []
); );
const save = async (scope: ScopeRepresentation) => { const onSubmit = async (scope: ScopeRepresentation) => {
try { try {
if (scopeId) { if (scopeId) {
await adminClient.clients.updateAuthorizationScope( await adminClient.clients.updateAuthorizationScope(
@ -126,7 +128,7 @@ export default function ScopeDetails() {
<FormAccess <FormAccess
isHorizontal isHorizontal
role="view-clients" role="view-clients"
onSubmit={handleSubmit(save)} onSubmit={handleSubmit(onSubmit)}
> >
<FormGroup <FormGroup
label={t("common:name")} label={t("common:name")}
@ -142,11 +144,11 @@ export default function ScopeDetails() {
> >
<KeycloakTextInput <KeycloakTextInput
id="name" id="name"
name="name"
ref={register({ required: true })}
validated={ validated={
errors.name ? ValidatedOptions.error : ValidatedOptions.default errors.name ? ValidatedOptions.error : ValidatedOptions.default
} }
isRequired
{...register("name", { required: true })}
/> />
</FormGroup> </FormGroup>
<FormGroup <FormGroup
@ -159,11 +161,7 @@ export default function ScopeDetails() {
/> />
} }
> >
<KeycloakTextInput <KeycloakTextInput id="displayName" {...register("displayName")} />
id="displayName"
name="displayName"
ref={register}
/>
</FormGroup> </FormGroup>
<FormGroup <FormGroup
label={t("iconUri")} label={t("iconUri")}
@ -175,7 +173,7 @@ export default function ScopeDetails() {
/> />
} }
> >
<KeycloakTextInput id="iconUri" name="iconUri" ref={register} /> <KeycloakTextInput id="iconUri" {...register("iconUri")} />
</FormGroup> </FormGroup>
<ActionGroup> <ActionGroup>
<div className="pf-u-mt-md"> <div className="pf-u-mt-md">