fix e2e and modal behavior

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

@@ -76,11 +76,11 @@ module.exports = {
       .waitForElementVisible('button[data-id="landingPageImportFromGistButton"]')
       .pause(1000)
       .scrollAndClick('button[data-id="landingPageImportFromGistButton"]')
-      .waitForElementVisible('*[data-id="modalDialogModalTitle"]')
-      .assert.containsText('*[data-id="modalDialogModalTitle"]', 'Load a Gist')
-      .waitForElementVisible('*[data-id="modalDialogModalBody"]')
-      .assert.containsText('*[data-id="modalDialogModalBody"]', 'Enter the ID of the Gist or URL you would like to load.')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalTitle-react"]')
+      .assert.containsText('*[data-id="gisthandlerModalDialogModalTitle-react"]', 'Load a Gist')
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Enter the ID of the Gist or URL you would like to load.')
+      .waitForElementVisible('*[data-id="modalDialogCustomPromp"]')
       .modalFooterCancelClick()
   },
 
@@ -89,11 +89,11 @@ module.exports = {
       .waitForElementVisible('*[data-id="remixIdeIconPanel"]', 10000)
       .clickLaunchIcon('filePanel')
       .scrollAndClick('*[data-id="landingPageImportFromGistButton"]')
-      .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
-      .setValue('*[data-id="modalDialogCustomPromptText"]', testData.invalidGistId)
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]')
+      .setValue('*[data-id="gisthandlerModalDialogModalBody-react"] input[data-id="modalDialogCustomPromp"]', testData.invalidGistId)
       .modalFooterOKClick()
-      .waitForElementVisible('*[data-id="modalDialogModalBody"]')
-      .assert.containsText('*[data-id="modalDialogModalBody"]', 'Not Found')
+      .waitForElementVisible('*[data-id="gisthandlerModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="gisthandlerModalDialogModalBody-react"]', 'Not Found')
       .modalFooterOKClick()
   },
 

libs/remix-core-plugin/src/lib/gist-handler.ts

@@ -24,20 +24,29 @@ export class GistHandler extends Plugin {
     var loadingFromGist = false
     if (!gistId) {
       loadingFromGist = true
-      const value = await (() => {
-        return new Promise((resolve, reject) => {
-          const modalContent = {
-            id: 'gisthandler',
-            title: 'Load a Gist',
-            message: 'Enter the ID of the Gist or URL you would like to load.',
-            modalType: 'prompt',
-            okFn: (value) => {
-              resolve(value)
+      let value
+      try {
+        value = await (() => {
+          return new Promise((resolve, reject) => {
+            const modalContent = {
+              id: 'gisthandler',
+              title: 'Load a Gist',
+              message: 'Enter the ID of the Gist or URL you would like to load.',
+              modalType: 'prompt',
+              okFn: (value) => {
+                setTimeout(() => resolve(value), 0)
+              },
+              cancelFn: () => {
+                setTimeout(() => reject(), 0)
+              }
             }
-          }
-          this.call('modal', 'modal', modalContent)
-        })
-      })()
+            this.call('modal', 'modal', modalContent)
+          })
+        })()
+      } catch (e) {
+        // the modal has been canceled
+        return
+      }     
       
       if (value !== '') {
         gistId = getGistId(value)
@@ -50,16 +59,16 @@ export class GistHandler extends Plugin {
             message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
             modalType: 'alert'
           }
-          await this.call('modal', 'modal', modalContent)
+          this.call('modal', 'modal', modalContent)
         }
       } else {
         const modalContent = {
-          id: 'gisthandler',
+          id: 'gisthandlerEmpty',
           title: 'Gist load error',
           message: 'Error while loading gist. Id cannot be empty.',
           modalType: 'alert'
         }
-        await this.call('modal', 'modal', modalContent)
+        this.call('modal', 'modal', modalContent)
       }
       return loadingFromGist
     } else {