fix: adding 2 pipeline processors with same name should not break the…

… UI (#3943) * fix: ensure pipeline processor ids derived from name are unique * fix: update snapshots to get jest passing * chore: use uuid for processor ids
SigNoz · Nov 13, 2023 · f86fc03 · f86fc03
1 parent 5a9f626
commit f86fc03
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/index.tsx
@@ -7,6 +7,7 @@ import {
 	PipelineData,
 	ProcessorData,
 } from 'types/api/pipeline/def';
+import { v4 } from 'uuid';
 
 import { ModalButtonWrapper, ModalTitle } from '../styles';
 import { getEditedDataSource, getRecordIndex } from '../utils';
@@ -59,7 +60,7 @@ function AddNewProcessor({
 		const totalDataLength = expandedPipelineData?.config?.length || 0;
 
 		const newProcessorData = {
-			id: values.name.replace(/\s/g, ''),
+			id: v4(),
 			orderId: Number(totalDataLength || 0) + 1,
 			type: processorType,
 			enabled: true,
@@ -73,12 +74,14 @@ function AddNewProcessor({
 				'id',
 			);
 
+			const processorData = expandedPipelineData?.config?.[findRecordIndex];
+
 			const updatedProcessorData = {
-				id: values.name.replace(/\s/g, ''),
-				orderId: expandedPipelineData?.config?.[findRecordIndex].orderId,
+				id: processorData?.id || v4(),
+				orderId: processorData?.orderId,
 				type: processorType,
-				enabled: expandedPipelineData?.config?.[findRecordIndex].enabled,
-				output: expandedPipelineData?.config?.[findRecordIndex].output,
+				enabled: processorData?.enabled,
+				output: processorData?.output,
 				...values,
 			};
 

diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx
@@ -239,7 +239,7 @@ function PipelineExpandView({
 				isDarkMode={isDarkMode}
 				showHeader={false}
 				columns={columns}
-				rowKey="name"
+				rowKey="id"
 				size="small"
 				components={tableComponents}
 				dataSource={processorData}

diff --git a/frontend/src/container/PipelinePage/tests/__snapshots__/PipelineExpandView.test.tsx.snap b/frontend/src/container/PipelinePage/tests/__snapshots__/PipelineExpandView.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                 >
                   <tr
                     class="ant-table-row ant-table-row-level-0"
-                    data-row-key="grok use common asd"
+                    data-row-key="grokusecommon"
                     draggable="true"
                   >
                     <td
@@ -97,7 +97,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                   </tr>
                   <tr
                     class="ant-table-row ant-table-row-level-0"
-                    data-row-key="rename auth"
+                    data-row-key="renameauth"
                     draggable="true"
                   >
                     <td