fix: dashboard variables reset on tab visibility change (#4619)

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,5 +1,4 @@
 import { Row } from 'antd';
-import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useState } from 'react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
@@ -11,12 +10,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		selectedDashboard,
 		setSelectedDashboard,
-		dashboardId,
-	} = useDashboard();
-
-	const {
 		updateLocalStorageDashboardVariables,
-	} = useDashboardVariablesFromLocalStorage(dashboardId);
+	} = useDashboard();
 
 	const { data } = selectedDashboard || {};
 

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -52,6 +52,7 @@ const DashboardContext = createContext<IDashboardContext>({
 	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
 	toScrollWidgetId: '',
 	setToScrollWidgetId: () => {},
+	updateLocalStorageDashboardVariables: () => {},
 });
 
 interface Props {
@@ -96,9 +97,10 @@ export function DashboardProvider({
 
 	const [selectedDashboard, setSelectedDashboard] = useState<Dashboard>();
 
-	const { currentDashboard } = useDashboardVariablesFromLocalStorage(
-		dashboardId,
-	);
+	const {
+		currentDashboard,
+		updateLocalStorageDashboardVariables,
+	} = useDashboardVariablesFromLocalStorage(dashboardId);
 
 	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
 	const modalRef = useRef<any>(null);
@@ -320,6 +322,7 @@ export function DashboardProvider({
 			setSelectedDashboard,
 			updatedTimeRef,
 			setToScrollWidgetId,
+			updateLocalStorageDashboardVariables,
 		}),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
@@ -330,6 +333,8 @@ export function DashboardProvider({
 			dashboardId,
 			layouts,
 			toScrollWidgetId,
+			updateLocalStorageDashboardVariables,
+			currentDashboard,
 		],
 	);
 

frontend/src/providers/Dashboard/types.ts

@@ -19,4 +19,15 @@ export interface IDashboardContext {
 	updatedTimeRef: React.MutableRefObject<dayjs.Dayjs | null>;
 	toScrollWidgetId: string;
 	setToScrollWidgetId: React.Dispatch<React.SetStateAction<string>>;
+	updateLocalStorageDashboardVariables: (
+		id: string,
+		selectedValue:
+			| string
+			| number
+			| boolean
+			| (string | number | boolean)[]
+			| null
+			| undefined,
+		allSelected: boolean,
+	) => void;
 }