Dashboards: Fix an issue where the dashboard would unmount and then mount again causing requests to cancel under some circumstances (#85003)

* Fix issue where dashboard unmounts and mounts again causing requests to be canceled

* Fix tests, add test

public/app/features/dashboard/containers/DashboardPageProxy.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, act, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
@@ -33,6 +33,23 @@ const dashMock: DashboardDTO = {
   },
 };
 
+const homeMock = {
+  ...dashMock,
+  dashboard: {
+    ...dashMock.dashboard,
+    uid: '',
+    title: 'Home',
+  },
+};
+
+const homeMockEditable = {
+  ...homeMock,
+  meta: {
+    ...homeMock.meta,
+    canEdit: true,
+  },
+};
+
 const dashMockEditable = {
   ...dashMock,
   meta: {
@@ -126,7 +143,7 @@ describe('DashboardPageProxy', () => {
 
     describe('when user can edit a dashboard ', () => {
       it('should not render DashboardScenePage if route is Home', async () => {
-        getDashboardScenePageStateManager().setDashboardCache(HOME_DASHBOARD_CACHE_KEY, dashMockEditable);
+        getDashboardScenePageStateManager().setDashboardCache(HOME_DASHBOARD_CACHE_KEY, homeMockEditable);
         act(() => {
           setup({
             route: { routeName: DashboardRoutes.Home, component: () => null, path: '/' },
@@ -155,7 +172,7 @@ describe('DashboardPageProxy', () => {
 
     describe('when user can only view a dashboard ', () => {
       it('should render DashboardScenePage if route is Home', async () => {
-        getDashboardScenePageStateManager().setDashboardCache(HOME_DASHBOARD_CACHE_KEY, dashMock);
+        getDashboardScenePageStateManager().setDashboardCache(HOME_DASHBOARD_CACHE_KEY, homeMock);
         act(() => {
           setup({
             route: { routeName: DashboardRoutes.Home, component: () => null, path: '/' },
@@ -169,17 +186,30 @@ describe('DashboardPageProxy', () => {
       });
 
       it('should render DashboardScenePage if route is Normal and has uid', async () => {
-        getDashboardScenePageStateManager().setDashboardCache('abc-def', dashMock);
+        getDashboardScenePageStateManager().setDashboardCache('uid', dashMock);
         act(() => {
           setup({
             route: { routeName: DashboardRoutes.Normal, component: () => null, path: '/' },
-            match: { params: { uid: 'abc-def' }, isExact: true, path: '/', url: '/' },
+            match: { params: { uid: 'uid' }, isExact: true, path: '/', url: '/' },
           });
         });
         await waitFor(() => {
           expect(screen.queryAllByTestId('dashboard-scene-page')).toHaveLength(1);
         });
       });
+
+      it('should render not DashboardScenePage if dashboard UID does not match route UID', async () => {
+        getDashboardScenePageStateManager().setDashboardCache('uid', dashMock);
+        act(() => {
+          setup({
+            route: { routeName: DashboardRoutes.Normal, component: () => null, path: '/' },
+            match: { params: { uid: 'wrongUID' }, isExact: true, path: '/', url: '/' },
+          });
+        });
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('dashboard-scene-page')).toHaveLength(0);
+        });
+      });
     });
   });
 });

public/app/features/dashboard/containers/DashboardPageProxy.tsx

@@ -53,6 +53,10 @@ function DashboardPageProxy(props: DashboardPageProxyProps) {
     return null;
   }
 
+  if (dashboard.value && dashboard.value.dashboard.uid && dashboard.value.dashboard.uid !== props.match.params.uid) {
+    return null;
+  }
+
   if (
     dashboard.value &&
     !(dashboard.value.meta.canEdit || dashboard.value.meta.canMakeEditable) &&