[sceneVariablesSetToVariables]: Use type guards from scenes to type variable (#78488)

* Update grafana/scenes version to 1.24.0

* Use type guards to properly type variables

* Update scenes to version 1.24.1

package.json

@@ -254,7 +254,7 @@
     "@grafana/lezer-traceql": "0.0.10",
     "@grafana/monaco-logql": "^0.0.7",
     "@grafana/runtime": "workspace:*",
-    "@grafana/scenes": "^1.23.1",
+    "@grafana/scenes": "1.24.1",
     "@grafana/schema": "workspace:*",
     "@grafana/ui": "workspace:*",
     "@kusto/monaco-kusto": "^7.4.0",

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

@@ -1,118 +1,100 @@
-import {
-  QueryVariable,
-  CustomVariable,
-  DataSourceVariable,
-  ConstantVariable,
-  IntervalVariable,
-  SceneVariables,
-} from '@grafana/scenes';
-import { VariableModel, VariableHide, VariableRefresh, VariableSort } from '@grafana/schema';
+import { SceneVariables, sceneUtils } from '@grafana/scenes';
+import { VariableHide, VariableModel, VariableRefresh, VariableSort } from '@grafana/schema';
 
 import { getIntervalsQueryFromNewIntervalModel } from '../utils/utils';
 
 export function sceneVariablesSetToVariables(set: SceneVariables) {
   const variables: VariableModel[] = [];
   for (const variable of set.state.variables) {
-    const type = variable.state.type;
     const commonProperties = {
       name: variable.state.name,
       label: variable.state.label,
       description: variable.state.description,
       skipUrlSync: Boolean(variable.state.skipUrlSync),
       hide: variable.state.hide || VariableHide.dontHide,
-      type,
+      type: variable.state.type,
     };
-    if (type === 'query') {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const queryVariable = variable as QueryVariable;
+    if (sceneUtils.isQueryVariable(variable)) {
       variables.push({
         ...commonProperties,
         current: {
           // @ts-expect-error
-          value: queryVariable.state.value,
+          value: variable.state.value,
           // @ts-expect-error
-          text: queryVariable.state.text,
+          text: variable.state.text,
         },
         options: [],
-        query: queryVariable.state.query,
-        datasource: queryVariable.state.datasource,
-        sort: queryVariable.state.sort,
-        refresh: queryVariable.state.refresh,
-        regex: queryVariable.state.regex,
-        allValue: queryVariable.state.allValue,
-        includeAll: queryVariable.state.includeAll,
-        multi: queryVariable.state.isMulti,
-        skipUrlSync: queryVariable.state.skipUrlSync,
-        hide: queryVariable.state.hide || VariableHide.dontHide,
+        query: variable.state.query,
+        datasource: variable.state.datasource,
+        sort: variable.state.sort,
+        refresh: variable.state.refresh,
+        regex: variable.state.regex,
+        allValue: variable.state.allValue,
+        includeAll: variable.state.includeAll,
+        multi: variable.state.isMulti,
+        skipUrlSync: variable.state.skipUrlSync,
+        hide: variable.state.hide || VariableHide.dontHide,
       });
-    } else if (type === 'custom') {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const customVariable = variable as CustomVariable;
+    } else if (sceneUtils.isCustomVariable(variable)) {
       variables.push({
         ...commonProperties,
         current: {
           // @ts-expect-error
-          text: customVariable.state.value,
+          text: variable.state.value,
           // @ts-expect-error
-          value: customVariable.state.value,
+          value: variable.state.value,
         },
         options: [],
-        query: customVariable.state.query,
-        multi: customVariable.state.isMulti,
-        allValue: customVariable.state.allValue,
-        includeAll: customVariable.state.includeAll,
+        query: variable.state.query,
+        multi: variable.state.isMulti,
+        allValue: variable.state.allValue,
+        includeAll: variable.state.includeAll,
       });
-    } else if (type === 'datasource') {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const datasourceVariable = variable as DataSourceVariable;
+    } else if (sceneUtils.isDataSourceVariable(variable)) {
       variables.push({
         ...commonProperties,
         current: {
           // @ts-expect-error
-          value: datasourceVariable.state.value,
+          value: variable.state.value,
           // @ts-expect-error
-          text: datasourceVariable.state.text,
+          text: variable.state.text,
         },
         options: [],
-        regex: datasourceVariable.state.regex,
+        regex: variable.state.regex,
         refresh: VariableRefresh.onDashboardLoad,
-        query: datasourceVariable.state.pluginId,
-        multi: datasourceVariable.state.isMulti,
-        allValue: datasourceVariable.state.allValue,
-        includeAll: datasourceVariable.state.includeAll,
+        query: variable.state.pluginId,
+        multi: variable.state.isMulti,
+        allValue: variable.state.allValue,
+        includeAll: variable.state.includeAll,
       });
-    } else if (type === 'constant') {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const constantVariable = variable as ConstantVariable;
+    } else if (sceneUtils.isConstantVariable(variable)) {
       variables.push({
         ...commonProperties,
         current: {
           // @ts-expect-error
-          value: constantVariable.state.value,
+          value: variable.state.value,
           // @ts-expect-error
-          text: constantVariable.state.value,
+          text: variable.state.value,
         },
         // @ts-expect-error
-        query: constantVariable.state.value,
+        query: variable.state.value,
         hide: VariableHide.hideVariable,
       });
-    } else if (type === 'interval') {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      const intervalVariable = variable as IntervalVariable;
-      const intervals = getIntervalsQueryFromNewIntervalModel(intervalVariable.state.intervals);
+    } else if (sceneUtils.isIntervalVariable(variable)) {
+      const intervals = getIntervalsQueryFromNewIntervalModel(variable.state.intervals);
       variables.push({
         ...commonProperties,
         current: {
-          text: intervalVariable.state.value,
-          value: intervalVariable.state.value,
+          text: variable.state.value,
+          value: variable.state.value,
         },
         query: intervals,
         hide: VariableHide.hideVariable,
-        refresh: intervalVariable.state.refresh,
+        refresh: variable.state.refresh,
         // @ts-expect-error ?? how to fix this without adding the ts-expect-error
-        auto: intervalVariable.state.autoEnabled,
-        auto_min: intervalVariable.state.autoMinInterval,
-        auto_count: intervalVariable.state.autoStepCount,
+        auto: variable.state.autoEnabled,
+        auto_min: variable.state.autoMinInterval,
+        auto_count: variable.state.autoStepCount,
       });
     } else {
       throw new Error('Unsupported variable type');

yarn.lock

@@ -3302,9 +3302,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:^1.23.1":
-  version: 1.23.1
-  resolution: "@grafana/scenes@npm:1.23.1"
+"@grafana/scenes@npm:1.24.1":
+  version: 1.24.1
+  resolution: "@grafana/scenes@npm:1.24.1"
   dependencies:
     "@grafana/e2e-selectors": "npm:10.0.2"
     react-grid-layout: "npm:1.3.4"
@@ -3316,7 +3316,7 @@ __metadata:
     "@grafana/runtime": 10.0.3
     "@grafana/schema": 10.0.3
     "@grafana/ui": 10.0.3
-  checksum: 3af269554ac63dfcda273e13af6e4bbf54a6bb22d6f8b4707c025f56fd6c3032777df6f75d952b3d5b4569012da3d023b5a5e77c734667a768818158f5e5a89f
+  checksum: 38967dd3977a9b9feb4c295da58bb378d2f9c810c43b34c67c65858782b9593421dfb58d29bc3fa0e86fc63f9af37f7a381ac958ef43bf38d6443a0a7e4de059
   languageName: node
   linkType: hard
 
@@ -17307,7 +17307,7 @@ __metadata:
     "@grafana/lezer-traceql": "npm:0.0.10"
     "@grafana/monaco-logql": "npm:^0.0.7"
     "@grafana/runtime": "workspace:*"
-    "@grafana/scenes": "npm:^1.23.1"
+    "@grafana/scenes": "npm:1.24.1"
     "@grafana/schema": "workspace:*"
     "@grafana/tsconfig": "npm:^1.3.0-rc1"
     "@grafana/ui": "workspace:*"