fix: properties fields array

Author: Nilumilak

frontend/src/widgets/ClusterConfigForm/Sections/Serdes.tsx

@@ -12,36 +12,65 @@ import {
   FlexRow,
 } from 'widgets/ClusterConfigForm/ClusterConfigForm.styled';
 import SectionHeader from 'widgets/ClusterConfigForm/common/SectionHeader';
-import { Serde } from 'widgets/ClusterConfigForm/types';
 
-const Serdes = () => {
-  const { control, reset, getValues } = useFormContext();
+const PropertiesFields = ({ nestedId }: { nestedId: number }) => {
+  const { control } = useFormContext();
   const { fields, append, remove } = useFieldArray({
     control,
-    name: 'serde',
+    name: `serde.${nestedId}.properties`,
   });
-  const {
-    fields: propsFields,
-    append: appendProps,
-    remove: removeProps,
-  } = useFieldArray({
+
+  return (
+    <S.GroupFieldWrapper>
+      <Heading level={4}>Serde properties</Heading>
+      {fields.map((propsField, propsIndex) => (
+        <S.SerdeProperties key={propsField.id}>
+          <div>
+            <Input
+              name={`serde.${nestedId}.properties.${propsIndex}.key`}
+              placeholder="Key"
+              type="text"
+              withError
+            />
+          </div>
+          <div>
+            <Input
+              name={`serde.${nestedId}.properties.${propsIndex}.value`}
+              placeholder="Value"
+              type="text"
+              withError
+            />
+          </div>
+          <S.SerdePropertiesActions
+            aria-label="deleteProperty"
+            onClick={() => remove(propsIndex)}
+          >
+            <CloseCircleIcon aria-hidden />
+          </S.SerdePropertiesActions>
+        </S.SerdeProperties>
+      ))}
+      <div>
+        <Button
+          type="button"
+          buttonSize="M"
+          buttonType="secondary"
+          onClick={() => append({ key: '', value: '' })}
+        >
+          <PlusIcon />
+          Add Property
+        </Button>
+      </div>
+    </S.GroupFieldWrapper>
+  );
+};
+
+const Serdes = () => {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
     control,
-    name: 'properties',
+    name: 'serde',
   });
 
-  React.useEffect(() => {
-    reset();
-    getValues().serde?.forEach((item: Serde, index: number) => {
-      item.properties?.forEach((itemProp) => {
-        appendProps({
-          key: itemProp.key,
-          value: itemProp.value,
-          serdeIndex: index,
-        });
-      });
-    });
-  }, []);
-
   const handleAppend = () =>
     append({
       name: '',
@@ -109,54 +138,7 @@ const Serdes = () => {
                     withError
                   />
                   <hr />
-                  <S.GroupFieldWrapper>
-                    <Heading level={4}>Serde properties</Heading>
-                    {propsFields
-                      .filter(
-                        (propItem) =>
-                          (propItem as unknown as { serdeIndex: number })
-                            .serdeIndex === index
-                      )
-                      .map((propsField, propsIndex) => (
-                        <S.SerdeProperties key={propsField.id}>
-                          <div>
-                            <Input
-                              name={`serde.${index}.properties.${propsIndex}.key`}
-                              placeholder="Key"
-                              type="text"
-                              withError
-                            />
-                          </div>
-                          <div>
-                            <Input
-                              name={`serde.${index}.properties.${propsIndex}.value`}
-                              placeholder="Value"
-                              type="text"
-                              withError
-                            />
-                          </div>
-                          <S.SerdePropertiesActions
-                            aria-label="deleteProperty"
-                            onClick={() => removeProps(index)}
-                          >
-                            <CloseCircleIcon aria-hidden />
-                          </S.SerdePropertiesActions>
-                        </S.SerdeProperties>
-                      ))}
-                    <div>
-                      <Button
-                        type="button"
-                        buttonSize="M"
-                        buttonType="secondary"
-                        onClick={() =>
-                          appendProps({ key: '', value: '', serdeIndex: index })
-                        }
-                      >
-                        <PlusIcon />
-                        Add Property
-                      </Button>
-                    </div>
-                  </S.GroupFieldWrapper>
+                  <PropertiesFields nestedId={index} />
                 </FlexGrow1>
                 <S.RemoveButton onClick={() => remove(index)}>
                   <IconButtonWrapper aria-label="deleteProperty">