Fix modal conflict

apps/remix-ide/src/app/ui/modaldialog.js

@@ -6,10 +6,10 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
   let agreed = true
   let footerIsActive = false
   opts = opts || {}
-  var container = document.querySelector('.modal')
+  var container = document.getElementById('modal-dialog')
   if (!container) {
     document.querySelector('body').appendChild(html(opts))
-    container = document.querySelector('.modal')
+    container = document.getElementById('modal-dialog')
     incomingModal = false
   } else incomingModal = true
 
@@ -24,8 +24,8 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
   cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel'
   cancelDiv.style.display = cancelDiv.innerHTML === '' ? 'none' : 'inline-block'
 
-  var modal = document.querySelector('.modal-body')
+  var modal = document.getElementById('modal-body-id')
-  var modalTitle = document.querySelector('.modal-header h6')
+  var modalTitle = document.getElementById('modal-title-h6')
 
   modalTitle.innerHTML = ''
   if (title) modalTitle.innerText = title
@@ -134,12 +134,12 @@ function html (opts) {
     <div id="modal-background" class="modal-dialog" role="document">
       <div class="modal-content ${css.modalContent} ${opts.class}">
         <div class="modal-header">
-          <h6 class="modal-title" data-id="modalDialogModalTitle"></h6>
+          <h6 id="modal-title-h6" class="modal-title" data-id="modalDialogModalTitle"></h6>
           <span class="modal-close">
             <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
           </span>
         </div>
-        <div class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
+        <div id="modal-body-id" class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div>
         <div class="modal-footer" data-id="modalDialogModalFooter" autofocus>
           <span id="modal-footer-ok" class="${css.modalFooterOk} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
           <span id="modal-footer-cancel" class="${css.modalFooterCancel} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>

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

@@ -85,13 +85,15 @@ export const FileExplorer = (props: FileExplorerProps) => {
       setState(prevState => {
         return { ...prevState, fileManager, accessToken, files, actions }
       })
-
-      if (props.filesProvider) {
-        props.filesProvider.event.register('fileAdded', fileAdded)
-      }
     })()
   }, [])
 
+  useEffect(() => {
+    if (state.fileManager) {
+      props.filesProvider.event.register('fileAdded', fileAdded)
+    }
+  }, [state.fileManager])
+
   const resolveDirectory = async (folderPath, dir: File[]): Promise<File[]> => {
     dir = await Promise.all(dir.map(async (file) => {
       if (file.path === folderPath) {
@@ -267,7 +269,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
-  const addFile = async (parentFolder: string, newFilePath: string, files?: File[]) => {
+  const addFile = async (parentFolder: string, newFilePath: string) => {
     if (parentFolder === name) {
       setState(prevState => {
         return {
@@ -281,7 +283,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
         }
       })
     } else {
-      const updatedFiles = await resolveDirectory(parentFolder, files || state.files)
+      const updatedFiles = await resolveDirectory(parentFolder, state.files)
 
       setState(prevState => {
         return { ...prevState, files: updatedFiles, focusElement: [{ key: newFilePath, type: 'file' }] }
@@ -290,6 +292,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     if (newFilePath.includes('_test.sol')) {
       plugin.events.trigger('newTestFileCreated', [newFilePath])
     }
+    state.fileManager.open(newFilePath)
   }
 
   const addEmptyFile = (parentFolder: string, files: File[]): File[] => {
@@ -432,10 +435,46 @@ export const FileExplorer = (props: FileExplorerProps) => {
   // })
 
   const fileAdded = async (filePath: string) => {
-    const parentFolder = extractParentFromKey(filePath)
+    const pathArr = filePath.split('/')
+    const hasChild = pathArr.length > 2
+
+    if (hasChild) {
+      const expandPath = pathArr.map((path, index) => {
+        return [...pathArr.slice(0, index)].join('/')
+      }).filter(path => path && (path !== name))
+
+      if (state.files.findIndex(item => item.path === expandPath[0]) === -1) {
+        const dir = buildTree(expandPath)
+        let files = [dir, ...state.files]
+
+        await Promise.all(expandPath.map(async path => {
+          files = await resolveDirectory(path, files)
+        }))
+        setState(prevState => {
+          return { ...prevState, files, expandPath: [...state.expandPath, ...expandPath] }
+        })
+      } else {
+        if (state.expandPath.findIndex(path => path === expandPath[expandPath.length - 1]) !== -1) return
+        const dir = state.files.find(item => item.path === expandPath[0])
+        let files = [{
+          ...dir,
+          child: [...(await fetchDirectoryContent(dir.path))]
+        }, ...state.files.filter(item => item.path !== expandPath[0])]
+
+        await Promise.all(expandPath.map(async path => {
+          files = await resolveDirectory(path, files)
+        }))
+        const updatedPath = [state.expandPath.filter(key => key && (typeof key === 'string') && !key.startsWith(expandPath[0]))]
 
-    addFile(parentFolder, filePath)
+        setState(prevState => {
-    await state.fileManager.open(filePath)
+          return { ...prevState, files, expandPath: [...updatedPath, ...expandPath] }
+        })
+      }
+    } else {
+      const parentFolder = extractParentFromKey(filePath)
+
+      addFile(parentFolder, filePath)
+    }
   }
 
   // props.filesProvider.event.register('folderAdded', async (folderpath: string) => {
@@ -681,8 +720,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
         <div key={index}>
           <TreeViewItem
             id={`treeViewItem${file.path}`}
-            iconX='pr-3 fa fa-folder text-info'
+            iconX='pr-3 far fa-folder'
-            iconY='pr-3 fa fa-folder-open text-info'
+            iconY='pr-3 far fa-folder-open'
             key={`${file.path + index}`}
             label={label(file)}
             onClick={(e) => {

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -42,7 +42,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
 
   return (
     <div
-      id="modal-dialog"
       data-id="modalDialogContainer"
       data-backdrop="static"
       data-keyboard="false"
@@ -50,7 +49,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
       style={{ display: props.hide ? 'none' : 'block' }}
       role="dialog"
     >
-      <div id="modal-background" className="modal-dialog" role="document">
+      <div className="modal-dialog" role="document">
         <div
           onBlur={(e) => {
             e.stopPropagation()
@@ -67,7 +66,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
             </h6>
             {!props.showCancelIcon &&
             <span className="modal-close" onClick={() => handleHide()}>
-              <i id="modal-close" title="Close" className="fas fa-times" aria-hidden="true"></i>
+              <i title="Close" className="fas fa-times" aria-hidden="true"></i>
             </span>
             }
           </div>
@@ -78,7 +77,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
             {/* todo add autofocus ^^ */}
             { props.ok &&
               <span
-                id="modal-footer-ok"
                 className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
                 onClick={() => {
                   if (props.ok.fn) props.ok.fn()
@@ -90,7 +88,6 @@ export const ModalDialog = (props: ModalDialogProps) => {
             }
             { props.cancel &&
               <span
-                id="modal-footer-cancel"
                 className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
                 data-dismiss="modal"
                 onClick={() => {