Create new folder

apps/remix-ide/src/app/panels/file-panel.js

@@ -96,7 +96,7 @@ module.exports = class Filepanel extends ViewPlugin {
                   name='browser'
                   registry={this._components.registry}
                   files={this._deps.fileProviders.browser}
-                  menuItems={['createNewFile', 'publishToGist', canUpload ? 'uploadFile' : '']}
+                  menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '']}
                   plugin={this}
                 />
               </div>

libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx

@@ -4,7 +4,8 @@ import { FileExplorerContextMenuProps } from './types'
 import './css/file-explorer-context-menu.css'
 
 export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => {
-  const { actions, createNewFile, hideContextMenu, pageX, pageY, folder, ...otherProps } = props
+  const { actions, createNewFile, createNewFolder, hideContextMenu, pageX, pageY, folder, ...otherProps } = props
+  console.log('folder: ', folder)
   const contextMenuRef = useRef(null)
 
   useEffect(() => {
@@ -31,6 +32,8 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
         onClick={() => {
           if (item.name === 'New File') {
             createNewFile(folder)
+          } else if (item.name === 'New Folder') {
+            createNewFolder(folder)
           }
           hideContextMenu()
         }}>{item.name}</li>

libs/remix-ui/file-explorer/src/lib/file-explorer-menu.tsx

@@ -40,6 +40,11 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         title: 'Create New File',
         icon: 'far fa-file'
       },
+      {
+        action: 'createNewFolder',
+        title: 'Create New Folder',
+        icon: 'far fa-folder'
+      },
       {
         action: 'publishToGist',
         title: 'Publish all [browser] explorer files to a github gist',
@@ -47,8 +52,8 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
       },
       {
         action: 'uploadFile',
-        title: 'Add Local file to the Browser Storage Explorer',
-        icon: 'far fa-folder-open'
+        title: 'Upload Local files to the Browser Storage Explorer',
+        icon: 'fa fa-upload'
       },
       {
         action: 'updateGist',
@@ -245,6 +250,8 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                   e.stopPropagation()
                   if (action === 'createNewFile') {
                     props.createNewFile()
+                  } else if (action === 'createNewFolder') {
+                    props.createNewFolder()
                   } else if (action === 'publishToGist') {
                     publishToGist()
                   } else {

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -127,7 +127,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const createNewFile = (parentFolder?: string) => {
+    console.log('parentFolderBefore: ', parentFolder)
     if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
+    console.log('parentFolderAfter: ', parentFolder)
     // const self = this
     // modalDialogCustom.prompt('Create new file', 'File Name (e.g Untitled.sol)', 'Untitled.sol', (input) => {
     // if (!input) input = 'New file'
@@ -149,6 +151,33 @@ export const FileExplorer = (props: FileExplorerProps) => {
     // }, null, true)
   }
 
+  const createNewFolder = async (parentFolder?: string) => {
+    console.log('parentFolderBefore: ', parentFolder)
+    if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
+    else if (parentFolder.indexOf('.sol') !== -1) parentFolder = extractParentFromKey(parentFolder)
+    console.log('parentFolderAfter: ', parentFolder)
+    // const self = this
+    // modalDialogCustom.prompt('Create new folder', '', 'New folder', (input) => {
+    //   if (!input) {
+    //     return tooltip('Failed to create folder. The name can not be empty')
+    //   }
+
+    const fileManager = state.fileManager
+    const newFolderName = parentFolder + '/' + 'unnamed' + Math.floor(Math.random() * 101) // get filename from state (state.newFileName)
+    const dirName = newFolderName + '/'
+    // if (error) return tooltip('Unexpected error while creating folder: ' + error)
+    const exists = fileManager.exists(dirName)
+
+    if (exists) return
+    try {
+      await fileManager.mkdir(dirName)
+      addFolder(parentFolder, newFolderName)
+    } catch (e) {
+      // tooltip('Failed to create file ' + newName)
+    }
+    // }, null, true)
+  }
+
   const addFile = async (parentFolder: string, newFileName: string) => {
     if (parentFolder === name) {
       setState(prevState => {
@@ -166,7 +195,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
       const updatedFiles = await resolveDirectory(parentFolder, state.files)
 
       setState(prevState => {
-        return { ...prevState, files: [...updatedFiles], focusElement: [{ key: newFileName, type: 'file' }] }
+        return { ...prevState, files: updatedFiles, focusElement: [{ key: newFileName, type: 'file' }] }
       })
     }
     if (newFileName.includes('_test.sol')) {
@@ -174,6 +203,28 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  const addFolder = async (parentFolder: string, newFolderName: string) => {
+    if (parentFolder === name) {
+      setState(prevState => {
+        return {
+          ...prevState,
+          files: [{
+            path: newFolderName,
+            name: extractNameFromKey(newFolderName),
+            isDirectory: true
+          }, ...prevState.files],
+          focusElement: [{ key: newFolderName, type: 'folder' }]
+        }
+      })
+    } else {
+      const updatedFiles = await resolveDirectory(parentFolder, state.files)
+
+      setState(prevState => {
+        return { ...prevState, files: updatedFiles, focusElement: [{ key: newFolderName, type: 'folder' }] }
+      })
+    }
+  }
+
   // self._components = {}
   // self._components.registry = localRegistry || globalRegistry
   // self._deps = {
@@ -293,6 +344,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const handleContextMenuFolder = (pageX: number, pageY: number, path: string) => {
+    console.log('path: ', path)
     setState(prevState => {
       return { ...prevState, focusContext: { element: path, x: pageX, y: pageY } }
     })
@@ -324,6 +376,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                 }}
                 onContextMenu={(e) => {
                   e.preventDefault()
+                  e.stopPropagation()
                   handleContextMenuFolder(e.pageX, e.pageY, file.path)
                 }}
                 labelClass={ state.focusElement.findIndex(item => item.key === file.path) !== -1 ? 'bg-secondary' : '' }
@@ -344,6 +397,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                   actions={ state.actions.filter(item => item.type.findIndex(name => name === 'folder') !== -1) }
                   hideContextMenu={hideContextMenu}
                   createNewFile={createNewFile}
+                  createNewFolder={createNewFolder}
                   pageX={state.focusContext.x}
                   pageY={state.focusContext.y}
                   folder={file.path}
@@ -371,6 +425,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                 }}
                 onContextMenu={(e) => {
                   e.preventDefault()
+                  e.stopPropagation()
                   handleContextMenuFile(e.pageX, e.pageY, file.path)
                 }}
                 icon='fa fa-file'
@@ -381,6 +436,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                   actions={ state.actions.filter(item => item.type.findIndex(name => name === 'file') !== -1) }
                   hideContextMenu={hideContextMenu}
                   createNewFile={createNewFile}
+                  createNewFolder={createNewFolder}
                   pageX={state.focusContext.x}
                   pageY={state.focusContext.y}
                 />
@@ -417,6 +473,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               menuItems={props.menuItems}
               addFile={addFile}
               createNewFile={createNewFile}
+              createNewFolder={createNewFolder}
               files={props.files}
               fileManager={state.fileManager}
               accessToken={state.accessToken}

libs/remix-ui/file-explorer/src/lib/types/index.ts

@@ -18,15 +18,17 @@ export interface FileExplorerMenuProps {
     title: string,
     menuItems: string[],
     fileManager: any,
-    addFile: (parentFolder: string, fileName: string) => void,
+    addFile: (folder: string, fileName: string) => void,
     createNewFile: (folder?: string) => void,
+    createNewFolder: (parentFolder?: string) => void,
     files: any,
     accessToken: string
 }
 
 export interface FileExplorerContextMenuProps {
     actions: { name: string, type: string[] }[],
-    createNewFile: (folder?: string) => void
+    createNewFile: (folder?: string) => void,
+    createNewFolder: (parentFolder?: string) => void,
     hideContextMenu: () => void,
     pageX: number,
     pageY: number,