DashboardScene: Add browser history step when changing time range (#92950)

DashboardScene: Upgrade scene and turn on url history

package.json

@@ -268,7 +268,7 @@
     "@grafana/prometheus": "workspace:*",
     "@grafana/runtime": "workspace:*",
     "@grafana/saga-icons": "workspace:*",
-    "@grafana/scenes": "5.12.0",
+    "@grafana/scenes": "^5.13.0",
     "@grafana/schema": "workspace:*",
     "@grafana/sql": "workspace:*",
     "@grafana/ui": "workspace:*",

public/app/features/dashboard-scene/pages/DashboardScenePage.tsx

@@ -86,7 +86,7 @@ export function DashboardScenePage({ match, route, queryParams, history }: Props
   }
 
   return (
-    <UrlSyncContextProvider scene={dashboard}>
+    <UrlSyncContextProvider scene={dashboard} updateUrlOnInit={true} createBrowserHistorySteps={true}>
       <dashboard.Component model={dashboard} key={dashboard.state.key} />
       <DashboardPrompt dashboard={dashboard} />
     </UrlSyncContextProvider>

public/app/features/dashboard-scene/solo/useSoloPanel.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-import { VizPanel, SceneObject, SceneGridRow, getUrlSyncManager } from '@grafana/scenes';
+import { VizPanel, SceneObject, SceneGridRow, UrlSyncManager } from '@grafana/scenes';
 
 import { DashboardGridItem } from '../scene/DashboardGridItem';
 import { DashboardScene } from '../scene/DashboardScene';
@@ -13,7 +13,8 @@ export function useSoloPanel(dashboard: DashboardScene, panelId: string): [VizPa
   const [error, setError] = useState<string | undefined>();
 
   useEffect(() => {
-    getUrlSyncManager().initSync(dashboard);
+    const urlSyncManager = new UrlSyncManager();
+    urlSyncManager.initSync(dashboard);
 
     const cleanUp = dashboard.activate();
 

public/app/features/dashboard-scene/utils/dashboardSessionState.test.ts

@@ -1,5 +1,5 @@
 import { config, locationService } from '@grafana/runtime';
-import { CustomVariable, getUrlSyncManager } from '@grafana/scenes';
+import { CustomVariable, UrlSyncManager } from '@grafana/scenes';
 import { DashboardDataDTO } from 'app/types';
 
 import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
@@ -51,7 +51,8 @@ describe('dashboardSessionState', () => {
       const variable = scene.state.$variables!.getByName('customVar') as CustomVariable;
       const timeRange = scene.state.$timeRange;
 
-      getUrlSyncManager().initSync(scene);
+      const urlSyncManager = new UrlSyncManager();
+      urlSyncManager.initSync(scene);
 
       expect(variable!.state!.value).toEqual(['b']);
       expect(variable!.state!.text).toEqual(['b']);

public/app/features/trails/DataTrail.tsx

@@ -5,7 +5,6 @@ import { config, locationService, useChromeHeaderHeight } from '@grafana/runtime
 import {
   AdHocFiltersVariable,
   DataSourceVariable,
-  getUrlSyncManager,
   SceneComponentProps,
   SceneControlsSpacer,
   sceneGraph,
@@ -20,6 +19,7 @@ import {
   sceneUtils,
   SceneVariable,
   SceneVariableSet,
+  UrlSyncManager,
   VariableDependencyConfig,
   VariableValueSelectors,
 } from '@grafana/scenes';
@@ -160,7 +160,7 @@ export class DataTrail extends SceneObjectBase<DataTrailState> {
       })
     );
 
-    const urlState = getUrlSyncManager().getUrlState(this);
+    const urlState = new UrlSyncManager().getUrlState(this);
     const fullUrl = urlUtil.renderUrl(locationService.getLocation().pathname, urlState);
     locationService.replace(fullUrl);
   }

public/app/features/trails/DataTrailsHistory.tsx

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import { getTimeZoneInfo, GrafanaTheme2, InternalTimeZones, TIME_FORMAT } from '@grafana/data';
 import { convertRawToRange } from '@grafana/data/src/datetime/rangeutil';
 import {
-  getUrlSyncManager,
   SceneComponentProps,
   SceneObjectBase,
   SceneObjectState,
@@ -110,7 +109,7 @@ export class DataTrailHistory extends SceneObjectBase<DataTrailsHistoryState> {
     trail.subscribeToEvent(SceneVariableValueChangedEvent, (evt) => {
       if (evt.payload.state.name === VAR_FILTERS) {
         const filtersApplied = this.state.filtersApplied;
-        const urlState = getUrlSyncManager().getUrlState(trail);
+        const urlState = sceneUtils.getUrlState(trail);
         this.addTrailStep(trail, 'filters', parseFilterTooltip(urlState, filtersApplied));
         this.setState({ filtersApplied });
       }

public/app/features/trails/TrailStore/TrailStore.test.ts

@@ -1,5 +1,5 @@
 import { locationService, setDataSourceSrv } from '@grafana/runtime';
-import { AdHocFiltersVariable, getUrlSyncManager, sceneGraph } from '@grafana/scenes';
+import { AdHocFiltersVariable, sceneGraph, sceneUtils } from '@grafana/scenes';
 import { DataSourceType } from 'app/features/alerting/unified/utils/datasource';
 
 import { MockDataSourceSrv, mockDataSource } from '../../alerting/unified/mocks';
@@ -303,7 +303,7 @@ describe('TrailStore', () => {
         getTrailStore().load();
         const store = getTrailStore();
         trail = store.recent[0].resolve();
-        const urlState = getUrlSyncManager().getUrlState(trail);
+        const urlState = sceneUtils.getUrlState(trail);
         locationService.partial(urlState);
         trail.activate();
         trail.state.history.activate();
@@ -356,7 +356,7 @@ describe('TrailStore', () => {
         getTrailStore().load();
         const store = getTrailStore();
         trail = store.recent[0].resolve();
-        const urlState = getUrlSyncManager().getUrlState(trail);
+        const urlState = sceneUtils.getUrlState(trail);
         locationService.partial(urlState);
 
         trail.activate();

public/app/features/trails/TrailStore/TrailStore.ts

@@ -1,7 +1,7 @@
 import { debounce, isEqual } from 'lodash';
 
 import { urlUtil } from '@grafana/data';
-import { getUrlSyncManager, SceneObject, SceneObjectRef, SceneObjectUrlValues, sceneUtils } from '@grafana/scenes';
+import { SceneObject, SceneObjectRef, SceneObjectUrlValues, sceneUtils } from '@grafana/scenes';
 import { dispatch } from 'app/store/store';
 
 import { notifyApp } from '../../../core/reducers/appNotification';
@@ -120,7 +120,7 @@ export class TrailStore {
     const history = trail.state.history.state.steps.map((step) => {
       const stepTrail = new DataTrail(sceneUtils.cloneSceneObjectState(step.trailState));
       return {
-        urlValues: getUrlSyncManager().getUrlState(stepTrail),
+        urlValues: sceneUtils.getUrlState(stepTrail),
         type: step.type,
         description: step.description,
         parentIndex: step.parentIndex,
@@ -203,7 +203,7 @@ export class TrailStore {
   }
 
   addBookmark(trail: DataTrail) {
-    const urlState = getUrlSyncManager().getUrlState(trail);
+    const urlState = sceneUtils.getUrlState(trail);
 
     const bookmarkState: DataTrailBookmark = {
       urlValues: urlState,
@@ -243,7 +243,7 @@ export class TrailStore {
 }
 
 function getUrlStateForComparison(trail: DataTrail) {
-  const urlState = getUrlSyncManager().getUrlState(trail);
+  const urlState = sceneUtils.getUrlState(trail);
   // Make a few corrections
   correctUrlStateForComparison(urlState);
 

public/app/features/trails/utils.ts

@@ -2,12 +2,12 @@ import { urlUtil } from '@grafana/data';
 import { config, getDataSourceSrv } from '@grafana/runtime';
 import {
   AdHocFiltersVariable,
-  getUrlSyncManager,
   sceneGraph,
   SceneObject,
   SceneObjectState,
   SceneObjectUrlValues,
   SceneTimeRange,
+  sceneUtils,
 } from '@grafana/scenes';
 
 import { getDatasourceSrv } from '../plugins/datasource_srv';
@@ -35,7 +35,7 @@ export function newMetricsTrail(initialDS?: string): DataTrail {
 }
 
 export function getUrlForTrail(trail: DataTrail) {
-  const params = getUrlSyncManager().getUrlState(trail);
+  const params = sceneUtils.getUrlState(trail);
   return getUrlForValues(params);
 }
 

yarn.lock

@@ -3932,9 +3932,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@grafana/scenes@npm:5.12.0":
-  version: 5.12.0
-  resolution: "@grafana/scenes@npm:5.12.0"
+"@grafana/scenes@npm:^5.13.0":
+  version: 5.13.0
+  resolution: "@grafana/scenes@npm:5.13.0"
   dependencies:
     "@floating-ui/react": "npm:0.26.16"
     "@grafana/e2e-selectors": "npm:^11.0.0"
@@ -3951,7 +3951,7 @@ __metadata:
     "@grafana/ui": ">=10.4"
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/17e1e1b2928c06ad9c898e1988ece2a2113ca3177f510036b42eb4032d6582e783ec28f1f3110dc67acda4ec56d2747ae23c2d57593bc2dac0ff60b2fffeda61
+  checksum: 10/d22cbbc146b26e4d3e9b1f2b873d44e771e7c87b4a211cc61701cbba5460eb0a5f49ba982c4dfff7c86729487712e94340d6cc5b0d6a19483549205dfea1ebe6
   languageName: node
   linkType: hard
 
@@ -18534,7 +18534,7 @@ __metadata:
     "@grafana/prometheus": "workspace:*"
     "@grafana/runtime": "workspace:*"
     "@grafana/saga-icons": "workspace:*"
-    "@grafana/scenes": "npm:5.12.0"
+    "@grafana/scenes": "npm:^5.13.0"
     "@grafana/schema": "workspace:*"
     "@grafana/sql": "workspace:*"
     "@grafana/tsconfig": "npm:^2.0.0"