From ce97f89de61073239349faf8d9a66758c6b48cc8 Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Wed, 18 Apr 2018 13:59:26 +0200
Subject: [PATCH] make add panel panel scrollbar adjust when panel/dashboard
 grid are resized

---
 .../core/components/ScrollBar/ScrollBar.tsx   |  4 ++++
 .../dashboard/dashgrid/AddPanelPanel.tsx      | 19 ++++++++++++++++++-
 .../dashboard/dashgrid/DashboardGrid.tsx      |  3 ---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/ScrollBar/ScrollBar.tsx b/public/app/core/components/ScrollBar/ScrollBar.tsx
index a358dc1926a..24d17f67367 100644
--- a/public/app/core/components/ScrollBar/ScrollBar.tsx
+++ b/public/app/core/components/ScrollBar/ScrollBar.tsx
@@ -54,6 +54,10 @@ export default class ScrollBar extends React.Component<Props, any> {
     return false;
   }
 
+  update() {
+    this.scrollbar.update();
+  }
+
   handleRef = ref => {
     this.container = ref;
   };
diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
index 1e9ae20dca2..094bc49b708 100644
--- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
@@ -22,10 +22,13 @@ export interface AddPanelPanelState {
 }
 
 export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
+  private scrollbar: ScrollBar;
+
   constructor(props) {
     super(props);
     this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
     this.renderPanelItem = this.renderPanelItem.bind(this);
+    this.panelSizeChanged = this.panelSizeChanged.bind(this);
 
     this.state = {
       panelPlugins: this.getPanelPlugins(''),
@@ -35,6 +38,20 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     };
   }
 
+  componentDidMount() {
+    this.props.panel.events.on('panel-size-changed', this.panelSizeChanged);
+  }
+
+  componentWillUnmount() {
+    this.props.panel.events.off('panel-size-changed', this.panelSizeChanged);
+  }
+
+  panelSizeChanged() {
+    setTimeout(() => {
+      this.scrollbar.update();
+    });
+  }
+
   getPanelPlugins(filter) {
     let panels = _.chain(config.panels)
       .filter({ hideFromList: false })
@@ -207,7 +224,7 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
               <i className="fa fa-close" />
             </button>
           </div>
-          <ScrollBar className="add-panel__items">
+          <ScrollBar ref={element => (this.scrollbar = element)} className="add-panel__items">
             <div className="add-panel__searchbar">
               <label className="gf-form gf-form--grow gf-form--has-input-icon">
                 <input
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 021a520755e..03bf65afc6e 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -140,7 +140,6 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     for (const panel of this.dashboard.panels) {
       panel.resizeDone();
     }
-    this.triggerForceUpdate();
   }
 
   updateGridPos(item, layout) {
@@ -153,13 +152,11 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 
   onResize(layout, oldItem, newItem) {
     this.panelMap[newItem.i].updateGridPos(newItem);
-    this.triggerForceUpdate();
   }
 
   onResizeStop(layout, oldItem, newItem) {
     this.updateGridPos(newItem, layout);
     this.panelMap[newItem.i].resizeDone();
-    this.triggerForceUpdate();
   }
 
   onDragStop(layout, oldItem, newItem) {