fix: updated the triggered alert list code (#6127)

frontend/src/container/TriggeredAlerts/Filter.tsx

@@ -2,7 +2,7 @@
 import type { SelectProps } from 'antd';
 import { Tag, Tooltip } from 'antd';
 import { BaseOptionType } from 'antd/es/select';
-import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
 import { Container, Select } from './styles';
@@ -31,8 +31,8 @@ function TextOverflowTooltip({
 }
 
 function Filter({
-	setSelectedFilter,
+	onSelectedFilterChange,
-	setSelectedGroup,
+	onSelectedGroupChange,
 	allAlerts,
 	selectedGroup,
 	selectedFilter,
@@ -40,27 +40,27 @@ function Filter({
 	const onChangeSelectGroupHandler = useCallback(
 		(value: unknown) => {
 			if (typeof value === 'object' && Array.isArray(value)) {
-				setSelectedGroup(
+				onSelectedGroupChange(
 					value.map((e) => ({
 						value: e,
 					})),
 				);
 			}
 		},
-		[setSelectedGroup],
+		[onSelectedGroupChange],
 	);
 
 	const onChangeSelectedFilterHandler = useCallback(
 		(value: unknown) => {
 			if (typeof value === 'object' && Array.isArray(value)) {
-				setSelectedFilter(
+				onSelectedFilterChange(
 					value.map((e) => ({
 						value: e,
 					})),
 				);
 			}
 		},
-		[setSelectedFilter],
+		[onSelectedFilterChange],
 	);
 
 	const uniqueLabels: Array<string> = useMemo(() => {
@@ -122,8 +122,8 @@ function Filter({
 }
 
 interface FilterProps {
-	setSelectedFilter: Dispatch<SetStateAction<Array<Value>>>;
+	onSelectedFilterChange: (value: Array<Value>) => void;
-	setSelectedGroup: Dispatch<SetStateAction<Array<Value>>>;
+	onSelectedGroupChange: (value: Array<Value>) => void;
 	allAlerts: Alerts[];
 	selectedGroup: Array<Value>;
 	selectedFilter: Array<Value>;

frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
 import Filter, { Value } from './Filter';
@@ -6,18 +5,21 @@ import FilteredTable from './FilteredTable';
 import NoFilterTable from './NoFilterTable';
 import { NoTableContainer } from './styles';
 
-function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
+function TriggeredAlerts({
-	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
+	allAlerts,
-	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
+	selectedFilter,
-
+	selectedGroup,
+	onSelectedFilterChange,
+	onSelectedGroupChange,
+}: TriggeredAlertsProps): JSX.Element {
 	return (
 		<div>
 			<Filter
 				allAlerts={allAlerts}
 				selectedFilter={selectedFilter}
 				selectedGroup={selectedGroup}
-				setSelectedFilter={setSelectedFilter}
+				onSelectedFilterChange={onSelectedFilterChange}
-				setSelectedGroup={setSelectedGroup}
+				onSelectedGroupChange={onSelectedGroupChange}
 			/>
 
 			{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
@@ -45,6 +47,10 @@ function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
 
 interface TriggeredAlertsProps {
 	allAlerts: Alerts[];
+	selectedFilter: Array<Value>;
+	selectedGroup: Array<Value>;
+	onSelectedFilterChange: (value: Array<Value>) => void;
+	onSelectedGroupChange: (value: Array<Value>) => void;
 }
 
 export default TriggeredAlerts;

frontend/src/container/TriggeredAlerts/index.tsx

@@ -4,14 +4,17 @@ import Spinner from 'components/Spinner';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useAxiosError from 'hooks/useAxiosError';
 import { isUndefined } from 'lodash-es';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 
+import { Value } from './Filter';
 import TriggerComponent from './TriggeredAlert';
 
 function TriggeredAlerts(): JSX.Element {
+	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
+	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
 	const userId = useSelector<AppState, string | undefined>(
 		(state) => state.app.user?.userId,
 	);
@@ -34,6 +37,14 @@ function TriggeredAlerts(): JSX.Element {
 		},
 	);
 
+	const handleSelectedFilterChange = useCallback((newFilter: Value[]) => {
+		setSelectedFilter(newFilter);
+	}, []);
+
+	const handleSelectedGroupChange = useCallback((newGroup: Value[]) => {
+		setSelectedGroup(newGroup);
+	}, []);
+
 	useEffect(() => {
 		if (!hasLoggedEvent.current && !isUndefined(alertsResponse.data?.payload)) {
 			logEvent('Alert: Triggered alert list page visited', {
@@ -44,14 +55,30 @@ function TriggeredAlerts(): JSX.Element {
 	}, [alertsResponse.data?.payload]);
 
 	if (alertsResponse.error) {
-		return <TriggerComponent allAlerts={[]} />;
+		return (
+			<TriggerComponent
+				allAlerts={[]}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				onSelectedFilterChange={handleSelectedFilterChange}
+				onSelectedGroupChange={handleSelectedGroupChange}
+			/>
+		);
 	}
 
 	if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
 		return <Spinner height="75vh" tip="Loading Alerts..." />;
 	}
 
-	return <TriggerComponent allAlerts={alertsResponse?.data?.payload || []} />;
+	return (
+		<TriggerComponent
+			allAlerts={alertsResponse?.data?.payload || []}
+			selectedFilter={selectedFilter}
+			selectedGroup={selectedGroup}
+			onSelectedFilterChange={handleSelectedFilterChange}
+			onSelectedGroupChange={handleSelectedGroupChange}
+		/>
+	);
 }
 
 export default TriggeredAlerts;