Add support for esc key when editing item in storage explorer

Author: joshenlim

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

@@ -47,10 +47,16 @@ const ConfirmDeleteModal: FC<Props> = ({
       onCancel={onSelectCancel}
       customFooter={
         <div className="flex items-center gap-2">
-          <Button type="default" onClick={onSelectCancel}>
+          <Button type="default" disabled={deleting} onClick={onSelectCancel}>
             Cancel
           </Button>
-          <Button type="primary" danger loading={deleting} onClick={onConfirmDelete}>
+          <Button
+            type="primary"
+            danger
+            disabled={deleting}
+            loading={deleting}
+            onClick={onConfirmDelete}
+          >
             {deleting ? 'Deleting' : 'Delete'}
           </Button>
         </div>

studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRowEditing.tsx

@@ -17,21 +17,35 @@ const FileExplorerRowEditing = ({ item, view, columnIndex }: FileExplorerRowEdit
   const inputRef = useRef<any>(null)
   const [itemName, setItemName] = useState(item.name)
 
-  const onSetItemName = async (event: any) => {
-    event.preventDefault()
-    event.stopPropagation()
+  const onSaveItemName = async (name: string, event?: any) => {
+    if (event) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
     if (item.type === STORAGE_ROW_TYPES.FILE) {
-      await renameFile(item, itemName, columnIndex)
+      await renameFile(item, name, columnIndex)
     } else if (has(item, 'id')) {
       const itemWithColumnIndex = { ...item, columnIndex }
-      renameFolder(itemWithColumnIndex, itemName, columnIndex)
+      renameFolder(itemWithColumnIndex, name, columnIndex)
     } else {
-      addNewFolder(itemName, columnIndex)
+      addNewFolder(name, columnIndex)
     }
   }
 
   useEffect(() => {
     if (inputRef.current) inputRef.current.select()
+
+    // [Joshen] Esc should revert changes
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        if (item?.id !== undefined) onSaveItemName(item.name)
+        else addNewFolder('', columnIndex)
+      }
+    }
+
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
   }, [])
 
   return (
@@ -45,17 +59,21 @@ const FileExplorerRowEditing = ({ item, view, columnIndex }: FileExplorerRowEdit
             mimeType={item.metadata?.mimetype}
           />
         </div>
-        <form className="h-9" onSubmit={onSetItemName}>
+        <form className="h-9" onSubmit={(event) => onSaveItemName(itemName, event)}>
           <input
             autoFocus
             ref={inputRef}
             className="storage-row-input ml-3 h-full bg-inherit p-0 px-1 text-sm"
             type="text"
             value={itemName}
             onChange={(event) => setItemName(event.target.value)}
-            onBlur={onSetItemName}
+            onBlur={(event) => onSaveItemName(itemName, event)}
+          />
+          <button
+            className="hidden"
+            type="submit"
+            onClick={(event) => onSaveItemName(itemName, event)}
           />
-          <button className="hidden" type="submit" onClick={onSetItemName} />
         </form>
       </div>
     </div>

studio/localStores/storageExplorer/StorageExplorerStore.js

@@ -1125,7 +1125,7 @@ class StorageExplorerStore {
 
   renameFile = async (file, newName, columnIndex) => {
     const originalName = file.name
-    if (originalName === newName) {
+    if (originalName === newName || newName.length === 0) {
       this.updateRowStatus(originalName, STORAGE_ROW_STATUS.READY, columnIndex)
     } else {
       this.updateRowStatus(originalName, STORAGE_ROW_STATUS.LOADING, columnIndex, newName)
@@ -1576,8 +1576,6 @@ class StorageExplorerStore {
   }
 
   addTempRow = (type, name, status, columnIndex, metadata = {}, isPrepend = false) => {
-    console.log('addTempRow', { type, name, status })
-
     const updatedColumns = this.columns.map((column, idx) => {
       if (idx === columnIndex) {
         const tempRow = { type, name, status, metadata }