UrlSync: Major refactoring to simplify and make it work better across page routes (for scenes-react use case)

[torkelo]

To me merged after main scenes-react PR is merged, https://github.com/grafana/scenes/pull/734

This is not easy but I think I found a pretty good solution to some very tricky problems

Problems solved

• [x] Figure out unique URL keys when we have many variables or time ranges in the same view/scene (ie handle URL key conflicts). The old solution of constantly re-building an index based on scene depth was not great for scenarios where objects are dynamically added and removed.
• [x] UrlSyncManager subscribes directly to location changes is a problem as the location change event happens before any route changes so it's very hard (or impossible) to really know if new location change is relevant for the current scene or is actually for a completely different scene (ie when going between routes of independent scenes). The old way just checked if pathname was the same but for scenes-react where scenes and URL sync can extend across many sub routes this solution was not workable. Switching to using a hook that subscribes to location changes via useLocation is much better as this way we do not get location update event when moving to a different route / page so we always know if a location change is relevant for the current scene or not.
• [x] Support syncing URL state to scene objects added dynamically as the page renders

Breaking changes

• Removing initUrlSync on EmbeddedPage. I searched the org and it looks like this is not used (except in a hackathon project).

TODO

• [x] Review
• [x] Unit tests
• [x] Test it in core dashboards: PR with updates to core dashboards and data trails: https://github.com/grafana/grafana/pull/88836

Release notes

EmbbedScene no longer has a function named initUrlSync as URL sync is now initialized via a hook exported from @grafana/scenes called useUrlSync. So to use EmbeddedScene in isolation (outside a SceneAppPage) you need to initialize URL sync yourself.

   const scene = useMemo(() => buildMyScene(), [...]);
   const isUrlSyncInitialized = useUrlSync(scene);

   if (!isUrlSyncInitialized) {
     return null;
   }

   return <scene.Component model={scene} />

A simpler way to do the above is to use the new component, UrlSyncContextProvider that is exported from the main scenes lib:

<UrlSyncContextProvider scene={scene}>
   <scene.Component model={scene} />
</UrlSyncContextProvider>  

This is only if you are using EmbeddedScene in isolation, if you are using EmbeddedScene as part of a SceneAppPage this is all handled for you by the default rendering of SceneAppPage so this change should not impact SceneAppPage usage. If trying out the the new scenes-react library the SceneContextProvider will make sure the root SceneContext is wrapped in an UrlSyncContextProvider.

📦 Published PR as canary version: 4.29.1--canary.765.9462062093.0

:sparkles: Test out this PR locally via: ```bash npm install @grafana/scenes-react@4.29.1--canary.765.9462062093.0 npm install @grafana/scenes@4.29.1--canary.765.9462062093.0 # or yarn add @grafana/scenes-react@4.29.1--canary.765.9462062093.0 yarn add @grafana/scenes@4.29.1--canary.765.9462062093.0 ```

[ananasovich]

Hi Torkel! I think you may have added me as a reviewer by mistake. I am a backend developer and cannot help here. Sorry for the late notice.

[dprokop]

~@torkelo I think I found a regression in the core Grafana. Navigating to dashboard settings does not work. Url is updated correctly, hovewer the settings view is not shown. It does work tho when the page is refreshed. The same problem appears when trying to navigate to panel edit. Url update, no effect in the ui unless refreshed.~

~Moreover, navigating between settings pages does not work, and back/forward browser actions.~

My bad, tested agains a wrong branch.

[grafanabot]

:rocket: PR was released in v5.0.0 :rocket: