From a7ce6da7d186f68b79c9dcb80101ffa361dbde50 Mon Sep 17 00:00:00 2001
From: Aditya Singh <adityasinghssj1@gmail.com>
Date: Mon, 14 Jul 2025 13:13:39 +0530
Subject: [PATCH] Show new error component when saving pipeline fails (#8511)

* fix: show new error component when saving pipeline fails

* fix: minor refactor

---------

Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>
---
 frontend/src/api/pipeline/post.ts             | 16 +++++---------
 .../PipelineListsView/PipelineListsView.tsx   | 22 +++++++++----------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/frontend/src/api/pipeline/post.ts b/frontend/src/api/pipeline/post.ts
index c2e7ca275706..9c774481f6d1 100644
--- a/frontend/src/api/pipeline/post.ts
+++ b/frontend/src/api/pipeline/post.ts
@@ -1,24 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Pipeline } from 'types/api/pipeline/def';
 import { Props } from 'types/api/pipeline/post';
 
-const post = async (
-	props: Props,
-): Promise<SuccessResponse<Pipeline> | ErrorResponse> => {
+const post = async (props: Props): Promise<SuccessResponseV2<Pipeline>> => {
 	try {
 		const response = await axios.post('/logs/pipelines', props.data);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
index d3d8739a874e..9b261f0403ef 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
@@ -8,6 +8,7 @@ import savePipeline from 'api/pipeline/post';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEqual, isUndefined } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import React, {
 	useCallback,
 	useEffect,
@@ -18,6 +19,7 @@ import React, {
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTranslation } from 'react-i18next';
+import APIError from 'types/api/error';
 import {
 	ActionMode,
 	ActionType,
@@ -95,6 +97,7 @@ function PipelineListsView({
 	pipelineData,
 	refetchPipelineLists,
 }: PipelineListsViewProps): JSX.Element {
+	const { showErrorModal } = useErrorModal();
 	const [pipelineForm] = Form.useForm<PipelineData>();
 	const { t } = useTranslation(['pipeline', 'common']);
 	const [modal, contextHolder] = Modal.useModal();
@@ -442,17 +445,15 @@ function PipelineListsView({
 			delete pipelineData?.id;
 			return pipelineData;
 		});
-
-		const response = await savePipeline({
-			data: { pipelines: modifiedPipelineData },
-		});
-
-		if (response.statusCode === 200) {
+		try {
+			const response = await savePipeline({
+				data: { pipelines: modifiedPipelineData },
+			});
 			refetchPipelineLists();
 			setActionMode(ActionMode.Viewing);
 			setShowSaveButton(undefined);
 
-			const pipelinesInDB = response.payload?.pipelines || [];
+			const pipelinesInDB = response.data?.pipelines || [];
 			setCurrPipelineData(pipelinesInDB);
 			setPrevPipelineData(pipelinesInDB);
 
@@ -470,7 +471,7 @@ function PipelineListsView({
 				enabled: pipelinesInDB.filter((p) => p.enabled).length,
 				source: 'signoz-ui',
 			});
-		} else {
+		} catch (error) {
 			modifiedPipelineData.forEach((item: PipelineData) => {
 				const pipelineData = item;
 				pipelineData.id = v4();
@@ -478,10 +479,7 @@ function PipelineListsView({
 			});
 			setActionMode(ActionMode.Editing);
 			setShowSaveButton(ActionMode.Editing);
-			notifications.error({
-				message: 'Error',
-				description: response.error || t('something_went_wrong'),
-			});
+			showErrorModal(error as APIError);
 			setCurrPipelineData(modifiedPipelineData);
 			setPrevPipelineData(modifiedPipelineData);
 		}