fix: individual buckets and telegrafs names should render when Buckets and Telegrafs accordion expands (#3231)

* fix: updated useEffect hook

* fix: prettier

* feat: state should only update once

* chore: added code comment to elaborate

* fix: prettier

Author: blegesse-w

src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx

@@ -1,6 +1,7 @@
 import React, {FC, useState, useContext, useEffect} from 'react'
 import {connect} from 'react-redux'
 import 'src/authorizations/components/redesigned/customApiTokenOverlay.scss'
+import {isEmpty} from 'lodash'
 
 // Actions
 import {getBuckets} from 'src/buckets/actions/thunks'
@@ -81,23 +82,26 @@ const CustomApiTokenOverlay: FC<Props> = props => {
   }, [])
 
   useEffect(() => {
-    if (permissions['telegrafs'] && permissions['buckets']) {
-      return
-    }
-    const perms = {
-      otherResources: {read: false, write: false},
-    }
-    props.allResources.forEach(resource => {
-      if (resource === 'telegrafs') {
-        perms[resource] = props.telegrafPermissions
-      } else if (resource === 'buckets') {
-        perms[resource] = props.bucketPermissions
-      } else {
-        perms[resource] = {read: false, write: false}
+    if (!isEmpty(props.bucketPermissions.sublevelPermissions)) {
+      const perms = {
+        otherResources: {read: false, write: false},
       }
-    })
-    setPermissions(perms)
-  }, [props.telegrafPermissions, props.bucketPermissions])
+      props.allResources.forEach(resource => {
+        if (resource === 'telegrafs') {
+          perms[resource] = props.telegrafPermissions
+        } else if (resource === 'buckets') {
+          perms[resource] = props.bucketPermissions
+        } else {
+          perms[resource] = {read: false, write: false}
+        }
+      })
+      setPermissions(perms)
+    }
+    // Each time remoteDataState changes, the useEffect hook will be called.
+    // BUT, code inside the hook won't run until remoteDataState is 'Done'.
+    // Only then will props.bucketPermissions.sublevelPermissions will have value.
+    // Consequently, we update the permissions state.
+  }, [props.remoteDataState])
 
   const handleDismiss = () => {
     props.onClose()
@@ -339,7 +343,6 @@ const mstp = (state: AppState) => {
     ResourceType.Buckets,
     ResourceType.Telegrafs,
   ])
-
   const telegrafs = getAll<Telegraf>(state, ResourceType.Telegrafs)
   const telegrafPermissions = {
     read: false,