From 3479adb356d9791c56e2e83d17448c2f03b2b331 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 23 Sep 2020 21:19:02 +0200
Subject: [PATCH] Small client form fixes (#104)

* made clientId required

* changed space between the 2 columns of check boxes

* merge fix
---
 src/clients/ClientDescription.tsx             | 19 ++--
 src/clients/ClientSettings.tsx                |  2 +-
 .../__snapshots__/ClientList.test.tsx.snap    | 92 +++++++------------
 src/clients/add/CapabilityConfig.tsx          |  8 +-
 src/clients/add/GeneralSettings.tsx           |  2 +-
 src/clients/import/ImportForm.tsx             |  8 +-
 6 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/src/clients/ClientDescription.tsx b/src/clients/ClientDescription.tsx
index 96075b047f..438ddbe607 100644
--- a/src/clients/ClientDescription.tsx
+++ b/src/clients/ClientDescription.tsx
@@ -1,21 +1,26 @@
 import React from "react";
 import { FormGroup, TextInput } from "@patternfly/react-core";
-import { FieldElement, ValidationRules, Ref } from "react-hook-form";
+import { UseFormMethods } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 type ClientDescriptionProps = {
-  register<TFieldElement extends FieldElement>(
-    rules?: ValidationRules
-  ): (ref: (TFieldElement & Ref) | null) => void;
+  form: UseFormMethods;
 };
 
-export const ClientDescription = ({ register }: ClientDescriptionProps) => {
+export const ClientDescription = ({ form }: ClientDescriptionProps) => {
   const { t } = useTranslation("clients");
+  const { register, errors } = form;
   return (
     <>
-      <FormGroup label={t("clientID")} fieldId="kc-client-id">
+      <FormGroup
+        label={t("clientID")}
+        fieldId="kc-client-id"
+        helperTextInvalid={t("common:required")}
+        validated={errors.clientId ? "error" : "default"}
+        isRequired
+      >
         <TextInput
-          ref={register()}
+          ref={register({ required: true })}
           type="text"
           id="kc-client-id"
           name="clientId"
diff --git a/src/clients/ClientSettings.tsx b/src/clients/ClientSettings.tsx
index 137711d33c..78c9f5b7e4 100644
--- a/src/clients/ClientSettings.tsx
+++ b/src/clients/ClientSettings.tsx
@@ -52,7 +52,7 @@ export const ClientSettings = ({ client: clientInit }: ClientSettingsProps) => {
           <CapabilityConfig form={form} />
         </Form>
         <Form isHorizontal>
-          <ClientDescription register={form.register} />
+          <ClientDescription form={form} />
         </Form>
         <Form isHorizontal>
           <FormGroup label={t("rootUrl")} fieldId="kc-root-url">
diff --git a/src/clients/__tests__/__snapshots__/ClientList.test.tsx.snap b/src/clients/__tests__/__snapshots__/ClientList.test.tsx.snap
index 70143e0210..9ee44d1088 100644
--- a/src/clients/__tests__/__snapshots__/ClientList.test.tsx.snap
+++ b/src/clients/__tests__/__snapshots__/ClientList.test.tsx.snap
@@ -8,7 +8,7 @@ Object {
       <table
         aria-label="clientList"
         class="pf-c-table pf-m-grid-md pf-m-compact"
-        data-ouia-component-id="0"
+        data-ouia-component-id="OUIA-Generated-Table-1"
         data-ouia-component-type="PF4/Table"
         data-ouia-safe="true"
         role="grid"
@@ -61,7 +61,7 @@ Object {
         >
           <tr
             class=""
-            data-ouia-component-id="1"
+            data-ouia-component-id="OUIA-Generated-TableRow-1"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -111,7 +111,6 @@ Object {
                 >
                   <path
                     d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                    transform=""
                   />
                 </svg>
               </a>
@@ -122,7 +121,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="2"
+                data-ouia-component-id="OUIA-Generated-Dropdown-1"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -145,7 +144,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -154,7 +152,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="3"
+            data-ouia-component-id="OUIA-Generated-TableRow-2"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -204,7 +202,6 @@ Object {
                 >
                   <path
                     d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                    transform=""
                   />
                 </svg>
               </a>
@@ -215,7 +212,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="4"
+                data-ouia-component-id="OUIA-Generated-Dropdown-2"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -238,7 +235,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -247,7 +243,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="5"
+            data-ouia-component-id="OUIA-Generated-TableRow-3"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -289,7 +285,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="6"
+                data-ouia-component-id="OUIA-Generated-Dropdown-3"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -312,7 +308,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -321,7 +316,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="7"
+            data-ouia-component-id="OUIA-Generated-TableRow-4"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -363,7 +358,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="8"
+                data-ouia-component-id="OUIA-Generated-Dropdown-4"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -386,7 +381,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -395,7 +389,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="9"
+            data-ouia-component-id="OUIA-Generated-TableRow-5"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -435,7 +429,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="10"
+                data-ouia-component-id="OUIA-Generated-Dropdown-5"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -458,7 +452,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -467,7 +460,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="11"
+            data-ouia-component-id="OUIA-Generated-TableRow-6"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -517,7 +510,6 @@ Object {
                 >
                   <path
                     d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                    transform=""
                   />
                 </svg>
               </a>
@@ -528,7 +520,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="12"
+                data-ouia-component-id="OUIA-Generated-Dropdown-6"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -551,7 +543,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -560,7 +551,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="13"
+            data-ouia-component-id="OUIA-Generated-TableRow-7"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -600,7 +591,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="14"
+                data-ouia-component-id="OUIA-Generated-Dropdown-7"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -623,7 +614,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -632,7 +622,7 @@ Object {
           </tr>
           <tr
             class=""
-            data-ouia-component-id="15"
+            data-ouia-component-id="OUIA-Generated-TableRow-8"
             data-ouia-component-type="PF4/TableRow"
             data-ouia-safe="true"
           >
@@ -682,7 +672,6 @@ Object {
                 >
                   <path
                     d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                    transform=""
                   />
                 </svg>
               </a>
@@ -693,7 +682,7 @@ Object {
             >
               <div
                 class="pf-c-dropdown pf-m-align-right"
-                data-ouia-component-id="16"
+                data-ouia-component-id="OUIA-Generated-Dropdown-8"
                 data-ouia-component-type="PF4/Dropdown"
                 data-ouia-safe="true"
               >
@@ -716,7 +705,6 @@ Object {
                   >
                     <path
                       d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      transform=""
                     />
                   </svg>
                 </button>
@@ -736,7 +724,7 @@ Object {
     <table
       aria-label="clientList"
       class="pf-c-table pf-m-grid-md pf-m-compact"
-      data-ouia-component-id="0"
+      data-ouia-component-id="OUIA-Generated-Table-1"
       data-ouia-component-type="PF4/Table"
       data-ouia-safe="true"
       role="grid"
@@ -789,7 +777,7 @@ Object {
       >
         <tr
           class=""
-          data-ouia-component-id="1"
+          data-ouia-component-id="OUIA-Generated-TableRow-1"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -839,7 +827,6 @@ Object {
               >
                 <path
                   d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                  transform=""
                 />
               </svg>
             </a>
@@ -850,7 +837,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="2"
+              data-ouia-component-id="OUIA-Generated-Dropdown-1"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -873,7 +860,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -882,7 +868,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="3"
+          data-ouia-component-id="OUIA-Generated-TableRow-2"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -932,7 +918,6 @@ Object {
               >
                 <path
                   d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                  transform=""
                 />
               </svg>
             </a>
@@ -943,7 +928,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="4"
+              data-ouia-component-id="OUIA-Generated-Dropdown-2"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -966,7 +951,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -975,7 +959,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="5"
+          data-ouia-component-id="OUIA-Generated-TableRow-3"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -1017,7 +1001,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="6"
+              data-ouia-component-id="OUIA-Generated-Dropdown-3"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -1040,7 +1024,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -1049,7 +1032,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="7"
+          data-ouia-component-id="OUIA-Generated-TableRow-4"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -1091,7 +1074,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="8"
+              data-ouia-component-id="OUIA-Generated-Dropdown-4"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -1114,7 +1097,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -1123,7 +1105,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="9"
+          data-ouia-component-id="OUIA-Generated-TableRow-5"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -1163,7 +1145,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="10"
+              data-ouia-component-id="OUIA-Generated-Dropdown-5"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -1186,7 +1168,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -1195,7 +1176,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="11"
+          data-ouia-component-id="OUIA-Generated-TableRow-6"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -1245,7 +1226,6 @@ Object {
               >
                 <path
                   d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                  transform=""
                 />
               </svg>
             </a>
@@ -1256,7 +1236,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="12"
+              data-ouia-component-id="OUIA-Generated-Dropdown-6"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -1279,7 +1259,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -1288,7 +1267,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="13"
+          data-ouia-component-id="OUIA-Generated-TableRow-7"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -1328,7 +1307,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="14"
+              data-ouia-component-id="OUIA-Generated-Dropdown-7"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -1351,7 +1330,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
@@ -1360,7 +1338,7 @@ Object {
         </tr>
         <tr
           class=""
-          data-ouia-component-id="15"
+          data-ouia-component-id="OUIA-Generated-TableRow-8"
           data-ouia-component-type="PF4/TableRow"
           data-ouia-safe="true"
         >
@@ -1410,7 +1388,6 @@ Object {
               >
                 <path
                   d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
-                  transform=""
                 />
               </svg>
             </a>
@@ -1421,7 +1398,7 @@ Object {
           >
             <div
               class="pf-c-dropdown pf-m-align-right"
-              data-ouia-component-id="16"
+              data-ouia-component-id="OUIA-Generated-Dropdown-8"
               data-ouia-component-type="PF4/Dropdown"
               data-ouia-safe="true"
             >
@@ -1444,7 +1421,6 @@ Object {
                 >
                   <path
                     d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    transform=""
                   />
                 </svg>
               </button>
diff --git a/src/clients/add/CapabilityConfig.tsx b/src/clients/add/CapabilityConfig.tsx
index ed77a37dee..5d2156c600 100644
--- a/src/clients/add/CapabilityConfig.tsx
+++ b/src/clients/add/CapabilityConfig.tsx
@@ -52,7 +52,7 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
       </FormGroup>
       <FormGroup label={t("authenticationFlow")} fieldId="kc-flow">
         <Grid>
-          <GridItem span={6}>
+          <GridItem lg={4} sm={6}>
             <Controller
               name="standardFlowEnabled"
               control={form.control}
@@ -67,7 +67,7 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
               )}
             />
           </GridItem>
-          <GridItem span={6}>
+          <GridItem lg={8} sm={6}>
             <Controller
               name="directAccessGrantsEnabled"
               control={form.control}
@@ -82,7 +82,7 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
               )}
             />
           </GridItem>
-          <GridItem span={6}>
+          <GridItem lg={4} sm={6}>
             <Controller
               name="implicitFlowEnabled"
               control={form.control}
@@ -97,7 +97,7 @@ export const CapabilityConfig = ({ form }: CapabilityConfigProps) => {
               )}
             />
           </GridItem>
-          <GridItem span={6}>
+          <GridItem lg={8} sm={6}>
             <Controller
               name="serviceAccountsEnabled"
               control={form.control}
diff --git a/src/clients/add/GeneralSettings.tsx b/src/clients/add/GeneralSettings.tsx
index f0f6224f39..70cc0a82d0 100644
--- a/src/clients/add/GeneralSettings.tsx
+++ b/src/clients/add/GeneralSettings.tsx
@@ -78,7 +78,7 @@ export const GeneralSettings = ({ form }: GeneralSettingsProps) => {
           )}
         />
       </FormGroup>
-      <ClientDescription register={register} />
+      <ClientDescription form={form} />
     </Form>
   );
 };
diff --git a/src/clients/import/ImportForm.tsx b/src/clients/import/ImportForm.tsx
index 6fd6ba3239..fb5be588dd 100644
--- a/src/clients/import/ImportForm.tsx
+++ b/src/clients/import/ImportForm.tsx
@@ -19,16 +19,14 @@ import { ClientDescription } from "../ClientDescription";
 import { HttpClientContext } from "../../http-service/HttpClientContext";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { useAlerts } from "../../components/alert/Alerts";
-import { AlertPanel } from "../../components/alert/AlertPanel";
 import { RealmContext } from "../../components/realm-context/RealmContext";
 
 export const ImportForm = () => {
   const { t } = useTranslation("clients");
   const httpClient = useContext(HttpClientContext)!;
   const { realm } = useContext(RealmContext);
-  const { register, handleSubmit, errors, setValue } = useForm<
-    ClientRepresentation
-  >();
+  const form = useForm<ClientRepresentation>();
+  const { register, handleSubmit, setValue } = form;
 
   const [add, Alerts] = useAlerts();
 
@@ -67,7 +65,7 @@ export const ImportForm = () => {
       <PageSection variant="light">
         <Form isHorizontal onSubmit={handleSubmit(save)}>
           <JsonFileUpload id="realm-file" onChange={handleFileChange} />
-          <ClientDescription register={register} />
+          <ClientDescription form={form} />
           <FormGroup label={t("type")} fieldId="kc-type">
             <TextInput
               type="text"