Add guard in storage explorer to not render store if api key is undefined (#37379)

* add guard

* Fix Storage Explorer empty view if no perms to read API keys

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.tsx

@@ -1,11 +1,14 @@
 import { Transition } from '@headlessui/react'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { get, noop, sum } from 'lodash'
 import { Upload } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { useContextMenu } from 'react-contexify'
+import { toast } from 'sonner'
 
 import InfiniteList from 'components/ui/InfiniteList'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
@@ -82,6 +85,7 @@ const FileExplorerColumn = ({
   const fileExplorerColumnRef = useRef<any>(null)
 
   const snap = useStorageExplorerStateSnapshot()
+  const canUpdateStorage = useCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
   useEffect(() => {
     if (fileExplorerColumnRef) {
@@ -126,7 +130,12 @@ const FileExplorerColumn = ({
 
   const onDrop = (event: any) => {
     onDragOver(event)
-    onFilesUpload(event, index)
+
+    if (!canUpdateStorage) {
+      toast('You need additional permissions to upload files to this project')
+    } else {
+      onFilesUpload(event, index)
+    }
   }
 
   const SelectAllCheckbox = () => (

apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx

@@ -16,6 +16,7 @@ const PageLayout: NextPageWithLayout = () => {
   const { projectRef } = useStorageExplorerStateSnapshot()
   const { bucket, error, isSuccess, isError } = useSelectedBucket()
 
+  // [Joshen] Checking against projectRef from storage explorer to check if the store has initialized
   if (!project || !projectRef) return null
 
   return (

apps/studio/state/storage-explorer.tsx

@@ -1758,14 +1758,11 @@ export const StorageExplorerStateContextProvider = ({ children }: PropsWithChild
     const isDifferentProject = snap.projectRef !== project?.ref
     const isDifferentResumableUploadUrl = snap.resumableUploadUrl !== resumableUploadUrl
 
-    if (
-      !isPaused &&
-      hasDataReady &&
-      (isDifferentProject || isDifferentResumableUploadUrl) &&
-      serviceKey
-    ) {
+    const serviceApiKey = serviceKey?.api_key ?? 'unknown'
+
+    if (!isPaused && hasDataReady && (isDifferentProject || isDifferentResumableUploadUrl)) {
       const clientEndpoint = `${IS_PLATFORM ? 'https' : protocol}://${endpoint}`
-      const supabaseClient = createClient(clientEndpoint, serviceKey.api_key, {
+      const supabaseClient = createClient(clientEndpoint, serviceApiKey, {
         auth: {
           persistSession: false,
           autoRefreshToken: false,
@@ -1785,11 +1782,11 @@ export const StorageExplorerStateContextProvider = ({ children }: PropsWithChild
           projectRef: project?.ref ?? '',
           supabaseClient,
           resumableUploadUrl,
-          serviceKey: serviceKey.api_key,
+          serviceKey: serviceApiKey,
         })
       )
     }
-  }, [project?.ref, stateRef, serviceKey, isPaused, protocol, endpoint])
+  }, [project?.ref, stateRef, serviceKey?.api_key, isPaused, protocol, endpoint])
 
   return (
     <StorageExplorerStateContext.Provider value={state}>