Add progress percentage indication for deleting files and improve toast loader for storage upload and delete files

Author: joshenlim

studio/components/interfaces/App/PortalToast.tsx

@@ -15,7 +15,7 @@ const PortalToast = () => (
       position="top-right"
       toastOptions={{
         className:
-          'bg-bg-primary-light dark:bg-bg-primary-dark text-typography-body-strong-light dark:text-typography-body-strong-dark border dark:border-dark',
+          'bg-bg-primary-light dark:bg-bg-primary-dark text-typography-body-strong-light dark:text-typography-body-strong-dark border dark:border-dark !max-w-[380px]',
         style: {
           padding: '8px',
           paddingLeft: '16px',

studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -10,7 +10,7 @@ import ProjectDropdown from './ProjectDropdown'
 import FeedbackDropdown from './FeedbackDropdown'
 import HelpPopover from './HelpPopover'
 import NotificationsPopover from './NotificationsPopover'
-import { Badge } from 'ui'
+import { Badge, Button } from 'ui'
 import { getResourcesExceededLimits } from 'components/ui/OveragesBanner/OveragesBanner.utils'
 
 const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
@@ -91,6 +91,18 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
       </div>
       <div className="flex items-center space-x-2">
         {customHeaderComponents && customHeaderComponents}
+        <Button
+          onClick={() =>
+            ui.setNotification({
+              category: 'loading',
+              message: 'Uploading 24 files...',
+              description: "Please do not close the browser until it's completed",
+              progress: 50,
+            })
+          }
+        >
+          Click
+        </Button>
         {IS_PLATFORM && <HelpPopover />}
         {IS_PLATFORM && <FeedbackDropdown />}
         {IS_PLATFORM && <NotificationsPopover />}

studio/components/to-be-cleaned/Storage/StorageExplorer/ConfirmDeleteModal.js renamed to studio/components/to-be-cleaned/Storage/StorageExplorer/ConfirmDeleteModal.tsx

@@ -1,7 +1,14 @@
-import { useEffect, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { Modal, Button, Alert } from 'ui'
 
-const ConfirmDeleteModal = ({
+interface Props {
+  visible: boolean
+  selectedItemsToDelete: any[]
+  onSelectCancel: () => void
+  onSelectDelete: () => void
+}
+
+const ConfirmDeleteModal: FC<Props> = ({
   visible = false,
   selectedItemsToDelete = [],
   onSelectCancel = () => {},

studio/components/to-be-cleaned/Storage/index.js renamed to studio/components/to-be-cleaned/Storage/index.ts

@@ -49,7 +49,7 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
 
     autorun(() => {
       if (ui.notification) {
-        const { id, category, error, message, progress, duration } = ui.notification
+        const { id, category, error, message, description, progress, duration } = ui.notification
         const toastDuration = duration || 4000
         switch (category) {
           case 'info':
@@ -60,20 +60,20 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
             console.error('Error:', { error, message })
             return toast.error(message, { id, duration: duration || Infinity })
           case 'loading':
-            if (progress) {
+            if (progress !== undefined) {
               return toast.loading(
-                <div
-                  className="flex flex-col space-y-1"
-                  style={{ minWidth: '200px', maxWidth: '267px' }}
-                >
+                <div className="flex flex-col space-y-2" style={{ minWidth: '220px' }}>
                   <SparkBar
                     value={progress}
                     max={100}
                     type="horizontal"
-                    barClass="bg-green-500"
+                    barClass="bg-brand-900"
                     labelBottom={message}
                     labelTop={`${progress.toFixed(2)}%`}
                   />
+                  {description !== undefined && (
+                    <p className="text-xs text-scale-1100">{description}</p>
+                  )}
                 </div>,
                 { id }
               )

studio/hooks/misc/useStore.tsx

@@ -50,8 +50,10 @@ const LIMIT = 200
 const OFFSET = 0
 const DEFAULT_EXPIRY = 10 * 365 * 24 * 60 * 60 // in seconds, default to 1 year
 const PREVIEW_SIZE_LIMIT = 10000000 // 10MB
-const BATCH_SIZE = 10
+// const BATCH_SIZE = 10
+const BATCH_SIZE = 2
 const EMPTY_FOLDER_PLACEHOLDER_FILE_NAME = '.emptyFolderPlaceholder'
+const STORAGE_PROGRESS_INFO_TEXT = "Please do not close the browser until it's completed"
 
 class StorageExplorerStore {
   projectRef = ''
@@ -646,14 +648,14 @@ class StorageExplorerStore {
       .map((folder) => folder.name)
       .join('/')
 
-    const infoToastId = toast('Please do not close the browser until the upload is completed', {
-      duration: Infinity,
-    })
-    const toastId = toast.loading(
-      `Uploading ${formattedFilesToUpload.length} file${
+    const toastId = this.ui.setNotification({
+      category: 'loading',
+      message: `Uploading ${formattedFilesToUpload.length} file${
         formattedFilesToUpload.length > 1 ? 's' : ''
-      }`
-    )
+      }...`,
+      description: STORAGE_PROGRESS_INFO_TEXT,
+      progress: 0,
+    })
 
     // Upload files in batches
     const promises = formattedFilesToUpload.map((file) => {
@@ -722,12 +724,15 @@ class StorageExplorerStore {
       await batchedPromises.reduce(async (previousPromise, nextBatch) => {
         await previousPromise
         await Promise.allSettled(nextBatch.map((batch) => batch()))
-        toast.loading(
-          `Uploading ${formattedFilesToUpload.length} file${
+        this.ui.setNotification({
+          id: toastId,
+          category: 'loading',
+          message: `Uploading ${formattedFilesToUpload.length} file${
             formattedFilesToUpload.length > 1 ? 's' : ''
-          }... (${(this.uploadProgress * 100).toFixed(2)}%)`,
-          { id: toastId }
-        )
+          }...`,
+          description: STORAGE_PROGRESS_INFO_TEXT,
+          progress: this.uploadProgress * 100,
+        })
       }, Promise.resolve())
 
       if (numberOfFilesUploadedSuccess > 0) {
@@ -767,7 +772,6 @@ class StorageExplorerStore {
         category: 'error',
       })
     }
-    toast.dismiss(infoToastId)
 
     const t2 = new Date()
     console.log(
@@ -865,9 +869,7 @@ class StorageExplorerStore {
 
   deleteFiles = async (files, isDeleteFolder = false) => {
     this.closeFilePreview()
-    const infoToastId = toast('Please do not close the browser until the delete is completed', {
-      duration: Infinity,
-    })
+    let progress = 0
 
     // If every file has the 'prefix' property, then just construct the prefix
     // directly (from delete folder). Otherwise go by the opened folders.
@@ -887,18 +889,28 @@ class StorageExplorerStore {
 
     const toastId = this.ui.setNotification({
       category: 'loading',
-      message: `Deleting ${prefixes.length} file(s)`,
+      message: `Deleting ${prefixes.length} file(s)...`,
+      description: STORAGE_PROGRESS_INFO_TEXT,
+      progress: 0,
     })
 
     // batch BATCH_SIZE prefixes per request
     const batches = chunk(prefixes, BATCH_SIZE).map((batch) => () => {
+      progress = progress + batch.length / prefixes.length
       return this.supabaseClient.storage.from(this.selectedBucket.name).remove(batch)
     })
 
     // make BATCH_SIZE requests at the same time
     await chunk(batches, BATCH_SIZE).reduce(async (previousPromise, nextBatch) => {
       await previousPromise
       await Promise.all(nextBatch.map((batch) => batch()))
+      this.ui.setNotification({
+        id: toastId,
+        category: 'loading',
+        message: `Deleting ${prefixes.length} file(s)...`,
+        description: STORAGE_PROGRESS_INFO_TEXT,
+        progress: progress * 100,
+      })
     }, Promise.resolve())
 
     // Clear file preview cache if deleted files exist in cache
@@ -929,8 +941,6 @@ class StorageExplorerStore {
     } else {
       toast.dismiss(toastId)
     }
-
-    toast.dismiss(infoToastId)
   }
 
   downloadSelectedFiles = async () => {

studio/localStores/storageExplorer/StorageExplorerStore.js

@@ -553,7 +553,7 @@
 }
 
 .toast-message {
-  max-width: 258px;
+  max-width: 350px;
   div[role='status'] {
     @apply justify-start w-full break-words;
     word-break: break-word;

studio/styles/toast.scss

@@ -1,6 +1,7 @@
 export interface Notification {
   category: 'info' | 'error' | 'success' | 'loading'
   message: string // Readable message for users to understand
+  description?: string
   id?: string
   error?: any // Optional: Any other errors that needs to be logged out in the console
   progress?: number // Optional: For loading messages to show a progress bar (Out of 100)