fix: added card to show message for deleted alert id (#5565)

* fix: added card to show message for deleted alert id

* refactor: added new constants for handling error message when alert is deleted

* refactor: added error response to error message field

* refactor: removed console statement

* refactor: renamed the variables

frontend/src/api/ErrorResponseHandler.ts

@@ -9,9 +9,9 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		// making the error status code as standard Error Status Code
 		const statusCode = response.status as ErrorStatusCode;
 
-		if (statusCode >= 400 && statusCode < 500) {
-			const { data } = response as AxiosResponse;
+		const { data } = response as AxiosResponse;
 
+		if (statusCode >= 400 && statusCode < 500) {
 			if (statusCode === 404) {
 				return {
 					statusCode,
@@ -34,12 +34,11 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				body: JSON.stringify((response.data as any).data),
 			};
 		}
-
 		return {
 			statusCode,
 			payload: null,
 			error: 'Something went wrong',
-			message: null,
+			message: data?.error,
 		};
 	}
 	if (request) {

frontend/src/pages/EditRules/EditRules.styles.scss

@@ -0,0 +1,32 @@
+.edit-rules-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5rem;
+}
+
+
+.edit-rules-card {
+    width: 20rem;
+    padding: 1rem;
+}
+
+.content {
+    font-style: normal;
+	font-weight: 300;
+	font-size: 18px;
+	line-height: 20px;
+	display: flex;
+	align-items: center;
+    justify-content: center;
+    text-align: center;
+	margin: 0;
+}
+
+.btn-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2rem;
+}
+

frontend/src/pages/EditRules/constants.ts

@@ -0,0 +1,6 @@
+export const returnToAlertsPage = 'Return to Alerts Page';
+
+export const errorMessageReceivedFromBackend = 'sql: no rows in result set';
+
+export const improvedErrorMessage =
+	'The Alert that you are trying to access does not exist.';

frontend/src/pages/EditRules/index.tsx

@@ -1,19 +1,27 @@
+import './EditRules.styles.scss';
+
+import { Button, Card } from 'antd';
 import get from 'api/alerts/get';
 import Spinner from 'components/Spinner';
+import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import EditRulesContainer from 'container/EditRules';
 import { useNotifications } from 'hooks/useNotifications';
+import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-router-dom';
+
+import {
+	errorMessageReceivedFromBackend,
+	improvedErrorMessage,
+	returnToAlertsPage,
+} from './constants';
 
 function EditRules(): JSX.Element {
-	const { search } = useLocation();
-	const params = new URLSearchParams(search);
+	const params = useUrlQuery();
 	const ruleId = params.get('ruleId');
-
 	const { t } = useTranslation('common');
 
 	const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
@@ -31,6 +39,14 @@ function EditRules(): JSX.Element {
 
 	const { notifications } = useNotifications();
 
+	const clickHandler = (): void => {
+		params.delete(QueryParams.compositeQuery);
+		params.delete(QueryParams.panelTypes);
+		params.delete(QueryParams.ruleId);
+		params.delete(QueryParams.relativeTime);
+		history.push(`${ROUTES.LIST_ALL_ALERT}?${params.toString()}`);
+	};
+
 	useEffect(() => {
 		if (!isValidRuleId) {
 			notifications.error({
@@ -45,7 +61,22 @@ function EditRules(): JSX.Element {
 		ruleId == null ||
 		(data?.payload?.data === undefined && !isLoading)
 	) {
-		return <div>{data?.error || t('something_went_wrong')}</div>;
+		return (
+			<div className="edit-rules-container">
+				<Card size="small" className="edit-rules-card">
+					<p className="content">
+						{data?.message === errorMessageReceivedFromBackend
+							? improvedErrorMessage
+							: data?.error || t('something_went_wrong')}
+					</p>
+					<div className="btn-container">
+						<Button type="default" size="large" onClick={clickHandler}>
+							{returnToAlertsPage}
+						</Button>
+					</div>
+				</Card>
+			</div>
+		);
 	}
 
 	if (isLoading || isRefetching || !data?.payload) {