ux: When adding a new panel we should scroll to top until we figure o… (#10417)

* ux: When adding a new panel we should scroll to top until we figure out a better solution #10299

* ux: Use jquery to add smooth scrolling when scrolling up to add a panel, and make sure to pass the scope to the event emitter, #10299

* ux: Add a close button to the "New panel"-box and make sure you scroll to top every time you click "Add panel" #10299

public/app/core/components/scroll/scroll.ts

@@ -1,5 +1,6 @@
 import PerfectScrollbar from 'perfect-scrollbar';
 import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
 
 export function geminiScrollbar() {
   return {
@@ -7,6 +8,19 @@ export function geminiScrollbar() {
     link: function(scope, elem, attrs) {
       let scrollbar = new PerfectScrollbar(elem[0]);
 
+      appEvents.on(
+        'smooth-scroll-top',
+        () => {
+          elem.animate(
+            {
+              scrollTop: 0,
+            },
+            500
+          );
+        },
+        scope
+      );
+
       scope.$on('$routeChangeSuccess', () => {
         elem[0].scrollTop = 0;
       });

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

@@ -21,6 +21,8 @@ export interface AddPanelPanelState {
 export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
   constructor(props) {
     super(props);
+    this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
+    this.renderPanelItem = this.renderPanelItem.bind(this);
 
     this.state = {
       panelPlugins: this.getPanelPlugins(),
@@ -83,6 +85,13 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     dashboard.removePanel(this.props.panel);
   };
 
+  handleCloseAddPanel(evt) {
+    evt.preventDefault();
+    const panelContainer = this.props.getPanelContainer();
+    const dashboard = panelContainer.getDashboard();
+    dashboard.removePanel(dashboard.panels[0]);
+  }
+
   renderPanelItem(panel, index) {
     console.log('render panel', index);
     return (
@@ -101,10 +110,11 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
             <i className="gicon gicon-add-panel" />
             <span className="add-panel__title">New Panel</span>
             <span className="add-panel__sub-title">Select a visualization</span>
+            <button className="add-panel__close" onClick={this.handleCloseAddPanel}>
+              <i className="fa fa-close" />
+            </button>
           </div>
-          <ScrollBar className="add-panel__items">
-            {this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
-          </ScrollBar>
+          <ScrollBar className="add-panel__items">{this.state.panelPlugins.map(this.renderPanelItem)}</ScrollBar>
         </div>
       </div>
     );

public/app/features/dashboard/dashnav/dashnav.ts

@@ -73,9 +73,9 @@ export class DashNavCtrl {
   }
 
   addPanel() {
+    appEvents.emit('smooth-scroll-top');
     if (this.dashboard.panels.length > 0 && this.dashboard.panels[0].type === 'add-panel') {
-      this.dashboard.removePanel(this.dashboard.panels[0]);
-      return;
+      return; // Return if the "Add panel" exists already
     }
 
     this.dashboard.addPanel({

public/sass/components/_panel_add_panel.scss

@@ -7,12 +7,20 @@
   display: flex;
   align-items: center;
 
-  i {
+  .gicon {
     font-size: 30px;
     margin-right: $spacer;
   }
 }
 
+.add-panel__close {
+  margin-left: auto;
+  background-color: transparent;
+  border: 0;
+  font-size: 16px;
+  margin-right: -10px;
+}
+
 .add-panel__title {
   font-size: $font-size-md;
   margin-right: $spacer/2;