Revert "fix: storage view is not reset when switching buckets" (#43539)

Reverts supabase/supabase#43370

apps/studio/components/interfaces/Storage/StorageExplorer/StorageExplorer.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 
 import { useStaticEffectEvent } from '@/hooks/useStaticEffectEvent'
 import { useDebounce } from '@uidotdev/usehooks'
+import { useParams } from 'common'
 import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
 import type { Bucket } from 'data/storage/buckets-query'
 import { useLatest } from 'hooks/misc/useLatest'
@@ -19,9 +20,9 @@ import { MoveItemsModal } from './MoveItemsModal'
 import { PreviewPane } from './PreviewPane'
 
 export const StorageExplorer = () => {
+  const { ref, bucketId } = useParams()
   const storageExplorerRef = useRef(null)
   const {
-    bucketId,
     projectRef,
     view,
     columns,
@@ -43,7 +44,7 @@ export const StorageExplorer = () => {
     setSelectedItemsToMove,
   } = useStorageExplorerStateSnapshot()
 
-  useProjectStorageConfigQuery({ projectRef }, { enabled: IS_PLATFORM })
+  useProjectStorageConfigQuery({ projectRef: ref }, { enabled: IS_PLATFORM })
   const { data: bucket, isLoading: isBucketQueryLoading } = useSelectedBucket()
 
   // Detect when transitioning between buckets to avoid showing stale content from the previous bucket.
@@ -90,15 +91,14 @@ export const StorageExplorer = () => {
       }
     }
   })
-
   useEffect(() => {
     if (bucket && projectRef) fetchContents(bucket)
-  }, [bucketId, bucket, projectRef, debouncedSearchString, fetchContents])
+  }, [bucket, projectRef, debouncedSearchString, fetchContents])
 
   const openBucketRef = useLatest(openBucket)
   useEffect(() => {
     if (bucket && !!projectRef) openBucketRef.current(bucket)
-  }, [bucketId, bucket, projectRef, openBucketRef])
+  }, [bucket, projectRef, openBucketRef])
 
   /** Checkbox selection methods */
   /** [Joshen] We'll only support checkbox selection for files ONLY */

apps/studio/state/storage-explorer.tsx

@@ -1,7 +1,7 @@
 import { BlobReader, BlobWriter, ZipWriter } from '@zip.js/zip.js'
 import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'common'
 import { capitalize, chunk, compact, find, findIndex, has, isObject, uniq, uniqBy } from 'lodash'
-import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react'
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
 import { useLatest } from 'react-use'
 import { toast } from 'sonner'
 import * as tus from 'tus-js-client'
@@ -50,7 +50,6 @@ import { tryParseJson } from '@/lib/helpers'
 import { lookupMime } from '@/lib/mime'
 import { createProjectSupabaseClient } from '@/lib/project-supabase-client'
 import { ResponseError } from '@/types'
-import { useSelectedBucket } from '@/components/interfaces/Storage/FilesBuckets/useSelectedBucket'
 
 type UploadProgress = {
   percentage: number
@@ -83,13 +82,11 @@ function createStorageExplorerState({
   connectionString,
   resumableUploadUrl,
   clientEndpoint,
-  bucketId,
 }: {
   projectRef: string
   connectionString: string
   resumableUploadUrl: string
   clientEndpoint: string
-  bucketId?: string
 }) {
   const localStorageKey = LOCAL_STORAGE_KEYS.STORAGE_PREFERENCE(projectRef)
   const { view, sortBy, sortByOrder, sortBucket } =
@@ -98,7 +95,6 @@ function createStorageExplorerState({
 
   const state = proxy({
     projectRef,
-    bucketId,
     connectionString,
     resumableUploadUrl,
     uploadProgresses: [] as UploadProgress[],
@@ -1868,13 +1864,10 @@ const StorageExplorerStateContext = createContext<StorageExplorerState>(
 
 export const StorageExplorerStateContextProvider = ({ children }: PropsWithChildren) => {
   const { data: project } = useSelectedProjectQuery()
-  const { data: bucket } = useSelectedBucket()
-
   const isPaused = project?.status === PROJECT_STATUS.INACTIVE
 
   const [state, setState] = useState(() => createStorageExplorerState(DEFAULT_STATE_CONFIG))
   const stateRef = useLatest(state)
-  const bucketRef = useRef(bucket?.id)
 
   const {
     storageEndpoint,
@@ -1890,20 +1883,13 @@ export const StorageExplorerStateContextProvider = ({ children }: PropsWithChild
   useEffect(() => {
     const hasDataReady = !!project?.ref
     const storeAlreadyLoaded = state.projectRef === project?.ref
-    const hasBucketChanged = bucket?.id !== bucketRef.current
 
-    if (
-      !isPaused &&
-      hasDataReady &&
-      isSuccessSettings &&
-      (!storeAlreadyLoaded || hasBucketChanged)
-    ) {
+    if (!isPaused && hasDataReady && !storeAlreadyLoaded && isSuccessSettings) {
       const clientEndpoint = storageEndpoint ?? hostEndpoint ?? ''
       const resumableUploadUrl = `${clientEndpoint}/storage/v1/upload/resumable`
       setState(
         createStorageExplorerState({
           projectRef: project?.ref ?? '',
-          bucketId: bucket?.id,
           connectionString: project.connectionString ?? '',
           resumableUploadUrl,
           clientEndpoint,
@@ -1911,7 +1897,6 @@ export const StorageExplorerStateContextProvider = ({ children }: PropsWithChild
       )
     }
   }, [
-    bucket?.id,
     state.projectRef,
     project?.ref,
     project?.connectionString,

e2e/studio/features/storage.spec.ts

@@ -1,7 +1,8 @@
-import path from 'path'
 import { expect } from '@playwright/test'
-
+import path from 'path'
 import { env } from '../env.config.js'
+import { test } from '../utils/test.js'
+import { waitForApiResponse } from '../utils/wait-for-response.js'
 import {
   createBucket,
   createFolder,
@@ -17,8 +18,6 @@ import {
   createBucket as createBucketViaApi,
   deleteBucket as deleteBucketViaApi,
 } from '../utils/storage/index.js'
-import { test } from '../utils/test.js'
-import { waitForApiResponse } from '../utils/wait-for-response.js'
 
 const bucketNamePrefix = 'pw_bucket'
 
@@ -292,34 +291,6 @@ test.describe('Storage', () => {
     ).toBeVisible()
   })
 
-  test('resets storage view when switching buckets', async ({ page, ref }) => {
-    const bucketName = `${bucketNamePrefix}_navigation`
-    const bucketName2 = `${bucketNamePrefix}2_navigation`
-    const folderName = 'folder_navigation'
-    const fileName = 'test-file.txt'
-
-    // Create 2 bucket via API, navigate to the first
-    await deleteBucketViaApi(bucketName)
-    await deleteBucketViaApi(bucketName2)
-    await createBucketViaApi(bucketName, false)
-    await createBucketViaApi(bucketName2, false)
-    await navigateToStorageFiles(page, ref)
-    await navigateToBucket(page, ref, bucketName)
-
-    // create a folder and add a file
-    await createFolder(page, folderName)
-    // Open the folder
-    await page.getByTitle(folderName).click()
-    const filePath = path.join(import.meta.dirname, 'files', fileName)
-    await uploadFile(page, filePath, fileName)
-
-    // Navigate to bucket list
-    await page.getByRole('link', { name: 'Files' }).nth(1).click()
-    // Navigate to the 2nd bucket
-    await navigateToBucket(page, ref, bucketName2)
-    await expect(page.getByTitle(fileName)).not.toBeVisible()
-  })
-
   test('can delete a file', async ({ page, ref }) => {
     const bucketName = `${bucketNamePrefix}_delete_file`
     const fileName = 'test-file.txt'