Validate against empty name in FileExplorerRowEditing.tsx (#42093)

* Validate against empty name in FileExplorerRowEditing.tsx

* Update test

* Fix

* Opt to revert changes if saving empty string

* Nit

* Attempt to write tests with claude

* Trim whitespace in FileExplorerRowEditing when saving

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

@@ -17,7 +17,6 @@ import {
 import { useContextMenu } from 'react-contexify'
 import SVG from 'react-inlinesvg'
 
-import { useParams } from 'common'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
@@ -115,8 +114,6 @@ export const FileExplorerRow = ({
   selectedItems = [],
   style,
 }: FileExplorerRowProps) => {
-  const { bucketId } = useParams()
-
   const {
     selectedBucket,
     selectedFilePreview,

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

@@ -101,7 +101,10 @@ export const FileExplorerRowEditing = ({
             mimeType={item.metadata?.mimetype}
           />
         </div>
-        <form className="h-9" onSubmit={(event) => onSaveItemName(itemName, event)}>
+        <form
+          className="h-9"
+          onSubmit={(event) => onSaveItemName(itemName.trim() || item.name, event)}
+        >
           <input
             autoFocus
             ref={inputRef}
@@ -109,12 +112,12 @@ export const FileExplorerRowEditing = ({
             type="text"
             value={itemName}
             onChange={(event) => setItemName(event.target.value)}
-            onBlur={(event) => onSaveItemName(itemName, event)}
+            onBlur={(event) => onSaveItemName(itemName.trim() || item.name, event)}
           />
           <button
             className="hidden"
             type="submit"
-            onClick={(event) => onSaveItemName(itemName, event)}
+            onClick={(event) => onSaveItemName(itemName.trim() || item.name, event)}
           />
         </form>
       </div>

apps/studio/state/storage-explorer.tsx

@@ -716,7 +716,7 @@ function createStorageExplorerState({
           })
         }
 
-        if (state.openedFolders[columnIndex].name === folder.name) {
+        if (state.openedFolders[columnIndex]?.name === folder.name) {
           state.setSelectedFilePreview(undefined)
           state.popOpenedFoldersAtIndex(columnIndex - 1)
         }

e2e/studio/features/storage.spec.ts

@@ -209,6 +209,71 @@ test.describe.serial('Storage', () => {
     await renameItem(page, folderName, newFolderName)
   })
 
+  test('resets folder name when renaming with empty string', async ({ page, ref }) => {
+    const bucketName = `${bucketNamePrefix}_rename_folder_empty`
+    const folderName = 'folder_to_rename'
+
+    // Create a bucket, navigate to it, and create a folder
+    await createBucket(page, ref, bucketName, false)
+    await navigateToBucket(page, ref, bucketName)
+    await createFolder(page, folderName)
+
+    // Right-click on the folder to open context menu
+    const folder = page.getByTitle(folderName)
+    await expect(folder, `Folder ${folderName} should be visible`).toBeVisible()
+    await folder.click({ button: 'right' })
+
+    // Click rename option from context menu
+    await page.getByRole('menuitem', { name: 'Rename' }).click()
+
+    // Clear the input and press Enter with empty name
+    const nameInput = page.getByRole('textbox')
+    await expect(nameInput, 'Rename input should be visible').toBeVisible()
+    await nameInput.clear()
+    await nameInput.press('Enter')
+
+    // Verify the input disappears (edit mode exits)
+    await expect(nameInput, 'Input should disappear after pressing Enter').not.toBeVisible()
+
+    // Verify the folder name is reset to original
+    await expect(
+      page.getByTitle(folderName),
+      'Folder should retain its original name'
+    ).toBeVisible()
+  })
+
+  test('resets folder name when clicking outside with empty string', async ({ page, ref }) => {
+    const bucketName = `${bucketNamePrefix}_rename_folder_blur`
+    const folderName = 'folder_to_blur'
+
+    // Create a bucket, navigate to it, and create a folder
+    await createBucket(page, ref, bucketName, false)
+    await navigateToBucket(page, ref, bucketName)
+    await createFolder(page, folderName)
+
+    // Right-click on the folder to open context menu
+    const folder = page.getByTitle(folderName)
+    await expect(folder, `Folder ${folderName} should be visible`).toBeVisible()
+    await folder.click({ button: 'right' })
+
+    // Click rename option from context menu
+    await page.getByRole('menuitem', { name: 'Rename' }).click()
+
+    // Clear the input and click outside to blur
+    const nameInput = page.getByRole('textbox')
+    await expect(nameInput, 'Rename input should be visible').toBeVisible()
+    await nameInput.clear()
+
+    // Click outside the input to trigger blur
+    await page.getByRole('button', { name: 'Edit bucket' }).click()
+
+    // Verify the folder name is reset to original
+    await expect(
+      page.getByTitle(folderName),
+      'Folder should retain its original name after blur'
+    ).toBeVisible()
+  })
+
   test('can delete a file', async ({ page, ref }) => {
     const bucketName = `${bucketNamePrefix}_delete_file`
     const fileName = 'test-file.txt'