Added maxVisibleValues option in minimize view (#147)

* maxVisibleValues for minimize added * updated description * Move maxSelectValues to values section and update options picker to make consistent with grafana variable picker * Fix test warnings * Formatting --------- Co-authored-by: asimonok <[email protected]> Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Apr 17, 2024 · b1b7456 · b1b7456
1 parent 482101d
commit b1b7456
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Update selecting and deselecting multi-levels (#139)
 - Update Auto/Static Minimize label width (#144)
 - Add show and hide Minimize label (#144)
+- Added maxVisibleValues option in minimize view (#147)
 
 ## 2.5.0 (2024-04-01)
 

diff --git a/src/__mocks__/@grafana/ui.tsx b/src/__mocks__/@grafana/ui.tsx
@@ -5,32 +5,40 @@ const actual = jest.requireActual('@grafana/ui');
 /**
  * Mock Select component
  */
-const Select = jest.fn(({ options, onChange, value, isMulti, allowCustomValue, ...restProps }) => (
-  <select
-    onChange={(event: any) => {
-      if (onChange) {
-        if (isMulti) {
-          onChange(options.filter((option: any) => event.target.values.includes(option.value)));
-        } else {
-          onChange(options.find((option: any) => option.value === event.target.value));
+const Select = jest.fn(({ options, onChange, value, isMulti, ...restProps }) => {
+  const selectProps: any = {};
+
+  if (restProps['aria-label']) {
+    selectProps['aria-label'] = restProps['aria-label'];
+  }
+
+  return (
+    <select
+      onChange={(event: any) => {
+        if (onChange) {
+          if (isMulti) {
+            onChange(options.filter((option: any) => event.target.values.includes(option.value)));
+          } else {
+            onChange(options.find((option: any) => option.value === event.target.value));
+          }
         }
-      }
-    }}
-    /**
-     * Fix jest warnings because null value.
-     * For Select component in @grafana/ui should be used null to reset value.
-     */
-    value={value === null ? '' : value}
-    multiple={isMulti}
-    {...restProps}
-  >
-    {options.map(({ label, value }: any) => (
-      <option key={value} value={value}>
-        {label}
-      </option>
-    ))}
-  </select>
-));
+      }}
+      /**
+       * Fix jest warnings because null value.
+       * For Select component in @grafana/ui should be used null to reset value.
+       */
+      value={value === null ? '' : value}
+      multiple={isMulti}
+      {...selectProps}
+    >
+      {options.map(({ label, value }: any) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+});
 
 /**
  * Mock Button Row Toolbar

diff --git a/src/components/MinimizeView/MinimizeView.tsx b/src/components/MinimizeView/MinimizeView.tsx
@@ -47,6 +47,7 @@ export const MinimizeView: React.FC<Props> = ({
     customValue = false,
     showLabel = false,
     labelWidth,
+    maxVisibleValues,
   } = {},
   eventBus,
   panelEventBus,
@@ -94,6 +95,7 @@ export const MinimizeView: React.FC<Props> = ({
               persistent={persistent}
               customValue={customValue}
               panelEventBus={panelEventBus}
+              maxVisibleValues={maxVisibleValues}
             />
           )}
           {variable.type === VariableType.TEXTBOX && <TextVariable variable={variable} panelEventBus={panelEventBus} />}

diff --git a/src/components/OptionsVariable/OptionsVariable.tsx b/src/components/OptionsVariable/OptionsVariable.tsx
@@ -45,13 +45,27 @@ interface Props {
    * @type {EventBus}
    */
   panelEventBus: EventBus;
+
+  /**
+   * Maximum visible values
+   *
+   * @type {number | undefined}
+   */
+  maxVisibleValues: number | undefined;
 }
 
 /**
  * Options Variable
  * @param props
  */
-export const OptionsVariable: React.FC<Props> = ({ variable, emptyValue, persistent, customValue, panelEventBus }) => {
+export const OptionsVariable: React.FC<Props> = ({
+  variable,
+  emptyValue,
+  persistent,
+  customValue,
+  panelEventBus,
+  maxVisibleValues,
+}) => {
   /**
    * Persistent storage
    */
@@ -128,6 +142,10 @@ export const OptionsVariable: React.FC<Props> = ({ variable, emptyValue, persist
       isMulti={variable.multi}
       value={variable.multi ? values : values[0] || null}
       allowCustomValue={customValue}
+      maxVisibleValues={maxVisibleValues}
+      hideSelectedOptions={false}
+      closeMenuOnSelect={!variable.multi}
+      showAllSelectedWhenOpen={false}
     />
   );
 };
diff --git a/src/module.ts b/src/module.ts
@@ -123,6 +123,16 @@ export const plugin = new PanelPlugin<PanelOptions>(VariablePanel)
         },
         category: ['Values'],
         showIf: (config) => showForMinimizeView(config),
+      })
+      .addNumberInput({
+        path: 'maxVisibleValues',
+        name: 'Maximum visible values',
+        description: 'Supports for multi-choice variable.',
+        settings: {
+          placeholder: 'auto',
+        },
+        category: ['Values'],
+        showIf: (config) => showForMinimizeView(config),
       });
 
     /**

diff --git a/src/types/panel.ts b/src/types/panel.ts
@@ -223,6 +223,13 @@ export interface PanelOptions extends TableViewOptions {
    * @type {number}
    */
   labelWidth: number;
+
+  /**
+   * Maximum visible values
+   *
+   * @type {number}
+   */
+  maxVisibleValues: number;
 }
 
 /**