Migrate react-hook-form to the latest version (#441)

* Migrate react-hook-form to the latest version

kafka-ui-react-app/.eslintrc.json

@@ -40,7 +40,8 @@
       "newlines-between": "always"
     }],
     "import/no-relative-parent-imports": "error",
-    "no-debugger": "warn"
+    "no-debugger": "warn",
+    "react/jsx-props-no-spreading": "off"
   },
   "overrides": [
     {

kafka-ui-react-app/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@hookform/error-message": "0.0.5",
-    "@hookform/resolvers": "^1.3.7",
+    "@hookform/error-message": "^2.0.0",
+    "@hookform/resolvers": "^2.5.1",
     "@rooks/use-outside-click-ref": "^4.10.1",
     "ace-builds": "^1.4.12",
     "bulma": "^0.9.2",
@@ -21,7 +21,7 @@
     "react-ace": "^9.3.0",
     "react-datepicker": "^3.7.0",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^6.15.5",
+    "react-hook-form": "^7.6.9",
     "react-json-tree": "^0.15.0",
     "react-multi-select-component": "^4.0.0",
     "react-redux": "^7.2.2",

kafka-ui-react-app/src/components/Connect/Edit/Edit.tsx

@@ -54,11 +54,9 @@ const Edit: React.FC<EditProps> = ({
   const { clusterName, connectName, connectorName } = useParams<RouterParams>();
   const history = useHistory();
   const {
-    register,
-    errors,
     handleSubmit,
     control,
-    formState: { isDirty, isSubmitting, isValid },
+    formState: { isDirty, isSubmitting, isValid, errors },
     setValue,
   } = useForm<FormValues>({
     mode: 'onTouched',
@@ -109,15 +107,8 @@ const Edit: React.FC<EditProps> = ({
             <Controller
               control={control}
               name="config"
-              render={({ name, value, onChange, onBlur }) => (
-                <JSONEditor
-                  ref={register}
-                  name={name}
-                  value={value}
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  readOnly={isSubmitting}
-                />
+              render={({ field }) => (
+                <JSONEditor {...field} readOnly={isSubmitting} />
               )}
             />
           </div>

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -47,10 +47,9 @@ const New: React.FC<NewProps> = ({
 
   const {
     register,
-    errors,
     handleSubmit,
     control,
-    formState: { isDirty, isSubmitting, isValid },
+    formState: { isDirty, isSubmitting, isValid, errors },
     getValues,
     setValue,
   } = useForm<FormValues>({
@@ -111,7 +110,7 @@ const New: React.FC<NewProps> = ({
         <div className={['field', connectNameFieldClassName].join(' ')}>
           <label className="label">Connect *</label>
           <div className="control select">
-            <select ref={register} name="connectName" disabled={isSubmitting}>
+            <select {...register('connectName')} disabled={isSubmitting}>
               {connects.map(({ name }) => (
                 <option key={name} value={name}>
                   {name}
@@ -128,10 +127,9 @@ const New: React.FC<NewProps> = ({
           <label className="label">Name *</label>
           <div className="control">
             <input
-              ref={register}
               className="input"
               placeholder="Connector Name"
-              name="name"
+              {...register('name')}
               autoComplete="off"
               disabled={isSubmitting}
             />
@@ -147,14 +145,8 @@ const New: React.FC<NewProps> = ({
             <Controller
               control={control}
               name="config"
-              render={({ name, onChange, onBlur }) => (
-                <JSONEditor
-                  ref={register}
-                  name={name}
-                  onChange={onChange}
-                  onBlur={onBlur}
-                  readOnly={isSubmitting}
-                />
+              render={({ field }) => (
+                <JSONEditor {...field} readOnly={isSubmitting} />
               )}
             />
           </div>

kafka-ui-react-app/src/components/Connect/New/__tests__/New.spec.tsx

@@ -31,10 +31,9 @@ describe('New', () => {
     const clusterName = 'my-cluster';
     const simulateFormSubmit = (wrapper: ReactWrapper) =>
       act(async () => {
-        const nameInput = wrapper
-          .find('input[name="name"]')
-          .getDOMNode<HTMLInputElement>();
-        nameInput.value = 'my-connector';
+        wrapper.find('input[name="name"]').simulate('change', {
+          target: { name: 'name', value: 'my-connector' },
+        });
         wrapper
           .find('mock-JSONEditor')
           .simulate('change', { target: { value: '{"class":"MyClass"}' } });

kafka-ui-react-app/src/components/Connect/New/__tests__/__snapshots__/New.spec.tsx.snap

@@ -21,6 +21,8 @@ exports[`New view matches snapshot 1`] = `
         <select
           disabled={false}
           name="connectName"
+          onBlur={[Function]}
+          onChange={[Function]}
         >
           <option
             value="first"
@@ -54,6 +56,8 @@ exports[`New view matches snapshot 1`] = `
           className="input"
           disabled={false}
           name="name"
+          onBlur={[Function]}
+          onChange={[Function]}
           placeholder="Connector Name"
         />
       </div>
@@ -77,6 +81,7 @@ exports[`New view matches snapshot 1`] = `
           onBlur={[Function]}
           onChange={[Function]}
           readOnly={false}
+          value=""
         />
       </div>
       <p

kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx

@@ -110,8 +110,7 @@ const Edit = ({
               <h5 className="title is-5 mb-2">Schema Type</h5>
               <div className="select">
                 <select
-                  name="schemaType"
-                  ref={register({
+                  {...register('schemaType', {
                     required: 'Schema Type is required.',
                   })}
                   defaultValue={schema.schemaType}
@@ -130,8 +129,7 @@ const Edit = ({
               <h5 className="title is-5 mb-2">Compatibility Level</h5>
               <div className="select">
                 <select
-                  name="compatibilityLevel"
-                  ref={register()}
+                  {...register('compatibilityLevel')}
                   defaultValue={schema.compatibilityLevel}
                   disabled={isSubmitting}
                 >
@@ -162,8 +160,7 @@ const Edit = ({
                 <Controller
                   control={control}
                   name="newSchema"
-                  disabled={isSubmitting}
-                  render={({ name, onChange }) => (
+                  render={({ field: { name, onChange } }) => (
                     <JSONEditor
                       readOnly={isSubmitting}
                       defaultValue={getFormattedSchema()}

kafka-ui-react-app/src/components/Schemas/Edit/__tests__/Edit.spec.tsx

@@ -4,6 +4,11 @@ import React from 'react';
 import { StaticRouter } from 'react-router-dom';
 import Edit, { EditProps } from 'components/Schemas/Edit/Edit';
 
+jest.mock('react-hook-form', () => ({
+  ...jest.requireActual('react-hook-form'),
+  Controller: () => 'Controller',
+}));
+
 describe('Edit Component', () => {
   const mockSchema = {
     subject: 'Subject',
@@ -57,7 +62,7 @@ describe('Edit Component', () => {
       expect(component.find('JSONEditor[name="latestSchema"]').length).toEqual(
         1
       );
-      expect(component.find('Controller[name="newSchema"]').length).toEqual(1);
+      expect(component.find('Controller').length).toEqual(1);
       expect(component.find('button').exists()).toBeTruthy();
     });
     it('does not fetch them', () => {

kafka-ui-react-app/src/components/Schemas/Edit/__tests__/__snapshots__/Edit.spec.tsx.snap

@@ -50,6 +50,8 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
             defaultValue="AVRO"
             disabled={false}
             name="schemaType"
+            onBlur={[Function]}
+            onChange={[Function]}
           >
             <option
               key="AVRO"
@@ -87,6 +89,8 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
             defaultValue="BACKWARD"
             disabled={false}
             name="compatibilityLevel"
+            onBlur={[Function]}
+            onChange={[Function]}
           >
             <option
               key="BACKWARD"
@@ -166,6 +170,11 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
           <Controller
             control={
               Object {
+                "controllerSubjectRef": Object {
+                  "current": Re {
+                    "observers": Array [],
+                  },
+                },
                 "defaultValuesRef": Object {
                   "current": Object {},
                 },
@@ -175,26 +184,40 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
                 "fieldArrayNamesRef": Object {
                   "current": Set {},
                 },
-                "fieldArrayValuesRef": Object {
-                  "current": Object {},
+                "fieldArraySubjectRef": Object {
+                  "current": Re {
+                    "observers": Array [],
+                  },
                 },
                 "fieldsRef": Object {
-                  "current": Object {},
+                  "current": Object {
+                    "compatibilityLevel": Object {
+                      "_f": Object {
+                        "mount": true,
+                        "name": "compatibilityLevel",
+                        "ref": Object {
+                          "name": "compatibilityLevel",
+                        },
+                        "value": undefined,
+                      },
+                    },
+                    "schemaType": Object {
+                      "_f": Object {
+                        "mount": true,
+                        "name": "schemaType",
+                        "ref": Object {
+                          "name": "schemaType",
+                        },
+                        "required": "Schema Type is required.",
+                        "value": undefined,
+                      },
+                    },
+                  },
                 },
                 "fieldsWithValidationRef": Object {
-                  "current": Object {},
-                },
-                "formState": Object {
-                  "dirtyFields": Object {},
-                  "errors": Object {},
-                  "isDirty": false,
-                  "isSubmitSuccessful": false,
-                  "isSubmitted": false,
-                  "isSubmitting": false,
-                  "isValid": true,
-                  "isValidating": false,
-                  "submitCount": 0,
-                  "touched": Object {},
+                  "current": Object {
+                    "schemaType": true,
+                  },
                 },
                 "formStateRef": Object {
                   "current": Object {
@@ -207,65 +230,49 @@ exports[`Edit Component when schemas are fetched matches the snapshot 1`] = `
                     "isValid": true,
                     "isValidating": false,
                     "submitCount": 0,
-                    "touched": Object {},
+                    "touchedFields": Object {},
                   },
                 },
-                "getValues": [Function],
-                "isFormDirty": [Function],
-                "mode": Object {
-                  "isOnAll": false,
-                  "isOnBlur": false,
-                  "isOnChange": true,
-                  "isOnSubmit": false,
-                  "isOnTouch": false,
+                "formStateSubjectRef": Object {
+                  "current": Re {
+                    "observers": Array [],
+                  },
+                },
+                "getIsDirty": [Function],
+                "inFieldArrayActionRef": Object {
+                  "current": false,
                 },
-                "reValidateMode": Object {
-                  "isReValidateOnBlur": false,
-                  "isReValidateOnChange": true,
+                "isWatchAllRef": Object {
+                  "current": false,
                 },
                 "readFormStateRef": Object {
                   "current": Object {
-                    "constructor": true,
-                    "dirtyFields": true,
-                    "errors": true,
-                    "isDirty": true,
-                    "isSubmitSuccessful": true,
-                    "isSubmitted": true,
-                    "isSubmitting": true,
-                    "isValid": true,
-                    "isValidating": true,
-                    "submitCount": true,
-                    "touched": true,
+                    "dirtyFields": false,
+                    "errors": false,
+                    "isDirty": "all",
+                    "isSubmitting": "all",
+                    "isValid": false,
+                    "isValidating": false,
+                    "touchedFields": false,
                   },
                 },
                 "register": [Function],
-                "removeFieldEventListener": [Function],
-                "resetFieldArrayFunctionRef": Object {
-                  "current": Object {},
-                },
-                "setValue": [Function],
-                "shallowFieldsStateRef": Object {
-                  "current": Object {},
-                },
-                "shouldUnregister": true,
-                "trigger": [Function],
+                "shouldUnmount": undefined,
                 "unregister": [Function],
-                "updateFormState": [Function],
-                "updateWatchedValue": [Function],
-                "useWatchFieldsRef": Object {
-                  "current": Object {},
-                },
-                "useWatchRenderFunctionsRef": Object {
-                  "current": Object {},
-                },
                 "validFieldsRef": Object {
                   "current": Object {},
                 },
-                "validateResolver": undefined,
+                "watchFieldsRef": Object {
+                  "current": Set {},
+                },
                 "watchInternal": [Function],
+                "watchSubjectRef": Object {
+                  "current": Re {
+                    "observers": Array [],
+                  },
+                },
               }
             }
-            disabled={false}
             name="newSchema"
             render={[Function]}
           />

kafka-ui-react-app/src/components/Schemas/List/GlobalSchemaSelector.tsx

@@ -45,9 +45,8 @@ const GlobalSchemaSelector: React.FC<GlobalSchemaSelectorProps> = ({
       <h5 className="is-5 mr-2">Global Compatibility Level: </h5>
       <div className="select mr-2">
         <select
-          name="compatibilityLevel"
+          {...register('compatibilityLevel')}
           defaultValue={globalSchemaCompatibilityLevel}
-          ref={register()}
           onChange={() => setUpdateCompatibilityConfirmationVisible(true)}
         >
           {Object.keys(CompatibilityLevelCompatibilityEnum).map(

kafka-ui-react-app/src/components/Schemas/New/New.tsx

@@ -20,9 +20,8 @@ const New: React.FC<NewProps> = ({ createSchema }) => {
   const history = useHistory();
   const {
     register,
-    errors,
     handleSubmit,
-    formState: { isDirty, isSubmitting },
+    formState: { isDirty, isSubmitting, errors },
   } = useForm<NewSchemaSubjectRaw>();
 
   const onSubmit = React.useCallback(
@@ -67,14 +66,13 @@ const New: React.FC<NewProps> = ({ createSchema }) => {
                 <input
                   className="input"
                   placeholder="Schema Name"
-                  ref={register({
+                  {...register('subject', {
                     required: 'Schema Name is required.',
                     pattern: {
                       value: SCHEMA_NAME_VALIDATION_PATTERN,
                       message: 'Only alphanumeric, _, -, and . allowed',
                     },
                   })}
-                  name="subject"
                   autoComplete="off"
                   disabled={isSubmitting}
                 />
@@ -89,10 +87,9 @@ const New: React.FC<NewProps> = ({ createSchema }) => {
               <div className="control">
                 <textarea
                   className="textarea"
-                  ref={register({
+                  {...register('schema', {
                     required: 'Schema is required.',
                   })}
-                  name="schema"
                   disabled={isSubmitting}
                 />
               </div>
@@ -105,10 +102,9 @@ const New: React.FC<NewProps> = ({ createSchema }) => {
               <label className="label">Schema Type *</label>
               <div className="control select">
                 <select
-                  ref={register({
+                  {...register('schemaType', {
                     required: 'Schema Type is required.',
                   })}
-                  name="schemaType"
                   disabled={isSubmitting}
                 >
                   <option value={SchemaType.AVRO}>AVRO</option>

kafka-ui-react-app/src/components/Schemas/New/__test__/__snapshots__/New.spec.tsx.snap

@@ -113,6 +113,8 @@ exports[`New View matches snapshot 1`] = `
                     className="input"
                     disabled={false}
                     name="subject"
+                    onBlur={[Function]}
+                    onChange={[Function]}
                     placeholder="Schema Name"
                   />
                 </div>
@@ -140,6 +142,8 @@ exports[`New View matches snapshot 1`] = `
                     className="textarea"
                     disabled={false}
                     name="schema"
+                    onBlur={[Function]}
+                    onChange={[Function]}
                   />
                 </div>
                 <p
@@ -165,6 +169,8 @@ exports[`New View matches snapshot 1`] = `
                   <select
                     disabled={false}
                     name="schemaType"
+                    onBlur={[Function]}
+                    onChange={[Function]}
                   >
                     <option
                       value="AVRO"

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx

@@ -21,7 +21,12 @@ const CustomParamSelect: React.FC<CustomParamSelectProps> = ({
   existingFields,
   onNameChange,
 }) => {
-  const { register, errors, getValues, trigger } = useFormContext();
+  const {
+    register,
+    getValues,
+    trigger,
+    formState: { errors },
+  } = useFormContext();
   const optInputName = `${index}[name]`;
 
   const selectedMustBeUniq = (selected: string) => {
@@ -50,8 +55,7 @@ const CustomParamSelect: React.FC<CustomParamSelectProps> = ({
       <label className="label">Custom Parameter</label>
       <div className="select is-block">
         <select
-          name={optInputName}
-          ref={register({
+          {...register(optInputName, {
             required: 'Custom Parameter is required.',
             validate: { unique: (selected) => selectedMustBeUniq(selected) },
           })}

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamValue.tsx

@@ -17,7 +17,12 @@ const CustomParamValue: React.FC<Props> = ({
   name,
   defaultValue,
 }) => {
-  const { register, errors, watch, setValue } = useFormContext();
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useFormContext();
   const selectInputName = `${index}[name]`;
   const valInputName = `${index}[value]`;
   const selectedParamName = watch(selectInputName, name);
@@ -34,10 +39,9 @@ const CustomParamValue: React.FC<Props> = ({
       <input
         className="input"
         placeholder="Value"
-        ref={register({
+        {...register(valInputName, {
           required: 'Value is required.',
         })}
-        name={valInputName}
         defaultValue={defaultValue}
         autoComplete="off"
         disabled={isDisabled}

kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/__tests__/__snapshots__/CustomParamSelect.spec.tsx.snap

@@ -26,6 +26,7 @@ exports[`CustomParamSelect matches snapshot 1`] = `
       defaultValue="my_custom_param"
       disabled={true}
       name="1[name]"
+      onBlur={[Function]}
       onChange={[Function]}
     >
       <option

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx

@@ -11,7 +11,11 @@ interface Props {
 }
 
 const TimeToRetain: React.FC<Props> = ({ isSubmitting }) => {
-  const { register, errors, watch } = useFormContext();
+  const {
+    register,
+    watch,
+    formState: { errors },
+  } = useFormContext();
   const defaultValue = MILLISECONDS_IN_WEEK;
   const name = 'retentionMs';
   const watchedValue = watch(name, defaultValue.toString());
@@ -35,8 +39,7 @@ const TimeToRetain: React.FC<Props> = ({ isSubmitting }) => {
         id="timeToRetain"
         type="number"
         defaultValue={defaultValue}
-        name={name}
-        ref={register({
+        {...register(name, {
           min: { value: -1, message: 'must be greater than or equal to -1' },
         })}
         disabled={isSubmitting}

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -22,7 +22,10 @@ const TopicForm: React.FC<Props> = ({
   isSubmitting,
   onSubmit,
 }) => {
-  const { register, errors } = useFormContext();
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <form onSubmit={onSubmit}>
@@ -32,15 +35,14 @@ const TopicForm: React.FC<Props> = ({
           <input
             className="input"
             placeholder="Topic Name"
-            ref={register({
+            defaultValue={topicName}
+            {...register('name', {
               required: 'Topic Name is required.',
               pattern: {
                 value: TOPIC_NAME_VALIDATION_PATTERN,
                 message: 'Only alphanumeric, _, -, and . allowed',
               },
             })}
-            defaultValue={topicName}
-            name="name"
             autoComplete="off"
             disabled={isEditing || isSubmitting}
           />
@@ -56,8 +58,9 @@ const TopicForm: React.FC<Props> = ({
             type="number"
             placeholder="Number of partitions"
             defaultValue="1"
-            ref={register({ required: 'Number of partitions is required.' })}
-            name="partitions"
+            {...register('partitions', {
+              required: 'Number of partitions is required.',
+            })}
             disabled={isEditing || isSubmitting}
           />
           <p className="help is-danger">
@@ -74,8 +77,9 @@ const TopicForm: React.FC<Props> = ({
             type="number"
             placeholder="Replication Factor"
             defaultValue="1"
-            ref={register({ required: 'Replication Factor is required.' })}
-            name="replicationFactor"
+            {...register('replicationFactor', {
+              required: 'Replication Factor is required.',
+            })}
             disabled={isEditing || isSubmitting}
           />
           <p className="help is-danger">
@@ -90,8 +94,9 @@ const TopicForm: React.FC<Props> = ({
             type="number"
             placeholder="Min In Sync Replicas"
             defaultValue="1"
-            ref={register({ required: 'Min In Sync Replicas is required.' })}
-            name="minInSyncReplicas"
+            {...register('minInSyncReplicas', {
+              required: 'Min In Sync Replicas is required.',
+            })}
             disabled={isSubmitting}
           />
           <p className="help is-danger">
@@ -106,8 +111,7 @@ const TopicForm: React.FC<Props> = ({
           <div className="select is-block">
             <select
               defaultValue="delete"
-              name="cleanupPolicy"
-              ref={register}
+              {...register('cleanupPolicy')}
               disabled={isSubmitting}
             >
               <option value="delete">Delete</option>
@@ -125,8 +129,7 @@ const TopicForm: React.FC<Props> = ({
           <div className="select is-block">
             <select
               defaultValue={-1}
-              name="retentionBytes"
-              ref={register}
+              {...register('retentionBytes')}
               disabled={isSubmitting}
             >
               <option value={-1}>Not Set</option>
@@ -146,10 +149,9 @@ const TopicForm: React.FC<Props> = ({
             className="input"
             type="number"
             defaultValue="1000012"
-            ref={register({
+            {...register('maxMessageBytes', {
               required: 'Maximum message size in bytes is required',
             })}
-            name="maxMessageBytes"
             disabled={isSubmitting}
           />
           <p className="help is-danger">

kafka-ui-react-app/src/redux/interfaces/schema.ts

@@ -15,4 +15,6 @@ export interface SchemasState {
 
 export interface NewSchemaSubjectRaw extends NewSchemaSubject {
   subject: string;
+  compatibilityLevel: CompatibilityLevelCompatibilityEnum;
+  newSchema: string;
 }