fix: EditTokenOverlay doesn't fail when viewing buckets/telegrafs tokens (#3342)

* fix: no need to fetch bucket/telegraf when no id in resource token

* fix: add type enum for all hard coded telegraf/buckets

* fix: prettier

Author: Palakp41

src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx

@@ -88,9 +88,9 @@ const CustomApiTokenOverlay: FC<Props> = props => {
         otherResources: {read: false, write: false},
       }
       props.allResources.forEach(resource => {
-        if (resource === 'telegrafs') {
+        if (resource === ResourceType.Telegrafs) {
           perms[resource] = props.telegrafPermissions
-        } else if (resource === 'buckets') {
+        } else if (resource === ResourceType.Buckets) {
           perms[resource] = props.bucketPermissions
         } else {
           perms[resource] = {read: false, write: false}
@@ -133,8 +133,8 @@ const CustomApiTokenOverlay: FC<Props> = props => {
     if (name === 'otherResources') {
       Object.keys(newPerm).forEach(key => {
         if (
-          key !== 'buckets' &&
-          key !== 'telegrafs' &&
+          key !== ResourceType.Buckets &&
+          key !== ResourceType.Telegrafs &&
           key !== 'otherResources'
         ) {
           newPerm[key][permission] = !newPerm[key][permission]
@@ -181,11 +181,12 @@ const CustomApiTokenOverlay: FC<Props> = props => {
     let noTelegrafWritePermSelected
 
     const bucketsTelegrafs = Object.keys(permissions).filter(
-      resource => resource === 'buckets' || resource === 'telegrafs'
+      resource =>
+        resource === ResourceType.Buckets || resource === ResourceType.Telegrafs
     )
 
     bucketsTelegrafs.forEach(resource => {
-      if (resource === 'buckets') {
+      if (resource === ResourceType.Buckets) {
         noBucketReadPermSelected = Object.keys(
           newPerm[resource].sublevelPermissions
         ).every(

src/authorizations/components/redesigned/EditTokenOverlay.tsx

@@ -24,7 +24,7 @@ import {EditResourceAccordion} from 'src/authorizations/components/redesigned/Ed
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 
 // Types
-import {Authorization} from 'src/types'
+import {Authorization, ResourceType} from 'src/types'
 
 // Actions
 import {updateAuthorization} from 'src/authorizations/actions/thunks'
@@ -74,14 +74,20 @@ const EditTokenOverlay: FC<Props> = props => {
     for (let i = 0; i < permissions.length; i++) {
       const name = permissions[i].resource.name
       if (!name) {
-        if (permissions[i].resource.type === 'telegrafs') {
+        if (
+          permissions[i].resource.type === ResourceType.Telegrafs &&
+          permissions[i].resource.id
+        ) {
           try {
             const telegraf = await props.getTelegraf(permissions[i].resource.id)
             newPerms[i].resource.name = telegraf
           } catch (e) {
             newPerms[i].resource.name = 'Resource deleted'
           }
-        } else if (permissions[i].resource.type === 'buckets') {
+        } else if (
+          permissions[i].resource.type === ResourceType.Buckets &&
+          permissions[i].resource.id
+        ) {
           try {
             const bucket = await props.getBucketSchema(
               permissions[i].resource.id

src/authorizations/components/redesigned/IndividualAccordionBody.tsx

@@ -15,6 +15,7 @@ import {
   InputToggleType,
 } from '@influxdata/clockface'
 import {PermissionType} from 'src/types/tokens'
+import {ResourceType} from 'src/types'
 
 interface Props {
   resourceName: string
@@ -28,7 +29,7 @@ export const IndividualAccordionBody: FC<Props> = props => {
   const {resourceName, permissions, onToggle, title, disabled} = props
   let sortedPermissions
 
-  if (resourceName === 'buckets') {
+  if (resourceName === ResourceType.Buckets) {
     // re-order buckets: user buckets first followed by system buckets
     const systemBuckets = []
     const userBuckets = []

src/authorizations/utils/permissions.ts

@@ -1,4 +1,4 @@
-import {Bucket, Permission} from 'src/types'
+import {Bucket, Permission, ResourceType} from 'src/types'
 import {CLOUD} from 'src/shared/constants'
 import {capitalize} from 'lodash'
 
@@ -146,12 +146,12 @@ export enum BucketTab {
 
 export const formatResources = resourceNames => {
   const resources = resourceNames.filter(
-    item => item !== 'buckets' && item !== 'telegrafs'
+    item => item !== ResourceType.Buckets && item !== ResourceType.Telegrafs
   )
   resources.sort()
-  resources.unshift('telegrafs')
-  resources.unshift('buckets')
-  const indexToSplit = resources.indexOf('telegrafs')
+  resources.unshift(ResourceType.Telegrafs)
+  resources.unshift(ResourceType.Buckets)
+  const indexToSplit = resources.indexOf(ResourceType.Telegrafs)
   const first = resources.slice(0, indexToSplit + 1)
   const second = resources.slice(indexToSplit + 1)
   return [first, second]
@@ -164,7 +164,10 @@ export const formatPermissionsObj = permissions => {
 
     if (acc.hasOwnProperty(type)) {
       accordionPermission = {...acc[type]}
-      if (id && (type === 'buckets' || type === 'telegrafs')) {
+      if (
+        id &&
+        (type === ResourceType.Buckets || type === ResourceType.Telegrafs)
+      ) {
         if (accordionPermission.sublevelPermissions.hasOwnProperty(id)) {
           accordionPermission.sublevelPermissions[id].permissions[action] = true
         } else {
@@ -182,7 +185,10 @@ export const formatPermissionsObj = permissions => {
         accordionPermission[action] = true
       }
     } else {
-      if (id && (type === 'buckets' || type === 'telegrafs')) {
+      if (
+        id &&
+        (type === ResourceType.Buckets || type === ResourceType.Telegrafs)
+      ) {
         accordionPermission = {
           read: false,
           write: false,