issue-14/update-custom-params-key-to-work-as-object-not-array

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

@@ -26,7 +26,7 @@ const CustomParams: React.FC<Props> = ({
   const onAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    const newIndex = `${INDEX_PREFIX}.${new Date().getTime()}`;
+    const newIndex = `${INDEX_PREFIX}.${new Date().getTime()}ts`;
 
     setFormCustomParams({
       ...formCustomParams,

kafka-ui-react-app/src/redux/api/topics.ts

@@ -1,3 +1,4 @@
+import { reduce } from 'lodash';
 import {
   TopicName,
   Topic,
@@ -5,6 +6,7 @@ import {
   TopicDetails,
   TopicConfig,
   TopicFormData,
+  TopicFormCustomParam,
 } from 'redux/interfaces';
 import {
   BASE_URL,
@@ -23,6 +25,10 @@ export const getTopics = (clusterName: ClusterName): Promise<Topic[]> =>
   fetch(`${BASE_URL}/clusters/${clusterName}/topics`, { ...BASE_PARAMS })
     .then(res => res.json());
 
+interface Result {
+  [index: string]: string,
+}
+
 export const postTopic = (clusterName: ClusterName, form: TopicFormData): Promise<Topic> => {
   const {
     name,
@@ -34,6 +40,12 @@ export const postTopic = (clusterName: ClusterName, form: TopicFormData): Promis
     maxMessageBytes,
     minInSyncReplicas,
   } = form;
+
+  const customParams = reduce(Object.values(form.customParams), (result: Result, customParam: TopicFormCustomParam) => {
+    result[customParam.name] = customParam.value;
+    return result;
+  }, {});
+
   const body = JSON.stringify({
     name,
     partitions,
@@ -44,8 +56,10 @@ export const postTopic = (clusterName: ClusterName, form: TopicFormData): Promis
       'retention.bytes': retentionBytes,
       'max.message.bytes': maxMessageBytes,
       'min.insync.replicas': minInSyncReplicas,
+      ...customParams,
     }
   });
+
   return fetch(`${BASE_URL}/clusters/${clusterName}/topics`, {
     ...BASE_PARAMS,
     method: 'POST',