fix: handle react query error state in onSuccess and remove throwing …

…errors

frontend/src/api/alerts/create.ts

@@ -19,9 +19,6 @@ const create = async (
 			payload: response.data.data,
 		};
 	} catch (error) {
-		if (window.location.href.includes('alerts/history')) {
-			throw error as AxiosError;
-		}
 		return ErrorResponseHandler(error as AxiosError);
 	}
 };

frontend/src/api/alerts/delete.ts

@@ -17,9 +17,6 @@ const deleteAlerts = async (
 			payload: response.data.data.rules,
 		};
 	} catch (error) {
-		if (window.location.href.includes('alerts/history')) {
-			throw error as AxiosError;
-		}
 		return ErrorResponseHandler(error as AxiosError);
 	}
 };

frontend/src/api/alerts/get.ts

@@ -17,9 +17,6 @@ const get = async (
 			payload: response.data,
 		};
 	} catch (error) {
-		if (window.location.href.includes('alerts/history')) {
-			throw error as AxiosError;
-		}
 		return ErrorResponseHandler(error as AxiosError);
 	}
 };

frontend/src/api/alerts/patch.ts

@@ -19,10 +19,6 @@ const patch = async (
 			payload: response.data.data,
 		};
 	} catch (error) {
-		if (window.location.href.includes('alerts/history')) {
-			throw error as AxiosError;
-		}
-
 		return ErrorResponseHandler(error as AxiosError);
 	}
 };

frontend/src/api/alerts/put.ts

@@ -19,9 +19,6 @@ const put = async (
 			payload: response.data.data,
 		};
 	} catch (error) {
-		if (window.location.href.includes('alerts/history')) {
-			throw error as AxiosError;
-		}
 		return ErrorResponseHandler(error as AxiosError);
 	}
 };

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -71,12 +71,19 @@ function AlertDetails(): JSX.Element {
 	const { routes } = useRouteTabUtils();
 
 	const {
-		data: { isLoading, data, isRefetching, isError },
+		isLoading,
+		isRefetching,
+		isError,
 		ruleId,
 		isValidRuleId,
+		alertDetailsResponse,
 	} = useGetAlertRuleDetails();
 
-	if (isError || !isValidRuleId) {
+	if (
+		isError ||
+		!isValidRuleId ||
+		(alertDetailsResponse && alertDetailsResponse.statusCode !== 200)
+	) {
 		return <NotFound />;
 	}
 
@@ -98,7 +105,7 @@ function AlertDetails(): JSX.Element {
 			<Divider className="divider breadcrumb-divider" />
 
 			<AlertDetailsStatusRenderer
-				{...{ isLoading, isError, isRefetching, data }}
+				{...{ isLoading, isError, isRefetching, data: alertDetailsResponse }}
 			/>
 			<Divider className="divider" />
 			<div className="tabs-and-filters">

frontend/src/pages/AlertDetails/hooks.tsx

@@ -27,7 +27,7 @@ import EditRules from 'pages/EditRules';
 import { OrderPreferenceItems } from 'pages/Logs/config';
 import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
 import { useCallback, useMemo, useState } from 'react';
-import { useMutation, useQuery, UseQueryResult } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { generatePath, useLocation } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -40,6 +40,7 @@ import {
 	AlertRuleTimelineTableResponsePayload,
 	AlertRuleTopContributorsPayload,
 } from 'types/api/alerts/def';
+import { PayloadProps } from 'types/api/alerts/get';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { nanoToMilli } from 'utils/timeUtils';
@@ -133,17 +134,29 @@ export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
 
 	return { routes };
 };
-
-export const useGetAlertRuleDetails = (): {
+type Props = {
 	ruleId: string | null;
-	data: UseQueryResult;
 	isValidRuleId: boolean;
-} => {
+	alertDetailsResponse:
+		| SuccessResponse<PayloadProps, unknown>
+		| ErrorResponse
+		| undefined;
+	isLoading: boolean;
+	isRefetching: boolean;
+	isError: boolean;
+};
+
+export const useGetAlertRuleDetails = (): Props => {
 	const { ruleId } = useAlertHistoryQueryParams();
 
 	const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 
-	const data = useQuery([REACT_QUERY_KEY.ALERT_RULE_DETAILS, ruleId], {
+	const {
+		isLoading,
+		data: alertDetailsResponse,
+		isRefetching,
+		isError,
+	} = useQuery([REACT_QUERY_KEY.ALERT_RULE_DETAILS, ruleId], {
 		queryFn: () =>
 			get({
 				id: parseInt(ruleId || '', 10),
@@ -153,7 +166,14 @@ export const useGetAlertRuleDetails = (): {
 		refetchOnWindowFocus: false,
 	});
 
-	return { ruleId, data, isValidRuleId };
+	return {
+		ruleId,
+		isLoading,
+		alertDetailsResponse,
+		isRefetching,
+		isError,
+		isValidRuleId,
+	};
 };
 
 type GetAlertRuleDetailsApiProps = {
@@ -372,17 +392,19 @@ export const useAlertRuleStatusToggle = ({
 			onMutate: () => {
 				setIsAlertRuleEnabled((prev) => !prev);
 			},
-			onSuccess: () => {
+			onSuccess: (data) => {
+				if (data.statusCode !== 200) {
+					setIsAlertRuleEnabled(isAlertRuleInitiallyEnabled);
+					notifications.error({
+						message: data.error ?? defaultErrorMessage,
+					});
+					return;
+				}
+
 				notifications.success({
 					message: `Alert has been turned ${!isAlertRuleEnabled ? 'on' : 'off'}.`,
 				});
 			},
-			onError: () => {
-				setIsAlertRuleEnabled(isAlertRuleInitiallyEnabled);
-				notifications.error({
-					message: defaultErrorMessage,
-				});
-			},
 		},
 	);
 
@@ -413,29 +435,33 @@ export const useAlertRuleDuplicate = ({
 		[REACT_QUERY_KEY.DUPLICATE_ALERT_RULE],
 		save,
 		{
-			onSuccess: async () => {
+			onSuccess: async (data) => {
+				if (data.statusCode !== 200) {
+					notifications.error({
+						message: data.error ?? defaultErrorMessage,
+					});
+					return;
+				}
 				notifications.success({
 					message: `Success`,
 				});
 
 				const { data: allAlertsData } = await refetch();
 
-				if (
-					allAlertsData &&
-					allAlertsData.payload &&
-					allAlertsData.payload.length > 0
-				) {
-					const clonedAlert =
-						allAlertsData.payload[allAlertsData.payload.length - 1];
-					params.set(QueryParams.ruleId, String(clonedAlert.id));
-					history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+				if (allAlertsData) {
+					if (allAlertsData.payload && allAlertsData.payload.length > 0) {
+						const clonedAlert =
+							allAlertsData.payload[allAlertsData.payload.length - 1];
+						params.set(QueryParams.ruleId, String(clonedAlert.id));
+						history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+					}
+					if (allAlertsData.statusCode !== 200) {
+						notifications.error({
+							message: defaultErrorMessage,
+						});
+					}
 				}
 			},
-			onError: () => {
-				notifications.error({
-					message: defaultErrorMessage,
-				});
-			},
 		},
 	);
 
@@ -462,19 +488,20 @@ export const useAlertRuleDelete = ({
 		[REACT_QUERY_KEY.REMOVE_ALERT_RULE, ruleId],
 		deleteAlerts,
 		{
-			onSuccess: async () => {
+			onSuccess: (data) => {
+				if (data.statusCode !== 200) {
+					notifications.error({
+						message: data.error ?? defaultErrorMessage,
+					});
+					return;
+				}
+
 				notifications.success({
 					message: `Success`,
 				});
 
 				history.push(ROUTES.LIST_ALL_ALERT);
 			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			onError: () => {
-				notifications.error({
-					message: defaultErrorMessage,
-				});
-			},
 		},
 	);