diff --git a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts b/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts index 33df731b3f0..3528bc262f3 100644 --- a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts +++ b/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", + } + `); + }); }); diff --git a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts b/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts index a3eaad23e0b..07cd8411531 100644 --- a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts +++ b/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'); } diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts index ed2125af64c..a76035f3603 100644 --- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts +++ b/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, diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts index 256507de13d..66f03640af5 100644 --- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts +++ b/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}`); }