feat(perms): display proper permissions to user

ui/src/dataLoaders/actions/dataLoaders.ts

@@ -366,9 +366,8 @@ const createTelegraf = async (dispatch, getState, plugins) => {
   const {
     dataLoading: {
       dataLoaders: {telegrafConfigName, telegrafConfigDescription},
-      steps: {bucket, orgID},
+      steps: {bucket, orgID, bucketID},
     },
-    buckets,
   } = getState()
 
   const telegrafRequest: TelegrafRequest = {
@@ -382,12 +381,10 @@ const createTelegraf = async (dispatch, getState, plugins) => {
   // create telegraf config
   const tc = await client.telegrafConfigs.create(telegrafRequest)
 
-  const b = buckets.list.find(b => b.name === bucket)
-
   const permissions = [
     {
       action: Permission.ActionEnum.Write,
-      resource: {type: PermissionResource.TypeEnum.Buckets, id: b.id},
+      resource: {type: PermissionResource.TypeEnum.Buckets, id: bucketID},
     },
     {
       action: Permission.ActionEnum.Read,

ui/src/dataLoaders/components/collectorsWizard/verify/VerifyCollectorsStep.tsx

@@ -54,11 +54,11 @@ export class VerifyCollectorStep extends PureComponent<Props> {
           <FetchAuthToken bucket={bucket} username={username}>
             {authToken => (
               <DataStreaming
-                notify={notify}
                 org={org}
-                configID={telegrafConfigID}
-                authToken={authToken}
+                notify={notify}
                 bucket={bucket}
+                authToken={authToken}
+                configID={telegrafConfigID}
               />
             )}
           </FetchAuthToken>

ui/src/me/components/account/ViewTokenOverlay.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {get} from 'lodash'
 
 // Components
 import {OverlayContainer, OverlayBody, OverlayHeading} from 'src/clockface'
@@ -27,17 +28,10 @@ const actions = [Read, Write]
 
 export default class ViewTokenOverlay extends PureComponent<Props> {
   public render() {
-    const {description, permissions} = this.props.auth
+    const {description} = this.props.auth
     const {onNotify} = this.props
 
-    const permissionsByType = {}
-    for (const key of permissions) {
-      if (permissionsByType[key.resource.type]) {
-        permissionsByType[key.resource.type].push(key.action)
-      } else {
-        permissionsByType[key.resource.type] = [key.action]
-      }
-    }
+    const permissions = this.permissions
 
     return (
       <OverlayContainer>
@@ -48,20 +42,20 @@ export default class ViewTokenOverlay extends PureComponent<Props> {
             mode={PermissionsWidgetMode.Read}
             heightPixels={500}
           >
-            {Object.keys(permissionsByType).map((type, permission) => {
+            {Object.keys(permissions).map(type => {
               return (
                 <PermissionsWidget.Section
-                  key={permission}
+                  key={type}
                   id={type}
-                  title={this.title(type)}
+                  title={type}
                   mode={PermissionsWidgetMode.Read}
                 >
-                  {actions.map((a, i) => (
+                  {permissions[type].map((action, i) => (
                     <PermissionsWidget.Item
                       key={i}
-                      id={this.itemID(type, a)}
-                      label={a}
-                      selected={this.selected(permissionsByType[type][i], a)}
+                      label={action}
+                      id={this.itemID(type, action)}
+                      selected={PermissionsWidgetSelection.Selected}
                     />
                   ))}
                 </PermissionsWidget.Section>
@@ -73,15 +67,24 @@ export default class ViewTokenOverlay extends PureComponent<Props> {
     )
   }
 
-  private selected = (
-    permission: string,
-    action: Permission.ActionEnum
-  ): PermissionsWidgetSelection => {
-    if (permission === action) {
-      return PermissionsWidgetSelection.Selected
-    }
+  private get permissions(): {[x: string]: Permission.ActionEnum[]} {
+    const p = this.props.auth.permissions.reduce((acc, {action, resource}) => {
+      const {type} = resource
+      const name = get(resource, 'name', '')
 
-    return PermissionsWidgetSelection.Unselected
+      let key = `${type}-${name}`
+      let actions = get(resource, key, [])
+
+      if (name) {
+        return {...acc, [key]: [...actions, action]}
+      }
+
+      actions = get(resource, type, [])
+
+      return {...acc, [type]: [...actions, action]}
+    }, {})
+
+    return p
   }
 
   private itemID = (
@@ -91,10 +94,6 @@ export default class ViewTokenOverlay extends PureComponent<Props> {
     return `${permission}-${action}-${permission || '*'}-${permission || '*'}`
   }
 
-  private title = (permission: string): string => {
-    return `${permission}:*`
-  }
-
   private handleDismiss = () => {
     this.props.onDismissOverlay()
   }

ui/src/pageLayout/containers/Nav.tsx

@@ -96,6 +96,12 @@ class SideNav extends PureComponent<Props> {
             location={location.pathname}
             highlightPaths={['buckets_tab']}
           />
+          <NavMenu.SubItem
+            title="Telegrafs"
+            link="/configuration/telegrafs_tab"
+            location={location.pathname}
+            highlightPaths={['telegrafs_tab']}
+          />
           <NavMenu.SubItem
             title="Profile"
             link="/configuration/settings_tab"