Merge pull request #1251 from palashgdev/1244-edit-alert

feat: rule id is passed as params

frontend/src/constants/routes.ts

@@ -12,7 +12,7 @@ const ROUTES = {
 	ALL_DASHBOARD: '/dashboard',
 	DASHBOARD: '/dashboard/:dashboardId',
 	DASHBOARD_WIDGET: '/dashboard/:dashboardId/:widgetId',
-	EDIT_ALERTS: '/alerts/edit/:ruleId',
+	EDIT_ALERTS: '/alerts/edit',
 	LIST_ALL_ALERT: '/alerts',
 	ALERTS_NEW: '/alerts/new',
 	ALL_CHANNELS: '/settings/channels',

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -11,7 +11,6 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
-import { generatePath } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Alerts } from 'types/api/alerts/getAll';
@@ -51,11 +50,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 	const [notifications, Element] = notification.useNotification();
 
 	const onEditHandler = (id: string): void => {
-		history.push(
+		history.push(`${ROUTES.EDIT_ALERTS}?ruleId=${id}`);
-			generatePath(ROUTES.EDIT_ALERTS, {
-				ruleId: id,
-			}),
-		);
 	};
 
 	const columns: ColumnsType<Alerts> = [

frontend/src/pages/EditRules/index.tsx

@@ -1,23 +1,45 @@
+import { notification } from 'antd';
 import get from 'api/alerts/get';
 import Spinner from 'components/Spinner';
+import ROUTES from 'constants/routes';
 import EditRulesContainer from 'container/EditRules';
-import React from 'react';
+import history from 'lib/history';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 function EditRules(): JSX.Element {
-	const { ruleId } = useParams<EditRulesParam>();
+	const { search } = useLocation();
+	const params = new URLSearchParams(search);
+	const ruleId = params.get('ruleId');
+
 	const { t } = useTranslation('common');
 
+	const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
+
 	const { isLoading, data, isError } = useQuery(['ruleId', ruleId], {
 		queryFn: () =>
 			get({
-				id: parseInt(ruleId, 10),
+				id: parseInt(ruleId || '', 10),
 			}),
+		enabled: isValidRuleId,
 	});
 
-	if (isError) {
+	useEffect(() => {
+		if (!isValidRuleId) {
+			notification.error({
+				message: 'Rule Id is required',
+			});
+			history.replace(ROUTES.LIST_ALL_ALERT);
+		}
+	}, [isValidRuleId, ruleId]);
+
+	if (
+		(isError && !isValidRuleId) ||
+		ruleId == null ||
+		(data?.payload?.data === undefined && !isLoading)
+	) {
 		return <div>{data?.error || t('something_went_wrong')}</div>;
 	}
 
@@ -28,8 +50,4 @@ function EditRules(): JSX.Element {
 	return <EditRulesContainer ruleId={ruleId} initialData={data.payload.data} />;
 }
 
-interface EditRulesParam {
-	ruleId: string;
-}
-
 export default EditRules;