Switch variable: Stop allowing identical values (#113166)

* fix: don't allow identical values for enabled and disabled states

* fix: add missing translation

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();
+  });
 });

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<boolean>(false);
+  const [disabledValueInvalid, setDisabledValueInvalid] = useState<boolean>(false);
+  const identicalValuesErrorMessage = t(
+    'dashboard-scene.switch-variable-form.same-values-error',
+    'Enabled and disabled values cannot be the same'
+  );
 
   const onValuePairTypeChange = (selection: ComboboxOption<string> | 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 (
     <>
       <VariableLegend>
@@ -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}
             >
               <Input
                 width={40}
-                value={enabledValue}
+                defaultValue={enabledValue}
                 onChange={(event) => {
-                  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}
             >
               <Input
                 width={40}
-                value={disabledValue}
-                onChange={(event) => 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'

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"