Redesign template variables control bar to not scroll with the page

ui/src/dashboards/components/Dashboard.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import TemplateControlBar from 'src/dashboards/components/TemplateControlBar'
 import LayoutRenderer from 'shared/components/LayoutRenderer'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
@@ -19,11 +18,8 @@ const Dashboard = ({
   onCloneCell,
   onPositionChange,
   inPresentationMode,
-  onOpenTemplateManager,
   templatesIncludingDashTime,
   onSummonOverlayTechnologies,
-  onSelectTemplate,
-  showTemplateControlBar,
   setScrollTop,
   inView,
 }) => {
@@ -48,14 +44,6 @@ const Dashboard = ({
       setScrollTop={setScrollTop}
     >
       <div className="dashboard container-fluid full-width">
-        {inPresentationMode ? null : (
-          <TemplateControlBar
-            templates={dashboard.templates}
-            onSelectTemplate={onSelectTemplate}
-            onOpenTemplateManager={onOpenTemplateManager}
-            isOpen={showTemplateControlBar}
-          />
-        )}
         {cells.length ? (
           <LayoutRenderer
             cells={cells}
@@ -124,9 +112,6 @@ Dashboard.propTypes = {
   autoRefresh: number.isRequired,
   manualRefresh: number,
   timeRange: shape({}).isRequired,
-  onOpenTemplateManager: func.isRequired,
-  onSelectTemplate: func.isRequired,
-  showTemplateControlBar: bool,
   onZoom: func,
   setScrollTop: func,
   inView: func,

ui/src/dashboards/components/TemplateControlBar.js

@@ -93,6 +93,10 @@ const TemplateControlBar = ({
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
+TemplateControlBar.defaultProps = {
+  templates: [],
+}
+
 TemplateControlBar.propTypes = {
   templates: arrayOf(
     shape({

ui/src/dashboards/containers/DashboardPage.js

@@ -14,6 +14,7 @@ import DashboardHeader from 'src/dashboards/components/DashboardHeader'
 import Dashboard from 'src/dashboards/components/Dashboard'
 import TemplateVariableManager from 'src/dashboards/components/template_variables/Manager'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
+import TemplateControlBar from 'src/dashboards/components/TemplateControlBar'
 
 import {errorThrown as errorThrownAction} from 'shared/actions/errors'
 import {notify as notifyAction} from 'shared/actions/notifications'
@@ -373,7 +374,7 @@ class DashboardPage extends Component {
     }))
 
     return (
-      <div className="page">
+      <div className="page dashboard-page">
         {isTemplating ? (
           <OverlayTechnologies>
             <TemplateVariableManager
@@ -426,6 +427,14 @@ class DashboardPage extends Component {
           onToggleTempVarControls={this.handleToggleTempVarControls}
           handleClickPresentationButton={handleClickPresentationButton}
         />
+        {inPresentationMode ? null : (
+          <TemplateControlBar
+            templates={dashboard && dashboard.templates}
+            onSelectTemplate={this.handleSelectTemplate}
+            onOpenTemplateManager={this.handleOpenTemplateManager}
+            isOpen={showTemplateControlBar}
+          />
+        )}
         {dashboard ? (
           <Dashboard
             source={source}

ui/src/style/components/template-control-bar.scss

@@ -11,23 +11,25 @@ $template-control-dropdown-min-width: 146px;
 $template-control-dropdown-max-width: 300px;
 
 .template-control-bar {
+  position: absolute;
+  top: $chronograf-page-header-height;
+  left: 0;
+  width: 100%;
   display: none;
-  height: auto;
+  background-color: $g3-castle;
-  margin-bottom: 8px;
 
   &.show {
     display: block;
   }
 }
 .template-control--container {
+  width: 100%;
+  height: $chronograf-page-header-height;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  padding: $template-control--margin;
+  padding: 0 60px;
-  @extend .cell-shell;
-  background-color: $g0-obsidian;
-  min-height: $template-control--min-height;
 }
 .template-control--heading {
   font-size: 16px;
@@ -38,18 +40,46 @@ $template-control-dropdown-max-width: 300px;
   white-space: nowrap;
 }
 button.btn.template-control--manage {
-  margin: 7px 8px;
+  margin: 7px 0 7px 8px;
 }
 .template-control--controls {
   display: flex;
   flex: 1 0 0%;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+
+    &-button {
+      display: none;
+    }
+    &-track {
+      background-color: $g3-castle;
+    }
+    &-track-piece {
+      background-color: $g3-castle;
+      border: 2px solid $g3-castle;
+      border-radius: 4px;
+    }
+    &-thumb {
+      background-color: $g6-smoke;
+      border: 2px solid $g3-castle;
+      border-radius: 4px;
+    }
+    &-corner {
+      display: none;
+    }
+  }
+  &::-webkit-resizer {
+    display: none;
+  }
 }
 .template-control--empty {
   color: $g11-sidewalk;
   font-size: 14px;
   font-weight: 500;
-  margin-left: 18px;
   @include no-user-select();
 }
 .template-control--dropdown {

ui/src/style/layout/page.scss

@@ -33,6 +33,10 @@
   display: flex;
   align-items: stretch;
 }
+.template-control-bar.show + .page-contents {
+  top: $chronograf-page-header-height * 2;
+  height: calc(100% - #{$chronograf-page-header-height * 2}) !important;
+}
 .container-fluid {
   margin: 0 auto;
   padding: ($chronograf-page-header-height / 2) $page-wrapper-padding;