Merge pull request #1999 from ethereum/fix-parent

Use plugin calls for toaster and modal.

Author: ioedeveloper

apps/remix-ide-e2e/src/local-plugin/src/app/app.tsx

@@ -33,7 +33,7 @@ function App () {
 
   useEffect(() => {
     client.onload(async () => {
-      const customProfiles = ['menuicons', 'tabs', 'solidityUnitTesting', 'hardhat-provider']
+      const customProfiles = ['menuicons', 'tabs', 'solidityUnitTesting', 'hardhat-provider', 'notification']
 
       client.testCommand = async (data: any) => {
         console.log(data)

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

@@ -84,9 +84,9 @@ module.exports = {
       .openFile('Untitled.sol')
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+      .waitForElementPresent('[data-id="envNotification-modal-footer-ok-react"]')
       .execute(function () {
-        const modal = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+        const modal = document.querySelector('[data-id="envNotification-modal-footer-ok-react"]') as any
 
         modal.click()
       })

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

@@ -79,9 +79,9 @@ module.exports = {
       .openFile('Untitled.sol')
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .waitForElementPresent('[data-id="udappNotify-modal-footer-ok-react"]')
+      .waitForElementPresent('[data-id="envNotification-modal-footer-ok-react"]')
       .execute(function () {
-        const modal = document.querySelector('[data-id="udappNotify-modal-footer-ok-react"]') as any
+        const modal = document.querySelector('[data-id="envNotification-modal-footer-ok-react"]') as any
 
         modal.click()
       })

apps/remix-ide-e2e/src/tests/plugin_api.ts

@@ -64,12 +64,16 @@ const clearPayLoad = async (browser: NightwatchBrowser) => {
   })
 }
 
-const clickButton = async (browser: NightwatchBrowser, buttonText: string) => {
+const clickButton = async (browser: NightwatchBrowser, buttonText: string, waitResult: boolean = true) => {
   return new Promise((resolve) => {
     browser.useXpath().waitForElementVisible(`//*[@data-id='${buttonText}']`).pause(100)
       .click(`//*[@data-id='${buttonText}']`, async () => {
         await checkForAcceptAndRemember(browser)
-        browser.waitForElementContainsText('//*[@id="callStatus"]', 'stop').perform(() => resolve(true))
+        if (waitResult) {
+          browser.waitForElementContainsText('//*[@id="callStatus"]', 'stop').perform(() => resolve(true))
+        } else {
+          resolve(true)
+        }
       })
   })
 }
@@ -103,7 +107,7 @@ const checkForAcceptAndRemember = async function (browser: NightwatchBrowser) {
  * @return {Promise}
  */
 
-const clickAndCheckLog = async (browser: NightwatchBrowser, buttonText: string, methodResult: any, eventResult: any, payload: any) => {
+const clickAndCheckLog = async (browser: NightwatchBrowser, buttonText: string, methodResult: any, eventResult: any, payload: any, waitResult: boolean = true) => {
   if (payload) {
     await setPayload(browser, payload)
   } else {
@@ -112,10 +116,14 @@ const clickAndCheckLog = async (browser: NightwatchBrowser, buttonText: string,
   if (methodResult && typeof methodResult !== 'string') { methodResult = JSON.stringify(methodResult) }
   if (eventResult && typeof eventResult !== 'string') { eventResult = JSON.stringify(eventResult) }
   if (buttonText) {
-    await clickButton(browser, buttonText)
+    await clickButton(browser, buttonText, waitResult)
+  }
+  if (methodResult) {
+    await debugValues(browser, 'methods', methodResult)
+  }
+  if (eventResult) {
+    await debugValues(browser, 'events', eventResult)
   }
-  await debugValues(browser, 'methods', methodResult)
-  await debugValues(browser, 'events', eventResult)
 }
 
 const assertPluginIsActive = function (browser: NightwatchBrowser, id: string, shouldBeVisible: boolean) {
@@ -364,5 +372,72 @@ module.exports = {
         const result = '{"jsonrpc":"2.0","result":true,"id":9999}'
         await clickAndCheckLog(browser, 'hardhat-provider:sendAsync', result, null, request)
       })
+  },
+
+  // MODAL
+
+  'Should open 2 alert in a row and trigger 2 toaster in between #group9': function (browser: NightwatchBrowser) {
+    browser
+      .frameParent()
+      .useCss()
+      .addFile('test_modal.js', { content: testModalToasterApi })
+      .executeScript('remix.execute(\'test_modal.js\')')
+      .clickLaunchIcon('localPlugin')
+      .useXpath()
+      // @ts-ignore
+      .frame(0)
+      .perform(async () => {
+        await clickAndCheckLog(browser, 'notification:toast', null, null, 'message toast from local plugin', false) // create a toast on behalf of the localplugin
+        await clickAndCheckLog(browser, 'notification:alert', null, null, { message: 'message from local plugin', id: 'test_id_1_local_plugin' }, false) // create an alert on behalf of the localplugin
+      })
+      .frameParent()
+      .useCss()
+      // check the local plugin notifications
+      .waitForElementVisible('*[data-id="test_id_1_local_pluginModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="test_id_1_local_pluginModalDialogModalBody-react"]', 'message from local plugin')
+      .modalFooterOKClick('test_id_1_local_plugin')
+      // check the script runner notifications
+      .waitForElementVisible('*[data-id="test_id_1_ModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="test_id_1_ModalDialogModalBody-react"]', 'message 1')
+      .modalFooterOKClick('test_id_1_')
+      .waitForElementVisible('*[data-id="test_id_2_ModalDialogModalBody-react"]')
+      .assert.containsText('*[data-id="test_id_2_ModalDialogModalBody-react"]', 'message 2')
+      .modalFooterOKClick('test_id_2_')
+      .waitForElementVisible('*[data-id="test_id_3_ModalDialogModalBody-react"]')
+      .modalFooterOKClick('test_id_3_')
+      .journalLastChildIncludes('default value... ') // check the return value of the prompt
+      // check the toasters
+      .waitForElementVisible('*[data-shared="tooltipPopup"]')
+      .waitForElementContainsText('*[data-shared="tooltipPopup"]', 'message toast from local plugin')
+      .waitForElementContainsText('*[data-shared="tooltipPopup"]', 'I am a toast')
+      .waitForElementContainsText('*[data-shared="tooltipPopup"]', 'I am a re-toast')
   }
 }
+
+const testModalToasterApi = `
+// Right click on the script name and hit "Run" to execute
+(async () => {
+ try {
+    setTimeout(async () => {
+      console.log('test .. ')
+      remix.call('notification', 'alert', { message: 'message 1', id: 'test_id_1_' })
+      remix.call('notification', 'toast', 'I am a toast')
+      remix.call('notification', 'toast', 'I am a re-toast')
+      remix.call('notification', 'alert', { message: 'message 2', id: 'test_id_2_' })
+
+      const modalContent = {
+        id: 'test_id_3_',
+        title: 'test with input title',
+        message: 'test with input content',
+        modalType: 'prompt',
+        okLabel: 'OK',
+        cancelLabel: 'Cancel',
+        defaultValue: 'default value... '
+      }
+      const result = await remix.call('notification', 'modal', modalContent)
+      console.log(result)
+    }, 500)
+ } catch (e) {
+    console.log(e.message)
+ }
+})()    `

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

@@ -51,7 +51,7 @@ module.exports = {
       .click('*[data-id="terminalClearConsole"]') // clear  the terminal
       .clickLaunchIcon('udapp')
       .click('*[data-id="settingsWeb3Mode"]')
-      .modalFooterOKClick('udappNotify')
+      .modalFooterOKClick('envNotification')
       .executeScript('web3.eth.getAccounts()')
       .waitForElementContainsText('*[data-id="terminalJournal"]', '["', 60000) // we check if an array is present, don't need to check for the content
       .waitForElementContainsText('*[data-id="terminalJournal"]', '"]', 60000)

apps/remix-ide/src/app.js

@@ -9,7 +9,7 @@ import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, Fetch
 import Registry from './app/state/registry'
 import { ConfigPlugin } from './app/plugins/config'
 import { Layout } from './app/panels/layout'
-import { ModalPlugin } from './app/plugins/modal'
+import { NotificationPlugin } from './app/plugins/notification'
 import { Blockchain } from './blockchain/blockchain.js'
 import { HardhatProvider } from './app/tabs/hardhat-provider'
 
@@ -177,7 +177,7 @@ class AppComponent {
     )
     const contextualListener = new EditorContextListener()
 
-    self.modal = new ModalPlugin()
+    self.notification = new NotificationPlugin()
 
     const configPlugin = new ConfigPlugin()
     self.layout = new Layout()
@@ -187,7 +187,7 @@ class AppComponent {
     self.engine.register([
       permissionHandler,
       self.layout,
-      self.modal,
+      self.notification,
       self.gistHandler,
       configPlugin,
       blockchain,

apps/remix-ide/src/app/plugins/modal.tsx …mix-ide/src/app/plugins/notification.tsxapps/remix-ide/src/app/plugins/modal.tsx renamed to apps/remix-ide/src/app/plugins/notification.tsx apps/remix-ide/src/app/plugins/modal.tsx renamed to apps/remix-ide/src/app/plugins/notification.tsx

@@ -4,7 +4,7 @@ import { AppModal } from '@remix-ui/app'
 import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface'
 import { dispatchModalInterface } from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 
-interface IModalApi {
+interface INotificationApi {
   events: StatusEvents,
   methods: {
     modal: (args: AppModal) => void
@@ -13,14 +13,14 @@ interface IModalApi {
   }
 }
 
-const profile:LibraryProfile<IModalApi> = {
+const profile:LibraryProfile<INotificationApi> = {
   name: 'notification',
   displayName: 'Notification',
   description: 'Displays notifications',
   methods: ['modal', 'alert', 'toast']
 }
 
-export class ModalPlugin extends Plugin implements MethodApi<IModalApi> {
+export class NotificationPlugin extends Plugin implements MethodApi<INotificationApi> {
   dispatcher: dispatchModalInterface
   constructor () {
     super(profile)
@@ -38,7 +38,7 @@ export class ModalPlugin extends Plugin implements MethodApi<IModalApi> {
     return this.dispatcher.alert(args)
   }
 
-  async toast (message: string) {
+  async toast (message: string | JSX.Element) {
     this.dispatcher.toast(message)
   }
 }

apps/remix-ide/src/remixEngine.js

@@ -14,6 +14,7 @@ export class RemixEngine extends Engine {
     if (name === 'slither') return { queueTimeout: 60000 * 4 } // Requires when a solc version is installed
     if (name === 'hardhat') return { queueTimeout: 60000 * 4 }
     if (name === 'localPlugin') return { queueTimeout: 60000 * 4 }
+    if (name === 'notification') return { queueTimeout: 60000 * 4 }
     return { queueTimeout: 10000 }
   }
 

libs/remix-ui/app/src/lib/remix-app/actions/modals.ts

@@ -14,6 +14,7 @@ type ActionMap<M extends { [index: string]: any }> = {
 export const enum modalActionTypes {
   setModal = 'SET_MODAL',
   setToast = 'SET_TOAST',
+  processQueue = 'PROCESS_QUEUEU',
   handleHideModal = 'HANDLE_HIDE_MODAL',
   handleToaster = 'HANDLE_HIDE_TOAST'
 }
@@ -22,7 +23,8 @@ type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
   [modalActionTypes.setToast]: string | JSX.Element
-  [modalActionTypes.handleToaster]: any
+  [modalActionTypes.handleToaster]: any,
+  [modalActionTypes.processQueue]: any
 }
 
 export type ModalAction = ActionMap<ModalPayload>[keyof ActionMap<

libs/remix-ui/app/src/lib/remix-app/context/context.tsx

@@ -7,15 +7,15 @@ export const AppContext = React.createContext<any>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void
-  toast: (message: string) => void
+  toast: (message: string | JSX.Element) => void
   alert: (data: AlertModal) => void
   handleHideModal: () => void,
   handleToaster: () => void
 }
 
 export const dispatchModalContext = React.createContext<dispatchModalInterface>({
   modal: (data: AppModal) => { },
-  toast: (message: string) => {},
+  toast: (message: string | JSX.Element) => {},
   alert: (data: AlertModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}