use modal

apps/remix-ide/src/app.js

@@ -12,11 +12,10 @@ import { VerticalIcons } from './app/components/vertical-icons'
 import { LandingPage } from './app/ui/landing-page/landing-page'
 import { MainPanel } from './app/components/main-panel'
 import { FramingService } from './framingService'
-import { ModalPluginTester } from './app/plugins/test'
 
 import { WalkthroughService } from './walkthroughService'
 
-import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, LoadFromGistHandler, GistHandler } from '@remix-project/core-plugin'
+import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener, GistHandler, GistHandler } from '@remix-project/core-plugin'
 
 import migrateFileSystem from './migrateFileSystem'
 import Registry from './app/state/registry'
@@ -246,9 +245,7 @@ class AppComponent {
       contentImport
     )
 
-    const testplugin = new ModalPluginTester()
     self.engine.register([
-      testplugin,
       compileTab,
       run,
       debug,
@@ -286,7 +283,6 @@ class AppComponent {
     await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport', 'gistHandler'])
     await self.appManager.activatePlugin(['settings'])
     await self.appManager.activatePlugin(['walkthrough'])
-    await self.appManager.activatePlugin(['testerplugin'])
     
     self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
       await self.appManager.registerContextMenuItems()

apps/remix-ide/src/app/plugins/test.ts

@@ -1,53 +0,0 @@
-import { Plugin } from '@remixproject/engine'
-import { Profile } from '@remixproject/plugin-utils'
-import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface'
-import { ModalTypes } from 'libs/remix-ui/app/src/lib/remix-app/types'
-import { AppModal } from '../../../../../libs/remix-ui/app/src'
-
-const profile:Profile = {
-  name: 'testerplugin',
-  displayName: 'testerplugin',
-  description: 'testerplugin',
-  methods: []
-}
-
-export class ModalPluginTester extends Plugin {
-  constructor () {
-    super(profile)
-  }
-
-  handleMessage (message: any): void {
-    console.log(message)
-  }
-
-  onActivation (): void {
-    // just a modal
-    let mod:AppModal = {
-      id: 'modal1',
-      title: 'test',
-      message: 'test',
-      okFn: this.handleMessage,
-      okLabel: 'yes',
-      cancelFn: null,
-      cancelLabel: 'no'
-    }
-    // this.call('modal', 'modal', mod)
-
-    // modal with callback
-    mod = { ...mod, message: 'gist url', modalType: ModalTypes.prompt, defaultValue: 'prompting' }
-    // this.call('modal', 'modal', mod)
-
-    // modal with password
-    mod = { ...mod, message: 'enter password to give me eth', modalType: ModalTypes.password, defaultValue: 'pass' }
-    // this.call('modal', 'modal', mod)
-
-    const al:AlertModal = {
-      id: 'myalert',
-      message: 'alert message'
-    }
-    // this.call('modal', 'alert', al)
-
-    // set toaster
-    // this.call('modal', 'toast', 'toast message')
-  }
-}

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

@@ -1,5 +1,6 @@
 'use strict'
 import { Plugin } from '@remixproject/engine'
+import { AppModal, ModalTypes } from '@remix-ui/app'
 
 interface StringByString {
   [key: string]: string;
@@ -30,10 +31,22 @@ export class GistHandler extends Plugin {
         if (gistId) {
           cb(gistId)
         } else {
-          await this.call('modal', 'alert', 'Gist load error', 'Error while loading gist. Please provide a valid Gist ID or URL.')
+          const modalContent: AppModal = {
+            id: 'gisthandler',
+            title: 'Gist load error',
+            message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
+            modalType: ModalTypes.alert
+          }
+          await this.call('modal', 'modal', modalContent)
         }
       } else {
-        await this.call('modal', 'alert', 'Gist load error', 'Error while loading gist. Id cannot be empty.')        
+        const modalContent: AppModal = {
+          id: 'gisthandler',
+          title: 'Gist load error',
+          message: 'Error while loading gist. Id cannot be empty.',
+          modalType: ModalTypes.alert
+        }
+        await this.call('modal', 'modal', modalContent)
       }
       return loadingFromGist
     } else {
@@ -52,11 +65,23 @@ export class GistHandler extends Plugin {
       try {
         data = (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
         if (!data.files) {
-          this.call('model', 'alert', 'Gist load error', data.message)
+          const modalContent: AppModal = {
+            id: 'gisthandler',
+            title: 'Gist load error',
+            message: data.message,
+            modalType: ModalTypes.alert
+          }
+          await this.call('modal', 'modal', modalContent)
           return
         }
       } catch (e: any) {
-        this.call('model', 'alert', 'Gist load error', e.message)
+        const modalContent: AppModal = {
+          id: 'gisthandler',
+          title: 'Gist load error',
+          message: e.message,
+          modalType: ModalTypes.alert
+        }
+        await this.call('modal', 'modal', modalContent)
         return
       }
             
@@ -68,8 +93,14 @@ export class GistHandler extends Plugin {
       this.call('fileManager', 'setBatchFiles', obj, 'workspace', true, async (errorSavingFiles: any) => {
         if (!errorSavingFiles) {
           const provider = await this.call('fileManager', 'getProviderByName', 'workspace')
-      } else {
+        } else {
-          this.call('model', 'alert', 'Gist load error', errorSavingFiles.message || errorSavingFiles)
+          const modalContent: AppModal = {
+            id: 'gisthandler',
+            title: 'Gist load error',
+            message:  errorSavingFiles.message || errorSavingFiles,
+            modalType: ModalTypes.alert
+          }
+          this.call('modal', 'modal', modalContent)
         }
       })
 

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -6,10 +6,10 @@ export interface AppModal {
     title: string
     // eslint-disable-next-line no-undef
     message: string | JSX.Element
-    okLabel: string
+    okLabel?: string
-    okFn: (value?:any) => void
+    okFn?: (value?:any) => void
-    cancelLabel: string
+    cancelLabel?: string
-    cancelFn: () => void,
+    cancelFn?: () => void,
     modalType?: ModalTypes,
     defaultValue?: string
     hideFn?: () => void