Scenes: Persist variable options in save model (#84812)

* Scenes: Persist variable options in save model

* Updated snapshot

public/app/features/dashboard-scene/serialization/__snapshots__/transformSceneToSaveModel.test.ts.snap

@@ -474,6 +474,58 @@ exports[`transformSceneToSaveModel Given a simple scene with custom settings Sho
           "value": "1m",
         },
         "name": "intervalVar",
+        "options": [
+          {
+            "selected": true,
+            "text": "1m",
+            "value": "1m",
+          },
+          {
+            "selected": false,
+            "text": "10m",
+            "value": "10m",
+          },
+          {
+            "selected": false,
+            "text": "30m",
+            "value": "30m",
+          },
+          {
+            "selected": false,
+            "text": "1h",
+            "value": "1h",
+          },
+          {
+            "selected": false,
+            "text": "6h",
+            "value": "6h",
+          },
+          {
+            "selected": false,
+            "text": "12h",
+            "value": "12h",
+          },
+          {
+            "selected": false,
+            "text": "1d",
+            "value": "1d",
+          },
+          {
+            "selected": false,
+            "text": "7d",
+            "value": "7d",
+          },
+          {
+            "selected": false,
+            "text": "14d",
+            "value": "14d",
+          },
+          {
+            "selected": false,
+            "text": "30d",
+            "value": "30d",
+          },
+        ],
         "query": "1m,10m,30m,1h,6h,12h,1d,7d,14d,30d",
         "refresh": 2,
         "type": "interval",
@@ -778,6 +830,58 @@ exports[`transformSceneToSaveModel Given a simple scene with variables Should tr
           "value": "1m",
         },
         "name": "intervalVar",
+        "options": [
+          {
+            "selected": true,
+            "text": "1m",
+            "value": "1m",
+          },
+          {
+            "selected": false,
+            "text": "10m",
+            "value": "10m",
+          },
+          {
+            "selected": false,
+            "text": "30m",
+            "value": "30m",
+          },
+          {
+            "selected": false,
+            "text": "1h",
+            "value": "1h",
+          },
+          {
+            "selected": false,
+            "text": "6h",
+            "value": "6h",
+          },
+          {
+            "selected": false,
+            "text": "12h",
+            "value": "12h",
+          },
+          {
+            "selected": false,
+            "text": "1d",
+            "value": "1d",
+          },
+          {
+            "selected": false,
+            "text": "7d",
+            "value": "7d",
+          },
+          {
+            "selected": false,
+            "text": "14d",
+            "value": "14d",
+          },
+          {
+            "selected": false,
+            "text": "30d",
+            "value": "30d",
+          },
+        ],
         "query": "1m,10m,30m,1h,6h,12h,1d,7d,14d,30d",
         "refresh": 2,
         "type": "interval",

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

@@ -18,11 +18,12 @@ import {
   CustomVariable,
   DataSourceVariable,
   GroupByVariable,
+  IntervalVariable,
   QueryVariable,
   SceneVariableSet,
   TextBoxVariable,
 } from '@grafana/scenes';
-import { DataSourceRef } from '@grafana/schema';
+import { DataSourceRef, VariableRefresh } from '@grafana/schema';
 
 import { sceneVariablesSetToVariables } from './sceneVariablesSetToVariables';
 
@@ -277,7 +278,23 @@ describe('sceneVariablesSetToVariables', () => {
       "label": "test-label",
       "multi": true,
       "name": "test",
-      "options": [],
+      "options": [
+        {
+          "selected": true,
+          "text": "test",
+          "value": "test",
+        },
+        {
+          "selected": false,
+          "text": "test1",
+          "value": "test1",
+        },
+        {
+          "selected": true,
+          "text": "test2",
+          "value": "test2",
+        },
+      ],
       "query": "test,test1,test2",
       "type": "custom",
     }
@@ -340,6 +357,13 @@ describe('sceneVariablesSetToVariables', () => {
       "description": "test-desc",
       "label": "test-label",
       "name": "test",
+      "options": [
+        {
+          "selected": true,
+          "text": "text value",
+          "value": "text value",
+        },
+      ],
       "query": "text value",
       "skipUrlSync": true,
       "type": "textbox",
@@ -347,6 +371,64 @@ describe('sceneVariablesSetToVariables', () => {
     `);
   });
 
+  it('should handle IntervalVariable', () => {
+    const variable = new IntervalVariable({
+      intervals: ['1m', '2m', '3m', '1h', '1d'],
+      value: '1m',
+      refresh: VariableRefresh.onDashboardLoad,
+    });
+    const set = new SceneVariableSet({
+      variables: [variable],
+    });
+
+    const result = sceneVariablesSetToVariables(set);
+
+    expect(result[0]).toMatchInlineSnapshot(`
+    {
+      "auto": false,
+      "auto_count": 30,
+      "auto_min": "10s",
+      "current": {
+        "text": "1m",
+        "value": "1m",
+      },
+      "description": undefined,
+      "label": undefined,
+      "name": "",
+      "options": [
+        {
+          "selected": true,
+          "text": "1m",
+          "value": "1m",
+        },
+        {
+          "selected": false,
+          "text": "2m",
+          "value": "2m",
+        },
+        {
+          "selected": false,
+          "text": "3m",
+          "value": "3m",
+        },
+        {
+          "selected": false,
+          "text": "1h",
+          "value": "1h",
+        },
+        {
+          "selected": false,
+          "text": "1d",
+          "value": "1d",
+        },
+      ],
+      "query": "1m,2m,3m,1h,1d",
+      "refresh": 1,
+      "type": "interval",
+    }
+    `);
+  });
+
   it('should handle AdHocFiltersVariable', () => {
     const variable = new AdHocFiltersVariable({
       name: 'test',

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

@@ -1,6 +1,6 @@
 import { config } from '@grafana/runtime';
-import { SceneVariables, sceneUtils } from '@grafana/scenes';
-import { VariableHide, VariableModel, VariableRefresh, VariableSort } from '@grafana/schema';
+import { MultiValueVariable, SceneVariables, sceneUtils } from '@grafana/scenes';
+import { VariableHide, VariableModel, VariableOption, VariableRefresh, VariableSort } from '@grafana/schema';
 
 import { getIntervalsQueryFromNewIntervalModel } from '../utils/utils';
 
@@ -16,6 +16,12 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
       type: variable.state.type,
     };
     if (sceneUtils.isQueryVariable(variable)) {
+      let options: VariableOption[] = [];
+      // Not sure if we actually have to still support this option given
+      // that it's not exposed in the UI
+      if (variable.state.refresh === VariableRefresh.never) {
+        options = variableValueOptionsToVariableOptions(variable.state);
+      }
       variables.push({
         ...commonProperties,
         current: {
@@ -24,7 +30,7 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
           // @ts-expect-error
           text: variable.state.text,
         },
-        options: [],
+        options,
         query: variable.state.query,
         definition: variable.state.definition,
         datasource: variable.state.datasource,
@@ -45,7 +51,7 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
           // @ts-expect-error
           value: variable.state.value,
         },
-        options: [],
+        options: variableValueOptionsToVariableOptions(variable.state),
         query: variable.state.query,
         multi: variable.state.isMulti,
         allValue: variable.state.allValue,
@@ -91,18 +97,26 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
         },
         query: intervals,
         refresh: variable.state.refresh,
+        options: variable.state.intervals.map((interval) => ({
+          value: interval,
+          text: interval,
+          selected: interval === variable.state.value,
+        })),
         // @ts-expect-error ?? how to fix this without adding the ts-expect-error
         auto: variable.state.autoEnabled,
         auto_min: variable.state.autoMinInterval,
         auto_count: variable.state.autoStepCount,
       });
     } else if (sceneUtils.isTextBoxVariable(variable)) {
+      const current = {
+        text: variable.state.value,
+        value: variable.state.value,
+      };
+
       variables.push({
         ...commonProperties,
-        current: {
-          text: variable.state.value,
-          value: variable.state.value,
-        },
+        current,
+        options: [{ ...current, selected: true }],
         query: variable.state.value,
       });
     } else if (sceneUtils.isGroupByVariable(variable) && config.featureToggles.groupByVariable) {
@@ -162,3 +176,11 @@ export function sceneVariablesSetToVariables(set: SceneVariables) {
 
   return variables;
 }
+
+function variableValueOptionsToVariableOptions(varState: MultiValueVariable['state']): VariableOption[] {
+  return varState.options.map((o) => ({
+    value: String(o.value),
+    text: o.label,
+    selected: Array.isArray(varState.value) ? varState.value.includes(o.value) : varState.value === o.value,
+  }));
+}