Implement unique field name select

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

@@ -1,16 +1,27 @@
 import React from 'react';
 import { TopicCustomParamOption } from 'redux/interfaces';
+import { omitBy } from 'lodash';
 import CUSTOM_PARAMS_OPTIONS from './customParamsOptions';
 
-const CustomParamOptions = () => (
-  <>
-    <option value="">Select</option>
-    {Object.values(CUSTOM_PARAMS_OPTIONS).map((opt: TopicCustomParamOption) => (
-      <option key={opt.name} value={opt.name}>
-        {opt.name}
-      </option>
-    ))}
-  </>
-);
+interface Props {
+  existingFields: string[];
+}
+
+const CustomParamOptions: React.FC<Props> = ({ existingFields }) => {
+  const fields = omitBy(Object.values(CUSTOM_PARAMS_OPTIONS), (field) =>
+    existingFields.includes(field.name)
+  );
+
+  return (
+    <>
+      <option value="">Select</option>
+      {Object.values(fields).map((opt: TopicCustomParamOption) => (
+        <option key={opt.name} value={opt.name}>
+          {opt.name}
+        </option>
+      ))}
+    </>
+  );
+};
 
 export default React.memo(CustomParamOptions);

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

@@ -8,9 +8,17 @@ interface Props {
   isDisabled: boolean;
   index: string;
   name: string;
+  existingFields: string[];
+  onNameChange: (inputName: string, name: string) => void;
 }
 
-const CustomParamSelect: React.FC<Props> = ({ isDisabled, index, name }) => {
+const CustomParamSelect: React.FC<Props> = ({
+  isDisabled,
+  index,
+  name,
+  existingFields,
+  onNameChange,
+}) => {
   const { register, errors, getValues, triggerValidation } = useFormContext();
   const optInputName = `${index}[name]`;
 
@@ -29,6 +37,11 @@ const CustomParamSelect: React.FC<Props> = ({ isDisabled, index, name }) => {
     return valid || 'Custom Parameter must be unique';
   };
 
+  const onChange = (inputName: string) => (event: any) => {
+    triggerValidation(inputName);
+    onNameChange(index, event.target.value);
+  };
+
   return (
     <>
       <label className="label">Custom Parameter</label>
@@ -39,11 +52,11 @@ const CustomParamSelect: React.FC<Props> = ({ isDisabled, index, name }) => {
             required: 'Custom Parameter is required.',
             validate: { unique: (selected) => selectedMustBeUniq(selected) },
           })}
-          onChange={() => triggerValidation(optInputName)}
+          onChange={onChange(optInputName)}
           disabled={isDisabled}
           defaultValue={name}
         >
-          <CustomParamOptions />
+          <CustomParamOptions existingFields={existingFields} />
         </select>
         <p className="help is-danger">
           <ErrorMessage errors={errors} name={optInputName} />

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { omit, reject, reduce } from 'lodash';
+import { omit, reject, reduce, remove } from 'lodash';
 
 import { TopicFormCustomParams, TopicConfigByName } from 'redux/interfaces';
 import CustomParamSelect from './CustomParamSelect';
@@ -21,6 +21,8 @@ interface Param {
   };
 }
 
+const existingFields: string[] = [];
+
 const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
   const byIndex = config
     ? reduce(
@@ -59,6 +61,8 @@ const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
   };
 
   const onRemove = (index: string) => {
+    const fieldName = formCustomParams.byIndex[index].name;
+    remove(existingFields, (el) => el === fieldName);
     setFormCustomParams({
       ...formCustomParams,
       byIndex: omit(formCustomParams.byIndex, index),
@@ -66,6 +70,11 @@ const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
     });
   };
 
+  const onFieldNameChange = (index: string, name: string) => {
+    formCustomParams.byIndex[index].name = name;
+    existingFields.push(name);
+  };
+
   return (
     <>
       <div className="columns">
@@ -86,6 +95,8 @@ const CustomParams: React.FC<Props> = ({ isSubmitting, config }) => {
               index={index}
               isDisabled={isSubmitting}
               name={formCustomParams.byIndex[index].name}
+              existingFields={existingFields}
+              onNameChange={onFieldNameChange}
             />
           </div>