Fix all option selection in minimize view

VolkovLabs · Sep 26, 2023 · 0f5db40 · 0f5db40
1 parent a18e5b4
commit 0f5db40
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/OptionsVariable/OptionsVariable.test.tsx b/src/components/OptionsVariable/OptionsVariable.test.tsx
@@ -186,7 +186,7 @@ describe('Options Variable', () => {
         })
       );
 
-      fireEvent.change(selectors.root(), { target: { values: [AllValue, option1.value] } });
+      fireEvent.change(selectors.root(), { target: { values: [AllValueParameter, option1.value] } });
 
       expect(selectVariableValues).toHaveBeenCalledWith([option1.value], expect.any(Object));
     });
@@ -208,9 +208,9 @@ describe('Options Variable', () => {
         })
       );
 
-      fireEvent.change(selectors.root(), { target: { values: [AllValue, option2.value] } });
+      fireEvent.change(selectors.root(), { target: { values: [AllValueParameter, option2.value] } });
 
-      expect(selectVariableValues).toHaveBeenCalledWith([AllValue], expect.any(Object));
+      expect(selectVariableValues).toHaveBeenCalledWith([AllValueParameter], expect.any(Object));
     });
 
     it('Should select all value if no selected values', () => {
@@ -232,7 +232,7 @@ describe('Options Variable', () => {
 
       fireEvent.change(selectors.root(), { target: { values: [] } });
 
-      expect(selectVariableValues).toHaveBeenCalledWith([AllValue], expect.any(Object));
+      expect(selectVariableValues).toHaveBeenCalledWith([AllValueParameter], expect.any(Object));
     });
 
     it('Should deselect values', () => {

diff --git a/src/components/OptionsVariable/OptionsVariable.tsx b/src/components/OptionsVariable/OptionsVariable.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
-import { AllValue, AllValueParameter, TestIds } from '../../constants';
+import { AllValueParameter, TestIds } from '../../constants';
 import { CustomVariableModel, QueryVariableModel } from '../../types';
 import { selectVariableValues } from '../../utils';
 
@@ -24,9 +24,7 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
    * Current values
    */
   const values = useMemo(() => {
-    return variable.options
-      .filter((option) => option.selected)
-      .map((option) => (option.value === AllValueParameter ? AllValue : option.value));
+    return variable.options.filter((option) => option.selected).map((option) => option.value);
   }, [variable]);
 
   /**
@@ -47,7 +45,7 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
          * Select all
          */
         if (updatedValues.length === 0 && variable?.multi && variable.includeAll) {
-          selectVariableValues([AllValue], variable);
+          selectVariableValues([AllValueParameter], variable);
           return;
         }
 
@@ -59,9 +57,9 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
       /**
        * Selected value while All is selected
        */
-      if (updatedValues.length > 1 && values.includes(AllValue) && updatedValues.includes(AllValue)) {
+      if (updatedValues.length > 1 && values.includes(AllValueParameter) && updatedValues.includes(AllValueParameter)) {
         selectVariableValues(
-          updatedValues.filter((value) => value !== AllValue),
+          updatedValues.filter((value) => value !== AllValueParameter),
           variable
         );
         return;
@@ -70,8 +68,12 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
       /**
        * Select All Value
        */
-      if (updatedValues.length > 1 && !values.includes(AllValue) && updatedValues.includes(AllValue)) {
-        selectVariableValues([AllValue], variable);
+      if (
+        updatedValues.length > 1 &&
+        !values.includes(AllValueParameter) &&
+        updatedValues.includes(AllValueParameter)
+      ) {
+        selectVariableValues([AllValueParameter], variable);
         return;
       }
 
@@ -88,11 +90,10 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
    */
   const options = useMemo(() => {
     return variable.options.map((option) => {
-      const value = option.value === AllValueParameter ? AllValue : option.value;
       return {
         label: option.text,
-        value,
-        ariaLabel: TestIds.optionsVariable.option(value),
+        value: option.value,
+        ariaLabel: TestIds.optionsVariable.option(option.value),
       };
     });
   }, [variable]);