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 (
-
-
-
- ${variableData.name}
-
-
- {variableData.type === 'TEXTBOX' ? (
-
+
+ ${variableData.name}
+
+
+ {variableData.type === 'TEXTBOX' ? (
+ {
+ debouncedHandleChange(e.target.value || '');
+ }}
+ style={{
+ width:
+ 50 + ((variableData.selectedValue?.toString()?.length || 0) * 7 || 50),
+ }}
+ />
+ ) : (
+ !errorMessage &&
+ optionsData && (
+
-
-
+ placeholder="Select value"
+ placement="bottomRight"
+ mode={mode}
+ dropdownMatchSelectWidth={false}
+ style={SelectItemStyle}
+ loading={isLoading}
+ showSearch
+ data-testid="variable-select"
+ className="variable-select"
+ getPopupContainer={popupContainer}
+ >
+ {enableSelectAll && (
+
+ ALL
+
+ )}
+ {map(optionsData, (option) => (
+
+ {option.toString()}
+
+ ))}
+
+ )
+ )}
+ {variableData.type !== 'TEXTBOX' && errorMessage && (
+
+ {errorMessage}}
+ >
+
+
+
+ )}
+
+
);
}