Skip to content

Commit

Permalink
Use shared form context instead
Browse files Browse the repository at this point in the history 
fixes: keycloak#35429
Signed-off-by: Erik Jan de Wit <[email protected]>
  • Loading branch information
@edewit
edewit committed Dec 13, 2024
1 parent 6c2b573 commit fd0072f
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 134 deletions.
9 changes: 5 additions & 4 deletions js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
Tooltip,
} from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useAdminClient } from "../admin-client";
Expand Down Expand Up @@ -180,9 +180,10 @@ export const RealmSettingsTabs = () => {
const [tableData, setTableData] = useState<
Record<string, string>[] | undefined
>(undefined);
const { control, setValue, getValues } = useForm({
const form = useForm({
mode: "onChange",
});
const { control, setValue, getValues } = form;
const [key, setKey] = useState(0);
const refreshHeader = () => {
setKey(key + 1);
Expand Down Expand Up @@ -304,7 +305,7 @@ export const RealmSettingsTabs = () => {
const clientPoliciesPoliciesTab = useClientPoliciesTab("policies");

return (
<>
<FormProvider {...form}>
<Controller
name="enabled"
defaultValue={true}
Expand Down Expand Up @@ -464,6 +465,6 @@ export const RealmSettingsTabs = () => {
)}
</RoutableTabs>
</PageSection>
</>
</FormProvider>
);
};
16 changes: 4 additions & 12 deletions js/apps/admin-ui/src/realm-settings/SessionsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@ import {
PageSection,
Switch,
} from "@patternfly/react-core";
import { useEffect } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { Controller, useFormContext, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormPanel, HelpItem } from "@keycloak/keycloak-ui-shared";
import { FormAccess } from "../components/form/FormAccess";
import { TimeSelector } from "../components/time-selector/TimeSelector";
import { convertToFormValues } from "../util";

import "./realm-settings-section.css";

Expand All @@ -27,20 +25,14 @@ export const RealmSettingsSessionsTab = ({
}: RealmSettingsSessionsTabProps) => {
const { t } = useTranslation();

const { setValue, control, handleSubmit, formState } =
useForm<RealmRepresentation>();
const { control, handleSubmit, formState, reset } =
useFormContext<RealmRepresentation>();

const offlineSessionMaxEnabled = useWatch({
control,
name: "offlineSessionMaxLifespanEnabled",
});

const setupForm = () => {
convertToFormValues(realm, setValue);
};

useEffect(setupForm, []);

return (
<PageSection variant="light">
<FormPanel
Expand Down Expand Up @@ -378,7 +370,7 @@ export const RealmSettingsSessionsTab = ({
>
{t("save")}
</Button>
<Button variant="link" onClick={setupForm}>
<Button variant="link" onClick={() => reset(realm)}>
{t("revert")}
</Button>
</ActionGroup>
Expand Down
62 changes: 28 additions & 34 deletions js/apps/admin-ui/src/realm-settings/TokensTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import {
TextInput,
TextVariants,
} from "@patternfly/react-core";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { useState } from "react";
import { Controller, useFormContext, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormAccess } from "../components/form/FormAccess";
import {
Expand All @@ -30,20 +30,18 @@ import {
} from "../components/time-selector/TimeSelector";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { useWhoAmI } from "../context/whoami/WhoAmI";
import { beerify, convertToFormValues, sortProviders } from "../util";
import { beerify, sortProviders } from "../util";
import useIsFeatureEnabled, { Feature } from "../utils/useIsFeatureEnabled";

import "./realm-settings-section.css";

type RealmSettingsSessionsTabProps = {
realm: RealmRepresentation;
save: (realm: RealmRepresentation) => void;
reset?: () => void;
};

export const RealmSettingsTokensTab = ({
realm,
reset,
save,
}: RealmSettingsSessionsTabProps) => {
const { t } = useTranslation();
Expand All @@ -58,8 +56,8 @@ export const RealmSettingsTokensTab = ({
serverInfo.providers!["signature"].providers,
);

const form = useForm<RealmRepresentation>();
const { setValue, control } = form;
const { control, register, reset, formState, handleSubmit } =
useFormContext<RealmRepresentation>();

const offlineSessionMaxEnabled = useWatch({
control,
Expand All @@ -79,17 +77,13 @@ export const RealmSettingsTokensTab = ({
defaultValue: false,
});

useEffect(() => {
convertToFormValues(realm, setValue);
}, []);

return (
<PageSection variant="light">
<FormPanel title={t("general")} className="kc-sso-session-template">
<FormAccess
isHorizontal
role="manage-realm"
onSubmit={form.handleSubmit(save)}
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("defaultSigAlg")}
Expand All @@ -104,7 +98,7 @@ export const RealmSettingsTokensTab = ({
<Controller
name="defaultSignatureAlgorithm"
defaultValue={"RS256"}
control={form.control}
control={control}
render={({ field }) => (
<KeycloakSelect
toggleId="kc-default-sig-alg"
Expand Down Expand Up @@ -150,7 +144,7 @@ export const RealmSettingsTokensTab = ({
<Controller
name="oauth2DeviceCodeLifespan"
defaultValue={0}
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
id="oAuthDeviceCodeLifespan"
Expand All @@ -175,7 +169,7 @@ export const RealmSettingsTokensTab = ({
<Controller
name="oauth2DevicePollingInterval"
defaultValue={0}
control={form.control}
control={control}
render={({ field }) => (
<NumberInput
id="oAuthDevicePollingInterval"
Expand Down Expand Up @@ -211,7 +205,7 @@ export const RealmSettingsTokensTab = ({
<TextInput
id="shortVerificationUri"
placeholder={t("shortVerificationUri")}
{...form.register("attributes.shortVerificationUri")}
{...register("attributes.shortVerificationUri")}
/>
</FormGroup>
<FormGroup
Expand All @@ -226,7 +220,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="attributes.parRequestUriLifespan"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
id="parRequestUriLifespan"
Expand All @@ -251,7 +245,7 @@ export const RealmSettingsTokensTab = ({
isHorizontal
role="manage-realm"
className="pf-v5-u-mt-lg"
onSubmit={form.handleSubmit(save)}
onSubmit={handleSubmit(save)}
>
<FormGroup
hasNoPaddingTop
Expand All @@ -266,7 +260,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="revokeRefreshToken"
control={form.control}
control={control}
defaultValue={false}
render={({ field }) => (
<Switch
Expand Down Expand Up @@ -295,7 +289,7 @@ export const RealmSettingsTokensTab = ({
<Controller
name="refreshTokenMaxReuse"
defaultValue={0}
control={form.control}
control={control}
render={({ field }) => (
<NumberInput
type="text"
Expand Down Expand Up @@ -323,7 +317,7 @@ export const RealmSettingsTokensTab = ({
isHorizontal
role="manage-realm"
className="pf-v5-u-mt-lg"
onSubmit={form.handleSubmit(save)}
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("accessTokenLifespan")}
Expand All @@ -337,7 +331,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="accessTokenLifespan"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
validated={
Expand Down Expand Up @@ -380,7 +374,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="accessTokenLifespanForImplicitFlow"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-access-token-lifespan-implicit"
Expand All @@ -404,7 +398,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="accessCodeLifespan"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-client-login-timeout"
Expand Down Expand Up @@ -432,7 +426,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="offlineSessionMaxLifespan"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-offline-session-max"
Expand All @@ -455,7 +449,7 @@ export const RealmSettingsTokensTab = ({
isHorizontal
role="manage-realm"
className="pf-v5-u-mt-lg"
onSubmit={form.handleSubmit(save)}
onSubmit={handleSubmit(save)}
>
<FormGroup
label={t("userInitiatedActionLifespan")}
Expand All @@ -470,7 +464,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="actionTokenGeneratedByUserLifespan"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-user-initiated-action-lifespan"
Expand All @@ -496,7 +490,7 @@ export const RealmSettingsTokensTab = ({
>
<Controller
name="actionTokenGeneratedByAdminLifespan"
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-default-admin-initiated"
Expand Down Expand Up @@ -531,7 +525,7 @@ export const RealmSettingsTokensTab = ({
"actionTokenGeneratedByUserLifespan.verify-email",
)}`}
defaultValue=""
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-email-verification"
Expand Down Expand Up @@ -559,7 +553,7 @@ export const RealmSettingsTokensTab = ({
"actionTokenGeneratedByUserLifespan.idp-verify-account-via-email",
)}`}
defaultValue={""}
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-idp-email-verification"
Expand Down Expand Up @@ -587,7 +581,7 @@ export const RealmSettingsTokensTab = ({
"actionTokenGeneratedByUserLifespan.reset-credentials",
)}`}
defaultValue={""}
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-forgot-pw"
Expand Down Expand Up @@ -615,7 +609,7 @@ export const RealmSettingsTokensTab = ({
"actionTokenGeneratedByUserLifespan.execute-actions",
)}`}
defaultValue={""}
control={form.control}
control={control}
render={({ field }) => (
<TimeSelector
className="kc-execute-actions"
Expand All @@ -632,11 +626,11 @@ export const RealmSettingsTokensTab = ({
variant="primary"
type="submit"
data-testid="tokens-tab-save"
isDisabled={!form.formState.isDirty}
isDisabled={!formState.isDirty}
>
{t("save")}
</Button>
<Button variant="link" onClick={reset}>
<Button variant="link" onClick={() => reset(realm)}>
{t("revert")}
</Button>
</ActionGroup>
Expand Down
Loading

0 comments on commit fd0072f

Please sign in to comment.