feat: remove disabled in case of dashboard locked

SigNoz · Mar 15, 2024 · 0cf5414 · 0cf5414
1 parent 0365fa5
commit 0cf5414
Showing 1 changed file with 71 additions and 80 deletions.
diff --git 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>
  );
 }