Dashboard: Refactor container css to use flex for height instead of calc (#24009)

* Dashboard: Ability to hide dashboard toolbar

* Updated snapshot

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

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import React, { MouseEvent, PureComponent } from 'react';
 import React, { MouseEvent, PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+
 // Services & Utils
 // Services & Utils
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getMessageFromError } from 'app/core/utils/errors';
 import { getMessageFromError } from 'app/core/utils/errors';
@@ -282,19 +282,15 @@ export class DashboardPage extends PureComponent<Props, State> {
       return null;
       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
     // Only trigger render when the scroll has moved by 25
     const approximateScrollTop = Math.round(scrollTop / 25) * 25;
     const approximateScrollTop = Math.round(scrollTop / 25) * 25;
     const inspectPanel = this.getInspectPanel();
     const inspectPanel = this.getInspectPanel();
 
 
     return (
     return (
-      <div>
+      <div className="dashboard-container">
         <DashNav dashboard={dashboard} isFullscreen={!!viewPanel} $injector={$injector} onAddPanel={this.onAddPanel} />
         <DashNav dashboard={dashboard} isFullscreen={!!viewPanel} $injector={$injector} onAddPanel={this.onAddPanel} />
-        <div className="scroll-canvas scroll-canvas--dashboard">
+
+        <div className="dashboard-scroll">
           <CustomScrollbar
           <CustomScrollbar
             autoHeightMin="100%"
             autoHeightMin="100%"
             setScrollTop={this.setScrollTop}
             setScrollTop={this.setScrollTop}
@@ -302,10 +298,10 @@ export class DashboardPage extends PureComponent<Props, State> {
             updateAfterMountMs={500}
             updateAfterMountMs={500}
             className="custom-scrollbar--page"
             className="custom-scrollbar--page"
           >
           >
-            {initError && this.renderInitFailedState()}
-
-            <div className={gridWrapperClasses}>
+            <div className="dashboard-content">
+              {initError && this.renderInitFailedState()}
               {!editPanel && <SubMenu dashboard={dashboard} />}
               {!editPanel && <SubMenu dashboard={dashboard} />}
+
               <DashboardGrid
               <DashboardGrid
                 dashboard={dashboard}
                 dashboard={dashboard}
                 viewPanel={viewPanel}
                 viewPanel={viewPanel}

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 
 exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`] = `
 exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`] = `
-<div>
+<div
+  className="dashboard-container"
+>
   <Connect(DashNav)
   <Connect(DashNav)
     $injector={Object {}}
     $injector={Object {}}
     dashboard={
     dashboard={
@@ -100,7 +102,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
     onAddPanel={[Function]}
     onAddPanel={[Function]}
   />
   />
   <div
   <div
-    className="scroll-canvas scroll-canvas--dashboard"
+    className="dashboard-scroll"
   >
   >
     <CustomScrollbar
     <CustomScrollbar
       autoHeightMax="100%"
       autoHeightMax="100%"
@@ -114,7 +116,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       updateAfterMountMs={500}
       updateAfterMountMs={500}
     >
     >
       <div
       <div
-        className="dashboard-container"
+        className="dashboard-content"
       >
       >
         <SubMenu
         <SubMenu
           dashboard={
           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 Given initial state Should render nothing 1`] = `""`;
 
 
 exports[`DashboardPage When dashboard has editview url state should render settings view 1`] = `
 exports[`DashboardPage When dashboard has editview url state should render settings view 1`] = `
-<div>
+<div
+  className="dashboard-container"
+>
   <Connect(DashNav)
   <Connect(DashNav)
     $injector={Object {}}
     $injector={Object {}}
     dashboard={
     dashboard={
@@ -456,7 +460,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
     onAddPanel={[Function]}
     onAddPanel={[Function]}
   />
   />
   <div
   <div
-    className="scroll-canvas scroll-canvas--dashboard"
+    className="dashboard-scroll"
   >
   >
     <CustomScrollbar
     <CustomScrollbar
       autoHeightMax="100%"
       autoHeightMax="100%"
@@ -470,7 +474,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       updateAfterMountMs={500}
       updateAfterMountMs={500}
     >
     >
       <div
       <div
-        className="dashboard-container"
+        className="dashboard-content"
       >
       >
         <SubMenu
         <SubMenu
           dashboard={
           dashboard={

public/sass/components/_dashboard_grid.scss

@@ -16,13 +16,7 @@
 
 
 .panel-in-fullscreen {
 .panel-in-fullscreen {
   .react-grid-layout {
   .react-grid-layout {
-    height: 100% !important;
-  }
-
-  .dashboard-container--has-submenu {
-    .react-grid-layout {
-      height: calc(100% - 50px) !important;
-    }
+    height: 90% !important;
   }
   }
 
 
   .react-grid-item {
   .react-grid-item {

public/sass/components/_panel_editor.scss

@@ -5,8 +5,6 @@
   &--view {
   &--view {
     flex: 1 1 0;
     flex: 1 1 0;
     height: 90%;
     height: 90%;
-    margin: 0 $dashboard-padding;
-    padding-top: $dashboard-padding;
   }
   }
 }
 }
 
 
@@ -28,14 +26,6 @@
     display: none;
     display: none;
   }
   }
 
 
-  .dashboard-container {
-    padding: 0;
-  }
-
-  .submenu-controls {
-    padding: 0 $dashboard-padding $space-sm $dashboard-padding;
-  }
-
   .search-container {
   .search-container {
     left: 0 !important;
     left: 0 !important;
   }
   }

public/sass/pages/_dashboard.scss

 .dashboard-container {
 .dashboard-container {
-  padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+}
+
+.dashboard-scroll {
   width: 100%;
   width: 100%;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.dashboard-content {
+  padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
   height: 100%;
   height: 100%;
-  box-sizing: border-box;
 }
 }
 
 
 div.flot-text {
 div.flot-text {