fixes for localplugin creation and activation

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

@@ -37,13 +37,13 @@ class PluginManagerComponent extends ViewPlugin {
     this.appManager = appManager
     this.engine = engine
     this.pluginManagerSettings = new PluginManagerSettings()
+    this.localPlugin = new LocalPlugin()
     this.htmlElement = document.createElement('div')
     this.htmlElement.setAttribute('id', 'pluginManager')
     this.views = {
       root: null,
       items: {}
     }
-    this.localPlugin = new LocalPlugin()
     this.filter = ''
     this.pluginNames = this.appManager.actives
     this.activePlugins = []
@@ -80,6 +80,22 @@ class PluginManagerComponent extends ViewPlugin {
     _paq.push(['trackEvent', 'manager', 'activate', name])
   }
 
+  /**
+   * Takes the name of a local plugin and does both
+   * activation and registration
+   * @param {Profile} pluginName
+   * @returns {void}
+   */
+  async activateAndRegisterLocalPlugin (plugin, localPlugin) {
+    if (plugin) {
+      debugger
+      this.engine.register(localPlugin)
+      await this.appManager.activatePlugin(plugin)
+      // localStorage.setItem('targetLocalPlugin', plugin.name)
+      // localStorage.setItem('plugins/local', JSON.stringify(properPlugin))
+    }
+  }
+
   /**
    * Calls and triggers the event deactivatePlugin
    * with with manager permission passing in the name

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

@@ -35,7 +35,7 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon
     if (savedLocalPlugins === null) {
       localStorage.setItem('plugins/local', '{}')
     }
-    if (savedInactiveProfiles && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) {
+    if (savedInactiveProfiles && savedInactiveProfiles.length > 0 && pluginComponent.inactivePlugins.length > savedInactiveProfiles.length) {
       if (Object.keys(savedLocalPlugins).length > 0 && !pluginComponent.inactivePlugins.includes(savedLocalPlugins.profile as Profile)) {
         const inactiveLocalPlugin = savedLocalPlugins.profile
         localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
@@ -48,8 +48,9 @@ function InactivePluginCardContainer ({ pluginComponent }: InactivePluginCardCon
         const inactiveLocalPlugin = savedLocalPlugins.profile
         localStorage.setItem('currentLocalPlugin', inactiveLocalPlugin.name)
         temp.push([...pluginComponent.inactivePlugins, inactiveLocalPlugin])
+        setinactiveProfiles(temp)
       }
-      setinactiveProfiles(temp)
+      setinactiveProfiles(pluginComponent.inactivePlugins)
     }
   }, [pluginComponent, pluginComponent.inactivePlugins])
   return (

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-debugger */
 import React, { useState } from 'react'
 import { ModalDialog } from '@remix-ui/modal-dialog'
 import { Toaster } from '@remix-ui/toaster'
@@ -13,31 +14,37 @@ 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')) || plugin
-    if (!profile) return
-    if (profile.profile) {
+    const profile = JSON.parse(localStorage.getItem('plugins/local'))
+    if (profile.profile && Object.keys(profile).length > 0) {
       if (pluginManager.appManager.getIds().includes(profile.profile.name)) {
         throw new Error('This name has already been used')
       }
-    } else {
-      if (pluginManager.appManager.getIds().includes(profile.name)) {
-        throw new Error('This name has already been used')
-      }
-      if (!profile.location) throw new Error('Plugin should have a location')
-      if (!profile.name) throw new Error('Plugin should have a name')
-      if (!profile.url) throw new Error('Plugin should have an URL')
-      const localPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
-      localPlugin.profile.hash = `local-${profile.name}`
-      // <-------------------------------- Plumbing starts here --------------------------------------->
-      pluginManager.engine.register(localPlugin)
-      localStorage.setItem('plugins/local', JSON.stringify(localPlugin))
-      pluginManager.activateP(localPlugin.profile.name)
     }
+    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')
+    const localPlugin = plugin.type === 'iframe' ? new IframePlugin(plugin) : new WebsocketPlugin(plugin)
+    localPlugin.profile.hash = `local-${plugin.name}`
+    // <-------------------------------- Plumbing starts here --------------------------------------->
+    const targetPlugin = {
+      name: localPlugin.profile.name,
+      displayName: localPlugin.profile.displayName,
+      description: (localPlugin.profile.description !== undefined ? localPlugin.profile.description : ''),
+      documentation: localPlugin.profile.url,
+      events: (localPlugin.profile.events !== undefined ? localPlugin.profile.events : []),
+      hash: localPlugin.profile.hash,
+      kind: (localPlugin.profile.kind !== undefined ? localPlugin.profile.kind : ''),
+      methods: localPlugin.profile.methods,
+      type: plugin.type,
+      location: plugin.location
+    }
+    pluginManager.activateAndRegisterLocalPlugin(targetPlugin, localPlugin)
   } catch (error) {
     console.error(error)
     // setErrorMsg(error.message)
-    setErrorMsg('This name has already been used')
+    setErrorMsg(error.message)
   }
 }
 function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) {

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

@@ -3,7 +3,7 @@ import { PluginManager } from '@remixproject/engine/lib/manager'
 import { EventEmitter } from 'events'
 import { Engine } from '@remixproject/engine/lib/engine'
 import { PluginBase, Profile } from '@remixproject/plugin-utils'
-import { ViewPlugin } from '@remixproject/engine-web'
+import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web'
 /* eslint-disable camelcase */
 declare module 'yo-yo'{
   interface yo_yo {
@@ -105,6 +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>
   activeProfiles: string[]
   _paq: any
 }
@@ -193,7 +194,7 @@ export interface FormStateProps {
   name: string
   displayName: string
   url: string
-  type: string
+  type: 'iframe' | 'ws'
   hash: string
   methods: any
   location: string