Merge pull request #3354 from influxdata/fixes/disable-template-vars-for-viewers

Disable temp var dropdowns for viewers when auth enabled

CHANGELOG.md

@@ -13,6 +13,7 @@
 1.  [#3256](https://github.com/influxdata/chronograf/pull/3256): Reduce font sizes in dashboards for increased space efficiency
 1.  [#3320](https://github.com/influxdata/chronograf/pull/3320): Add overlay animation to Template Variables Manager
 1.  [#3245](https://github.com/influxdata/chronograf/pull/3245): Display 'no results' on cells without results
+1.  [#3354](https://github.com/influxdata/chronograf/pull/3354): Disable template variables for non editing users
 
 ### Bug Fixes
 

ui/src/dashboards/components/TemplateControlBar.tsx

@@ -8,6 +8,8 @@ import TemplateControlDropdown from 'src/dashboards/components/TemplateControlDr
 import {Template} from 'src/types/dashboard'
 
 interface Props {
+  meRole: string
+  isUsingAuth: boolean
   templates: Template[]
   isOpen: boolean
   onOpenTemplateManager: () => void
@@ -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

@@ -2,10 +2,13 @@ import React, {SFC} from 'react'
 
 import Dropdown from 'src/shared/components/Dropdown'
 import {calculateDropdownWidth} from 'src/dashboards/constants/templateControlBar'
+import {isUserAuthorized, EDITOR_ROLE} from 'src/auth/Authorized'
 import {Template} from 'src/types/dashboard'
 
 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 || !isUserAuthorized(meRole, EDITOR_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}

ui/test/dashboards/components/TemplateControlBar.test.tsx

@@ -13,6 +13,8 @@ const defaultProps = {
       values: [{value: 'firstValue'}, {value: 'secondValue'}],
     },
   ],
+  meRole: 'EDITOR',
+  isUsingAuth: true,
   onOpenTemplateManager: () => {},
   onSelectTemplate: () => {},
 }