Disable temp var dropdowns for viewers when auth enabled

ui/src/dashboards/components/TemplateControlBar.tsx

@@ -12,6 +12,8 @@ interface Props {
   isOpen: boolean
   onOpenTemplateManager: () => void
   onSelectTemplate: (id: string) => void
+  meRole: string
+  isUsingAuth: boolean
 }
 
 const TemplateControlBar: SFC<Props> = ({
@@ -19,6 +21,8 @@ const TemplateControlBar: SFC<Props> = ({
   templates,
   onSelectTemplate,
   onOpenTemplateManager,
+  meRole,
+  isUsingAuth,
 }) => (
   <div className={classnames('template-control-bar', {show: isOpen})}>
     <div className="template-control--container">
@@ -27,6 +31,8 @@ const TemplateControlBar: SFC<Props> = ({
           templates.map(template => (
             <TemplateControlDropdown
               key={uuid.v4()}
+              meRole={meRole}
+              isUsingAuth={isUsingAuth}
               template={template}
               onSelectTemplate={onSelectTemplate}
             />

ui/src/dashboards/components/TemplateControlDropdown.tsx

@@ -4,8 +4,11 @@ import Dropdown from 'src/shared/components/Dropdown'
 import {calculateDropdownWidth} from 'src/dashboards/constants/templateControlBar'
 import {Template} from 'src/types/dashboard'
 
+export const VIEWER_ROLE = 'viewer'
 interface Props {
   template: Template
+  meRole: string
+  isUsingAuth: boolean
   onSelectTemplate: (id: string) => void
 }
 
@@ -13,7 +16,12 @@ interface Props {
 // the full array, and [item] to all `selected` values when we update
 // this component to support multiple values
 
-const TemplateControlDropdown: SFC<Props> = ({template, onSelectTemplate}) => {
+const TemplateControlDropdown: SFC<Props> = ({
+  template,
+  onSelectTemplate,
+  isUsingAuth,
+  meRole,
+}) => {
   const dropdownItems = template.values.map(value => ({
     ...value,
     text: value.value,
@@ -34,6 +42,7 @@ const TemplateControlDropdown: SFC<Props> = ({template, onSelectTemplate}) => {
         menuClass="dropdown-astronaut"
         useAutoComplete={true}
         selected={selectedItem.text}
+        disabled={isUsingAuth && (!meRole || meRole === VIEWER_ROLE)}
         onChoose={onSelectTemplate(template.id)}
       />
       <label className="template-control--label">{template.tempVar}</label>

ui/src/dashboards/containers/DashboardPage.js

@@ -305,6 +305,8 @@ class DashboardPage extends Component {
     const {zoomedTimeRange} = this.state
     const {zoomedLower, zoomedUpper} = zoomedTimeRange
     const {
+      isUsingAuth,
+      meRole,
       source,
       sources,
       timeRange,
@@ -426,6 +428,8 @@ class DashboardPage extends Component {
         {inPresentationMode || (
           <TemplateControlBar
             templates={dashboard && dashboard.templates}
+            meRole={meRole}
+            isUsingAuth={isUsingAuth}
             onSelectTemplate={this.handleSelectTemplate}
             onOpenTemplateManager={this.handleOpenTemplateManager}
             isOpen={showTemplateControlBar}