DashboardScene: Support Textbox variables (#78525)

public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts

@@ -12,7 +12,14 @@ import {
   VariableSupportType,
 } from '@grafana/data';
 import { setRunRequest } from '@grafana/runtime';
-import { ConstantVariable, CustomVariable, DataSourceVariable, QueryVariable, SceneVariableSet } from '@grafana/scenes';
+import {
+  ConstantVariable,
+  CustomVariable,
+  DataSourceVariable,
+  QueryVariable,
+  SceneVariableSet,
+  TextBoxVariable,
+} from '@grafana/scenes';
 import { DataSourceRef } from '@grafana/schema';
 
 import { sceneVariablesSetToVariables } from './sceneVariablesSetToVariables';
@@ -253,4 +260,36 @@ describe('sceneVariablesSetToVariables', () => {
     }
     `);
   });
+
+  it('should handle TextBoxVariable', () => {
+    const variable = new TextBoxVariable({
+      name: 'test',
+      label: 'test-label',
+      description: 'test-desc',
+      value: 'text value',
+      skipUrlSync: true,
+    });
+    const set = new SceneVariableSet({
+      variables: [variable],
+    });
+
+    const result = sceneVariablesSetToVariables(set);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchInlineSnapshot(`
+    {
+      "current": {
+        "text": "text value",
+        "value": "text value",
+      },
+      "description": "test-desc",
+      "hide": 2,
+      "label": "test-label",
+      "name": "test",
+      "query": "text value",
+      "skipUrlSync": true,
+      "type": "textbox",
+    }
+    `);
+  });
 });

public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts

@@ -9,7 +9,7 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
     const commonProperties = {
       name: variable.state.name,
       label: variable.state.label,
-      description: variable.state.description,
+      description: variable.state.description ?? undefined,
       skipUrlSync: Boolean(variable.state.skipUrlSync),
       hide: variable.state.hide || VariableHide.dontHide,
       type: variable.state.type,
@@ -96,6 +96,16 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
         auto_min: variable.state.autoMinInterval,
         auto_count: variable.state.autoStepCount,
       });
+    } else if (sceneUtils.isTextBoxVariable(variable)) {
+      variables.push({
+        ...commonProperties,
+        current: {
+          text: variable.state.value,
+          value: variable.state.value,
+        },
+        query: variable.state.value,
+        hide: VariableHide.hideVariable,
+      });
     } else {
       throw new Error('Unsupported variable type');
     }

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts

@@ -6,6 +6,7 @@ import {
   QueryVariableModel,
   IntervalVariableModel,
   TypedVariableModel,
+  TextBoxVariableModel,
 } from '@grafana/data';
 import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks';
 import { config } from '@grafana/runtime';
@@ -698,7 +699,40 @@ describe('transformSaveModelToScene', () => {
       });
     });
 
-    it.each(['textbox', 'system'])('should throw for unsupported (yet) variables', (type) => {
+    it('should migrate textbox variable', () => {
+      const variable: TextBoxVariableModel = {
+        id: 'query0',
+        global: false,
+        index: 0,
+        state: LoadingState.Done,
+        error: null,
+        name: 'textboxVar',
+        label: 'Textbox Label',
+        description: 'Textbox Description',
+        type: 'textbox',
+        rootStateKey: 'N4XLmH5Vz',
+        current: {},
+        hide: 0,
+        options: [],
+        query: 'defaultValue',
+        originalQuery: 'defaultValue',
+        skipUrlSync: false,
+      };
+
+      const migrated = createSceneVariableFromVariableModel(variable);
+      const { key, ...rest } = migrated.state;
+      expect(rest).toEqual({
+        description: 'Textbox Description',
+        hide: 0,
+        label: 'Textbox Label',
+        name: 'textboxVar',
+        skipUrlSync: false,
+        type: 'textbox',
+        value: 'defaultValue',
+      });
+    });
+
+    it.each(['system'])('should throw for unsupported (yet) variables', (type) => {
       const variable = {
         name: 'query0',
         type: type as VariableType,

public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts

@@ -25,6 +25,7 @@ import {
   SceneDataLayerProvider,
   SceneDataLayerControls,
   AdHocFilterSet,
+  TextBoxVariable,
 } from '@grafana/scenes';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { DashboardDTO } from 'app/types';
@@ -341,6 +342,14 @@ export function createSceneVariableFromVariableModel(variable: TypedVariableMode
       skipUrlSync: variable.skipUrlSync,
       hide: variable.hide,
     });
+  } else if (variable.type === 'textbox') {
+    return new TextBoxVariable({
+      ...commonProperties,
+      description: variable.description,
+      value: variable.query,
+      skipUrlSync: variable.skipUrlSync,
+      hide: variable.hide,
+    });
   } else {
     throw new Error(`Scenes: Unsupported variable type ${variable.type}`);
   }