Fix: Use storage API for downloading files in the Dashboard (supabase#40592)

* added ability to download files from storage api directly

* updated to rechange size

* updated test methods

* updated test suite

* updated tests

* updated to remove loops

* removed AI slop

* Updated to use single API key in mem

* Fix the memoization of the getOrRefreshTempApiKey function.

* updated imports

* updated imports

* updated to use import meta

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

Author: awaseem

apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx

@@ -102,6 +102,7 @@ export const BucketTableRow = ({
   return (
     <BucketTableRow
       key={bucket.id}
+      data-bucket-id={bucket.id}
       className="relative cursor-pointer h-16 group inset-focus"
       onClick={(event) => handleBucketNavigation(bucket.id, event)}
       onKeyDown={(event) => {

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

@@ -1,19 +1,17 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Download, Move, Trash2, X } from 'lucide-react'
 
-import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import { Button } from 'ui'
-import { downloadFile } from './StorageExplorer.utils'
 
 export const FileExplorerHeaderSelection = () => {
-  const { ref: projectRef, bucketId } = useParams()
   const { can: canUpdateFiles } = useAsyncCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
 
   const {
     selectedItems,
+    downloadFile,
     downloadSelectedFiles,
     clearSelectedItems,
     setSelectedItemsToDelete,
@@ -37,7 +35,7 @@ export const FileExplorerHeaderSelection = () => {
           type="primary"
           onClick={async () => {
             if (selectedItems.length === 1) {
-              await downloadFile({ projectRef, bucketId, file: selectedItems[0] })
+              await downloadFile(selectedItems[0])
             } else {
               await downloadSelectedFiles(selectedItems)
             }

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

@@ -48,7 +48,7 @@ import {
 } from '../Storage.constants'
 import { StorageItemWithColumn, type StorageItem } from '../Storage.types'
 import { FileExplorerRowEditing } from './FileExplorerRowEditing'
-import { copyPathToFolder, downloadFile } from './StorageExplorer.utils'
+import { copyPathToFolder } from './StorageExplorer.utils'
 import { useCopyUrl } from './useCopyUrl'
 
 export const RowIcon = ({
@@ -115,7 +115,7 @@ export const FileExplorerRow = ({
   selectedItems = [],
   style,
 }: FileExplorerRowProps) => {
-  const { ref: projectRef, bucketId } = useParams()
+  const { bucketId } = useParams()
 
   const {
     selectedBucket,
@@ -128,6 +128,7 @@ export const FileExplorerRow = ({
     setSelectedFileCustomExpiry,
     setSelectedItems,
     setSelectedItemsToDelete,
+    downloadFile,
     setSelectedItemToRename,
     setSelectedItemsToMove,
     openFolder,
@@ -254,13 +255,7 @@ export const FileExplorerRow = ({
                       {
                         name: 'Download',
                         icon: <Download size={14} strokeWidth={1} />,
-                        onClick: async () => {
-                          await downloadFile({
-                            projectRef,
-                            bucketId,
-                            file: itemWithColumnIndex,
-                          })
-                        },
+                        onClick: () => downloadFile(itemWithColumnIndex),
                       },
                       { name: 'Separator', icon: undefined, onClick: undefined },
                     ]

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

@@ -8,15 +8,13 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import { URL_EXPIRY_DURATION } from '../Storage.constants'
 import { StorageItemWithColumn } from '../Storage.types'
-import { downloadFile } from './StorageExplorer.utils'
 import { useCopyUrl } from './useCopyUrl'
 
 interface ItemContextMenuProps {
   id: string
 }
 
 export const ItemContextMenu = ({ id = '' }: ItemContextMenuProps) => {
-  const { ref: projectRef, bucketId } = useParams()
   const snap = useStorageExplorerStateSnapshot()
   const { setSelectedFileCustomExpiry } = snap
 
@@ -25,6 +23,7 @@ export const ItemContextMenu = ({ id = '' }: ItemContextMenuProps) => {
     setSelectedItemsToDelete,
     setSelectedItemToRename,
     setSelectedItemsToMove,
+    downloadFile,
   } = useStorageExplorerStateSnapshot()
   const { onCopyUrl } = useCopyUrl()
   const isPublic = selectedBucket.public
@@ -41,7 +40,7 @@ export const ItemContextMenu = ({ id = '' }: ItemContextMenuProps) => {
       case 'move':
         return setSelectedItemsToMove([item])
       case 'download':
-        return await downloadFile({ projectRef, bucketId, file: item })
+        return await downloadFile(item)
       default:
         break
     }

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

@@ -19,7 +19,6 @@ import {
 } from 'ui'
 import { URL_EXPIRY_DURATION } from '../Storage.constants'
 import { StorageItem } from '../Storage.types'
-import { downloadFile } from './StorageExplorer.utils'
 import { useCopyUrl } from './useCopyUrl'
 import { useFetchFileUrlQuery } from './useFetchFileUrlQuery'
 
@@ -116,14 +115,13 @@ const PreviewFile = ({ item }: { item: StorageItem }) => {
 }
 
 export const PreviewPane = () => {
-  const { ref: projectRef, bucketId } = useParams()
-
   const {
     selectedBucket,
     selectedFilePreview: file,
     setSelectedItemsToDelete,
     setSelectedFilePreview,
     setSelectedFileCustomExpiry,
+    downloadFile,
   } = useStorageExplorerStateSnapshot()
   const { onCopyUrl } = useCopyUrl()
 
@@ -204,7 +202,7 @@ export const PreviewPane = () => {
               type="default"
               icon={<Download />}
               disabled={file.isCorrupted}
-              onClick={async () => await downloadFile({ projectRef, bucketId, file })}
+              onClick={() => downloadFile(file)}
             >
               Download
             </Button>

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

@@ -1,10 +1,9 @@
 import { toast } from 'sonner'
 
-import { downloadBucketObject } from 'data/storage/bucket-object-download-mutation'
 import { StorageObject } from 'data/storage/bucket-objects-list-mutation'
-import { SONNER_DEFAULT_DURATION, copyToClipboard } from 'ui'
+import { copyToClipboard } from 'ui'
 import { STORAGE_ROW_STATUS, STORAGE_ROW_TYPES } from '../Storage.constants'
-import { StorageItem, StorageItemMetadata, StorageItemWithColumn } from '../Storage.types'
+import { StorageItem, StorageItemMetadata } from '../Storage.types'
 
 type UploadProgress = {
   percentage: number
@@ -17,7 +16,10 @@ type UploadProgress = {
 const CORRUPTED_THRESHOLD_MS = 15 * 60 * 1000 // 15 minutes
 export const EMPTY_FOLDER_PLACEHOLDER_FILE_NAME = '.emptyFolderPlaceholder'
 
-export const copyPathToFolder = (openedFolders: StorageItem[], item: StorageItemWithColumn) => {
+export const copyPathToFolder = (
+  openedFolders: StorageItem[],
+  item: StorageItem & { columnIndex: number }
+) => {
   const folders = openedFolders.slice(0, item.columnIndex).map((folder) => folder.name)
   const path = folders.length > 0 ? `${folders.join('/')}/${item.name}` : item.name
   copyToClipboard(path)
@@ -38,67 +40,6 @@ export const formatTime = (seconds: number) => {
   return `${seconds}s`
 }
 
-export const downloadFile = async ({
-  projectRef,
-  bucketId,
-  file,
-  showToast = true,
-  returnBlob = false,
-}: {
-  projectRef?: string
-  bucketId?: string
-  file: StorageItemWithColumn
-  showToast?: boolean
-  returnBlob?: boolean
-}) => {
-  if (!projectRef) return toast.error('Failed to download: Project ref is required')
-  if (!bucketId) return toast.error('Failed to download: Bucket ID is required')
-  if (!file.path) return toast.error('Failed to download: Unable to find path to file')
-
-  const fileName: string = file.name
-  const fileMimeType = file?.metadata?.mimetype ?? undefined
-
-  const toastId = showToast ? toast.loading(`Retrieving ${fileName}...`) : undefined
-
-  try {
-    const data = await downloadBucketObject({
-      projectRef,
-      bucketId,
-      path: file.path,
-    })
-
-    const blob = await data.blob()
-    const newBlob = new Blob([blob], { type: fileMimeType })
-    if (returnBlob) return { name: fileName, blob: newBlob }
-
-    const blobUrl = window.URL.createObjectURL(newBlob)
-    const link = document.createElement('a')
-    link.href = blobUrl
-    link.setAttribute('download', `${fileName}`)
-    document.body.appendChild(link)
-    link.click()
-    link.parentNode?.removeChild(link)
-    window.URL.revokeObjectURL(blob)
-    if (toastId) {
-      toast.success(`Downloading ${fileName}`, {
-        id: toastId,
-        closeButton: true,
-        duration: SONNER_DEFAULT_DURATION,
-      })
-    }
-    return true
-  } catch (err) {
-    if (toastId) {
-      toast.error(`Failed to download ${fileName}`, {
-        id: toastId,
-        closeButton: true,
-        duration: SONNER_DEFAULT_DURATION,
-      })
-    }
-    return false
-  }
-}
-
 export const calculateTotalRemainingTime = (progresses: UploadProgress[]) => {
   let totalRemainingTime = 0
   let totalRemainingBytes = 0