From 5836abdd6e2ef37b868aa96c7c14ea67e97cb8a8 Mon Sep 17 00:00:00 2001
From: joseph izang <joeizang@hotmail.com>
Date: Mon, 5 Jul 2021 11:58:19 +0100
Subject: [PATCH] basic react component to show in plugin manager

---
 .../components/plugin-manager-component.js    | 315 +++++++++---------
 .../app/components/plugin-manager-settings.js |   4 +-
 libs/remix-ui/plugin-manager/src/index.ts     |   2 +-
 .../lib/components/pluginManagerProvider.tsx  |  36 ++
 .../src/lib/remix-ui-plugin-manager.css       |  61 +++-
 .../src/lib/remix-ui-plugin-manager.tsx       |   2 -
 6 files changed, 249 insertions(+), 171 deletions(-)
 create mode 100644 libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx

diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js
index 1ec2fb5994..f9d2b3ea24 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-component.js
@@ -1,13 +1,18 @@
-import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web'
+/* eslint-disable no-unused-vars */
+import {
+  IframePlugin,
+  ViewPlugin,
+  WebsocketPlugin
+} from '@remixproject/engine-web'
 import { PluginManagerSettings } from './plugin-manager-settings'
-import React from 'react'
-import { ReactDOM } from 'react-dom'
-import { RemixUIPluginManager } from '@remix-ui/plugin-manager'
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom'
+import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
 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')
+const LocalPlugin = require('./local-plugin') // eslint-disable-line
 const addToolTip = require('../ui/tooltip')
 const _paq = window._paq = window._paq || []
 
@@ -87,92 +92,96 @@ const profile = {
 class PluginManagerComponent extends ViewPlugin {
   constructor (appManager, engine) {
     super(profile)
-    this.event = new EventEmitter()
-    this.appManager = appManager
-    this.views = {
-      root: null,
-      items: {}
-    }
-    this.localPlugin = new LocalPlugin()
-    this.filter = ''
-    this.appManager.event.on('activate', () => { this.reRender() })
-    this.appManager.event.on('deactivate', () => { this.reRender() })
-    this.engine = engine
-    this.engine.event.on('onRegistration', () => { this.reRender() })
+    // this.event = new EventEmitter()
+    // this.appManager = appManager
+    // this.engine = engine
     this.htmlElement = document.createElement('div')
     this.htmlElement.setAttribute('id', 'pluginManager')
+    // this.views = {
+    //   root: null,
+    //   items: {}
+    // }
+    // this.localPlugin = new LocalPlugin()
+    // this.filter = ''
+    // this.appManager.event.on('activate', () => { this.reRender() })
+    // this.appManager.event.on('deactivate', () => { this.reRender() })
+    // this.engine.event.on('onRegistration', () => { this.reRender() })
   }
 
   onActivation () {
     this.renderComponent()
   }
 
-  isActive (name) {
-    return this.appManager.actives.includes(name)
+  renderComponent () {
+    ReactDOM.render(<RemixUiPluginManager />, document.getElementById('pluginManager'))
   }
 
-  activateP (name) {
-    this.appManager.activatePlugin(name)
-    _paq.push(['trackEvent', 'manager', 'activate', name])
-  }
+  // isActive (name) {
+  //   return this.appManager.actives.includes(name)
+  // }
 
-  deactivateP (name) {
-    this.call('manager', 'deactivatePlugin', name)
-    _paq.push(['trackEvent', 'manager', 'deactivate', name])
-  }
+  // activateP (name) {
+  //   this.appManager.activatePlugin(name)
+  //   _paq.push(['trackEvent', 'manager', 'activate', name])
+  // }
 
-  renderItem (profile) {
-    const displayName = (profile.displayName) ? profile.displayName : profile.name
-    const doclink = profile.documentation ? yo`<a href="${profile.documentation}" class="px-1" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>`
-      : yo``
+  // deactivateP (name) {
+  //   this.call('manager', 'deactivatePlugin', name)
+  //   _paq.push(['trackEvent', 'manager', 'deactivate', name])
+  // }
 
-    // Check version of the plugin
-    let versionWarning
-    // Alpha
-    if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
-      versionWarning = yo`<small title="Version Alpha" class="${css.versionWarning} plugin-version">alpha</small>`
-    }
-    // Beta
-    if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
-      versionWarning = yo`<small title="Version Beta" class="${css.versionWarning} plugin-version">beta</small>`
-    }
+  // renderItem (profile) {
+  //   const displayName = (profile.displayName) ? profile.displayName : profile.name
+  //   const doclink = profile.documentation ? yo`<a href="${profile.documentation}" class="px-1" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>`
+  //     : yo``
 
-    const activationButton = this.isActive(profile.name)
-      ? yo`
-      <button
-        onclick="${() => this.deactivateP(profile.name)}"
-        class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${profile.name}"
-      >
-        Deactivate
-      </button>
-      `
-      : yo`
-      <button
-        onclick="${() => this.activateP(profile.name)}"
-        class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${profile.name}"
-      >
-        Activate
-      </button>`
+  //   // Check version of the plugin
+  //   let versionWarning
+  //   // Alpha
+  //   if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
+  //     versionWarning = yo`<small title="Version Alpha" class="${css.versionWarning} plugin-version">alpha</small>`
+  //   }
+  //   // Beta
+  //   if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
+  //     versionWarning = yo`<small title="Version Beta" class="${css.versionWarning} plugin-version">beta</small>`
+  //   }
 
-    return yo`
-    <article id="remixPluginManagerListItem_${profile.name}" class="list-group-item py-1 mb-1 plugins-list-group-item" title="${displayName}" >
-    <div class="${css.row} justify-content-between align-items-center mb-2">
-      <h6 class="${css.displayName} plugin-name">
-        <div>
-          ${displayName}
-          ${doclink}
-          ${versionWarning}
-        </div>
-        ${activationButton}
-      </h6>
-    </div>
-    <div class="${css.description} d-flex text-body plugin-text mb-2">
-      <img src="${profile.icon}" class="mr-1 mt-1 ${css.pluginIcon}" />
-      <span class="${css.descriptiontext}">${profile.description}</span>
-    </div>
-  </article>
-    `
-  }
+  //   const activationButton = this.isActive(profile.name)
+  //     ? yo`
+  //     <button
+  //       onclick="${() => this.deactivateP(profile.name)}"
+  //       class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${profile.name}"
+  //     >
+  //       Deactivate
+  //     </button>
+  //     `
+  //     : yo`
+  //     <button
+  //       onclick="${() => this.activateP(profile.name)}"
+  //       class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${profile.name}"
+  //     >
+  //       Activate
+  //     </button>`
+
+  //   return yo`
+  //   <article id="remixPluginManagerListItem_${profile.name}" class="list-group-item py-1 mb-1 plugins-list-group-item" title="${displayName}" >
+  //   <div class="${css.row} justify-content-between align-items-center mb-2">
+  //     <h6 class="${css.displayName} plugin-name">
+  //       <div>
+  //         ${displayName}
+  //         ${doclink}
+  //         ${versionWarning}
+  //       </div>
+  //       ${activationButton}
+  //     </h6>
+  //   </div>
+  //   <div class="${css.description} d-flex text-body plugin-text mb-2">
+  //     <img src="${profile.icon}" class="mr-1 mt-1 ${css.pluginIcon}" />
+  //     <span class="${css.descriptiontext}">${profile.description}</span>
+  //   </div>
+  // </article>
+  //   `
+  // }
 
   /***************
    * SUB-COMPONENT
@@ -197,95 +206,91 @@ class PluginManagerComponent extends ViewPlugin {
     }
   }
 
-  // return this.htmlElement()
+  // // return this.htmlElement()
 
-  // render () {
-  //   return this.htmlElement()
-  // }
+  // // render () {
+  // //   return this.htmlElement()
+  // // }
 
   render () {
-  // Filtering helpers
-    const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
-    const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
-    const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
-    const isNotHome = (profile) => profile.name !== 'home'
-    const sortByName = (profileA, profileB) => {
-      const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
-      const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
-      return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
-    }
+    // // Filtering helpers
+    //   const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
+    //   const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
+    //   const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
+    //   const isNotHome = (profile) => profile.name !== 'home'
+    //   const sortByName = (profileA, profileB) => {
+    //     const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
+    //     const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
+    //     return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
+    //   }
 
-    // Filter all active and inactive modules that are not required
-    const { actives, inactives } = this.appManager.getAll()
-      .filter(isFiltered)
-      .filter(isNotRequired)
-      .filter(isNotDependent)
-      .filter(isNotHome)
-      .sort(sortByName)
-      .reduce(({ actives, inactives }, profile) => {
-        return this.isActive(profile.name)
-          ? { actives: [...actives, profile], inactives }
-          : { inactives: [...inactives, profile], actives }
-      }, { actives: [], inactives: [] })
+    //   // Filter all active and inactive modules that are not required
+    //   const { actives, inactives } = this.appManager.getAll()
+    //     .filter(isFiltered)
+    //     .filter(isNotRequired)
+    //     .filter(isNotDependent)
+    //     .filter(isNotHome)
+    //     .sort(sortByName)
+    //     .reduce(({ actives, inactives }, profile) => {
+    //       return this.isActive(profile.name)
+    //         ? { actives: [...actives, profile], inactives }
+    //         : { inactives: [...inactives, profile], actives }
+    //     }, { actives: [], inactives: [] })
 
-    const activeTile = actives.length !== 0
-      ? yo`
-    <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
-    <span class="navbar-brand plugins-list-title">Active Modules</span>
-    <span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
-    </nav>
-    `
-      : ''
-    const inactiveTile = inactives.length !== 0
-      ? yo`
-    <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
-    <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
-    <span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
-    </nav>
-    `
-      : ''
+    //   const activeTile = actives.length !== 0
+    //     ? yo`
+    //   <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+    //   <span class="navbar-brand plugins-list-title">Active Modules</span>
+    //   <span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
+    //   </nav>
+    //   `
+    //     : ''
+    //   const inactiveTile = inactives.length !== 0
+    //     ? yo`
+    //   <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+    //   <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
+    //   <span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
+    //   </nav>
+    //   `
+    //     : ''
 
-    const settings = new PluginManagerSettings().render()
+    //   const settings = new PluginManagerSettings().render()
 
-    const rootView = yo`
-  <div id='pluginManager' data-id="pluginManagerComponentPluginManager">
-  <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
-    <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
-    <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
-      Connect to a Local Plugin
-    </button>
-  </header>
-  <section data-id="pluginManagerComponentPluginManagerSection">
-    ${activeTile}
-    <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-      ${actives.map(profile => this.renderItem(profile))}
-    </div>
-    ${inactiveTile}
-    <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
-      ${inactives.map(profile => this.renderItem(profile))}
-    </div>
-  </section>
-  ${settings}
-  </div>
-  `
-    if (!this.views.root) this.views.root = rootView
-    return rootView
-  }
-
-  renderComponent () {
-    ReactDOM.render(<RemixUIPluginManager />, this.htmElement)
+    //   const rootView = yo`
+    // <div id='pluginManager' data-id="pluginManagerComponentPluginManager">
+    // <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
+    //   <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
+    //   <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
+    //     Connect to a Local Plugin
+    //   </button>
+    // </header>
+    // <section data-id="pluginManagerComponentPluginManagerSection">
+    //   ${activeTile}
+    //   <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
+    //     ${actives.map(profile => this.renderItem(profile))}
+    //   </div>
+    //   ${inactiveTile}
+    //   <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
+    //     ${inactives.map(profile => this.renderItem(profile))}
+    //   </div>
+    // </section>
+    // ${settings}
+    // </div>
+    // `
+    //   if (!this.views.root) this.views.root = rootView
+    return this.htmlElement
   }
 
-  reRender () {
-    if (this.views.root) {
-      yo.update(this.views.root, this.render())
-    }
-  }
+  // reRender () { --> no needed possibly
+  //   if (this.views.root) {
+  //     yo.update(this.views.root, this.render())
+  //   }
+  // }
 
-  filterPlugins ({ target }) {
-    this.filter = target.value.toLowerCase()
-    this.reRender()
-  }
+  // filterPlugins ({ target }) {
+  //   this.filter = target.value.toLowerCase()
+  //   this.reRender()
+  // }
 }
 
 module.exports = PluginManagerComponent
diff --git a/apps/remix-ide/src/app/components/plugin-manager-settings.js b/apps/remix-ide/src/app/components/plugin-manager-settings.js
index 3b6cc291cf..ed9ef3bbad 100644
--- a/apps/remix-ide/src/app/components/plugin-manager-settings.js
+++ b/apps/remix-ide/src/app/components/plugin-manager-settings.js
@@ -2,8 +2,8 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const modalDialog = require('../ui/modaldialog')
 
-const css = csjs` 
-.permissions {
+const css = csjs`
+.remixui_permissions {
   position: sticky;
   bottom: 0;
   display: flex;
diff --git a/libs/remix-ui/plugin-manager/src/index.ts b/libs/remix-ui/plugin-manager/src/index.ts
index fe4343e6ef..030e10c5dd 100644
--- a/libs/remix-ui/plugin-manager/src/index.ts
+++ b/libs/remix-ui/plugin-manager/src/index.ts
@@ -1 +1 @@
-export * from './lib/remix-ui-plugin-manager';
+export * from './lib/remix-ui-plugin-manager'
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx b/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx
new file mode 100644
index 0000000000..3ce7c87a2a
--- /dev/null
+++ b/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, useState } from 'react'
+import { Profile } from '../../customTypes'
+import * as packageJson from '../../../../../../package.json'
+// export interface RemixUiPluginManagerProps {
+//   activatePlugin: (name: string) => void
+//   deActivatePlugin: (name: string) => void
+//   isActive: () => void
+//   openLocalPlugin: () => Promise<void>
+//   filterPlugins: () => void
+//   reRender: () => void
+//   profile: Profile
+// }
+
+export const PluginManagerContext = createContext({})
+
+function PluginManagerContextProvider ({ children }) {
+  const [profile] = useState<Profile>({
+    name: 'pluginManager',
+    displayName: 'Plugin manager',
+    methods: [],
+    events: [],
+    icon: 'assets/img/pluginManager.webp',
+    description: 'Start/stop services, modules and plugins',
+    kind: 'settings',
+    location: 'sidePanel',
+    documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
+    version: packageJson.version
+  })
+  return (
+    <PluginManagerContext.Provider value={profile}>
+      {children}
+    </PluginManagerContext.Provider>
+  )
+}
+
+export default PluginManagerContextProvider
diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
index 51b5e0a64d..413e6c5846 100644
--- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
+++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
@@ -1,4 +1,4 @@
-.pluginSearch {
+.remixui_pluginSearch {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9,42 +9,42 @@
   z-index: 2;
   margin-bottom: 0px;
 }
-.pluginSearchInput {
+.remixui_pluginSearchInput {
   height: 38px;
 }
-.pluginSearchButton {
+.remixui_pluginSearchButton {
   font-size: 13px;
 }
-.displayName {
+.remixui_displayName {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.pluginIcon {
+.remixui_pluginIcon {
   height: 0.7rem;
   width: 0.7rem;
   filter: invert(0.5);
 }
-.description {
+.remixui_description {
   font-size: 13px;
   line-height: 18px;
 }
-.descriptiontext {
+.remixui_descriptiontext {
   display: block;
 }
-.descriptiontext:first-letter {
+.remixui_descriptiontext:first-letter {
   text-transform: uppercase;
 }
-.row {
+.remixui_row {
   display: flex;
   flex-direction: row;
 }
-.isStuck {
+.remixui_isStuck {
   background-color: var(--primary);
   /* color:  */
 }
-.versionWarning {
+.remixui_versionWarning {
   padding: 4px;
   margin: 0 8px;
   font-weight: 700;
@@ -55,3 +55,42 @@
   border: 1px solid;
   border-radius: 2px;
 }
+
+.remixui_permissions {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 5px 20px;
+}
+.remixui_permissions button {
+  padding: 2px 5px;
+  cursor: pointer;
+}
+.remixui_permissionForm h4 {
+  font-size: 1.3rem;
+  text-align: center;
+}
+.remixui_permissionForm h6 {
+  font-size: 1.1rem;
+}
+.remixui_permissionForm hr {
+  width: 80%;
+}
+.remixui_permissionKey {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.remixui_permissionKey i {
+  cursor: pointer;
+}
+.remixui_checkbox {
+  display: flex;
+  align-items: center;
+}
+.remixui_checkbox label {
+  margin: 0;
+  font-size: 1rem;
+}
diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
index 242a293d8c..f07ea78765 100644
--- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
@@ -20,5 +20,3 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
     </div>
   )
 }
-
-export default RemixUiPluginManager