Fix renaming a folder not working

studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js

@@ -85,6 +85,7 @@ const FileExplorerRow = ({
   onSelectItemRename = () => {},
   onSelectItemMove = () => {},
 }) => {
+  const itemWithColumnIndex = { ...item, columnIndex }
   const isSelected = find(selectedItems, item) !== undefined
   const isOpened =
     openedFolders.length > columnIndex ? isEqual(openedFolders[columnIndex], item) : false
@@ -102,10 +103,11 @@ const FileExplorerRow = ({
 
     const onSetItemName = (event) => {
       event.preventDefault()
+      event.stopPropagation()
       if (item.type === STORAGE_ROW_TYPES.FILE) {
         onRenameFile(item, itemName, columnIndex)
       } else if (has(item, 'id')) {
-        onRenameFolder(item, itemName, columnIndex)
+        onRenameFolder(itemWithColumnIndex, itemName, columnIndex)
       } else {
         onCreateFolder(itemName, columnIndex)
       }
@@ -139,7 +141,6 @@ const FileExplorerRow = ({
     )
   }
 
-  const itemWithColumnIndex = { ...item, columnIndex }
   const rowOptions =
     item.type === STORAGE_ROW_TYPES.BUCKET
       ? [{ name: 'Delete', onClick: () => onSelectItemDelete(itemWithColumnIndex) }]

studio/localStores/storageExplorer/StorageExplorerStore.js

@@ -1158,6 +1158,7 @@ class StorageExplorerStore {
     const files = await this.getAllItemsAlongFolder(folder)
     await this.deleteFiles(files, isDeleteFolder)
 
+    console.log('deleteFolder', folder, this.openedFolders)
     const parentFolderPrefix = this.openedFolders.map((folder) => folder.name).join('/')
     if (parentFolderPrefix.length > 0) {
       await this.validateParentFolderEmpty(parentFolderPrefix)
@@ -1173,6 +1174,10 @@ class StorageExplorerStore {
 
   renameFolder = async (folder, newName, columnIndex) => {
     const originalName = folder.name
+    if (originalName === newName) {
+      return this.updateRowStatus(originalName, STORAGE_ROW_STATUS.READY, columnIndex)
+    }
+
     const toastId = this.ui.setNotification({
       category: 'loading',
       message: `Renaming folder to ${newName}`,
@@ -1196,76 +1201,72 @@ class StorageExplorerStore {
       })
     }
 
-    if (originalName === newName) {
-      this.updateRowStatus(originalName, STORAGE_ROW_STATUS.READY, columnIndex)
-    } else {
-      this.updateRowStatus(originalName, STORAGE_ROW_STATUS.LOADING, columnIndex, newName)
-      const files = await this.getAllItemsAlongFolder(folder)
+    this.updateRowStatus(originalName, STORAGE_ROW_STATUS.LOADING, columnIndex, newName)
+    const files = await this.getAllItemsAlongFolder(folder)
 
-      let hasErrors = false
-      // Make this batched promises into a reusable function for storage, i think this will be super helpful
-      const promises = files.map((file) => {
-        const fromPath = `${file.prefix}/${file.name}`
-        const pathSegments = fromPath.split('/')
-        const toPath = pathSegments
-          .slice(0, columnIndex)
-          .concat(newName)
-          .concat(pathSegments.slice(columnIndex + 1))
-          .join('/')
-        return () => {
-          return new Promise(async (resolve) => {
-            const { error } = await this.supabaseClient.storage
-              .from(this.selectedBucket.name)
-              .move(fromPath, toPath)
-            if (error) {
-              hasErrors = true
-              this.ui.setNotification({
-                message: `Failed to move ${fromPath} to the new folder`,
-                category: 'error',
-              })
-            }
-            resolve()
-          })
-        }
-      })
+    let hasErrors = false
+    // Make this batched promises into a reusable function for storage, i think this will be super helpful
+    const promises = files.map((file) => {
+      const fromPath = `${file.prefix}/${file.name}`
+      const pathSegments = fromPath.split('/')
+      const toPath = pathSegments
+        .slice(0, columnIndex)
+        .concat(newName)
+        .concat(pathSegments.slice(columnIndex + 1))
+        .join('/')
+      return () => {
+        return new Promise(async (resolve) => {
+          const { error } = await this.supabaseClient.storage
+            .from(this.selectedBucket.name)
+            .move(fromPath, toPath)
+          if (error) {
+            hasErrors = true
+            this.ui.setNotification({
+              message: `Failed to move ${fromPath} to the new folder`,
+              category: 'error',
+            })
+          }
+          resolve()
+        })
+      }
+    })
 
-      const batchedPromises = chunk(promises, BATCH_SIZE)
-      // [Joshen] I realised this can be simplified with just a vanilla for loop, no need for reduce
-      // Just take note, but if it's working fine, then it's okay
-      try {
-        await batchedPromises.reduce(async (previousPromise, nextBatch) => {
-          await previousPromise
-          await Promise.all(nextBatch.map((batch) => batch()))
-        }, Promise.resolve())
+    const batchedPromises = chunk(promises, BATCH_SIZE)
+    // [Joshen] I realised this can be simplified with just a vanilla for loop, no need for reduce
+    // Just take note, but if it's working fine, then it's okay
+    try {
+      await batchedPromises.reduce(async (previousPromise, nextBatch) => {
+        await previousPromise
+        await Promise.all(nextBatch.map((batch) => batch()))
+      }, Promise.resolve())
 
-        if (!hasErrors) {
-          this.ui.setNotification({
-            id: toastId,
-            message: `Successfully renamed folder to ${newName}`,
-            category: 'success',
-          })
-        } else {
-          this.ui.setNotification({
-            id: toastId,
-            message: `Renamed folder to ${newName} with some errors`,
-            category: 'error',
-          })
-        }
-        await this.refetchAllOpenedFolders()
-
-        // Clear file preview cache if the moved file exists in the cache
-        const fileIds = files.map((file) => file.id)
-        const updatedFilePreviewCache = this.filePreviewCache.filter(
-          (fileCache) => !fileIds.includes(fileCache.id)
-        )
-        this.filePreviewCache = updatedFilePreviewCache
-      } catch (e) {
+      if (!hasErrors) {
         this.ui.setNotification({
           id: toastId,
-          message: `Failed to rename folder to ${newName}`,
+          message: `Successfully renamed folder to ${newName}`,
+          category: 'success',
+        })
+      } else {
+        this.ui.setNotification({
+          id: toastId,
+          message: `Renamed folder to ${newName} with some errors`,
           category: 'error',
         })
       }
+      await this.refetchAllOpenedFolders()
+
+      // Clear file preview cache if the moved file exists in the cache
+      const fileIds = files.map((file) => file.id)
+      const updatedFilePreviewCache = this.filePreviewCache.filter(
+        (fileCache) => !fileIds.includes(fileCache.id)
+      )
+      this.filePreviewCache = updatedFilePreviewCache
+    } catch (e) {
+      this.ui.setNotification({
+        id: toastId,
+        message: `Failed to rename folder to ${newName}`,
+        category: 'error',
+      })
     }
     toast.dismiss(infoToastId)
   }