From 816e81ac0a03808c7bf1bd971acfa0d6f79071d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 5 Mar 2019 14:32:33 +0100
Subject: [PATCH] Fixed scrollbar not visible due to content being added a bit
 after mount, fixes #15711

(cherry picked from commit cd78f0bef21238fff5ea29f4f80df9be3f69c4ef)
---
 .../CustomScrollbar/CustomScrollbar.tsx           | 15 +++++++++++++++
 .../dashboard/containers/DashboardPage.tsx        |  7 ++++++-
 .../__snapshots__/DashboardPage.test.tsx.snap     |  2 ++
 .../dashboard/panel_editor/EditorTabBody.tsx      |  2 +-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index a8391644ee9..c628d685f5c 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -14,6 +14,7 @@ interface Props {
   scrollTop?: number;
   setScrollTop: (event: any) => void;
   autoHeightMin?: number | string;
+  updateAfterMountMs?: number;
 }
 
 /**
@@ -48,6 +49,20 @@ export class CustomScrollbar extends PureComponent<Props> {
 
   componentDidMount() {
     this.updateScroll();
+
+    // this logic is to make scrollbar visible when content is added body after mount
+    if (this.props.updateAfterMountMs) {
+      setTimeout(() => this.updateAfterMount(), this.props.updateAfterMountMs);
+    }
+  }
+
+  updateAfterMount() {
+    if (this.ref && this.ref.current) {
+      const scrollbar = this.ref.current as any;
+      if (scrollbar.update) {
+        scrollbar.update();
+      }
+    }
   }
 
   componentDidUpdate() {
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index c52774f7e0e..34483324fa9 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -268,7 +268,12 @@ export class DashboardPage extends PureComponent<Props, State> {
           onAddPanel={this.onAddPanel}
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
-          <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>
+          <CustomScrollbar
+            autoHeightMin={'100%'}
+            setScrollTop={this.setScrollTop}
+            scrollTop={scrollTop}
+            updateAfterMountMs={500}
+          >
             {editview && <DashboardSettings dashboard={dashboard} />}
 
             {initError && this.renderInitFailedState()}
diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
index f60e60c43a8..83b5aaaa959 100644
--- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
@@ -113,6 +113,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       hideTracksWhenNotNeeded={false}
       scrollTop={0}
       setScrollTop={[Function]}
+      updateAfterMountMs={500}
     >
       <div
         className="dashboard-container"
@@ -349,6 +350,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       hideTracksWhenNotNeeded={false}
       scrollTop={0}
       setScrollTop={[Function]}
+      updateAfterMountMs={500}
     >
       <DashboardSettings
         dashboard={
diff --git a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
index 0413cae8a7b..6d2ce838117 100644
--- a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
+++ b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
@@ -118,7 +118,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
           {toolbarItems.map(item => this.renderButton(item))}
         </div>
         <div className="panel-editor__scroll">
-          <CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop}>
+          <CustomScrollbar autoHide={false} scrollTop={scrollTop} setScrollTop={setScrollTop} updateAfterMountMs={300}>
             <div className="panel-editor__content">
               <FadeIn in={isOpen} duration={200} unmountOnExit={true}>
                 {openView && this.renderOpenView(openView)}