Display relevant tokens based on permissions in token dropdown

ui/src/dataExplorer/components/SaveAsTaskForm.tsx

@@ -87,13 +87,7 @@ class SaveAsTaskForm extends PureComponent<Props & WithRouterProps> {
   }
 
   public render() {
-    const {
+    const {taskOptions, dismiss, tokenStatus, selectedToken} = this.props
-      taskOptions,
-      dismiss,
-      tokens,
-      tokenStatus,
-      selectedToken,
-    } = this.props
 
     return (
       <SpinnerContainer
@@ -109,7 +103,7 @@ class SaveAsTaskForm extends PureComponent<Props & WithRouterProps> {
           onSubmit={this.handleSubmit}
           canSubmit={this.isFormValid}
           dismiss={dismiss}
-          tokens={tokens}
+          tokens={this.getRelevantTokens()}
           selectedToken={selectedToken}
           onTokenChange={this.handleTokenChange}
         />
@@ -117,6 +111,49 @@ class SaveAsTaskForm extends PureComponent<Props & WithRouterProps> {
     )
   }
 
+  private getRelevantTokens() {
+    const authorizations = this.props.tokens
+
+    const {draftQueries, activeQueryIndex} = this.props
+    let readBucketName = ''
+    if (draftQueries[activeQueryIndex].editMode === 'builder') {
+      readBucketName = draftQueries[activeQueryIndex].builderConfig.buckets[0]
+    } else {
+      const text = draftQueries[activeQueryIndex].text
+      const res = text.split('bucket:')
+      readBucketName = res[1].slice(2, 3)
+    }
+    const writeBucketName = this.props.taskOptions.toBucketName
+
+    const readAuthorizations = authorizations.filter(auth =>
+      auth.permissions.some(
+        permission =>
+          permission.action === 'read' &&
+          permission.resource.type === 'buckets' &&
+          (!permission.resource.name ||
+            permission.resource.name === readBucketName)
+      )
+    )
+
+    const writeAuthorizations = authorizations.filter(auth =>
+      auth.permissions.some(
+        permission =>
+          permission.action === 'write' &&
+          permission.resource.type === 'buckets' &&
+          (!permission.resource.name ||
+            permission.resource.name === writeBucketName)
+      )
+    )
+
+    const relevantAuthorizations = _.intersectionBy(
+      readAuthorizations,
+      writeAuthorizations,
+      'id'
+    )
+
+    return relevantAuthorizations
+  }
+
   private get isFormValid(): boolean {
     const {
       taskOptions: {name, cron, interval},

ui/src/tasks/components/TaskTokenDropdown.tsx

@@ -15,21 +15,43 @@ interface Props {
 
 export default class TaskTokenDropdown extends PureComponent<Props> {
   public render() {
-    const {tokens, selectedToken, onTokenChange} = this.props
+    const {onTokenChange} = this.props
 
     return (
       <Dropdown
-        selectedID={selectedToken.id}
+        selectedID={this.selectedID}
         buttonColor={ComponentColor.Primary}
         buttonSize={ComponentSize.Small}
         onChange={onTokenChange}
       >
-        {tokens.map(t => (
+        {this.dropdownTokens}
-          <Dropdown.Item id={t.id} key={t.id} value={t}>
-            {t.description || 'Name this token'}
-          </Dropdown.Item>
-        ))}
       </Dropdown>
     )
   }
+  private get dropdownTokens(): JSX.Element[] {
+    const {tokens} = this.props
+    if (tokens.length > 0) {
+      return tokens.map(t => (
+        <Dropdown.Item id={t.id} key={t.id} value={t}>
+          {t.description || 'Name this token'}
+        </Dropdown.Item>
+      ))
+    }
+    return [
+      <Dropdown.Item id="no-tokens" key="no-tokens" value="no-tokens">
+        {'You don’t have any tokens with appropriate permissions for this use'}
+      </Dropdown.Item>,
+    ]
+  }
+
+  private get selectedID(): string {
+    const {selectedToken, tokens} = this.props
+
+    if (tokens.length > 0) {
+      if (selectedToken) {
+        return selectedToken.id
+      }
+    }
+    return 'no-tokens'
+  }
 }