Fixed loading local plugin, search input

apps/remix-ide-e2e/src/tests/pluginManager.spec.ts

@@ -37,7 +37,8 @@ module.exports = {
       .waitForElementVisible('*[data-id="pluginManagerComponentActivateButtonZoKrates"]')
       .clearValue('*[data-id="pluginManagerComponentSearchInput"]')
       .click('*[data-id="pluginManagerComponentSearchInput"]')
-      .keys(browser.Keys.ENTER)
+      .keys(browser.Keys.SPACE)
+      .keys(browser.Keys.BACK_SPACE)
   },
 
   'Should activate plugins': function (browser: NightwatchBrowser) {

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -13,7 +13,7 @@ import * as packageJson from '../../../../../package.json'
 const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const EventEmitter = require('events')
-const LocalPlugin = require('./local-plugin') // eslint-disable-line
+// const LocalPlugin = require('./local-plugin') // eslint-disable-line
 const addToolTip = require('../ui/tooltip')
 const _paq = window._paq = window._paq || []
 
@@ -37,7 +37,7 @@ class PluginManagerComponent extends ViewPlugin {
     this.appManager = appManager
     this.engine = engine
     this.pluginManagerSettings = new PluginManagerSettings()
-    this.localPlugin = new LocalPlugin()
+    // this.localPlugin = new LocalPlugin()
     this.htmlElement = document.createElement('div')
     this.htmlElement.setAttribute('id', 'pluginManager')
     this.views = {
@@ -86,13 +86,14 @@ class PluginManagerComponent extends ViewPlugin {
    * @param {Profile} pluginName
    * @returns {void}
    */
-  async activateAndRegisterLocalPlugin (plugin, localPlugin) {
-    if (plugin) {
-      debugger
+  async activateAndRegisterLocalPlugin (localPlugin) {
+    if (localPlugin) {
       this.engine.register(localPlugin)
-      await this.appManager.activatePlugin(plugin)
+      this.appManager.activatePlugin(localPlugin.profile.name)
+      this.getAndFilterPlugins()
+      // this.activateP(localPlugin.profile.name)
       // localStorage.setItem('targetLocalPlugin', plugin.name)
-      // localStorage.setItem('plugins/local', JSON.stringify(properPlugin))
+      localStorage.setItem('plugins/local', JSON.stringify(localPlugin))
     }
   }
 
@@ -120,8 +121,6 @@ class PluginManagerComponent extends ViewPlugin {
     ReactDOM.render(
       <RemixUiPluginManager
         pluginComponent={this}
-        activePlugins={this.activePlugins}
-        inactivePlugins={this.inactivePlugins}
       />,
       document.getElementById('pluginManager'))
   }
@@ -132,29 +131,29 @@ class PluginManagerComponent extends ViewPlugin {
   /**
    * Add a local plugin to the list of plugins
    */
-  async openLocalPlugin () {
-    try {
-      const profile = await this.localPlugin.open(this.appManager.getAll())
-      if (!profile) return
-      if (this.appManager.getIds().includes(profile.name)) {
-        throw new Error('This name has already been used')
-      }
-      const plugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
-      this.engine.register(plugin)
-      await this.appManager.activatePlugin(plugin.name)
-    } catch (err) {
-      // TODO : Use an alert to handle this error instead of a console.log
-      console.log(`Cannot create Plugin : ${err.message}`)
-      addToolTip(`Cannot create Plugin : ${err.message}`)
-    }
-  }
+  // async openLocalPlugin () {
+  //   try {
+  //     const profile = await this.localPlugin.open(this.appManager.getAll())
+  //     if (!profile) return
+  //     if (this.appManager.getIds().includes(profile.name)) {
+  //       throw new Error('This name has already been used')
+  //     }
+  //     const plugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
+  //     this.engine.register(plugin)
+  //     await this.appManager.activatePlugin(plugin.name)
+  //   } catch (err) {
+  //     // TODO : Use an alert to handle this error instead of a console.log
+  //     console.log(`Cannot create Plugin : ${err.message}`)
+  //     addToolTip(`Cannot create Plugin : ${err.message}`)
+  //   }
+  // }
 
   render () {
     return this.htmlElement
   }
 
   getAndFilterPlugins (filter) {
-    this.filter = filter ? filter.toLowerCase() : this.filter
+    this.filter = typeof filter === 'string' ? filter.toLowerCase() : this.filter
 
     const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
     const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -14,10 +14,9 @@ interface LocalPluginFormProps {
 }
 
 const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, setErrorMsg: React.Dispatch<React.SetStateAction<string>>) => {
-  debugger
   try {
     const profile = JSON.parse(localStorage.getItem('plugins/local'))
-    if (profile.profile && Object.keys(profile).length > 0) {
+    if (profile && profile.profile && Object.keys(profile).length > 0) {
       if (pluginManager.appManager.getIds().includes(profile.profile.name)) {
         throw new Error('This name has already been used')
       }
@@ -25,7 +24,9 @@ const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin:
     if (!plugin.location) throw new Error('Plugin should have a location')
     if (!plugin.name) throw new Error('Plugin should have a name')
     if (!plugin.url) throw new Error('Plugin should have an URL')
+    plugin.methods = plugin.methods.split(',').filter(val => val)
     const localPlugin = plugin.type === 'iframe' ? new IframePlugin(plugin) : new WebsocketPlugin(plugin)
+
     localPlugin.profile.hash = `local-${plugin.name}`
     // <-------------------------------- Plumbing starts here --------------------------------------->
     const targetPlugin = {
@@ -38,9 +39,11 @@ const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin:
       kind: (localPlugin.profile.kind !== undefined ? localPlugin.profile.kind : ''),
       methods: localPlugin.profile.methods,
       type: plugin.type,
-      location: plugin.location
+      location: plugin.location,
+      icon: 'assets/img/localPlugin.webp'
     }
-    pluginManager.activateAndRegisterLocalPlugin(targetPlugin, localPlugin)
+    localPlugin.profile = { ...localPlugin.profile, ...targetPlugin }
+    pluginManager.activateAndRegisterLocalPlugin(localPlugin)
   } catch (error) {
     console.error(error)
     // setErrorMsg(error.message)

libs/remix-ui/plugin-manager/src/types.d.ts

@@ -105,7 +105,7 @@ export class PluginManagerComponent extends ViewPlugin extends Plugin implements
   render(): HTMLDivElement
   getAndFilterPlugins: (filter?: string) => void
   triggerEngineEventListener: () => void
-  activateAndRegisterLocalPlugin: (plugin: Profile, localPlugin: IframePlugin | WebsocketPlugin) => Promise<void>
+  activateAndRegisterLocalPlugin: (localPlugin: IframePlugin | WebsocketPlugin) => Promise<void>
   activeProfiles: string[]
   _paq: any
 }
@@ -155,8 +155,6 @@ export interface PluginManagerContextProviderProps {
 }
 
 export interface RemixUiPluginManagerProps {
-  inactivePlugins: Profile[]
-  activePlugins: Profile[]
   pluginComponent: PluginManagerComponent
 }
 /** @class Reference loaders.