Fix remixd tests

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

@@ -34,13 +34,19 @@ function removeFile (browser: NightwatchBrowser, path: string, done: VoidFunctio
     contextMenuClick(document.querySelector('[data-path="' + path + '"]'))
   }, [path], function () {
     browser
-      .waitForElementVisible('#menuitemdelete', 2000)
+      .waitForElementVisible('#menuitemdelete')
       .click('#menuitemdelete')
-      .pause(500)
-      .waitForElementVisible('#modal-footer-ok', 2000)
-      .click('#modal-footer-ok')
-      .waitForElementNotPresent('[data-path="' + path + '"]')
+      .pause(2000)
       .perform(() => {
+        if (path.indexOf('browser') !== -1) {
+          browser.waitForElementVisible('[data-id="browser-modal-footer-ok-react"]')
+            .click('[data-id="browser-modal-footer-ok-react"]')
+            .waitForElementNotPresent('[data-path="' + path + '"]')
+        } else if (path.indexOf('localhost') !== -1) {
+          browser.waitForElementVisible('[data-id="localhost-modal-footer-ok-react"]')
+            .click('[data-id="localhost-modal-footer-ok-react"]')
+            .waitForElementNotPresent('[data-path="' + path + '"]')
+        }
         done()
       })
   })

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

@@ -39,7 +39,7 @@ module.exports = {
     .waitForElementVisible('*[data-id="treeViewLitreeViewItembrowser/5_Renamed_Contract.sol"]')
     .rightClick('[data-path="browser/5_Renamed_Contract.sol"]')
     .click('*[id="menuitemdelete"]')
-    .waitForElementVisible('*[data-id="modalDialogContainer-react"]')
+    .waitForElementVisible('*[data-id="browserModalDialogContainer-react"]')
     .pause(2000)
     .click('.modal-ok')
     .waitForElementNotPresent('*[data-id="treeViewLitreeViewItembrowser/5_Renamed_Contract.sol"')
@@ -67,7 +67,7 @@ module.exports = {
     .waitForElementVisible('*[data-id="treeViewLitreeViewItembrowser/Browser_E2E_Tests"]')
     .rightClick('[data-path="browser/Browser_E2E_Tests"]')
     .click('*[id="menuitemdelete"]')
-    .waitForElementVisible('*[data-id="modalDialogContainer-react"]')
+    .waitForElementVisible('*[data-id="browserModalDialogContainer-react"]')
     .pause(2000)
     .click('.modal-ok')
     .waitForElementNotPresent('*[data-id="treeViewLitreeViewItembrowser/Browser_E2E_Tests"]')
@@ -80,11 +80,11 @@ module.exports = {
     .pause(10000)
     .waitForElementVisible('*[data-id="fileExplorerNewFilepublishToGist"]')
     .click('*[data-id="fileExplorerNewFilepublishToGist"]')
-    .waitForElementVisible('*[data-id="modalDialogContainer-react"]')
+    .waitForElementVisible('*[data-id="browserModalDialogContainer-react"]')
     .pause(2000)
     .click('.modal-ok')
     .pause(2000)
-    .waitForElementVisible('*[data-id="modalDialogContainer-react"]')
+    .waitForElementVisible('*[data-id="browserModalDialogContainer-react"]')
     .pause(2000)
     .click('.modal-ok')
     .pause(2000)

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

@@ -34,11 +34,11 @@ module.exports = {
     .waitForElementVisible('*[data-id="treeViewLitreeViewItembrowser/Browser_Tests"]')
     .addFile('File.sol', { content: '' }, false)
     .click('*[data-id="fileExplorerNewFilepublishToGist"]')
-    .waitForElementVisible('*[data-id="modalDialogContainer-react"]')
+    .waitForElementVisible('*[data-id="browserModalDialogContainer-react"]')
     .pause(2000)
     .click('.modal-ok')
     .pause(10000)
-    .getText('[data-id="modalDialogModalBody-react"]', (result) => {
+    .getText('[data-id="browserModalDialogModalBody-react"]', (result) => {
       console.log(result)
       const value = typeof result.value === 'string' ? result.value : null
       const reg = /gist.github.com\/([^.]+)/
@@ -50,7 +50,7 @@ module.exports = {
       } else {
         const gistid = id[1]
         browser
-          .click('[data-id="modal-footer-cancel-react"]')
+          .click('[data-id="browser-modal-footer-ok-react"]')
           .executeScript(`remix.loadgist('${gistid}')`)
           .perform((done) => { if (runtimeBrowser === 'chrome') { browser.openFile('browser/gists') } done() })
           .waitForElementVisible(`[data-id="treeViewLitreeViewItembrowser/gists/${gistid}"]`)

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

@@ -903,14 +903,17 @@ export const FileExplorer = (props: FileExplorerProps) => {
           </div>
         </TreeViewItem>
       </TreeView>
-      <ModalDialog
-        title={ state.modalOptions.title }
-        message={ state.modalOptions.message }
-        hide={ state.modalOptions.hide }
-        ok={ state.modalOptions.ok }
-        cancel={ state.modalOptions.cancel }
-        handleHide={ handleHideModal }
-      />
+      {
+        props.name && <ModalDialog
+          id={ props.name }
+          title={ state.modalOptions.title }
+          message={ state.modalOptions.message }
+          hide={ state.modalOptions.hide }
+          ok={ state.modalOptions.ok }
+          cancel={ state.modalOptions.cancel }
+          handleHide={ handleHideModal }
+        />
+      }
       <Toaster message={state.toasterMsg} />
     </div>
   )

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

@@ -42,7 +42,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
 
   return (
     <div
-      data-id="modalDialogContainer-react"
+      data-id={`${props.id}ModalDialogContainer-react`}
       data-backdrop="static"
       data-keyboard="false"
       className='modal'
@@ -61,7 +61,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
           onKeyDown={({ keyCode }) => { modalKeyEvent(keyCode) }}
         >
           <div className="modal-header">
-            <h6 className="modal-title" data-id="modalDialogModalTitle-react">
+            <h6 className="modal-title" data-id={`${props.id}ModalDialogModalTitle-react`}>
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon &&
@@ -70,13 +70,14 @@ export const ModalDialog = (props: ModalDialogProps) => {
             </span>
             }
           </div>
-          <div className="modal-body text-break remixModalBody" data-id="modalDialogModalBody-react">
+          <div className="modal-body text-break remixModalBody" data-id={`${props.id}ModalDialogModalBody-react`}>
             { props.children ? props.children : props.message }
           </div>
-          <div className="modal-footer" data-id="modalDialogModalFooter-react">
+          <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
             { props.ok &&
               <span
+                data-id={`${props.id}-modal-footer-ok-react`}
                 className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
                 onClick={() => {
                   if (props.ok.fn) props.ok.fn()
@@ -88,7 +89,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
             }
             { props.cancel &&
               <span
-                data-id='modal-footer-cancel-react'
+                data-id={`${props.id}-modal-footer-cancel-react`}
                 className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
                 data-dismiss="modal"
                 onClick={() => {

libs/remix-ui/modal-dialog/src/lib/types/index.ts

 export interface ModalDialogProps {
+  id?: string
   title?: string,
   message?: string,
   ok?: { label: string, fn: () => void },