Fixed workspace and url e2e test

apps/remix-ide-e2e/src/tests/workspace.test.ts

@@ -19,7 +19,7 @@ module.exports = {
     browser
       .pause(5000)
       .refresh()
-      .pause(5000)
+      .pause(10000)
       .getEditorValue((content) => {
         browser.assert.ok(content.indexOf('contract Ballot {') !== -1, 'content doesn\'t include Ballot contract')
       })

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

@@ -58,7 +58,7 @@ module.exports = class Filepanel extends ViewPlugin {
   }
 
   onActivation () {
-    this.on('editor', 'editorMounted', () => this.renderComponent())
+    this.renderComponent()
   }
 
   render () {

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { extractNameFromKey, createNonClashingNameAsync } from '@remix-ui/helper'
 import Gists from 'gists'
 import { customAction } from '@remixproject/plugin-api/lib/file-system/file-panel/type'
-import { displayNotification, displayPopUp, fetchDirectoryError, fetchDirectoryRequest, fetchDirectorySuccess, focusElement, hidePopUp, removeInputFieldSuccess, setCurrentWorkspace, setExpandPath, setMode, setWorkspaces } from './payload'
+import { displayNotification, displayPopUp, fetchDirectoryError, fetchDirectoryRequest, fetchDirectorySuccess, focusElement, fsInitializationCompleted, hidePopUp, removeInputFieldSuccess, setCurrentWorkspace, setExpandPath, setMode, setWorkspaces } from './payload'
 import { listenOnPluginEvents, listenOnProviderEvents } from './events'
 import { createWorkspaceTemplate, getWorkspaces, loadWorkspacePreset, setPlugin } from './workspace'
 
@@ -34,7 +34,8 @@ export const initWorkspace = (filePanelPlugin) => async (reducerDispatch: React.
       await createWorkspaceTemplate('code-sample', 'code-template')
       plugin.setWorkspace({ name: 'code-sample', isLocalhost: false })
       dispatch(setCurrentWorkspace('code-sample'))
-      await loadWorkspacePreset('code-template')
+      const filePath = await loadWorkspacePreset('code-template')
+      plugin.on('editor', 'editorMounted', () => plugin.fileManager.openFile(filePath))
     } else {
       if (workspaces.length === 0) {
         await createWorkspaceTemplate('default_workspace', 'default-template')
@@ -55,6 +56,7 @@ export const initWorkspace = (filePanelPlugin) => async (reducerDispatch: React.
     listenOnProviderEvents(localhostProvider)(dispatch)
     dispatch(setMode('browser'))
     plugin.setWorkspaces(await getWorkspaces())
+    dispatch(fsInitializationCompleted())
     plugin.emit('workspaceInitializationCompleted')
   }
 }

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

@@ -226,3 +226,9 @@ export const loadLocalhostSuccess = () => {
     type: 'LOAD_LOCALHOST_SUCCESS'
   }
 }
+
+export const fsInitializationCompleted = () => {
+  return {
+    type: 'FS_INITIALIZATION_COMPLETED'
+  }
+}

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

@@ -84,21 +84,16 @@ export const loadWorkspacePreset = async (template: 'gist-template' | 'code-temp
 
           path = 'contract-' + hash.replace('0x', '').substring(0, 10) + '.sol'
           content = atob(params.code)
-          workspaceProvider.set(path, content, async (error) => {
-            if (error) throw new Error(error)
-            await plugin.fileManager.openFile(path)
-          })
+          workspaceProvider.set(path, content)
         }
         if (params.url) {
           const data = await plugin.call('contentImport', 'resolve', params.url)
 
           path = data.cleanUrl
           content = data.content
-          workspaceProvider.set(path, content, async (error) => {
-            if (error) throw new Error(error)
-            await plugin.fileManager.openFile(path)
-          })
+          workspaceProvider.set(path, content)
         }
+        return path
       } catch (e) {
         console.error(e)
       }

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

@@ -116,6 +116,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
   }
 
   useEffect(() => {
+    dispatchInitWorkspace()
+  }, [])
+
+  useEffect(() => {
     if (modals.length > 0) {
       setFocusModal(() => {
         const focusModal = {
@@ -215,7 +219,8 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
   }
   return (
     <FileSystemContext.Provider value={value}>
-      <Workspace />
+      { fs.initializingFS && <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div> }
+      { !fs.initializingFS && <Workspace /> }
       <ModalDialog id='fileSystem' { ...focusModal } handleHide={ handleHideModal } />
       <Toaster message={focusToaster} handleHide={handleToaster} />
     </FileSystemContext.Provider>

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

@@ -49,7 +49,8 @@ export interface BrowserState {
   readonly: boolean,
   popup: string,
   focusEdit: string,
-  focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[]
+  focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[],
+  initializingFS: boolean
 }
 
 export const browserInitialState: BrowserState = {
@@ -96,7 +97,8 @@ export const browserInitialState: BrowserState = {
   readonly: false,
   popup: '',
   focusEdit: '',
-  focusElement: []
+  focusElement: [],
+  initializingFS: true
 }
 
 export const browserReducer = (state = browserInitialState, action: Action) => {
@@ -580,6 +582,13 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
       }
     }
 
+    case 'FS_INITIALIZATION_COMPLETED': {
+      return {
+        ...state,
+        initializingFS: false
+      }
+    }
+
     default:
       throw new Error()
   }

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

@@ -14,7 +14,6 @@ export function Workspace () {
   const workspaceCreateInput = useRef()
 
   useEffect(() => {
-    global.dispatchInitWorkspace()
     resetFocus()
   }, [])