ux: added react scrollbar component and added it to add panel panel

public/app/core/components/ScrollBar/ScrollBar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PerfectScrollbar from 'perfect-scrollbar';
+
+export interface Props {
+  children: any;
+  className: string;
+}
+
+export default class ScrollBar extends React.Component<Props, any> {
+
+  private container: any;
+  private ps: PerfectScrollbar;
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.ps = new PerfectScrollbar(this.container);
+  }
+
+  componentDidUpdate() {
+    this.ps.update();
+  }
+
+  componentWillUnmount() {
+    this.ps.destroy();
+  }
+
+  // methods can be invoked by outside
+  setScrollTop(top) {
+    if (this.container) {
+      this.container.scrollTop = top;
+      this.ps.update();
+
+      return true;
+    }
+    return false;
+  }
+
+  setScrollLeft(left) {
+    if (this.container) {
+      this.container.scrollLeft = left;
+      this.ps.update();
+
+      return true;
+    }
+    return false;
+  }
+
+  handleRef = ref => {
+    this.container = ref;
+  };
+
+  render() {
+    return (
+      <div className={this.props.className} ref={this.handleRef}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

public/app/features/dashboard/dashboard_ctrl.ts

@@ -129,7 +129,6 @@ export class DashboardCtrl implements PanelContainer {
     }
 
     getPanelContainer() {
-      console.log('DashboardCtrl:getPanelContainer()');
       return this;
     }
 

public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import config from 'app/core/config';
 import {PanelModel} from '../panel_model';
 import {PanelContainer} from './PanelContainer';
+import ScrollBar from 'app/core/components/ScrollBar/ScrollBar';
 
 export interface AddPanelPanelProps {
   panel: PanelModel;
@@ -78,9 +79,9 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
             <span className="add-panel__title">New Panel</span>
             <span className="add-panel__sub-title">Select a visualization</span>
           </div>
-          <div className="add-panel__items">
+          <ScrollBar className="add-panel__items">
             {this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
-          </div>
+          </ScrollBar>
         </div>
       </div>
     );

public/app/features/panel/panel_header.ts

@@ -84,6 +84,7 @@ function panelHeader($compile) {
     restrict: 'E',
     template: template,
     link: function(scope, elem, attrs) {
+      console.log(elem.html());
 
       let menuElem = elem.find('.panel-menu');
       let menuScope;

public/sass/components/_panel_add_panel.scss

@@ -35,6 +35,7 @@
   height: calc(100% - 43px);
   align-content: flex-start;
   justify-content: space-around;
+  position: relative;
 }
 
 .add-panel__item {