fix modal

apps/remix-ide/src/lib/cmdInterpreterAPI.js

@@ -33,7 +33,7 @@ class CmdInterpreterAPI {
 
   log () { arguments[0] != null ? this._components.terminal.commands.html(arguments[0]) : this._components.terminal.commands.html(arguments[1]) }
   loadgist (id, cb) {
-    this._components.terminal.call('loadFromGistHandler', 'load', id)
+    this._components.terminal.call('gistHandler', 'load', id)
     if (cb) cb()
   }
 

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

@@ -1,6 +1,5 @@
 'use strict'
 import { Plugin } from '@remixproject/engine'
-import { AppModal, ModalTypes } from '@remix-ui/app'
 
 interface StringByString {
   [key: string]: string;
@@ -25,26 +24,40 @@ export class GistHandler extends Plugin {
     var loadingFromGist = false
     if (!gistId) {
       loadingFromGist = true
-      let value: string = await this.call('modal', 'prompt-value', 'Load a Gist', 'Enter the ID of the Gist or URL you would like to load.', null)
+      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)
+            }
+          }
+          this.call('modal', 'modal', modalContent)
+        })
+      })()
+      
       if (value !== '') {
         gistId = getGistId(value)
         if (gistId) {
           cb(gistId)
         } else {
-          const modalContent: AppModal = {
+          const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
             message: 'Error while loading gist. Please provide a valid Gist ID or URL.',
-            modalType: ModalTypes.alert
+            modalType: 'alert'
           }
           await this.call('modal', 'modal', modalContent)
         }
       } else {
-        const modalContent: AppModal = {
+        const modalContent = {
           id: 'gisthandler',
           title: 'Gist load error',
           message: 'Error while loading gist. Id cannot be empty.',
-          modalType: ModalTypes.alert
+          modalType: 'alert'
         }
         await this.call('modal', 'modal', modalContent)
       }
@@ -63,23 +76,23 @@ export class GistHandler extends Plugin {
     return self.handleLoad(gistId, async (gistId: String | null) => {
       let data: any
       try {
-        data = (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
+        data = await (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any
         if (!data.files) {
-          const modalContent: AppModal = {
+          const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
             message: data.message,
-            modalType: ModalTypes.alert
+            modalType: 'alert'
           }
           await this.call('modal', 'modal', modalContent)
           return
         }
       } catch (e: any) {
-        const modalContent: AppModal = {
+        const modalContent = {
           id: 'gisthandler',
           title: 'Gist load error',
           message: e.message,
-          modalType: ModalTypes.alert
+          modalType: 'alert'
         }
         await this.call('modal', 'modal', modalContent)
         return
@@ -94,11 +107,11 @@ export class GistHandler extends Plugin {
         if (!errorSavingFiles) {
           const provider = await this.call('fileManager', 'getProviderByName', 'workspace')
         } else {
-          const modalContent: AppModal = {
+          const modalContent = {
             id: 'gisthandler',
             title: 'Gist load error',
             message:  errorSavingFiles.message || errorSavingFiles,
-            modalType: ModalTypes.alert
+            modalType: 'alert'
           }
           this.call('modal', 'modal', modalContent)
         }

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

@@ -96,8 +96,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
           </div>
           <div className="modal-footer" data-id={`${props.id}ModalDialogModalFooter-react`}>
             {/* todo add autofocus ^^ */}
-            { props.okLabel &&
+            { <span
-              <span
                 data-id={`${props.id}-modal-footer-ok-react`}
                 className={'modal-ok btn btn-sm ' + (state.toggleBtn ? 'btn-dark' : 'btn-light')}
                 onClick={() => {
@@ -108,8 +107,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
                 { props.okLabel ? props.okLabel : 'OK' }
               </span>
             }
-            { props.cancelLabel &&
+            { <span
-              <span
                 data-id={`${props.id}-modal-footer-cancel-react`}
                 className={'modal-cancel btn btn-sm ' + (state.toggleBtn ? 'btn-light' : 'btn-dark')}
                 data-dismiss="modal"

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -178,7 +178,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   }
 
   function loadgist (id, cb) {
-    gistHandler.loadFromGist({ gist: id }, _deps.fileManager)
+    props.plugin.call('gistHandler', 'load', id)
     if (cb) cb()
   }