From 60946b5e9df56c80ee75c0b8cb095e94f2c4d840 Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Fri, 15 Mar 2024 12:28:03 +0530
Subject: [PATCH] feat: remove disabled in case of dashboard locked (#4709)

---
 .../VariableItem.tsx                          | 151 ++++++++----------
 1 file changed, 71 insertions(+), 80 deletions(-)

diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index 339210f956..9f54305b1e 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -2,14 +2,13 @@ import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
 import { WarningOutlined } from '@ant-design/icons';
-import { Input, Popover, Select, Tooltip, Typography } from 'antd';
+import { Input, Popover, Select, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { debounce } from 'lodash-es';
 import map from 'lodash-es/map';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
@@ -52,7 +51,6 @@ function VariableItem({
 	onValueUpdate,
 	lastUpdatedVar,
 }: VariableItemProps): JSX.Element {
-	const { isDashboardLocked } = useDashboard();
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
 	);
@@ -222,84 +220,77 @@ function VariableItem({
 	}, [variableData.type, variableData.customValue]);
 
 	return (
-		<Tooltip
-			placement="top"
-			title={isDashboardLocked ? 'Dashboard is locked' : ''}
-		>
-			<VariableContainer className="variable-item">
-				<Typography.Text className="variable-name" ellipsis>
-					${variableData.name}
-				</Typography.Text>
-				<VariableValue>
-					{variableData.type === 'TEXTBOX' ? (
-						<Input
-							placeholder="Enter value"
-							disabled={isDashboardLocked}
+		<VariableContainer className="variable-item">
+			<Typography.Text className="variable-name" ellipsis>
+				${variableData.name}
+			</Typography.Text>
+			<VariableValue>
+				{variableData.type === 'TEXTBOX' ? (
+					<Input
+						placeholder="Enter value"
+						bordered={false}
+						key={variableData.selectedValue?.toString()}
+						defaultValue={variableData.selectedValue?.toString()}
+						onChange={(e): void => {
+							debouncedHandleChange(e.target.value || '');
+						}}
+						style={{
+							width:
+								50 + ((variableData.selectedValue?.toString()?.length || 0) * 7 || 50),
+						}}
+					/>
+				) : (
+					!errorMessage &&
+					optionsData && (
+						<Select
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							defaultValue={selectValue}
+							onChange={handleChange}
 							bordered={false}
-							key={variableData.selectedValue?.toString()}
-							defaultValue={variableData.selectedValue?.toString()}
-							onChange={(e): void => {
-								debouncedHandleChange(e.target.value || '');
-							}}
-							style={{
-								width:
-									50 + ((variableData.selectedValue?.toString()?.length || 0) * 7 || 50),
-							}}
-						/>
-					) : (
-						!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}>
-										ALL
-									</Select.Option>
-								)}
-								{map(optionsData, (option) => (
-									<Select.Option
-										data-testid={`option-${option}`}
-										key={option.toString()}
-										value={option}
-									>
-										{option.toString()}
-									</Select.Option>
-								))}
-							</Select>
-						)
-					)}
-					{variableData.type !== 'TEXTBOX' && errorMessage && (
-						<span style={{ margin: '0 0.5rem' }}>
-							<Popover
-								placement="top"
-								content={<Typography>{errorMessage}</Typography>}
-							>
-								<WarningOutlined style={{ color: orange[5] }} />
-							</Popover>
-						</span>
-					)}
-				</VariableValue>
-			</VariableContainer>
-		</Tooltip>
+							placeholder="Select value"
+							placement="bottomRight"
+							mode={mode}
+							dropdownMatchSelectWidth={false}
+							style={SelectItemStyle}
+							loading={isLoading}
+							showSearch
+							data-testid="variable-select"
+							className="variable-select"
+							getPopupContainer={popupContainer}
+						>
+							{enableSelectAll && (
+								<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
+									ALL
+								</Select.Option>
+							)}
+							{map(optionsData, (option) => (
+								<Select.Option
+									data-testid={`option-${option}`}
+									key={option.toString()}
+									value={option}
+								>
+									{option.toString()}
+								</Select.Option>
+							))}
+						</Select>
+					)
+				)}
+				{variableData.type !== 'TEXTBOX' && errorMessage && (
+					<span style={{ margin: '0 0.5rem' }}>
+						<Popover
+							placement="top"
+							content={<Typography>{errorMessage}</Typography>}
+						>
+							<WarningOutlined style={{ color: orange[5] }} />
+						</Popover>
+					</span>
+				)}
+			</VariableValue>
+		</VariableContainer>
 	);
 }