fixes for FE

apps/remix-ide-e2e/src/commands/hideToolTips.ts

@@ -5,7 +5,6 @@ class HideToolTips extends EventEmitter {
   command(this: NightwatchBrowser) {
     browser
       .perform((done) => {
-        //if (hideToolTips) {
         browser.execute(function () {
           // hide tooltips
           function addStyle(styleString) {

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

@@ -250,6 +250,8 @@ module.exports = class Filepanel extends ViewPlugin {
 
   isExpanded(path) {
     if(path === '/') return true
+    // remove leading slash
+    path = path.replace(/^\/+/, '')
     return this.expandPath.includes(path)
   }
 

libs/remix-ui/workspace/src/lib/actions/index.ts

@@ -276,8 +276,9 @@ export const createNewFile = async (path: string, rootDir: string) => {
   if (!createFile) {
     return dispatch(displayPopUp('Failed to create file ' + newName))
   } else {
-    const path = newName.indexOf(rootDir + '/') === 0 ? newName.replace(rootDir + '/', '') : newName
-
+    let path = newName.indexOf(rootDir + '/') === 0 ? newName.replace(rootDir + '/', '') : newName
+    // remove leading slash
+    path = path.indexOf('/') === 0 ? path.slice(1) : path
     await fileManager.open(path)
     setFocusElement([{ key: path, type: 'file' }])
   }
@@ -297,6 +298,8 @@ export const createNewFolder = async (path: string, rootDir: string) => {
   }
   await fileManager.mkdir(dirName)
   path = path.indexOf(rootDir + '/') === 0 ? path.replace(rootDir + '/', '') : path
+  // remove leading slash
+  path = path.indexOf('/') === 0 ? path.slice(1) : path
   dispatch(focusElement([{ key: path, type: 'folder' }]))
 }
 

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -27,7 +27,7 @@ export default function useOnScreen(ref: RefObject<HTMLElement>) {
 
 interface FlatTreeProps {
   files: { [x: string]: Record<string, FileType> },
-  flatTree: { [x: string]: FileType },
+  flatTree: FileType[],
   expandPath: string[],
   focusEdit: { element: string; type: string; isNew: boolean; lastEdit: string }
   editModeOff: (content: string) => void
@@ -202,9 +202,8 @@ export const FlatTree = (props: FlatTreeProps) => {
 
   useEffect(() => {
     if (focusEdit && focusEdit.element) {
-
-      const index = flatTree[focusEdit.element] && Object.keys(flatTree).indexOf(focusEdit.element)
-      flatTree[focusEdit.element] && virtuoso.current.scrollIntoView({
+      const index = flatTree.findIndex((item) => item.path === focusEdit.element)
+      index && virtuoso.current.scrollIntoView({
         index,
         align: 'center'
       })

libs/remix-ui/workspace/src/lib/reducers/workspace.ts

@@ -19,7 +19,7 @@ export interface BrowserState {
       currentBranch?: string
     }[]
     files: {[x: string]: Record<string, FileType>}
-    flatTree: {[x: string]: FileType}
+    flatTree: FileType[]
     expandPath: string[]
     isRequestingDirectory: boolean
     isSuccessfulDirectory: boolean
@@ -40,7 +40,7 @@ export interface BrowserState {
   localhost: {
     sharedFolder: string
     files: {[x: string]: Record<string, FileType>}
-    flatTree: {[x: string]: FileType}
+    flatTree: FileType[]
     expandPath: string[]
     isRequestingDirectory: boolean
     isSuccessfulDirectory: boolean
@@ -76,7 +76,7 @@ export const browserInitialState: BrowserState = {
     currentWorkspace: '',
     workspaces: [],
     files: {},
-    flatTree: {},
+    flatTree: [],
     expandPath: [],
     isRequestingDirectory: false,
     isSuccessfulDirectory: false,
@@ -97,7 +97,7 @@ export const browserInitialState: BrowserState = {
   localhost: {
     sharedFolder: '',
     files: {},
-    flatTree: {},
+    flatTree: [],
     expandPath: [],
     isRequestingDirectory: false,
     isSuccessfulDirectory: false,
@@ -461,7 +461,7 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
               : state.localhost.files,
         flatTree: state.mode === 'localhost' ? flatTree : state.localhost.flatTree,
       },
-      focusEdit: payload.path + '/' + 'blank'
+      focusEdit: payload.path + '/' + '....blank'
     }
   }
 
@@ -891,21 +891,27 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
 }
 
 const flattenTree = (files, expandPath: string[]) =>{
-  const flatTree = {}
+  const flatTree = []
   const mapChild = (file: FileType) => {
 
-    if(!file || !file.path) return
+    if (!file || !file.path) return
 
-    flatTree[file.path] = file
-    expandPath && expandPath.find((path) => path.startsWith(file.path)) &&
-      file.child && Object.keys(file.child).map((key) => {
-      mapChild(file.child[key])
+    flatTree.push(file)
+    
+    if (file.isDirectory && file.child && expandPath && expandPath.find((path) => path === file.path || path.startsWith(file.path + '/')) ) {
+        const sorted = fileKeySort(file.child)
+        Object.keys(sorted).map((key) => {
+          mapChild(sorted[key])
+        })
+    }
+  }
+  if(files){
+    const sorted = fileKeySort(files[ROOT_PATH])
+    Object.keys(sorted).map((key) => {
+      mapChild(sorted[key])
     })
   }
-  files && files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key) => {
-
-    mapChild(files[ROOT_PATH][key])
-  })
+  
   return flatTree
 }
 
@@ -930,13 +936,12 @@ const fileAdded = (
     Object
   )
   const prevFiles = _.get(files, childPath)
-  const sortedFiles = fileKeySort(prevFiles)
   
   files = _.setWith(
     files,
     childPath,
     {
-      ...sortedFiles
+      ...prevFiles
     },
     Object
   )
@@ -964,7 +969,7 @@ const removeInputField = (
     state.mode === 'browser' ? state.browser.files : state.localhost.files
   const root = ROOT_PATH
   if (path === root) {
-    delete files[root][path + '/' + 'blank']
+    delete files[root][path + '/' + '....blank']
     return files
   }
   const _path = splitPath(state, path)
@@ -972,8 +977,8 @@ const removeInputField = (
 
   if (prevFiles) {
     prevFiles.child &&
-      prevFiles.child[path + '/' + 'blank'] &&
-      delete prevFiles.child[path + '/' + 'blank']
+      prevFiles.child[path + '/' + '....blank'] &&
+      delete prevFiles.child[path + '/' + '....blank']
     files = _.setWith(
       files,
       _path,
@@ -1002,7 +1007,6 @@ const fetchDirectoryContent = (
     return state.mode === 'browser'
       ? state.browser.files
       : state[state.mode].files
-  payload.fileTree = fileKeySort(payload.fileTree)
   if (state.mode === 'browser') {
     if (payload.path === ROOT_PATH) {
       let files = normalize(payload.fileTree, ROOT_PATH, payload.type)
@@ -1030,7 +1034,7 @@ const fetchDirectoryContent = (
           prevFiles.child
         )
         if (deletePath) {
-          if (deletePath.endsWith('/blank')) delete prevFiles.child[deletePath]
+          if (deletePath.endsWith('/....blank')) delete prevFiles.child[deletePath]
           else {
             deletePath = extractNameFromKey(deletePath)
             delete prevFiles.child[deletePath]
@@ -1065,7 +1069,7 @@ const fetchDirectoryContent = (
           prevFiles.child
         )
         if (deletePath) {
-          if (deletePath.endsWith('/blank')) delete prevFiles.child[deletePath]
+          if (deletePath.endsWith('/....blank')) delete prevFiles.child[deletePath]
           else {
             deletePath = extractNameFromKey(deletePath)
             delete prevFiles.child[deletePath]
@@ -1090,7 +1094,6 @@ const fetchWorkspaceDirectoryContent = (
   state: BrowserState,
   payload: {fileTree; path: string}
 ): {[x: string]: Record<string, FileType>} => {
-  payload.fileTree = fileKeySort(payload.fileTree)
   const files = normalize(payload.fileTree, ROOT_PATH)
 
   return {[ROOT_PATH]: files}
@@ -1128,7 +1131,7 @@ const normalize = (
   })
 
   if (newInputType === 'folder') {
-    const path = directory + '/blank'
+    const path = directory + '/....blank'
 
     folders[path] = {
       path: path,
@@ -1137,7 +1140,7 @@ const normalize = (
       type: 'folder'
     }
   } else if (newInputType === 'file') {
-    const path = directory + '/blank'
+    const path = directory + '/....blank'
 
     files[path] = {
       path: path,

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -645,7 +645,7 @@ export function Workspace() {
 
     await global.dispatchAddInputField(parentFolder, 'file')
     global.dispatchHandleExpandPath(expandPath)
-    editModeOn(parentFolder + '/blank', 'file', true)
+    editModeOn(parentFolder + '/....blank', 'file', true)
   }
 
   const handleNewFolderInput = async (parentFolder?: string) => {
@@ -655,7 +655,7 @@ export function Workspace() {
 
     await global.dispatchAddInputField(parentFolder, 'folder')
     global.dispatchHandleExpandPath(expandPath)
-    editModeOn(parentFolder + '/blank', 'folder', true)
+    editModeOn(parentFolder + '/....blank', 'folder', true)
   }
 
   const toggleDropdown = (isOpen: boolean) => {

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -85,7 +85,7 @@ export interface FileExplorerProps {
     contextMenuItems: MenuItems,
     removedContextMenuItems: MenuItems,
     files: { [x: string]: Record<string, FileType> },
-    flatTree: {[x: string]: FileType},
+    flatTree: FileType[],
     workspaceState: WorkSpaceState,
     fileState: fileDecoration[],
     expandPath: string[],

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -30,7 +30,7 @@ export const contextMenuActions: MenuItems = [{
   multiselect: false,
   label: '',
   group: 0
-},{
+}, {
   id: 'deleteAll',
   name: 'Delete All',
   type: ['folder', 'file'],
@@ -73,7 +73,7 @@ export const contextMenuActions: MenuItems = [{
   multiselect: false,
   label: '',
   group: 3
-},{
+}, {
   id: 'pushChangesToGist',
   name: 'Push changes to gist',
   type: ['gist'],
@@ -125,23 +125,24 @@ export const contextMenuActions: MenuItems = [{
 }]
 
 export const fileKeySort = (fileTree: any) => {
-  const directories = Object.keys(fileTree).filter((key: string) => fileTree[key].isDirectory)
+  const directories = Object.keys(fileTree).filter((key: string) => !key.includes('....blank') && fileTree[key].isDirectory)
 
-  // sort case insensitive
   directories.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
 
-  const fileKeys = Object.keys(fileTree).filter((key: string) => !fileTree[key].isDirectory)
-  // sort case insensitive
-  fileKeys.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
+  const fileKeys = Object.keys(fileTree).filter((key: string) => !key.includes('....blank') && !fileTree[key].isDirectory)
 
-  // find the children with a blank name
-  //const blankChildren = Object.keys(children).filter((key: string) => children[key].name === '')
+  fileKeys.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
+  // find the input elementfileTree
 
+  const blank = Object.keys(fileTree).find((key: string) => key.includes('....blank'))
+  if (fileTree[blank]) {
+    fileKeys.push(blank)
+  }
   const keys = [...directories, ...fileKeys]
   // rebuild the fileTree using the keys
-  const newFileTree = {}
+  const newFileTree: FileType[] = []
   keys.forEach((key: string) => {
-    newFileTree[key] = fileTree[key]
+    newFileTree.push(fileTree[key])
   })
   return newFileTree
 }