Fixed add panel should scroll to top

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -23,6 +23,7 @@ export interface Props {
   isFullscreen: boolean;
   isFullscreen: boolean;
   $injector: any;
   $injector: any;
   updateLocation: typeof updateLocation;
   updateLocation: typeof updateLocation;
+  onAddPanel: () => void;
 }
 }
 
 
 export class DashNav extends PureComponent<Props> {
 export class DashNav extends PureComponent<Props> {
@@ -39,7 +40,8 @@ export class DashNav extends PureComponent<Props> {
   componentDidMount() {
   componentDidMount() {
     const loader = getAngularLoader();
     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 };
     const scopeProps = { dashboard: this.props.dashboard };
 
 
     this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template);
     this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template);
@@ -55,21 +57,6 @@ export class DashNav extends PureComponent<Props> {
     appEvents.emit('show-dash-search');
     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 = () => {
   onClose = () => {
     if (this.props.editview) {
     if (this.props.editview) {
       this.props.updateLocation({
       this.props.updateLocation({
@@ -137,7 +124,7 @@ export class DashNav extends PureComponent<Props> {
   };
   };
 
 
   render() {
   render() {
-    const { dashboard, isFullscreen, editview } = this.props;
+    const { dashboard, isFullscreen, editview, onAddPanel } = this.props;
     const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
     const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
     const { snapshot } = dashboard;
     const { snapshot } = dashboard;
 
 
@@ -186,7 +173,7 @@ export class DashNav extends PureComponent<Props> {
               tooltip="Add panel"
               tooltip="Add panel"
               classSuffix="add-panel"
               classSuffix="add-panel"
               icon="gicon gicon-add-panel"
               icon="gicon gicon-add-panel"
-              onClick={this.onAddPanel}
+              onClick={onAddPanel}
             />
             />
           )}
           )}
 
 

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -178,25 +178,23 @@ export class DashboardPage extends PureComponent<Props, State> {
     this.setState({ scrollTop: target.scrollTop });
     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;
+    }
 
 
-    return (
-      <div className="scroll-canvas scroll-canvas--dashboard">
-        {dashboard && editview && <DashboardSettings dashboard={dashboard} />}
+    dashboard.addPanel({
+      type: 'add-panel',
+      gridPos: { x: 0, y: 0, w: 12, h: 8 },
+      title: 'Panel Title',
+    });
 
 
-        <div className={classes}>
-          <DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
-        </div>
-      </div>
-    );
-  }
+    // scroll to top after adding panel
+    this.setState({ scrollTop: 0 });
+  };
 
 
   render() {
   render() {
     const { dashboard, editview, $injector } = this.props;
     const { dashboard, editview, $injector } = this.props;
@@ -224,6 +222,7 @@ export class DashboardPage extends PureComponent<Props, State> {
           isFullscreen={isFullscreen}
           isFullscreen={isFullscreen}
           editview={editview}
           editview={editview}
           $injector={$injector}
           $injector={$injector}
+          onAddPanel={this.onAddPanel}
         />
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
         <div className="scroll-canvas scroll-canvas--dashboard">
           <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>
           <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>