Variables: allow {} type in VariableWithOptions.current (#64358)

packages/grafana-data/src/types/templateVars.ts

@@ -109,7 +109,7 @@ export interface VariableWithMultiSupport extends VariableWithOptions {
 }
 
 export interface VariableWithOptions extends BaseVariableModel {
-  current: VariableOption;
+  current: VariableOption | Record<string, never>;
   options: VariableOption[];
   query: string;
 }

packages/grafana-data/src/utils/object.ts

@@ -6,3 +6,7 @@
     return acc;
   }, {});
 };
+
+export const isEmptyObject = (value: unknown): value is Record<string, never> => {
+  return typeof value === 'object' && value !== null && Object.keys(value).length === 0;
+};

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -12,6 +12,7 @@ import {
   getActiveThreshold,
   getDataSourceRef,
   isDataSourceRef,
+  isEmptyObject,
   MappingType,
   PanelPlugin,
   SpecialValueMatch,
@@ -584,6 +585,9 @@ export class DashboardMigrator {
           continue;
         }
         const { multi, current } = variable;
+        if (isEmptyObject(current)) {
+          continue;
+        }
         variable.current = alignCurrentWithMulti(current, multi);
       }
     }

public/app/features/variables/pickers/OptionsPicker/actions.ts

@@ -1,5 +1,6 @@
 import { debounce, trim } from 'lodash';
 
+import { isEmptyObject } from '@grafana/data';
 import { StoreState, ThunkDispatch, ThunkResult } from 'app/types';
 
 import { variableAdapters } from '../../adapters';
@@ -87,6 +88,10 @@ export const filterOrSearchOptions = (
 };
 
 const setVariable = async (updated: VariableWithOptions) => {
+  if (isEmptyObject(updated.current)) {
+    return;
+  }
+
   const adapter = variableAdapters.get(updated.type);
   await adapter.setValue(updated, updated.current, true);
   return;

public/app/features/variables/state/actions.ts

@@ -4,6 +4,7 @@ import {
   DataQuery,
   getDataSourceRef,
   isDataSourceRef,
+  isEmptyObject,
   LoadingState,
   TimeRange,
   UrlQueryMap,
@@ -257,7 +258,7 @@ export const changeVariableMultiValue = (identifier: KeyedVariableIdentifier, mu
   return (dispatch, getState) => {
     const { rootStateKey: key } = identifier;
     const variable = getVariable(identifier, getState());
-    if (!isMulti(variable)) {
+    if (!isMulti(variable) || isEmptyObject(variable.current)) {
       return;
     }
 

public/app/features/variables/textbox/TextBoxVariablePicker.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, useCallback, useEffect, useState } from 'react';
 
+import { isEmptyObject } from '@grafana/data';
 import { Input } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { useDispatch } from 'app/types';
@@ -43,7 +44,7 @@ export function TextBoxVariablePicker({ variable, onVariableChange, readOnly }:
     if (onVariableChange) {
       onVariableChange({
         ...variable,
-        current: { ...variable.current, value: updatedValue },
+        current: isEmptyObject(variable.current) ? {} : { ...variable.current, value: updatedValue },
       });
       return;
     }

public/app/plugins/datasource/cloudwatch/utils/templateVariableUtils.ts

@@ -48,7 +48,12 @@ export const isTemplateVariable = (templateSrv: TemplateSrv, string: string) =>
 };
 
 const isVariableOption = (
-  current: VariableOption | { value: UserProps } | { value: OrgProps } | { value: DashboardProps }
+  current:
+    | VariableOption
+    | Record<string, never>
+    | { value: UserProps }
+    | { value: OrgProps }
+    | { value: DashboardProps }
 ): current is VariableOption => {
   return current.hasOwnProperty('value') && current.hasOwnProperty('text');
 };