Unify input forms

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

@@ -13,7 +13,7 @@ import yup from 'lib/yupExtended';
 import Editor from 'components/common/Editor/Editor';
 import Select from 'components/common/Select/Select';
 import { FormError } from 'components/common/Input/Input.styled';
-import Input from 'components/common/Input/Input';
+import ControlledInput from 'components/common/Input/ControlledInput';
 import { Button } from 'components/common/Button/Button';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import Heading from 'components/common/heading/Heading.styled';
@@ -133,7 +133,7 @@ const New: React.FC = () => {
 
         <div>
           <Heading level={3}>Name</Heading>
-          <Input
+          <ControlledInput
             inputSize="M"
             placeholder="Connector Name"
             name="name"

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/Form.tsx

@@ -17,7 +17,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { ErrorMessage } from '@hookform/error-message';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { Button } from 'components/common/Button/Button';
-import Input from 'components/common/Input/Input';
+import ControlledInput from 'components/common/Input/ControlledInput';
 import { FormError } from 'components/common/Input/Input.styled';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useResetConsumerGroupOffsetsMutation } from 'lib/hooks/api/consumers';
@@ -160,7 +160,7 @@ const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
             partitionsValue.length > 0 && (
               <S.OffsetsWrapper>
                 {fields.map((field, index) => (
-                  <Input
+                  <ControlledInput
                     key={field.id}
                     label={`Partition #${field.partition} Offset`}
                     type="number"

kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx

@@ -14,7 +14,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import yup from 'lib/yupExtended';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import ReactAce from 'react-ace';
-import Input from 'components/common/Input/Input';
+import ControlledInput from 'components/common/Input/ControlledInput';
 
 import * as S from './QueryForm.styled';
 
@@ -156,14 +156,16 @@ const QueryForm: React.FC<QueryFormProps> = ({
               Stream properties:
               {fields.map((field, index) => (
                 <S.InputsContainer key={field.id}>
-                  <Input
+                  <ControlledInput
+                    control={control}
                     name={`streamsProperties.${index}.key`}
                     placeholder="Key"
                     type="text"
                     autoComplete="off"
                     withError
                   />
-                  <Input
+                  <ControlledInput
+                    control={control}
                     name={`streamsProperties.${index}.value`}
                     placeholder="Value"
                     type="text"

kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.tsx

@@ -1,6 +1,6 @@
 import { ErrorMessage } from '@hookform/error-message';
 import { Button } from 'components/common/Button/Button';
-import Input from 'components/common/Input/Input';
+import ControlledInput from 'components/common/Input/ControlledInput';
 import { FormError } from 'components/common/Input/Input.styled';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import React from 'react';
@@ -99,7 +99,7 @@ const DangerZone: React.FC<DangerZoneProps> = ({
               <InputLabel htmlFor="partitions">
                 Number of partitions *
               </InputLabel>
-              <Input
+              <ControlledInput
                 inputSize="M"
                 type="number"
                 id="partitions"
@@ -139,7 +139,7 @@ const DangerZone: React.FC<DangerZoneProps> = ({
               <InputLabel htmlFor="replicationFactor">
                 Replication Factor *
               </InputLabel>
-              <Input
+              <ControlledInput
                 id="replicationFactor"
                 inputSize="M"
                 type="number"

kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/AddEditFilterContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as S from 'components/Topics/Topic/Messages/Filters/Filters.styled';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
-import Input from 'components/common/Input/Input';
+import ControlledInput from 'components/common/Input/ControlledInput';
 import { FormProvider, Controller, useForm } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import { Button } from 'components/common/Button/Button';
@@ -96,7 +96,7 @@ const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
         )}
         <div>
           <InputLabel>Display name</InputLabel>
-          <Input
+          <ControlledInput
             inputSize="M"
             placeholder="Enter Name"
             autoComplete="off"

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

@@ -6,7 +6,7 @@ import { TopicConfigParams, TopicFormData } from 'redux/interfaces';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { FormError } from 'components/common/Input/Input.styled';
 import Select from 'components/common/Select/Select';
-import Input from 'components/common/Input/Input';
+import ControlledInput from 'components/common/Input/ControlledInput';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import CloseIcon from 'components/common/Icons/CloseIcon';
 import * as C from 'components/Topics/shared/Form/TopicForm.styled';
@@ -99,7 +99,7 @@ const CustomParamField: React.FC<Props> = ({
       </div>
       <div>
         <InputLabel>Value *</InputLabel>
-        <Input
+        <ControlledInput
           name={`customParams.${index}.value` as const}
           hookFormOptions={{
             required: 'Value is required.',

kafka-ui-react-app/src/components/common/Checkbox/Checkbox.tsx

@@ -1,30 +1,30 @@
 import * as React from 'react';
-import { useFormContext } from 'react-hook-form';
 import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import { FormError, InputHint } from 'components/common/Input/Input.styled';
 import { ErrorMessage } from '@hookform/error-message';
 
-interface CheckboxProps {
+export interface CheckboxProps {
   name: string;
   label: React.ReactNode;
   hint?: string;
+  onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => void;
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({ name, label, hint }) => {
-  const { register } = useFormContext();
-
-  return (
-    <div>
-      <InputLabel>
-        <input {...register(name)} type="checkbox" />
-        {label}
-      </InputLabel>
-      <InputHint>{hint}</InputHint>
-      <FormError>
-        <ErrorMessage name={name} />
-      </FormError>
-    </div>
-  );
-};
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ name, label, hint, onChange }, ref) => {
+    return (
+      <div>
+        <InputLabel>
+          <input type="checkbox" ref={ref} onChange={onChange} />
+          {label}
+        </InputLabel>
+        <InputHint>{hint}</InputHint>
+        <FormError>
+          <ErrorMessage name={name} />
+        </FormError>
+      </div>
+    );
+  }
+);
 
 export default Checkbox;

kafka-ui-react-app/src/components/common/Checkbox/ControlledCheckbox.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Controller } from 'react-hook-form';
+
+import Checkbox, { CheckboxProps } from './Checkbox';
+
+const ControlledCheckbox = ({ name, label, hint }: CheckboxProps) => {
+  return (
+    <Controller
+      name={name}
+      render={({ field }) => <Checkbox label={label} hint={hint} {...field} />}
+    />
+  );
+};
+
+export default ControlledCheckbox;

kafka-ui-react-app/src/components/common/Input/ControlledInput.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Controller } from 'react-hook-form';
+
+import Input, { InputProps } from './Input';
+
+const ControlledInput = ({
+  name,
+  control,
+  ...restProps
+}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+InputProps & { control: any }) => {
+  return (
+    <Controller
+      control={control}
+      name={name ?? ''}
+      render={({ field }) => <Input {...restProps} {...field} />}
+    />
+  );
+};
+
+export default ControlledInput;