From 1ee2cc7b4867eaf312e6ed3656d559c484b9e292 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <sagar@signoz.io>
Date: Thu, 26 Dec 2024 11:03:27 +0530
Subject: [PATCH] feat: fixed test cases and added multiple variable formats

---
 .../VariableItem.test.tsx                     | 30 +++++++++++++++++++
 .../__test__/dashboardVariables.test.tsx      |  2 +-
 .../DashboardVariablesSelection/util.ts       | 20 +++++++++++--
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
index 1cb89d6b958..823cf539237 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx
@@ -49,6 +49,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -65,6 +70,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -80,6 +90,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -109,6 +124,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -133,6 +153,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -149,6 +174,11 @@ describe('VariableItem', () => {
 					onValueUpdate={mockOnValueUpdate}
 					variablesToGetUpdated={[]}
 					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx
index 9a7982b3ce3..0add4c5cad0 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx
@@ -103,7 +103,7 @@ describe('dashboardVariables - utilities and processors', () => {
 			it('should return true when parentDependencyGraph is empty', () => {
 				expect(
 					checkAPIInvocation(variablesToGetUpdated, variableData, {}),
-				).toBeTruthy();
+				).toBeFalsy();
 			});
 		});
 
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts b/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts
index ded7a80569d..03c6f2c5859 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts
@@ -32,13 +32,27 @@ export const convertVariablesToDbFormat = (
 	}, {});
 
 const getDependentVariables = (queryValue: string): string[] => {
-	const variableRegexPattern = /\{\{\s*?\.([^\s}]+)\s*?\}\}/g;
+	// Combined pattern for all formats:
+	// {{.variable_name}} - original format
+	// $variable_name - dollar prefix format
+	// [[variable_name]] - square bracket format
+	// {{variable_name}} - without dot format
+	const variableRegexPattern = /(?:\{\{\s*\.?([^\s}]+)\s*\}\}|\$([^\s\W]+)|\[\[([^\]]+)\]\])/g;
 
 	const matches = queryValue.match(variableRegexPattern);
 
-	// Extract variable names from the matches array without {{ . }}
+	// Extract variable names from the matches array, handling all formats
 	return matches
-		? matches.map((match) => match.replace(variableRegexPattern, '$1'))
+		? matches.map((match) => {
+				if (match.startsWith('$')) {
+					return match.slice(1); // Remove $ prefix
+				}
+				if (match.startsWith('[[')) {
+					return match.slice(2, -2); // Remove [[ and ]]
+				}
+				// Handle both {{.var}} and {{var}} formats
+				return match.replace(/\{\{\s*\.?([^\s}]+)\s*\}\}/, '$1');
+		  })
 		: [];
 };
 export type VariableGraph = Record<string, string[]>;