From bbc5dff7bd719b4410eb685a8ff31dbd81ab96d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 5 Feb 2019 12:56:03 +0100
Subject: [PATCH] Fixed add panel should scroll to top

---
 .../dashboard/components/DashNav/DashNav.tsx  | 137 ++++++++----------
 .../dashboard/containers/DashboardPage.tsx    |  31 ++--
 2 files changed, 77 insertions(+), 91 deletions(-)

diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index 374fd6dcd36..297d7ca7ea7 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -23,6 +23,7 @@ export interface Props {
   isFullscreen: boolean;
   $injector: any;
   updateLocation: typeof updateLocation;
+  onAddPanel: () => void;
 }
 
 export class DashNav extends PureComponent<Props> {
@@ -39,7 +40,8 @@ export class DashNav extends PureComponent<Props> {
   componentDidMount() {
     const loader = getAngularLoader();
 
-    const template = '<gf-time-picker class="gf-timepicker-nav" dashboard="dashboard" ng-if="!dashboard.timepicker.hidden" />';
+    const template =
+      '<gf-time-picker class="gf-timepicker-nav" dashboard="dashboard" ng-if="!dashboard.timepicker.hidden" />';
     const scopeProps = { dashboard: this.props.dashboard };
 
     this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template);
@@ -55,21 +57,6 @@ export class DashNav extends PureComponent<Props> {
     appEvents.emit('show-dash-search');
   };
 
-  onAddPanel = () => {
-    const { dashboard } = this.props;
-
-    // Return if the "Add panel" exists already
-    if (dashboard.panels.length > 0 && dashboard.panels[0].type === 'add-panel') {
-      return;
-    }
-
-    dashboard.addPanel({
-      type: 'add-panel',
-      gridPos: { x: 0, y: 0, w: 12, h: 8 },
-      title: 'Panel Title',
-    });
-  };
-
   onClose = () => {
     if (this.props.editview) {
       this.props.updateLocation({
@@ -137,7 +124,7 @@ export class DashNav extends PureComponent<Props> {
   };
 
   render() {
-    const { dashboard, isFullscreen, editview } = this.props;
+    const { dashboard, isFullscreen, editview, onAddPanel } = this.props;
     const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
     const { snapshot } = dashboard;
 
@@ -186,73 +173,73 @@ export class DashNav extends PureComponent<Props> {
               tooltip="Add panel"
               classSuffix="add-panel"
               icon="gicon gicon-add-panel"
-              onClick={this.onAddPanel}
+              onClick={onAddPanel}
             />
-            )}
+          )}
 
-            {canStar && (
-              <DashNavButton
-                tooltip="Mark as favorite"
-                classSuffix="star"
-                icon={`${isStarred ? 'fa fa-star' : 'fa fa-star-o'}`}
-                onClick={this.onStarDashboard}
-              />
-              )}
+          {canStar && (
+            <DashNavButton
+              tooltip="Mark as favorite"
+              classSuffix="star"
+              icon={`${isStarred ? 'fa fa-star' : 'fa fa-star-o'}`}
+              onClick={this.onStarDashboard}
+            />
+          )}
 
-              {canShare && (
-                <DashNavButton
-                  tooltip="Share dashboard"
-                  classSuffix="share"
-                  icon="fa fa-share-square-o"
-                  onClick={this.onOpenShare}
-                />
-                )}
+          {canShare && (
+            <DashNavButton
+              tooltip="Share dashboard"
+              classSuffix="share"
+              icon="fa fa-share-square-o"
+              onClick={this.onOpenShare}
+            />
+          )}
 
-                {canSave && (
-                  <DashNavButton tooltip="Save dashboard" classSuffix="save" icon="fa fa-save" onClick={this.onSave} />
-                  )}
+          {canSave && (
+            <DashNavButton tooltip="Save dashboard" classSuffix="save" icon="fa fa-save" onClick={this.onSave} />
+          )}
 
-                  {snapshotUrl && (
-                    <DashNavButton
-                      tooltip="Open original dashboard"
-                      classSuffix="snapshot-origin"
-                      icon="fa fa-link"
-                      href={snapshotUrl}
-                    />
-                    )}
+          {snapshotUrl && (
+            <DashNavButton
+              tooltip="Open original dashboard"
+              classSuffix="snapshot-origin"
+              icon="fa fa-link"
+              href={snapshotUrl}
+            />
+          )}
 
-                    {showSettings && (
-                      <DashNavButton
-                        tooltip="Dashboard settings"
-                        classSuffix="settings"
-                        icon="fa fa-cog"
-                        onClick={this.onOpenSettings}
-                      />
-                      )}
-                    </div>
+          {showSettings && (
+            <DashNavButton
+              tooltip="Dashboard settings"
+              classSuffix="settings"
+              icon="fa fa-cog"
+              onClick={this.onOpenSettings}
+            />
+          )}
+        </div>
 
-                    <div className="navbar-buttons navbar-buttons--tv">
-                      <DashNavButton
-                        tooltip="Cycke view mode"
-                        classSuffix="tv"
-                        icon="fa fa-desktop"
-                        onClick={this.onToggleTVMode}
-                      />
-                    </div>
+        <div className="navbar-buttons navbar-buttons--tv">
+          <DashNavButton
+            tooltip="Cycke view mode"
+            classSuffix="tv"
+            icon="fa fa-desktop"
+            onClick={this.onToggleTVMode}
+          />
+        </div>
 
-                    <div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} />
+        <div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} />
 
-                    {(isFullscreen || editview) && (
-                      <div className="navbar-buttons navbar-buttons--close">
-                        <DashNavButton
-                          tooltip="Back to dashboard"
-                          classSuffix="primary"
-                          icon="fa fa-reply"
-                          onClick={this.onClose}
-                        />
-                      </div>
-                    )}
-                  </div>
+        {(isFullscreen || editview) && (
+          <div className="navbar-buttons navbar-buttons--close">
+            <DashNavButton
+              tooltip="Back to dashboard"
+              classSuffix="primary"
+              icon="fa fa-reply"
+              onClick={this.onClose}
+            />
+          </div>
+        )}
+      </div>
     );
   }
 }
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 33f2a602b0c..1d1882f277d 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -178,25 +178,23 @@ export class DashboardPage extends PureComponent<Props, State> {
     this.setState({ scrollTop: target.scrollTop });
   };
 
-  renderDashboard() {
-    const { dashboard, editview } = this.props;
-    const { isEditing, isFullscreen } = this.state;
+  onAddPanel = () => {
+    const { dashboard } = this.props;
 
-    const classes = classNames({
-      'dashboard-container': true,
-      'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
+    // Return if the "Add panel" exists already
+    if (dashboard.panels.length > 0 && dashboard.panels[0].type === 'add-panel') {
+      return;
+    }
+
+    dashboard.addPanel({
+      type: 'add-panel',
+      gridPos: { x: 0, y: 0, w: 12, h: 8 },
+      title: 'Panel Title',
     });
 
-    return (
-      <div className="scroll-canvas scroll-canvas--dashboard">
-        {dashboard && editview && <DashboardSettings dashboard={dashboard} />}
-
-        <div className={classes}>
-          <DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
-        </div>
-      </div>
-    );
-  }
+    // scroll to top after adding panel
+    this.setState({ scrollTop: 0 });
+  };
 
   render() {
     const { dashboard, editview, $injector } = this.props;
@@ -224,6 +222,7 @@ export class DashboardPage extends PureComponent<Props, State> {
           isFullscreen={isFullscreen}
           editview={editview}
           $injector={$injector}
+          onAddPanel={this.onAddPanel}
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
           <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>