Scopes: Fix preserving scopes when accessing a dashboard only by uid (#89406)

public/app/features/dashboard-scene/scene/Scopes/ScopesFiltersScene.tsx

@@ -21,6 +21,7 @@ import { ScopesScene } from './ScopesScene';
 import { ScopesTreeLevel } from './ScopesTreeLevel';
 import { fetchNodes, fetchScope, fetchSelectedScopes } from './api';
 import { NodesMap, SelectedScope, TreeScope } from './types';
+import { getBasicScope } from './utils';
 
 export interface ScopesFiltersSceneState extends SceneObjectState {
   nodes: NodesMap;
@@ -180,9 +181,16 @@ export class ScopesFiltersScene extends SceneObjectBase<ScopesFiltersSceneState>
       return;
     }
 
-    this.setState({ treeScopes, isLoadingScopes: true });
+    this.setState({
+      // Update the scopes with the basic scopes otherwise they'd be lost between URL syncs
+      scopes: treeScopes.map(({ scopeName, path }) => ({ scope: getBasicScope(scopeName), path })),
+      treeScopes,
+      isLoadingScopes: true,
+    });
 
-    this.setState({ scopes: await fetchSelectedScopes(treeScopes), isLoadingScopes: false });
+    const scopes = await fetchSelectedScopes(treeScopes);
+
+    this.setState({ scopes, isLoadingScopes: false });
   }
 
   public resetDirtyScopeNames() {

public/app/features/dashboard-scene/scene/Scopes/ScopesScene.tsx

@@ -30,7 +30,7 @@ export class ScopesScene extends SceneObjectBase<ScopesSceneState> {
     this.addActivationHandler(() => {
       this._subs.add(
         this.state.filters.subscribeToState((newState, prevState) => {
-          if (newState.scopes !== prevState.scopes) {
+          if (!newState.isLoadingScopes && newState.scopes !== prevState.scopes) {
             if (this.state.isExpanded) {
               this.state.dashboards.fetchDashboards(this.state.filters.getSelectedScopes());
             }

public/app/features/dashboard-scene/scene/Scopes/api.ts

@@ -3,6 +3,7 @@ import { config, getBackendSrv } from '@grafana/runtime';
 import { ScopedResourceClient } from 'app/features/apiserver/client';
 
 import { NodesMap, SelectedScope, SuggestedDashboard, TreeScope } from './types';
+import { getBasicScope, mergeScopes } from './utils';
 
 const group = 'scope.grafana.app';
 const version = 'v0alpha1';
@@ -48,31 +49,12 @@ export async function fetchScope(name: string): Promise<Scope> {
   }
 
   const response = new Promise<Scope>(async (resolve) => {
-    const basicScope: Scope = {
-      metadata: { name },
-      spec: {
-        filters: [],
-        title: name,
-        type: '',
-        category: '',
-        description: '',
-      },
-    };
+    const basicScope = getBasicScope(name);
 
     try {
       const serverScope = await scopesClient.get(name);
 
-      const scope = {
-        ...basicScope,
-        metadata: {
-          ...basicScope.metadata,
-          ...serverScope.metadata,
-        },
-        spec: {
-          ...basicScope.spec,
-          ...serverScope.spec,
-        },
-      };
+      const scope = mergeScopes(basicScope, serverScope);
 
       resolve(scope);
     } catch (err) {

public/app/features/dashboard-scene/scene/Scopes/utils.ts

@@ -0,0 +1,28 @@
+import { Scope } from '@grafana/data';
+
+export function getBasicScope(name: string): Scope {
+  return {
+    metadata: { name },
+    spec: {
+      filters: [],
+      title: name,
+      type: '',
+      category: '',
+      description: '',
+    },
+  };
+}
+
+export function mergeScopes(scope1: Scope, scope2: Scope): Scope {
+  return {
+    ...scope1,
+    metadata: {
+      ...scope1.metadata,
+      ...scope2.metadata,
+    },
+    spec: {
+      ...scope1.spec,
+      ...scope2.spec,
+    },
+  };
+}