Mitigate race condition when fetching folder contents storage (supabase#36363)

* Mitigate race condition when fetching folder contents storage

* Fix

Author: joshenlim

apps/studio/components/to-be-cleaned/Storage/EmptyBucketModal.tsx

@@ -19,7 +19,12 @@ export const EmptyBucketModal = ({ visible = false, bucket, onClose }: EmptyBuck
   const { mutate: emptyBucket, isLoading } = useBucketEmptyMutation({
     onSuccess: async () => {
       if (bucket === undefined) return
-      await fetchFolderContents({ folderId: bucket.id, folderName: bucket.name, index: -1 })
+      await fetchFolderContents({
+        bucketId: bucket.id,
+        folderId: bucket.id,
+        folderName: bucket.name,
+        index: -1,
+      })
       toast.success(`Successfully deleted bucket ${bucket!.name}`)
       onClose()
     },

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

@@ -22,6 +22,7 @@ import type { ItemRenderer } from 'components/ui/InfiniteList'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
+import { toast } from 'sonner'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Checkbox,
@@ -50,6 +51,7 @@ import { StorageItem, StorageItemWithColumn } from '../Storage.types'
 import FileExplorerRowEditing from './FileExplorerRowEditing'
 import { copyPathToFolder, downloadFile } from './StorageExplorer.utils'
 import { useCopyUrl } from './useCopyUrl'
+import { useSelectedBucket } from './useSelectedBucket'
 
 export const RowIcon = ({
   view,
@@ -114,6 +116,7 @@ const FileExplorerRow: ItemRenderer<StorageItem, FileExplorerRowProps> = ({
   openedFolders = [],
 }) => {
   const { ref: projectRef, bucketId } = useParams()
+  const { bucket } = useSelectedBucket()
 
   const {
     selectedBucket,
@@ -152,11 +155,18 @@ const FileExplorerRow: ItemRenderer<StorageItem, FileExplorerRowProps> = ({
   }
 
   const onSelectFolder = async (columnIndex: number, folder: StorageItem) => {
+    if (!bucket) return toast.error('Unable to retrieve bucket details')
+
     setSelectedFilePreview(undefined)
     clearSelectedItems(columnIndex + 1)
     popOpenedFoldersAtIndex(columnIndex - 1)
     pushOpenedFolderAtIndex(folder, columnIndex)
-    await fetchFolderContents({ folderId: folder.id, folderName: folder.name, index: columnIndex })
+    await fetchFolderContents({
+      bucketId: bucket.id,
+      folderId: folder.id,
+      folderName: folder.name,
+      index: columnIndex,
+    })
   }
 
   const onCheckItem = (isShiftKeyHeld: boolean) => {

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

@@ -67,13 +67,15 @@ const StorageExplorer = ({ bucket }: StorageExplorerProps) => {
           if (!currentFolder) {
             // At root of bucket
             await fetchFolderContents({
+              bucketId: bucket.id,
               folderId: bucket.id,
               folderName: bucket.name,
               index: -1,
               searchString: itemSearchString,
             })
           } else {
             await fetchFolderContents({
+              bucketId: bucket.id,
               folderId: currentFolder.id,
               folderName: currentFolder.name,
               index: currentFolderIdx,
@@ -83,18 +85,33 @@ const StorageExplorer = ({ bucket }: StorageExplorerProps) => {
         } else {
           if (!currentFolder) {
             // At root of bucket
-            await fetchFolderContents({ folderId: bucket.id, folderName: bucket.name, index: -1 })
+            await fetchFolderContents({
+              bucketId: bucket.id,
+              folderId: bucket.id,
+              folderName: bucket.name,
+              index: -1,
+            })
           } else {
             await fetchFolderContents({
+              bucketId: bucket.id,
               folderId: currentFolder.id,
               folderName: currentFolder.name,
               index: currentFolderIdx,
             })
           }
         }
       } else if (view === STORAGE_VIEWS.COLUMNS) {
-        const paths = openedFolders.map((folder) => folder.name)
-        fetchFoldersByPath({ paths, searchString: itemSearchString, showLoading: true })
+        if (openedFolders.length > 0) {
+          const paths = openedFolders.map((folder) => folder.name)
+          fetchFoldersByPath({ paths, searchString: itemSearchString, showLoading: true })
+        } else {
+          await fetchFolderContents({
+            bucketId: bucket.id,
+            folderId: bucket.id,
+            folderName: bucket.name,
+            index: -1,
+          })
+        }
       }
     }
 

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/useSelectedBucket.ts

@@ -0,0 +1,11 @@
+import { useParams } from 'common'
+import { useBucketsQuery } from 'data/storage/buckets-query'
+
+export const useSelectedBucket = () => {
+  const { ref, bucketId } = useParams()
+
+  const { data: buckets = [], isSuccess, isError, error } = useBucketsQuery({ projectRef: ref })
+  const bucket = buckets.find((b) => b.id === bucketId)
+
+  return { bucket, isSuccess, isError, error }
+}

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

@@ -1,23 +1,19 @@
 import { useParams } from 'common'
-import { find } from 'lodash'
 
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import StorageBucketsError from 'components/layouts/StorageLayout/StorageBucketsError'
 import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import { StorageExplorer } from 'components/to-be-cleaned/Storage'
-import { useBucketsQuery } from 'data/storage/buckets-query'
+import { useSelectedBucket } from 'components/to-be-cleaned/Storage/StorageExplorer/useSelectedBucket'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import type { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => {
-  const { ref, bucketId } = useParams()
+  const { bucketId } = useParams()
   const { project } = useProjectContext()
   const { projectRef } = useStorageExplorerStateSnapshot()
-
-  const { data, isSuccess, isError, error } = useBucketsQuery({ projectRef: ref })
-  const buckets = data ?? []
-  const bucket = find(buckets, { id: bucketId })
+  const { bucket, error, isSuccess, isError } = useSelectedBucket()
 
   if (!project || !projectRef) return null
 

apps/studio/state/storage-explorer.tsx

@@ -34,7 +34,6 @@ import { InlineLink } from 'components/ui/InlineLink'
 import { configKeys } from 'data/config/keys'
 import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { ProjectStorageConfigResponse } from 'data/config/project-storage-config-query'
-import type { Project } from 'data/projects/project-detail-query'
 import { getQueryClient } from 'data/query-client'
 import { deleteBucketObject } from 'data/storage/bucket-object-delete-mutation'
 import { downloadBucketObject } from 'data/storage/bucket-object-download-mutation'
@@ -208,12 +207,6 @@ function createStorageExplorerState({
       localStorage.setItem(localStorageKey, JSON.stringify({ view, sortBy, sortByOrder }))
     },
 
-    openBucket: async (bucket: Bucket) => {
-      const { id, name } = bucket
-      state.setSelectedBucket(bucket)
-      await state.fetchFolderContents({ folderId: id, folderName: name, index: -1 })
-    },
-
     // Functions that manage the UI of the Storage Explorer
 
     getLatestColumnIndex: () => {
@@ -226,6 +219,17 @@ function createStorageExplorerState({
       })
     },
 
+    openBucket: async (bucket: Bucket) => {
+      const { id, name } = bucket
+      state.setSelectedBucket(bucket)
+      await state.fetchFolderContents({
+        bucketId: bucket.id,
+        folderId: id,
+        folderName: name,
+        index: -1,
+      })
+    },
+
     // ======== Folders CRUD ========
 
     getPathAlongOpenedFolders: (includeBucket = true) => {
@@ -305,11 +309,13 @@ function createStorageExplorerState({
     },
 
     fetchFolderContents: async ({
+      bucketId,
       folderId,
       folderName,
       index,
       searchString,
     }: {
+      bucketId: string
       folderId: string | null
       folderName: string
       index: number
@@ -340,8 +346,8 @@ function createStorageExplorerState({
       try {
         const data = await listBucketObjects(
           {
+            bucketId,
             projectRef: state.projectRef,
-            bucketId: state.selectedBucket.id,
             path: prefix,
             options,
           },