Create empty state for TempVars Control Bar

Changed the button text back to “Manage” because the label “Template
Variables” felt very redundant now that the page header has a tempvars
button

ui/src/dashboards/components/TemplateControlBar.js

@@ -2,7 +2,6 @@ import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 
 import Dropdown from 'shared/components/Dropdown'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import omit from 'lodash/omit'
 
@@ -15,7 +14,8 @@ const TemplateControlBar = ({
   <div className={classnames('template-control-bar', {show: isOpen})}>
     <div className="template-control--container">
       <div className="template-control--controls">
-        {templates.map(({id, values, tempVar}) => {
+        {templates.length
+          ? templates.map(({id, values, tempVar}) => {
               const items = values.map(value => ({...value, text: value.value}))
               const selectedItem = items.find(item => item.selected) || items[0]
               const selectedText = selectedItem && selectedItem.text
@@ -37,14 +37,17 @@ const TemplateControlBar = ({
                   </label>
                 </div>
               )
-        })}
+            })
+          : <div className="template-control--empty">
+              This dashboard does not have any Template Variables
+            </div>}
       </div>
       <button
         className="btn btn-primary btn-sm template-control--manage"
         onClick={onOpenTemplateManager}
       >
         <span className="icon cog-thick" />
-        Templates
+        Manage
       </button>
     </div>
   </div>

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

@@ -51,6 +51,13 @@ $template-control-dropdown-min-width: 118px;
   flex: 1 0 0;
   flex-wrap: wrap;
 }
+.template-control--empty {
+  color: $g11-sidewalk;
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 18px;
+  @include no-user-select();
+}
 .template-control--dropdown {
   flex: 0 1 auto;
   min-width: $template-control-dropdown-min-width;