Move React Hook Form errors to formState (#2412)

src/authentication/components/ExecutionConfigModal.tsx

@@ -43,8 +43,12 @@ export const ExecutionConfigModal = ({
   const [configDescription, setConfigDescription] =
     useState<AuthenticatorConfigInfoRepresentation>();
 
-  const { register, errors, setValue, handleSubmit } =
+  const {
-    useForm<ExecutionConfigModalForm>();
+    register,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ExecutionConfigModalForm>();
 
   const setupForm = (
     configDescription: AuthenticatorConfigInfoRepresentation,

src/authentication/components/modals/AddSubFlowModal.tsx

@@ -40,7 +40,12 @@ export const AddSubFlowModal = ({
   onCancel,
 }: AddSubFlowProps) => {
   const { t } = useTranslation("authentication");
-  const { register, control, errors, handleSubmit } = useForm<Flow>();
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<Flow>();
   const [open, setOpen] = useState(false);
   const [openProvider, setOpenProvider] = useState(false);
   const [formProviders, setFormProviders] =

src/authentication/form/NameDescription.tsx

@@ -12,7 +12,10 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 
 export const NameDescription = () => {
   const { t } = useTranslation("authentication");
-  const { register, errors } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <>

src/authentication/policies/OtpPolicy.tsx

@@ -41,10 +41,9 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
   const {
     control,
     register,
-    errors,
     reset,
     handleSubmit,
-    formState: { isDirty },
+    formState: { isDirty, errors },
   } = useForm({ mode: "onChange" });
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();

src/authentication/policies/PolicyRow.tsx

@@ -27,7 +27,11 @@ export const PolicyRow = ({
   onRemove,
 }: PolicyRowProps) => {
   const { t } = useTranslation("authentication");
-  const { control, register, errors } = useFormContext();
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   return (
     <FormGroup
       label={displayName}

src/client-scopes/details/ScopeForm.tsx

@@ -37,10 +37,15 @@ type ScopeFormProps = {
 export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
   const { t } = useTranslation("client-scopes");
   const { t: tc } = useTranslation("clients");
-  const { register, control, handleSubmit, errors, setValue } =
+  const {
-    useForm<ClientScopeRepresentation>({
+    register,
-      defaultValues: { attributes: { "display.on.consent.screen": "true" } },
+    control,
-    });
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<ClientScopeRepresentation>({
+    defaultValues: { attributes: { "display.on.consent.screen": "true" } },
+  });
   const { realm } = useRealm();
 
   const providers = useLoginProviders();

src/clients/ClientDescription.tsx

@@ -19,7 +19,11 @@ type ClientDescriptionProps = {
 
 export const ClientDescription = ({ protocol }: ClientDescriptionProps) => {
   const { t } = useTranslation("clients");
-  const { register, errors, control } = useFormContext<ClientRepresentation>();
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<ClientRepresentation>();
   return (
     <FormAccess role="manage-clients" unWrap>
       <FormGroup

src/clients/ClientSettings.tsx

@@ -38,8 +38,12 @@ export const ClientSettings = ({
   save,
   reset,
 }: ClientSettingsProps) => {
-  const { register, control, watch, errors } =
+  const {
-    useFormContext<ClientRepresentation>();
+    register,
+    control,
+    watch,
+    formState: { errors },
+  } = useFormContext<ClientRepresentation>();
   const { t } = useTranslation("clients");
   const { realm } = useRealm();
 

src/clients/add/GeneralSettings.tsx

@@ -16,7 +16,10 @@ import { getProtocolName } from "../utils";
 
 export const GeneralSettings = () => {
   const { t } = useTranslation("clients");
-  const { errors, control } = useFormContext();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
 
   const providers = useLoginProviders();
   const [open, isOpen] = useState(false);

src/clients/authorization/ResourcesPolicySelect.tsx

@@ -32,7 +32,10 @@ export const ResourcesPolicySelect = ({
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
 
-  const { control, errors } = useFormContext<PolicyRepresentation>();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<PolicyRepresentation>();
   const [items, setItems] = useState<Policies[]>([]);
   const [search, setSearch] = useState("");
   const [open, setOpen] = useState(false);

src/clients/authorization/ScopeDetails.tsx

@@ -35,10 +35,14 @@ export default function ScopeDetails() {
 
   const [deleteDialog, toggleDeleteDialog] = useToggle();
   const [scope, setScope] = useState<ScopeRepresentation>();
-  const { register, errors, reset, handleSubmit } =
+  const {
-    useForm<ScopeRepresentation>({
+    register,
-      mode: "onChange",
+    reset,
-    });
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ScopeRepresentation>({
+    mode: "onChange",
+  });
 
   useFetch(
     async () => {

src/clients/authorization/ScopeSelect.tsx

@@ -20,7 +20,11 @@ export const ScopeSelect = ({
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
 
-  const { control, errors, setValue } = useFormContext();
+  const {
+    control,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
 
   const [scopes, setScopes] = useState<ScopeRepresentation[]>([]);
   const [search, setSearch] = useState("");

src/clients/authorization/policy/Client.tsx

@@ -15,7 +15,11 @@ import { useTranslation } from "react-i18next";
 
 export const Client = () => {
   const { t } = useTranslation("clients");
-  const { control, getValues, errors } = useFormContext();
+  const {
+    control,
+    getValues,
+    formState: { errors },
+  } = useFormContext();
   const values: string[] | undefined = getValues("clients");
 
   const [open, setOpen] = useState(false);

src/clients/authorization/policy/ClientScope.tsx

@@ -25,7 +25,12 @@ export type RequiredIdValue = {
 
 export const ClientScope = () => {
   const { t } = useTranslation("clients");
-  const { control, getValues, setValue, errors } = useFormContext<{
+  const {
+    control,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useFormContext<{
     clientScopes: RequiredIdValue[];
   }>();
 

src/clients/authorization/policy/Group.tsx

@@ -24,7 +24,13 @@ export type GroupValue = {
 
 export const Group = () => {
   const { t } = useTranslation("clients");
-  const { control, register, getValues, setValue, errors } = useFormContext<{
+  const {
+    control,
+    register,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useFormContext<{
     groups?: GroupValue[];
   }>();
   const values = getValues("groups");

src/clients/authorization/policy/NameDescription.tsx

@@ -16,7 +16,10 @@ type NameDescriptionProps = {
 
 export const NameDescription = ({ prefix }: NameDescriptionProps) => {
   const { t } = useTranslation("clients");
-  const { register, errors } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <>

src/clients/authorization/policy/Regex.tsx

@@ -7,7 +7,10 @@ import { HelpItem } from "../../../components/help-enabler/HelpItem";
 
 export const Regex = () => {
   const { t } = useTranslation("clients");
-  const { register, errors } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <>

src/clients/authorization/policy/Role.tsx

@@ -20,7 +20,12 @@ import { AddRoleMappingModal } from "../../../components/role-mapping/AddRoleMap
 
 export const Role = () => {
   const { t } = useTranslation("clients");
-  const { control, getValues, setValue, errors } = useFormContext<{
+  const {
+    control,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useFormContext<{
     roles?: RequiredIdValue[];
   }>();
   const values = getValues("roles");

src/clients/authorization/policy/User.tsx

@@ -15,7 +15,11 @@ import { useTranslation } from "react-i18next";
 
 export const User = () => {
   const { t } = useTranslation("clients");
-  const { control, getValues, errors } = useFormContext();
+  const {
+    control,
+    getValues,
+    formState: { errors },
+  } = useFormContext();
   const values: string[] | undefined = getValues("users");
 
   const [open, setOpen] = useState(false);

src/clients/credentials/X509.tsx

@@ -11,7 +11,11 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 
 export const X509 = () => {
   const { t } = useTranslation("clients");
-  const { register, control, errors } = useFormContext();
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <FormGroup

src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -27,8 +27,7 @@ export default function CreateInitialAccessToken() {
   const {
     handleSubmit,
     control,
-    errors,
+    formState: { isValid, errors },
-    formState: { isValid },
   } = useForm({ mode: "onChange" });
 
   const adminClient = useAdminClient();

src/components/dynamic/RoleComponent.tsx

@@ -34,7 +34,11 @@ export const RoleComponent = ({
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { control, errors, getValues } = useFormContext();
+  const {
+    control,
+    getValues,
+    formState: { errors },
+  } = useFormContext();
 
   const [roleOpen, setRoleOpen] = useState(false);
   const [clientsOpen, setClientsOpen] = useState(false);

src/groups/GroupsModal.tsx

@@ -33,7 +33,11 @@ export const GroupsModal = ({
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
-  const { register, errors, handleSubmit } = useForm({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
     defaultValues: { name: rename },
   });
 

src/identity-providers/add/DescriptorSettings.tsx

@@ -24,7 +24,11 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
   const { t } = useTranslation("identity-providers");
   const { t: th } = useTranslation("identity-providers-help");
 
-  const { register, control, errors } = useFormContext();
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext();
   const [namedPolicyDropdownOpen, setNamedPolicyDropdownOpen] = useState(false);
   const [principalTypeDropdownOpen, setPrincipalTypeDropdownOpen] =
     useState(false);

src/identity-providers/add/DiscoverySettings.tsx

@@ -19,7 +19,11 @@ type DiscoverySettingsProps = {
 
 const Fields = ({ readOnly }: DiscoverySettingsProps) => {
   const { t } = useTranslation("identity-providers");
-  const { register, control, errors } = useFormContext();
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext();
 
   const validateSignature = useWatch({
     control: control,

src/identity-providers/add/OIDCGeneralSettings.tsx

@@ -14,7 +14,10 @@ export const OIDCGeneralSettings = ({ id }: { id: string }) => {
   const { t } = useTranslation("identity-providers");
   const { tab } = useParams<IdentityProviderParams>();
 
-  const { register, errors } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <>

src/identity-providers/add/OpenIdConnectSettings.tsx

@@ -17,7 +17,12 @@ export const OpenIdConnectSettings = () => {
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { setValue, errors, setError, clearErrors } = useFormContext();
+  const {
+    setValue,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useFormContext();
 
   const setupForm = (result: any) => {
     Object.keys(result).map((k) => setValue(`config.${k}`, result[k]));

src/identity-providers/add/SamlConnectSettings.tsx

@@ -20,8 +20,13 @@ export const SamlConnectSettings = () => {
 
   const adminClient = useAdminClient();
   const { realm } = useRealm();
-  const { setValue, register, errors, setError, clearErrors } =
+  const {
-    useFormContext();
+    setValue,
+    register,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useFormContext();
 
   const setupForm = (result: IdentityProviderRepresentation) => {
     Object.entries(result).map(([key, value]) =>

src/identity-providers/add/SamlGeneralSettings.tsx

@@ -20,7 +20,11 @@ export const SamlGeneralSettings = ({ id }: { id: string }) => {
   const { realm } = useRealm();
   const { tab } = useParams<IdentityProviderParams>();
 
-  const { register, errors, watch } = useFormContext();
+  const {
+    register,
+    watch,
+    formState: { errors },
+  } = useFormContext();
 
   const alias = watch("alias");
 

src/identity-providers/component/ClientIdSecret.tsx

@@ -15,7 +15,10 @@ export const ClientIdSecret = ({
 }) => {
   const { t } = useTranslation("identity-providers");
 
-  const { register, errors } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <>

src/identity-providers/component/DiscoveryEndpointField.tsx

@@ -22,8 +22,14 @@ export const DiscoveryEndpointField = ({
 
   const adminClient = useAdminClient();
 
-  const { setValue, register, errors, setError, watch, clearErrors } =
+  const {
-    useFormContext();
+    setValue,
+    register,
+    setError,
+    watch,
+    clearErrors,
+    formState: { errors },
+  } = useFormContext();
   const discoveryUrl = watch("discoveryEndpoint");
 
   const [discovery, setDiscovery] = useState(true);

src/realm-settings/AddMessageBundleModal.tsx

@@ -30,7 +30,11 @@ export const AddMessageBundleModal = ({
   save,
 }: AddMessageBundleModalProps) => {
   const { t } = useTranslation("realm-settings");
-  const { register, errors, handleSubmit } = useForm();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
 
   return (
     <Modal

src/realm-settings/AddUserEmailModal.tsx

@@ -30,7 +30,12 @@ export const AddUserEmailModal = ({ callback }: AddUserEmailModalProps) => {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
   const { whoAmI } = useWhoAmI();
-  const { register, errors, handleSubmit, watch } = useForm<AddUserEmailForm>({
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<AddUserEmailForm>({
     defaultValues: { email: "" },
   });
 

src/realm-settings/ClientProfileForm.tsx

@@ -54,8 +54,7 @@ export default function ClientProfileForm() {
     handleSubmit,
     setValue,
     register,
-    errors,
+    formState: { isDirty, errors },
-    formState: { isDirty },
   } = useForm<ClientProfileForm>({
     defaultValues,
     mode: "onChange",

src/realm-settings/EmailTab.tsx

@@ -44,10 +44,10 @@ export const RealmSettingsEmailTab = ({
     register,
     control,
     handleSubmit,
-    errors,
     watch,
     reset: resetForm,
     getValues,
+    formState: { errors },
   } = useForm<RealmRepresentation>({ defaultValues: realm });
 
   const reset = () => resetForm(realm);

src/realm-settings/NewClientPolicyForm.tsx

@@ -65,7 +65,10 @@ type PolicyDetailAttributes = {
 
 export default function NewClientPolicyForm() {
   const { t } = useTranslation("realm-settings");
-  const { errors, reset: resetForm } = useForm<NewClientPolicyForm>({
+  const {
+    reset: resetForm,
+    formState: { errors },
+  } = useForm<NewClientPolicyForm>({
     defaultValues,
   });
   const { realm } = useRealm();

src/realm-settings/security-defences/Time.tsx

@@ -14,7 +14,10 @@ export const Time = ({
   style?: CSSProperties;
 }) => {
   const { t } = useTranslation("realm-settings");
-  const { control, errors } = useFormContext();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
   return (
     <FormGroup
       style={style}

src/realm/add/NewRealmForm.tsx

@@ -29,8 +29,13 @@ export default function NewRealmForm() {
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
 
-  const { register, handleSubmit, control, errors, setValue } =
+  const {
-    useForm<RealmRepresentation>({ mode: "onChange" });
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm<RealmRepresentation>({ mode: "onChange" });
 
   const handleFileChange = (obj: object) => {
     const defaultRealm = { id: "", realm: "", enabled: true };

src/sessions/RevocationModal.tsx

@@ -37,7 +37,11 @@ export const RevocationModal = ({
 
   const { realm: realmName } = useRealm();
   const adminClient = useAdminClient();
-  const { register, errors, handleSubmit } = useForm();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
   const [realm, setRealm] = useState<RealmRepresentation>();
 
   const [key, setKey] = useState(0);

src/user/UserForm.tsx

@@ -60,8 +60,14 @@ export const UserForm = ({
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
 
-  const { handleSubmit, register, errors, watch, control, reset } =
+  const {
-    useFormContext();
+    handleSubmit,
+    register,
+    watch,
+    control,
+    reset,
+    formState: { errors },
+  } = useFormContext();
   const watchUsernameInput = watch("username");
   const [selectedGroups, setSelectedGroups] = useState<GroupRepresentation[]>(
     []

src/user/UserIdPModal.tsx

@@ -35,7 +35,11 @@ export const UserIdpModal = ({
   const { t } = useTranslation("users");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
-  const { register, errors, handleSubmit, formState } = useForm({
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid, errors },
+  } = useForm({
     mode: "onChange",
   });
 
@@ -71,7 +75,7 @@ export const UserIdpModal = ({
           variant="primary"
           type="submit"
           form="group-form"
-          isDisabled={!formState.isValid}
+          isDisabled={!isValid}
         >
           {t("link")}
         </Button>,

src/user/user-credentials/ResetPasswordDialog.tsx

@@ -50,8 +50,7 @@ export const ResetPasswordDialog = ({
   const {
     register,
     control,
-    errors,
+    formState: { isValid, errors },
-    formState: { isValid },
     watch,
     handleSubmit,
   } = useForm<CredentialsForm>({