From 67965c8e4d1ebc16090d10efdd1f6da52e66c0e1 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Thu, 20 Jun 2024 17:21:04 +0530
Subject: [PATCH] fix: dependent variable panel not updating (#5283)

* fix: dependent variable panel not updating

* fix: build issues
---
 .../DashboardVariableSelection.tsx                          | 1 +
 .../DashboardVariablesSelection/VariableItem.test.tsx       | 6 ++++++
 .../DashboardVariablesSelection/VariableItem.tsx            | 6 ++++++
 3 files changed, 13 insertions(+)

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
index 0572196fbf..813185e0b6 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -138,6 +138,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 						}}
 						onValueUpdate={onValueUpdate}
 						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
 					/>
 				))}
 		</Row>
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
index 14f20347d0..0c8fbd51ae 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
@@ -54,6 +54,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -69,6 +70,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -83,6 +85,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -111,6 +114,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -134,6 +138,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -149,6 +154,7 @@ describe('VariableItem', () => {
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
 				/>
 			</MockQueryClientProvider>,
 		);
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index e0393ea163..baa8228b3c 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -52,6 +52,7 @@ interface VariableItemProps {
 		allSelected: boolean,
 	) => void;
 	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
 }
 
 const getSelectValue = (
@@ -73,6 +74,7 @@ function VariableItem({
 	existingVariables,
 	onValueUpdate,
 	variablesToGetUpdated,
+	setVariablesToGetUpdated,
 }: VariableItemProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
@@ -171,6 +173,10 @@ function VariableItem({
 						}
 
 						setOptionsData(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
 					}
 				}
 			} catch (e) {