Clear value for multi-choice variable

CHANGELOG.md

@@ -1,11 +1,12 @@
 # Change Log
 
-## 1.8.0 (IN PROGRESS)
+## 1.8.0 (2023-10-16)
 
 ### Features / Enhancements
 
 - Update variable option label for parent items in tree view (#62)
 - Add handling pressing enter and escape keys for Text Variable (#69)
+- Add table virtualization to improve performance (#64)
 
 ## 1.7.0 (2023-08-08)
 

src/components/MinimizeView/MinimizeView.tsx

@@ -32,7 +32,7 @@ interface Props {
  * Minimize View
  */
 export const MinimizeView: React.FC<Props> = ({
-  options: { variable: variableName, padding = 0 } = {},
+  options: { variable: variableName, padding = 0, emptyValue = false } = {},
   eventBus,
   width,
 }) => {
@@ -70,7 +70,7 @@ export const MinimizeView: React.FC<Props> = ({
         <>
           {(variable.type === VariableType.QUERY || variable.type === VariableType.CUSTOM) && (
             <div style={{ maxWidth }}>
-              <OptionsVariable variable={variable} />
+              <OptionsVariable variable={variable} emptyValue={emptyValue} />
             </div>
           )}
           {variable.type === VariableType.TEXTBOX && <TextVariable variable={variable} />}

src/components/OptionsVariable/OptionsVariable.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { getJestSelectors } from '@volkovlabs/jest-selectors';
-import { AllValue, AllValueParameter, TestIds } from '../../constants';
+import { AllValue, AllValueParameter, NoValueParameter, TestIds } from '../../constants';
 import { selectVariableValues } from '../../utils';
 import { OptionsVariable } from './OptionsVariable';
 
@@ -235,6 +235,29 @@ describe('Options Variable', () => {
       expect(selectVariableValues).toHaveBeenCalledWith([AllValueParameter], expect.any(Object));
     });
 
+    it('Should clear value if no selected values and emptyValue enabled', () => {
+      render(
+        getComponent({
+          variable: {
+            ...multiVariable,
+            options: [
+              allOption,
+              {
+                ...option1,
+                selected: true,
+              },
+              option2,
+            ],
+          } as any,
+          emptyValue: true,
+        })
+      );
+
+      fireEvent.change(selectors.root(), { target: { values: [] } });
+
+      expect(selectVariableValues).toHaveBeenCalledWith([NoValueParameter], expect.any(Object));
+    });
+
     it('Should deselect values', () => {
       render(
         getComponent({

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 { AllValueParameter, TestIds } from '../../constants';
+import { AllValueParameter, NoValueParameter, TestIds } from '../../constants';
 import { CustomVariableModel, QueryVariableModel } from '../../types';
 import { selectVariableValues } from '../../utils';
 
@@ -13,13 +13,18 @@ interface Props {
    * Variable
    */
   variable: QueryVariableModel | CustomVariableModel;
+
+  /**
+   * Empty Value
+   */
+  emptyValue: boolean;
 }
 
 /**
  * Options Variable
  * @param props
  */
-export const OptionsVariable: React.FC<Props> = ({ variable }) => {
+export const OptionsVariable: React.FC<Props> = ({ variable, emptyValue }) => {
   /**
    * Current values
    */
@@ -41,6 +46,14 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
        * Deselect values
        */
       if (values.length > updatedValues.length) {
+        /**
+         * Clear Value
+         */
+        if (updatedValues.length === 0 && emptyValue) {
+          selectVariableValues([NoValueParameter], variable);
+          return;
+        }
+
         /**
          * Select all
          */
@@ -82,7 +95,7 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
        */
       selectVariableValues(updatedValues, variable);
     },
-    [values, variable]
+    [emptyValue, values, variable]
   );
 
   /**
@@ -96,7 +109,7 @@ export const OptionsVariable: React.FC<Props> = ({ variable }) => {
         ariaLabel: TestIds.optionsVariable.option(option.value),
       };
     });
-  }, [variable]);
+  }, [variable.options]);
 
   return (
     <Select

src/constants/panel.ts

@@ -72,3 +72,11 @@ export const GroupSelectionOptions = [
   { value: true, label: 'Enabled', description: 'Enable to allow group selection.' },
   { value: false, label: 'Disabled', description: 'Disable group selection.' },
 ];
+
+/**
+ * Allow Empty Value Options
+ */
+export const AllowEmptyValueOptions = [
+  { value: true, label: 'Enabled', description: 'Empty value enabled.' },
+  { value: false, label: 'Disabled', description: 'Empty value disabled.' },
+];

src/constants/variable.ts

@@ -7,3 +7,8 @@ export const AllValue = 'All';
  * All Value Parameter
  */
 export const AllValueParameter = '$__all';
+
+/**
+ * No Value Parameter
+ */
+export const NoValueParameter = '$__empty';

src/module.ts

@@ -2,6 +2,7 @@ import { Field, FieldConfigProperty, FieldType, PanelPlugin } from '@grafana/dat
 import { getTemplateSrv } from '@grafana/runtime';
 import { GroupsEditor, VariablePanel } from './components';
 import {
+  AllowEmptyValueOptions,
   AutoScrollOptions,
   DisplayModeOptions,
   FavoritesOptions,
@@ -64,16 +65,27 @@ export const plugin = new PanelPlugin<PanelOptions>(VariablePanel)
     /**
      * Minimize Mode Options
      */
-    builder.addSliderInput({
-      path: 'padding',
-      name: 'Padding',
-      defaultValue: 10,
-      settings: {
-        min: 0,
-        max: 20,
-      },
-      showIf: (config) => showForMinimizeView(config) || showForButtonView(config),
-    });
+    builder
+      .addSliderInput({
+        path: 'padding',
+        name: 'Padding',
+        defaultValue: 10,
+        settings: {
+          min: 0,
+          max: 20,
+        },
+        showIf: (config) => showForMinimizeView(config) || showForButtonView(config),
+      })
+      .addRadio({
+        path: 'emptyValue',
+        name: 'Empty Value',
+        description: 'Allow Empty Value for multi-choice variable.',
+        defaultValue: false,
+        settings: {
+          options: AllowEmptyValueOptions,
+        },
+        showIf: (config) => showForMinimizeView(config) || showForButtonView(config),
+      });
 
     builder
       .addRadio({

src/types/panel.ts

@@ -127,6 +127,11 @@ export interface PanelOptions extends TableViewOptions {
    */
   padding: number;
 
+  /**
+   * Empty Value
+   */
+  emptyValue: boolean;
+
   /**
    * Group Selection
    */

src/utils/variable.test.ts

@@ -1,5 +1,5 @@
 import { locationService } from '@grafana/runtime';
-import { AllValue, AllValueParameter } from '../constants';
+import { AllValue, AllValueParameter, NoValueParameter } from '../constants';
 import { VariableType } from '../types';
 import { selectVariableValues } from './variable';
 
@@ -51,6 +51,18 @@ describe('Variable Utils', () => {
           true
         );
       });
+
+      it('Should apply no value', () => {
+        const variable = { name: 'variable', type: VariableType.CUSTOM, options: [] };
+        selectVariableValues([NoValueParameter], variable as any);
+
+        expect(locationService.partial).toHaveBeenCalledWith(
+          {
+            [`var-${variable.name}`]: '',
+          },
+          true
+        );
+      });
     });
 
     describe('Custom Multi', () => {
@@ -73,6 +85,18 @@ describe('Variable Utils', () => {
         );
       });
 
+      it('Should apply no value', () => {
+        const variable = { name: 'variable', type: VariableType.CUSTOM, options: [], multi: true };
+        selectVariableValues([NoValueParameter], variable as any);
+
+        expect(locationService.partial).toHaveBeenCalledWith(
+          {
+            [`var-${variable.name}`]: '',
+          },
+          true
+        );
+      });
+
       it('Should add all values to already selected values', () => {
         jest.mocked(locationService.getSearch).mockImplementation(
           () =>

src/utils/variable.ts

@@ -1,13 +1,13 @@
+import { TypedVariableModel } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { AllValue, AllValueParameter } from '../constants';
+import { AllValue, AllValueParameter, NoValueParameter } from '../constants';
 import {
   CustomVariableModel,
   QueryVariableModel,
   RuntimeVariable,
   RuntimeVariableWithOptions,
   VariableType,
 } from '../types';
-import { TypedVariableModel } from '@grafana/data';
 
 /**
  * Set Variable Value
@@ -42,6 +42,11 @@ export const selectVariableValues = (values: string[], runtimeVariable?: Runtime
           return;
         }
 
+        if (values.some((value) => value === NoValueParameter)) {
+          setVariableValue(name, '');
+          return;
+        }
+
         /**
          * All Selected values for variable
          */
@@ -84,8 +89,15 @@ export const selectVariableValues = (values: string[], runtimeVariable?: Runtime
       /**
        * Single Value
        */
-      const value = values[0];
-      setVariableValue(name, value === AllValueParameter ? AllValue : value);
+      let value = values[0];
+
+      if (value === AllValueParameter) {
+        value = AllValue;
+      } else if (value === NoValueParameter) {
+        value = '';
+      }
+
+      setVariableValue(name, value);
       return;
     }
     case VariableType.TEXTBOX: {