added validated property to fields instead of only on FormGroup (#205)

* added validated to fields to make them nicer

* removed console log

src/PageNav.tsx

@@ -49,7 +49,6 @@ export const PageNav: React.FunctionComponent = () => {
   type LeftNavProps = { title: string; path: string };
   const LeftNav = ({ title, path }: LeftNavProps) => {
     const route = routes(() => {}).find((route) => route.path === path);
-    console.log(`hasAccess(${route!.access})=` + hasAccess(route!.access));
     if (!route || !hasAccess(route.access)) return <></>;
 
     return (

src/client-scopes/add/RoleMappingForm.tsx

@@ -16,6 +16,7 @@ import {
   Split,
   SplitItem,
   Divider,
+  ValidatedOptions,
 } from "@patternfly/react-core";
 
 import { useAlerts } from "../../components/alert/Alerts";
@@ -173,7 +174,9 @@ export const RoleMappingForm = ({ clientScopeId }: RoleMappingFormProps) => {
             }
             fieldId="name"
             isRequired
-            validated={errors.name ? "error" : "default"}
+            validated={
+              errors.name ? ValidatedOptions.error : ValidatedOptions.default
+            }
             helperTextInvalid={t("common:required")}
           >
             <TextInput
@@ -181,6 +184,9 @@ export const RoleMappingForm = ({ clientScopeId }: RoleMappingFormProps) => {
               type="text"
               id="name"
               name="name"
+              validated={
+                errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              }
             />
           </FormGroup>
           <FormGroup

src/client-scopes/form/ClientScopeForm.tsx

@@ -15,6 +15,7 @@ import {
   Tabs,
   TabTitleText,
   TextInput,
+  ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
@@ -125,7 +126,11 @@ export const ClientScopeForm = () => {
                 }
                 fieldId="kc-name"
                 isRequired
-                validated={errors.name ? "error" : "default"}
+                validated={
+                  errors.name
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
                 helperTextInvalid={t("common:required")}
               >
                 <TextInput
@@ -133,6 +138,11 @@ export const ClientScopeForm = () => {
                   type="text"
                   id="kc-name"
                   name="name"
+                  validated={
+                    errors.name
+                      ? ValidatedOptions.error
+                      : ValidatedOptions.default
+                  }
                 />
               </FormGroup>
               <FormGroup

src/clients/ClientDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormGroup, TextInput } from "@patternfly/react-core";
+import { FormGroup, TextInput, ValidatedOptions } from "@patternfly/react-core";
 import { UseFormMethods } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormAccess } from "../components/form-access/FormAccess";
@@ -17,7 +17,9 @@ export const ClientDescription = ({ form }: ClientDescriptionProps) => {
         label={t("clientID")}
         fieldId="kc-client-id"
         helperTextInvalid={t("common:required")}
-        validated={errors.clientId ? "error" : "default"}
+        validated={
+          errors.clientId ? ValidatedOptions.error : ValidatedOptions.default
+        }
         isRequired
       >
         <TextInput
@@ -25,6 +27,9 @@ export const ClientDescription = ({ form }: ClientDescriptionProps) => {
           type="text"
           id="kc-client-id"
           name="clientId"
+          validated={
+            errors.clientId ? ValidatedOptions.error : ValidatedOptions.default
+          }
         />
       </FormGroup>
       <FormGroup label={t("name")} fieldId="kc-name">

src/common-messages.json

@@ -52,6 +52,7 @@
     "userFederation": "User federation",
 
     "required": "Required field",
+    "maxLength": "Max length {{length}}",
 
     "createRealm": "Create Realm"
   }

src/context/whoami/WhoAmI.tsx

@@ -14,7 +14,7 @@ export class WhoAmI {
   ) {
     if (this.me !== undefined && this.me.locale) {
       i18n.changeLanguage(this.me.locale, (error) => {
-        if (error) console.log("Unable to set locale to " + this.me?.locale);
+        if (error) console.error("Unable to set locale to", this.me?.locale);
       });
     }
   }

src/groups/GroupsCreateModal.tsx

@@ -7,6 +7,7 @@ import {
   Modal,
   ModalVariant,
   TextInput,
+  ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { HttpClientContext } from "../context/http-service/HttpClientContext";
@@ -80,7 +81,9 @@ export const GroupsCreateModal = ({
             label={t("name")}
             fieldId="group-id"
             helperTextInvalid={t("common:required")}
-            validated={errors.name ? "error" : "default"}
+            validated={
+              errors.name ? ValidatedOptions.error : ValidatedOptions.default
+            }
             isRequired
           >
             <TextInput
@@ -90,6 +93,9 @@ export const GroupsCreateModal = ({
               name="name"
               value={createGroupName}
               onChange={valueChange}
+              validated={
+                errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              }
             />
           </FormGroup>
         </Form>

src/realm-roles/add/NewRoleForm.tsx

@@ -18,7 +18,7 @@ import {
 import { RoleRepresentation } from "../../model/role-model";
 import { HttpClientContext } from "../../context/http-service/HttpClientContext";
 import { useAlerts } from "../../components/alert/Alerts";
-import { Controller, useForm, FieldErrors } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import { RealmContext } from "../../context/realm-context/RealmContext";
 
 export const NewRoleForm = () => {
@@ -40,8 +40,6 @@ export const NewRoleForm = () => {
     }
   };
 
-  console.log(errors);
-
   return (
     <>
       <PageSection variant="light">
@@ -52,24 +50,35 @@ export const NewRoleForm = () => {
       <Divider />
       <PageSection variant="light">
         <Form isHorizontal onSubmit={handleSubmit(save)}>
-          <FormGroup label={t("roleName")} isRequired fieldId="kc-role-name">
+          <FormGroup
+            label={t("roleName")}
+            isRequired
+            fieldId="kc-role-name"
+            validated={
+              errors.name ? ValidatedOptions.error : ValidatedOptions.default
+            }
+            helperTextInvalid={t("common:required")}
+          >
             <TextInput
               isRequired
               type="text"
               id="kc-role-name"
               name="name"
               ref={register({ required: true })}
+              validated={
+                errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              }
             />
           </FormGroup>
           <FormGroup
             label={t("description")}
             fieldId="kc-role-description"
             validated={
-              Object.keys(errors).length != 0
+              errors.description
                 ? ValidatedOptions.error
                 : ValidatedOptions.default
             }
-            helperTextInvalid={"Max length 255"}
+            helperTextInvalid={t("common:maxLength", { length: 255 })}
           >
             <Controller
               name="description"
@@ -80,10 +89,9 @@ export const NewRoleForm = () => {
                 <TextArea
                   type="text"
                   validated={
-                    errors.description &&
+                    errors.description
-                    errors.description.type === "maxLength"
+                      ? ValidatedOptions.error
-                      ? "error"
+                      : ValidatedOptions.default
-                      : "default"
                   }
                   id="kc-role-description"
                   value={value}