fix: properties fields array

Author: Nilumilak

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as S from 'widgets/ClusterConfigForm/ClusterConfigForm.styled';
+import { Button } from 'components/common/Button/Button';
+import Input from 'components/common/Input/Input';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import PlusIcon from 'components/common/Icons/PlusIcon';
+import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
+import Heading from 'components/common/heading/Heading.styled';
+
+const PropertiesFields = ({ nestedId }: { nestedId: number }) => {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `serde.${nestedId}.properties`,
+  });
+
+  return (
+    <S.GroupFieldWrapper>
+      <Heading level={4}>Serde properties</Heading>
+      {fields.map((propsField, propsIndex) => (
+        <S.SerdeProperties key={propsField.id}>
+          <Input
+            name={`serde.${nestedId}.properties.${propsIndex}.key`}
+            placeholder="Key"
+            type="text"
+            withError
+          />
+          <Input
+            name={`serde.${nestedId}.properties.${propsIndex}.value`}
+            placeholder="Value"
+            type="text"
+            withError
+          />
+          <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>
+  );
+};
+
+export default PropertiesFields;

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

@@ -6,41 +6,20 @@ import { useFieldArray, useFormContext } from 'react-hook-form';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import CloseCircleIcon from 'components/common/Icons/CloseCircleIcon';
-import Heading from 'components/common/heading/Heading.styled';
 import {
   FlexGrow1,
   FlexRow,
 } from 'widgets/ClusterConfigForm/ClusterConfigForm.styled';
 import SectionHeader from 'widgets/ClusterConfigForm/common/SectionHeader';
-import { Serde } from 'widgets/ClusterConfigForm/types';
+
+import PropertiesFields from './PropertiesFields';
 
 const Serdes = () => {
-  const { control, reset, getValues } = useFormContext();
+  const { control } = useFormContext();
   const { fields, append, remove } = useFieldArray({
     control,
     name: 'serde',
   });
-  const {
-    fields: propsFields,
-    append: appendProps,
-    remove: removeProps,
-  } = useFieldArray({
-    control,
-    name: 'properties',
-  });
-
-  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({
@@ -109,54 +88,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">

frontend/src/widgets/ClusterConfigForm/index.tsx

@@ -17,7 +17,7 @@ import { useNavigate } from 'react-router-dom';
 import useBoolean from 'lib/hooks/useBoolean';
 import KafkaCluster from 'widgets/ClusterConfigForm/Sections/KafkaCluster';
 import SchemaRegistry from 'widgets/ClusterConfigForm/Sections/SchemaRegistry';
-import Serdes from 'widgets/ClusterConfigForm/Sections/Serdes';
+import Serdes from 'widgets/ClusterConfigForm/Sections/Serdes/Serdes';
 import KafkaConnect from 'widgets/ClusterConfigForm/Sections/KafkaConnect';
 import Metrics from 'widgets/ClusterConfigForm/Sections/Metrics';
 import CustomAuthentication from 'widgets/ClusterConfigForm/Sections/CustomAuthentication';