Use SafeSerializableSceneObject in TemplateSrv (#90272)

* Test

* Opaque object

* Update scenes tentatively

* Betterer

* Fix dashboard data source

* Fix dashboard data source test

* Scenes bump

* Cleanup

* Ivan's feedback

.betterer.results

@@ -5452,7 +5452,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
       [0, 0, 0, "Do not use any type assertions.", "9"],
       [0, 0, 0, "Do not use any type assertions.", "10"],
-      [0, 0, 0, "Do not use any type assertions.", "11"]
+      [0, 0, 0, "Do not use any type assertions.", "11"],
+      [0, 0, 0, "Do not use any type assertions.", "12"]
     ],
     "public/app/features/trails/ActionTabs/AddToFiltersGraphAction.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]

package.json

@@ -260,7 +260,7 @@
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
     "@grafana/saga-icons": "workspace:*",
-    "@grafana/scenes": "5.4.1",
+    "@grafana/scenes": "5.6.0",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/features/templating/template_srv.ts

@@ -15,7 +15,7 @@ import {
   TemplateSrv as BaseTemplateSrv,
   VariableInterpolation,
 } from '@grafana/runtime';
-import { sceneGraph, VariableCustomFormatterFn } from '@grafana/scenes';
+import { sceneGraph, VariableCustomFormatterFn, SafeSerializableSceneObject } from '@grafana/scenes';
 import { VariableFormatID } from '@grafana/schema';
 
 import { getVariablesCompatibility } from '../dashboard-scene/utils/getVariablesCompatibility';
@@ -249,8 +249,9 @@ export class TemplateSrv implements BaseTemplateSrv {
   ): string {
     // Scenes compatability (primary method) is via SceneObject inside scopedVars. This way we get a much more accurate "local" scope for the evaluation
     if (scopedVars && scopedVars.__sceneObject) {
+      const sceneObject = (scopedVars.__sceneObject.value as SafeSerializableSceneObject).valueOf();
       return sceneGraph.interpolate(
-        scopedVars.__sceneObject.value,
+        sceneObject,
         target,
         scopedVars,
         format as string | VariableCustomFormatterFn | undefined,

public/app/plugins/datasource/dashboard/datasource.test.ts

@@ -6,7 +6,14 @@ import {
   LoadingState,
   standardTransformersRegistry,
 } from '@grafana/data';
-import { SceneDataNode, SceneDataTransformer, SceneFlexItem, SceneFlexLayout, VizPanel } from '@grafana/scenes';
+import {
+  SafeSerializableSceneObject,
+  SceneDataNode,
+  SceneDataTransformer,
+  SceneFlexItem,
+  SceneFlexLayout,
+  VizPanel,
+} from '@grafana/scenes';
 import { getVizPanelKeyForPanelId } from 'app/features/dashboard-scene/utils/utils';
 import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
 
@@ -93,7 +100,7 @@ function setup(query: DashboardQuery) {
     intervalMs: 0,
     range: getDefaultTimeRange(),
     scopedVars: {
-      __sceneObject: { value: scene },
+      __sceneObject: new SafeSerializableSceneObject(scene),
     },
     app: '',
     startTime: 0,

public/app/plugins/datasource/dashboard/datasource.ts

@@ -6,8 +6,9 @@ import {
   DataQueryResponse,
   DataSourceInstanceSettings,
   TestDataSourceResponse,
+  ScopedVar,
 } from '@grafana/data';
-import { SceneDataProvider, SceneDataTransformer, SceneObject } from '@grafana/scenes';
+import { SafeSerializableSceneObject, SceneDataProvider, SceneDataTransformer, SceneObject } from '@grafana/scenes';
 import { findVizPanelByKey, getVizPanelKeyForPanelId } from 'app/features/dashboard-scene/utils/utils';
 
 import { DashboardQuery } from './types';
@@ -25,7 +26,14 @@ export class DashboardDatasource extends DataSourceApi<DashboardQuery> {
   }
 
   query(options: DataQueryRequest<DashboardQuery>): Observable<DataQueryResponse> {
-    const scene: SceneObject | undefined = options.scopedVars?.__sceneObject?.value;
+    const sceneScopedVar: ScopedVar | undefined = options.scopedVars?.__sceneObject;
+    let scene: SceneObject | undefined;
+
+    if (!(sceneScopedVar instanceof SafeSerializableSceneObject)) {
+      throw new Error('Scene object from scopedVars is not safe serializable.');
+    }
+
+    scene = sceneScopedVar.valueOf();
 
     if (options.requestId.indexOf('mixed') > -1) {
       throw new Error('Dashboard data source cannot be used with Mixed data source.');

yarn.lock

@@ -3553,9 +3553,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:5.4.1":
-  version: 5.4.1
-  resolution: "@grafana/scenes@npm:5.4.1"
+"@grafana/scenes@npm:5.6.0":
+  version: 5.6.0
+  resolution: "@grafana/scenes@npm:5.6.0"
   dependencies:
     "@grafana/e2e-selectors": "npm:^11.0.0"
     "@leeoniya/ufuzzy": "npm:^1.0.14"
@@ -3570,7 +3570,7 @@ __metadata:
     "@grafana/ui": ">=10.4"
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/761ba65d492a047eb2235d081c7077c159cbfe623fb860521428c949abe7dfbc78ccb8e235eaabc6a6ad771bdc55e71e781959d5ecba600918d836cab25e86f8
+  checksum: 10/4e1f87b5cce1ce742578eb00a75928c35277fa59a959d7d7adb2e81040e8ca69f9b0764e19cc11ac9b42b84de43224b8860bcba0d06b4983dbc840fd443f5f84
   languageName: node
   linkType: hard
 
@@ -17106,7 +17106,7 @@ __metadata:
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
     "@grafana/saga-icons": "workspace:*"
-    "@grafana/scenes": "npm:5.4.1"
+    "@grafana/scenes": "npm:5.6.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"