diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js index 3deedb6faa9..04c1322adc2 100644 --- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js +++ b/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) }] diff --git a/studio/localStores/storageExplorer/StorageExplorerStore.js b/studio/localStores/storageExplorer/StorageExplorerStore.js index 93a00a3b945..2c27118dd59 100644 --- a/studio/localStores/storageExplorer/StorageExplorerStore.js +++ b/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) }