add proposed changes to remixappManager class to expose encapsulated functionality

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

@@ -98,19 +98,36 @@ class PluginManagerComponent extends ViewPlugin {
     this.htmlElement = document.createElement('div')
     this.htmlElement.setAttribute('id', 'pluginManager')
     this.props = {}
-    // this.views = {
+    this.views = {
-    //   root: null,
+      root: null,
-    //   items: {}
+      items: {}
-    // }
+    }
     this.localPlugin = new LocalPlugin()
     this.filter = ''
     this.activePlugins = []
     this.inactivePlugins = []
-    this.activePlugins = this.appManager.actives
+    this.activePluginNames = this.appManager.actives
     // this.appManager.event.on('activate', () => { this.reRender() })
     // this.appManager.event.on('deactivate', () => { this.reRender() })
     // this.engine.event.on('onRegistration', () => { this.reRender() })
     // const { actives, inactives } = this.getAllPlugins()
+    console.log('views property contents', this.views)
+  }
+
+  isActive (name) {
+    this.appManager.actives.includes(name)
+  }
+
+  activateP (name) {
+    // console.log(this.appManager)
+    this.appManager.turnPluginOn(name)
+    _paq.push(['trackEvent', 'manager', 'activate', name])
+  }
+
+  deactivateP (name) {
+    // console.log(this.appManager)
+    this.call('manager', 'deactivatePlugin', name)
+    _paq.push(['trackEvent', 'manager', 'deactivate', name])
   }
 
   onActivation () {
@@ -124,27 +141,16 @@ class PluginManagerComponent extends ViewPlugin {
         appManager={this.appManager}
         engine={this.engine}
         localPlugin={this.localPlugin}
-        activePlugins={this.activePlugins}
+        activePluginNames={this.activePluginsNames}
         actives={this.activePlugins}
         inactives={this.inactivePlugins}
+        activatePlugin={this.activateP}
+        deActivatePlugin={this.deactivateP}
+        _paq={_paq}
       />,
       document.getElementById('pluginManager'))
   }
 
-  isActive (name) {
-    return this.appManager.actives.includes(name)
-  }
-
-  // activateP (name) {
-  //   this.appManager.activatePlugin(name)
-  //   _paq.push(['trackEvent', 'manager', 'activate', name])
-  // }
-
-  // deactivateP (name) {
-  //   this.call('manager', 'deactivatePlugin', name)
-  //   _paq.push(['trackEvent', 'manager', 'deactivate', name])
-  // }
-
   /***************
    * SUB-COMPONENT
    */

apps/remix-ide/src/remixAppManager.js

@@ -75,6 +75,14 @@ export class RemixAppManager extends PluginManager {
     return await this.permissionHandler.askPermission(this.profiles[from], this.profiles[to], method, message)
   }
 
+  async turnPluginOn (name) {
+    await this.activatePlugin(name)
+  }
+
+  async turnPluginOff (name) {
+    await this.deactivatePlugin(name)
+  }
+
   onPluginActivated (plugin) {
     this.pluginLoader.set(plugin, this.actives)
     this.event.emit('activate', plugin)

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

@@ -3,17 +3,25 @@ import { PluginManagerContext } from '../contexts/pluginmanagercontext'
 
 interface ButtonProps {
   buttonText: 'Activate' | 'Deactivate'
-
+  pluginName: string
 }
 
-function Button ({ buttonText }: ButtonProps) {
+function Button ({ buttonText, pluginName }: ButtonProps) {
-  const { profile, deActivatePlugin, activatePlugin } = useContext(PluginManagerContext)
+  const { appManager, _paq } = useContext(PluginManagerContext)
-  const dataId = `pluginManagerComponentDeactivateButton${profile.name}`
+  const dataId = `pluginManagerComponentDeactivateButton${pluginName}`
   const [needToDeactivate] = useState('btn btn-secondary btn-sm')
   const [needToActivate] = useState('btn btn-success btn-sm')
   return (
     <button
-      onClick={buttonText === 'Activate' ? () => activatePlugin(profile.name) : () => deActivatePlugin(profile.name)}
+      onClick={buttonText === 'Activate' ? () => {
+        appManager.turnPluginOn(pluginName)
+        _paq.push(['trackEvent', 'manager', 'activate', pluginName])
+        buttonText = 'Deactivate'
+      } : () => {
+        appManager.turnPluginOff(pluginName)
+        _paq.push(['trackEvent', 'manager', 'deactivate', pluginName])
+        buttonText = 'Activate'
+      }}
       className={buttonText === 'Activate' ? needToActivate : needToDeactivate}
       data-id={dataId}
     >

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

@@ -9,7 +9,7 @@ interface PluginCardProps {
 
 // eslint-disable-next-line no-empty-pattern
 function PluginCard ({ profile }: PluginCardProps) {
-  const { activePlugins } = useContext(PluginManagerContext)
+  const { activePluginNames } = useContext(PluginManagerContext)
   const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)
   const [docLink] = useState<JSX.Element>((profile.documentation) ? (
     <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
@@ -31,15 +31,16 @@ function PluginCard ({ profile }: PluginCardProps) {
               {docLink}
               {versionWarning}
             </div>
-            { activePlugins.includes(profile.name) ? (
+            { activePluginNames.includes(profile.name) ? (
               <Button
                 buttonText="Deactivate"
-              />) : <Button buttonText="Activate" />
+                pluginName={profile.name}
+              />) : <Button buttonText="Activate" pluginName={profile.name}/>
             }
           </h6>
         </div>
         <div className="remixui_description d-flex text-body plugin-text mb-2">
-          <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/>
+          { profile.icon ? <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/> : null }
           <span className="remixui_descriptiontext">{profile.description}</span>
         </div>
       </article>

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

@@ -35,10 +35,7 @@ function ShowInactives ({ inactives, headinglabel }: ShowInactivesProps) {
 }
 
 function ShowActives ({ inactives, headinglabel }: ShowInactivesProps) {
-  const [plugins] = useState<any[]>([])
+  console.log('actived plugins are :', inactives)
-  if (inactives.length === 0) {
-    plugins.map(plugin => inactives.push(plugin))
-  }
   return (
     <Fragment>
       <ModuleHeading headingLabel={headinglabel} />
@@ -50,7 +47,7 @@ function ShowActives ({ inactives, headinglabel }: ShowInactivesProps) {
 }
 
 function RootView () {
-  const { appManager, actives, engine, inactives, localPlugin, filter } = useContext(PluginManagerContext)
+  const { appManager, actives, engine, inactives, localPlugin } = useContext(PluginManagerContext)
   const [visible, setVisible] = useState<boolean>(true)
   const [plugin, setPlugin] = useState(initialState)
 
@@ -62,7 +59,9 @@ function RootView () {
   }
 
   const closeModal = () => setVisible(true)
-
+  useEffect(() => {
+    // engine.event.on('onRegistration', () => )
+  })
   return (
     <Fragment>
       <form id="local-plugin-form">

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

@@ -66,10 +66,6 @@ interface SetPluginOptionType {
   queueTimeout: number
 }
 
-export interface _Paq {
-  _paq: Window & typeof globalThis | []
-}
-
 export class RemixEngine extends Engine {
   event: EventEmitter;
   setPluginOption ({ name, kind }) : SetPluginOptionType
@@ -99,15 +95,17 @@ export class RemixAppManager extends PluginManager {
     isDependent(name: any): any;
     isRequired(name: any): any;
     registeredPlugins(): Promise<any>;
+    turnPluginOn(name: string | string[]);
+    turnPluginOff(name: string);
 }
 
 export interface PluginManagerContextProviderProps {
   appManager: RemixAppManager
   engine: RemixEngine
   localPlugin: LocalPlugin
-  _paq: _Paq
+  _paq: any
   filter: string
-  activePlugins: string[]
+  activePluginNames: string[]
   actives: Partial<PluginManagerProfile>[]
   inactives: Partial<PluginManagerProfile>[]
   activatePlugin: (name: string) => void
@@ -123,9 +121,9 @@ export interface RemixUiPluginManagerProps {
   appManager: RemixAppManager
   engine: RemixEngine
   localPlugin: LocalPlugin
-  _paq: _Paq
+  _paq: any // Window & typeof globalThis | []
   filter: string
-  activePlugins: string[]
+  activePluginNames: string[]
   actives: Partial<PluginManagerProfile>[]
   inactives: Partial<PluginManagerProfile>[]
   activatePlugin: (name: string) => void