From 2288609195a8c63d9482abfba03616f168c217e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 16 Jun 2020 16:33:25 +0200
Subject: [PATCH] Dashboard: Refactor container css to use flex for height
 instead of calc  (#24009)

* Dashboard: Ability to hide dashboard toolbar

* Updated snapshot
---
 .../dashboard/containers/DashboardPage.tsx    | 18 +++++++-----------
 .../__snapshots__/DashboardPage.test.tsx.snap | 16 ++++++++++------
 public/sass/components/_dashboard_grid.scss   |  8 +-------
 public/sass/components/_panel_editor.scss     | 10 ----------
 public/sass/pages/_dashboard.scss             | 19 +++++++++++++++++--
 5 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 4da79352e64..92a450a3324 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -3,7 +3,7 @@ import $ from 'jquery';
 import React, { MouseEvent, PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+
 // Services & Utils
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getMessageFromError } from 'app/core/utils/errors';
@@ -282,19 +282,15 @@ export class DashboardPage extends PureComponent<Props, State> {
       return null;
     }
 
-    const gridWrapperClasses = classNames({
-      'dashboard-container': true,
-      'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
-    });
-
     // Only trigger render when the scroll has moved by 25
     const approximateScrollTop = Math.round(scrollTop / 25) * 25;
     const inspectPanel = this.getInspectPanel();
 
     return (
-      <div>
+      <div className="dashboard-container">
         <DashNav dashboard={dashboard} isFullscreen={!!viewPanel} $injector={$injector} onAddPanel={this.onAddPanel} />
-        <div className="scroll-canvas scroll-canvas--dashboard">
+
+        <div className="dashboard-scroll">
           <CustomScrollbar
             autoHeightMin="100%"
             setScrollTop={this.setScrollTop}
@@ -302,10 +298,10 @@ export class DashboardPage extends PureComponent<Props, State> {
             updateAfterMountMs={500}
             className="custom-scrollbar--page"
           >
-            {initError && this.renderInitFailedState()}
-
-            <div className={gridWrapperClasses}>
+            <div className="dashboard-content">
+              {initError && this.renderInitFailedState()}
               {!editPanel && <SubMenu dashboard={dashboard} />}
+
               <DashboardGrid
                 dashboard={dashboard}
                 viewPanel={viewPanel}
diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
index d405f1ca608..0c6c756f74b 100644
--- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`] = `
-<div>
+<div
+  className="dashboard-container"
+>
   <Connect(DashNav)
     $injector={Object {}}
     dashboard={
@@ -100,7 +102,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
     onAddPanel={[Function]}
   />
   <div
-    className="scroll-canvas scroll-canvas--dashboard"
+    className="dashboard-scroll"
   >
     <CustomScrollbar
       autoHeightMax="100%"
@@ -114,7 +116,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       updateAfterMountMs={500}
     >
       <div
-        className="dashboard-container"
+        className="dashboard-content"
       >
         <SubMenu
           dashboard={
@@ -357,7 +359,9 @@ exports[`DashboardPage Dashboard is fetching slowly Should render slow init stat
 exports[`DashboardPage Given initial state Should render nothing 1`] = `""`;
 
 exports[`DashboardPage When dashboard has editview url state should render settings view 1`] = `
-<div>
+<div
+  className="dashboard-container"
+>
   <Connect(DashNav)
     $injector={Object {}}
     dashboard={
@@ -456,7 +460,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
     onAddPanel={[Function]}
   />
   <div
-    className="scroll-canvas scroll-canvas--dashboard"
+    className="dashboard-scroll"
   >
     <CustomScrollbar
       autoHeightMax="100%"
@@ -470,7 +474,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       updateAfterMountMs={500}
     >
       <div
-        className="dashboard-container"
+        className="dashboard-content"
       >
         <SubMenu
           dashboard={
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index c10c1002f7c..2cb16c1ef58 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -16,13 +16,7 @@
 
 .panel-in-fullscreen {
   .react-grid-layout {
-    height: 100% !important;
-  }
-
-  .dashboard-container--has-submenu {
-    .react-grid-layout {
-      height: calc(100% - 50px) !important;
-    }
+    height: 90% !important;
   }
 
   .react-grid-item {
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index 2cb71928c7b..3959b6b8fdc 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -5,8 +5,6 @@
   &--view {
     flex: 1 1 0;
     height: 90%;
-    margin: 0 $dashboard-padding;
-    padding-top: $dashboard-padding;
   }
 }
 
@@ -28,14 +26,6 @@
     display: none;
   }
 
-  .dashboard-container {
-    padding: 0;
-  }
-
-  .submenu-controls {
-    padding: 0 $dashboard-padding $space-sm $dashboard-padding;
-  }
-
   .search-container {
     left: 0 !important;
   }
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index edd3fd0043f..c8be25b9ecd 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -1,8 +1,23 @@
 .dashboard-container {
-  padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
+  position: absolute;
+  top: 0;
+  bottom: 0;
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+}
+
+.dashboard-scroll {
+  width: 100%;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.dashboard-content {
+  padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
+  height: 100%;
 }
 
 div.flot-text {