From a8b293a51067757c6d4ae01aec78d613f8b23c7a Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Sat, 27 Jan 2024 12:59:28 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20variable=20selection=20flow=20-=20depend?=
 =?UTF-8?q?ent=20variable=20option=20not=20updated=20=E2=80=A6=20(#4438)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: variable selection flow - dependent variable option not updated on change

* fix: dropdown width and parent element update

* fix: add key to variable item inputs
---
 .../DashboardVariableSelection.styles.scss    |  8 ++++++++
 .../VariableItem.tsx                          | 20 +++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
index 1d91614ff6..9767c183c3 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
@@ -6,3 +6,11 @@
 	text-overflow: ellipsis;
 	color: gray;
 }
+
+.variable-item {
+	.variable-select {
+		.ant-select-dropdown {
+			max-width: 300px;
+		}
+	}
+}
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index da20efc590..339210f956 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -14,6 +14,7 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle, VariableContainer, VariableValue } from './styles';
@@ -44,6 +45,7 @@ const getSelectValue = (
 	return selectedValue?.toString() || '';
 };
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function VariableItem({
 	variableData,
 	existingVariables,
@@ -76,7 +78,12 @@ function VariableItem({
 		const variableName = variableData.name || '';
 
 		dependentVariables?.forEach((element) => {
-			dependentVariablesStr += `${element}${existingVariables[element]?.selectedValue}`;
+			const [, variable] =
+				Object.entries(existingVariables).find(
+					([, value]) => value.name === element,
+				) || [];
+
+			dependentVariablesStr += `${element}${variable?.selectedValue}`;
 		});
 
 		const variableKey = dependentVariablesStr.replace(/\s/g, '');
@@ -219,7 +226,7 @@ function VariableItem({
 			placement="top"
 			title={isDashboardLocked ? 'Dashboard is locked' : ''}
 		>
-			<VariableContainer>
+			<VariableContainer className="variable-item">
 				<Typography.Text className="variable-name" ellipsis>
 					${variableData.name}
 				</Typography.Text>
@@ -229,6 +236,7 @@ function VariableItem({
 							placeholder="Enter value"
 							disabled={isDashboardLocked}
 							bordered={false}
+							key={variableData.selectedValue?.toString()}
 							defaultValue={variableData.selectedValue?.toString()}
 							onChange={(e): void => {
 								debouncedHandleChange(e.target.value || '');
@@ -242,17 +250,25 @@ function VariableItem({
 						!errorMessage &&
 						optionsData && (
 							<Select
+								key={
+									selectValue && Array.isArray(selectValue)
+										? selectValue.join(' ')
+										: selectValue || variableData.id
+								}
 								defaultValue={selectValue}
 								onChange={handleChange}
 								bordered={false}
 								placeholder="Select value"
+								placement="bottomRight"
 								mode={mode}
 								dropdownMatchSelectWidth={false}
 								style={SelectItemStyle}
 								loading={isLoading}
 								showSearch
 								data-testid="variable-select"
+								className="variable-select"
 								disabled={isDashboardLocked}
+								getPopupContainer={popupContainer}
 							>
 								{enableSelectAll && (
 									<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>