diff --git a/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.test.tsx b/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.test.tsx index a5561a5ecd6..70c06cc2e35 100644 --- a/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.test.tsx +++ b/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.test.tsx @@ -128,4 +128,65 @@ describe('SwitchVariableForm', () => { unmount(); }); }); + + it('should show error when enabled value matches disabled value', async () => { + const user = userEvent.setup(); + renderForm({ + enabledValue: 'on', + disabledValue: 'off', + }); + + const enabledInput = screen.getByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.SwitchVariable.enabledValueInput + ); + + await user.clear(enabledInput); + await user.type(enabledInput, 'off'); + + expect(screen.getByText('Enabled and disabled values cannot be the same')).toBeInTheDocument(); + expect(onEnabledValueChange).not.toHaveBeenCalledWith('off'); + }); + + it('should show error when disabled value matches enabled value', async () => { + const user = userEvent.setup(); + renderForm({ + enabledValue: 'on', + disabledValue: 'off', + }); + + const disabledInput = screen.getByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.SwitchVariable.disabledValueInput + ); + + await user.clear(disabledInput); + await user.type(disabledInput, 'on'); + + expect(screen.getByText('Enabled and disabled values cannot be the same')).toBeInTheDocument(); + expect(onDisabledValueChange).not.toHaveBeenCalledWith('on'); + }); + + it('should clear the error when the values are update to not be the same', async () => { + const user = userEvent.setup(); + renderForm({ + enabledValue: 'on', + disabledValue: 'off', + }); + + const enabledInput = screen.getByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.SwitchVariable.enabledValueInput + ); + const disabledInput = screen.getByTestId( + selectors.pages.Dashboard.Settings.Variables.Edit.SwitchVariable.disabledValueInput + ); + + // First make disabled value same as enabled + await user.clear(disabledInput); + await user.type(disabledInput, 'on'); + expect(screen.getByText('Enabled and disabled values cannot be the same')).toBeInTheDocument(); + + // Then change enabled value to something that is not identical + await user.clear(enabledInput); + await user.type(enabledInput, 'new'); + expect(screen.queryByText('Enabled and disabled values cannot be the same')).not.toBeInTheDocument(); + }); }); diff --git a/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx index a14824ab84e..2f00b67f161 100644 --- a/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx +++ b/public/app/features/dashboard-scene/settings/variables/components/SwitchVariableForm.tsx @@ -28,12 +28,21 @@ export function SwitchVariableForm({ }: SwitchVariableFormProps) { const currentValuePairType = getCurrentValuePairType(enabledValue, disabledValue); const [isCustomValuePairType, setIsCustomValuePairType] = useState(currentValuePairType === 'custom'); + const [enabledValueInvalid, setEnabledValueInvalid] = useState(false); + const [disabledValueInvalid, setDisabledValueInvalid] = useState(false); + const identicalValuesErrorMessage = t( + 'dashboard-scene.switch-variable-form.same-values-error', + 'Enabled and disabled values cannot be the same' + ); const onValuePairTypeChange = (selection: ComboboxOption | null) => { if (!selection?.value) { return; } + setEnabledValueInvalid(false); + setDisabledValueInvalid(false); + switch (selection.value) { case 'boolean': onEnabledValueChange('true'); @@ -56,6 +65,28 @@ export function SwitchVariableForm({ } }; + const handleEnabledValueChange = (newEnabledValue: string) => { + const isInvalid = newEnabledValue === disabledValue; + + setEnabledValueInvalid(isInvalid); + setDisabledValueInvalid(false); + + if (!isInvalid) { + onEnabledValueChange(newEnabledValue); + } + }; + + const handleDisabledValueChange = (newDisabledValue: string) => { + const isInvalid = newDisabledValue === enabledValue; + + setDisabledValueInvalid(isInvalid); + setEnabledValueInvalid(false); + + if (!isInvalid) { + onDisabledValueChange(newDisabledValue); + } + }; + return ( <> @@ -90,12 +121,14 @@ export function SwitchVariableForm({ 'dashboard-scene.switch-variable-form.enabled-value-description', 'Value when switch is enabled' )} + error={enabledValueInvalid && identicalValuesErrorMessage} + invalid={enabledValueInvalid} > { - onEnabledValueChange(event.currentTarget.value); + handleEnabledValueChange(event.currentTarget.value); }} placeholder={t( 'dashboard-scene.switch-variable-form.enabled-value-placeholder', @@ -112,11 +145,13 @@ export function SwitchVariableForm({ 'dashboard-scene.switch-variable-form.disabled-value-description', 'Value when switch is disabled' )} + error={disabledValueInvalid && identicalValuesErrorMessage} + invalid={disabledValueInvalid} > onDisabledValueChange(event.currentTarget.value)} + defaultValue={disabledValue} + onChange={(event) => handleDisabledValueChange(event.currentTarget.value)} placeholder={t( 'dashboard-scene.switch-variable-form.disabled-value-placeholder', 'e.g. Off, Disabled, Inactive' diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 62cf6c11a10..dcbf60af7b5 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -6269,6 +6269,7 @@ "enabled-value": "Enabled value", "enabled-value-description": "Value when switch is enabled", "enabled-value-placeholder": "e.g. On, Enabled, Active", + "same-values-error": "Enabled and disabled values cannot be the same", "switch-options": "Switch options", "value-pair-type": "Value pair type", "value-pair-type-description": "Choose the type of values for the switch states"