From c0e157300b3a5870b76e9210ed136de893cdf496 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 20 Apr 2022 11:25:40 -0400
Subject: [PATCH] DashboardPage: Remember scroll position when coming back
 panel edit / view panel (#47639) (#47792)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* DashboardPage: Remember scroll position when coming back panel edit / view panel

* Use scollElement callback

* Fixed ts issue

(cherry picked from commit a126c07e541733462c6b69970bec829f93a4c68b)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../dashboard/containers/DashboardPage.tsx      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 860e645f6bb..c73c0c6fb16 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -4,7 +4,6 @@ import { connect, ConnectedProps } from 'react-redux';
 import { locationService } from '@grafana/runtime';
 import { selectors } from '@grafana/e2e-selectors';
 import { CustomScrollbar, stylesFactory, Themeable2, withTheme2 } from '@grafana/ui';
-
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { Branding } from 'app/core/components/Branding/Branding';
 import { DashboardGrid } from '../dashgrid/DashboardGrid';
@@ -78,6 +77,7 @@ export interface State {
   showLoadingState: boolean;
   panelNotFound: boolean;
   editPanelAccessDenied: boolean;
+  scrollElement?: HTMLDivElement;
 }
 
 export class UnthemedDashboardPage extends PureComponent<Props, State> {
@@ -224,14 +224,14 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       }
 
       if (dashboard.canEditPanel(panel)) {
-        return { ...state, editPanel: panel };
+        return { ...state, editPanel: panel, rememberScrollTop: state.scrollElement?.scrollTop };
       } else {
         return { ...state, editPanelAccessDenied: true };
       }
     }
     // Leaving edit mode
     else if (state.editPanel && !urlEditPanelId) {
-      return { ...state, editPanel: null };
+      return { ...state, editPanel: null, updateScrollTop: state.rememberScrollTop };
     }
 
     // Entering view mode
@@ -245,11 +245,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       // Should move this state out of dashboard in the future
       dashboard.initViewPanel(panel);
 
-      return {
-        ...state,
-        viewPanel: panel,
-        updateScrollTop: 0,
-      };
+      return { ...state, viewPanel: panel, rememberScrollTop: state.scrollElement?.scrollTop, updateScrollTop: 0 };
     }
     // Leaving view mode
     else if (state.viewPanel && !urlViewPanelId) {
@@ -290,6 +286,10 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
     this.setState({ updateScrollTop: 0 });
   };
 
+  setScrollRef = (scrollElement: HTMLDivElement): void => {
+    this.setState({ scrollElement });
+  };
+
   getInspectPanel() {
     const { dashboard, queryParams } = this.props;
 
@@ -346,6 +346,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
         <div className={styles.dashboardScroll}>
           <CustomScrollbar
             autoHeightMin="100%"
+            scrollRefCallback={this.setScrollRef}
             scrollTop={updateScrollTop}
             hideHorizontalTrack={true}
             updateAfterMountMs={500}