finish ui for plugins permissions

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

@@ -92,9 +92,10 @@ const profile = {
 class PluginManagerComponent extends ViewPlugin {
   constructor (appManager, engine) {
     super(profile)
-    // this.event = new EventEmitter() // already exists in engine so not needed here
+    this.event = new EventEmitter() // already exists in engine so not needed here
     this.appManager = appManager
     this.engine = engine
+    this.pluginManagerSettings = new PluginManagerSettings()
     this.htmlElement = document.createElement('div')
     this.htmlElement.setAttribute('id', 'pluginManager')
     this.views = {
@@ -103,9 +104,8 @@ class PluginManagerComponent extends ViewPlugin {
     }
     this.localPlugin = new LocalPlugin()
     this.filter = ''
-    this.activePlugins = []
-    this.inactivePlugins = []
     this.pluginNames = this.appManager.actives
+    // this.pluginManagerSettings.
     // this.appManager.event.on('activate', () => { this.renderComponent() })
     // this.appManager.event.on('deactivate', () => { this.renderComponent() })
     // this.engine.event.on('onRegistration', () => { this.renderComponent() })
@@ -116,10 +116,12 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   activateP (name) {
-    this.appManager.turnPluginOn(name)
-    console.log('activateP method reached. And activation of method was successful')
+    this.appManager.activatePlugin(name)
+    this.appManager.event.on('activate', () => {
+      this.renderComponent()
+      console.log('activateP method reached. And activation of method was successful')
+    })
     _paq.push(['trackEvent', 'manager', 'activate', name])
-    this.renderComponent()
     console.log('activation was logged in _paq and renderComponent has been called.')
   }
 
@@ -144,10 +146,6 @@ class PluginManagerComponent extends ViewPlugin {
         engine={this.engine}
         localPlugin={this.localPlugin}
         activePluginNames={this.pluginNames}
-        actives={this.activePlugins}
-        inactives={this.inactivePlugins}
-        // activatePlugin={this.activateP}
-        // deActivatePlugin={this.deactivateP}
         _paq={_paq}
         filter={this.filter}
       />,

apps/remix-ide/src/remixAppManager.js

@@ -75,14 +75,6 @@ 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

-import React, { useContext, useState } from 'react'
-import { PluginManagerContext } from '../contexts/pluginmanagercontext'
+import React, { useState } from 'react'
+import { PluginManagerComponent } from '../../types'
 
 interface ButtonProps {
   buttonText: 'Activate' | 'Deactivate'
   pluginName: string
+  pluginComponent: PluginManagerComponent
 }
 
-function Button ({ buttonText, pluginName }: ButtonProps) {
-  const { pluginComponent } = useContext(PluginManagerContext)
+function Button ({
+  buttonText,
+  pluginName,
+  pluginComponent
+}: ButtonProps) {
   const dataId = `pluginManagerComponentDeactivateButton${pluginName}`
   const [needToDeactivate] = useState('btn btn-secondary btn-sm')
   const [needToActivate] = useState('btn btn-success btn-sm')

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

+import React, { Fragment, useState } from 'react'
+import { RemixUiCheckbox } from '@remix-ui/checkbox'
+import { PluginManagerSettings } from '../../../types'
+import { ModalDialog } from '@remix-ui/modal-dialog'
+
+interface PermissionSettingsProps {
+  pluginSettings: PluginManagerSettings
+  toPlugin?: string
+  funcObj?: {}
+  methodName?: string
+  fromPlugins?: {}
+
+}
+
+// <div className="form-group remixui_permissionKey">
+//   <div className="remixui_checkbox">
+//     {fromPluginPermission.allow
+//       ? <span className="mr-2">
+//         <RemixUiCheckbox
+//           checked
+//           onClick={() => togglePermission(fromName, toPlugin, methodName)}
+//           inputType="checkbox"
+//           id={`permission-checkbox-${toPlugin}-${methodName}-${toPlugin}`}
+//           aria-describedby={`module ${fromPluginPermission} asks permission for ${methodName}`}
+//         />
+//       </span>
+//       : <span className="mr-2">
+//         <RemixUiCheckbox
+//           checked={false}
+//           onClick={() => togglePermission(fromName, toPlugin, methodName)}
+//           inputType="checkbox"
+//           id={`permission-checkbox-${toPlugin}-${methodName}-${toPlugin}`}
+//           aria-describedby={`module ${fromPluginPermission} asks permission for ${methodName}`}
+//         />
+//       </span>
+//     }
+//     <label
+//       htmlFor={`permission-checkbox-${toPlugin}-${methodName}-${toPlugin}`}
+//       data-id={`permission-label-${toPlugin}-${methodName}-${toPlugin}`}
+//     >
+//         Allow <u>{fromName}</u> to call <u>{methodName}</u>
+//     </label>
+//   </div>
+//   <i onClick={() => pluginSettings.clearPersmission(fromName, toPlugin, methodName)} className="fa fa-trash-alt" data-id={`pluginManagerSettingsRemovePermission-${toPlugin}-${methodName}-${toPlugin}`}></i>
+// </div>
+
+function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {
+  /**
+   * Declare component local state
+   */
+  const [modalVisibility, setModalVisibility] = useState<boolean>(true)
+  const toPluginP = ''
+  const fromName = ''
+  const methodName = ''
+  const openModal = () => setModalVisibility(false)
+  const closeModal = () => setModalVisibility(true)
+
+  const togglePermission = (fromPlugin: string, toPlugin: string, methodName: string) => {
+    pluginSettings.permissions[toPlugin][methodName][fromPlugin].allow = !pluginSettings.permissions[toPlugin][methodName][fromPlugin].allow
+  }
+
+  return (
+    <Fragment>
+      <ModalDialog
+        handleHide={closeModal}
+        hide={modalVisibility}
+        title="Plugin Manager Permissions"
+      >
+        <div className="border p-2">
+          <div className="pb-2 remixui_permissionKey">
+            <h3>toPlugin permissions:</h3>
+            <i onClick={() => pluginSettings.clearAllPersmission(toPluginP)} className="far fa-trash-alt" data-id={`pluginManagerSettingsClearAllPermission-${toPluginP}`}></i>
+          </div>
+          <form className="remixui_permissionForm" data-id="pluginManagerSettingsPermissionForm">
+            <h4>No Permission requested yet.</h4>
+            <div className="form-group remixui_permissionKey">
+              <div className="remixui_checkbox">
+                {/* ${checkbox} */}
+                <label htmlFor="permission-checkbox-{toPlugin}-{methodName}-{toPlugin}" data-id="permission-label-{toPlugin}-{methodName}-{toPlugin}">Allow <u>{fromName}</u> to call <u>{methodName}</u></label>
+              </div>
+              <i onClick={() => pluginSettings.clearPersmission(fromName, toPluginP, methodName)} className="fa fa-trash-alt" data-id={`pluginManagerSettingsRemovePermission-${toPluginP}-${methodName}-${toPluginP}`}></i>
+            </div>
+          </form>
+        </div>
+      </ModalDialog>
+      <footer className="bg-light remixui_permissions remix-bg-opacity">
+        <button
+          onClick={() => setModalVisibility(!modalVisibility)}
+          className="btn btn-primary settings-button"
+          data-id="pluginManagerPermissionsButton">
+          Permissions
+        </button>
+      </footer>
+    </Fragment>
+  )
+}
+export default PermisssionsSettings

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

-import React, { useContext, useState } from 'react'
-import { PluginManagerProfile } from '../../types'
-import { PluginManagerContext } from '../contexts/pluginmanagercontext'
+import React, { useState } from 'react'
+import { PluginManagerComponent, PluginManagerProfile } from '../../types'
 import '../remix-ui-plugin-manager.css'
 import Button from './button'
 interface PluginCardProps {
   profile: Partial<PluginManagerProfile>
+  pluginComponent: PluginManagerComponent
 }
 
 // eslint-disable-next-line no-empty-pattern
-function PluginCard ({ profile }: PluginCardProps) {
-  const { pluginComponent } = useContext(PluginManagerContext)
+function PluginCard ({
+  profile,
+  pluginComponent
+}: PluginCardProps) {
   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">
@@ -35,7 +37,13 @@ function PluginCard ({ profile }: PluginCardProps) {
               <Button
                 buttonText="Deactivate"
                 pluginName={profile.name}
-              />) : <Button buttonText="Activate" pluginName={profile.name}/>
+                pluginComponent={pluginComponent}
+              />)
+              : <Button
+                buttonText="Activate"
+                pluginName={profile.name}
+                pluginComponent={pluginComponent}
+              />
             }
           </h6>
         </div>

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

 /* eslint-disable no-debugger */
-import React, { Fragment, useContext, useEffect, useState } from 'react'
-import { PluginManagerContext } from '../contexts/pluginmanagercontext'
+import React, { Fragment, useEffect, useState } from 'react'
 import ModuleHeading from './moduleHeading'
 import PluginCard from './pluginCard'
 import { ModalDialog } from '@remix-ui/modal-dialog'
-import { FormStateProps, PluginManagerProfile } from '../../types'
+import { FormStateProps, PluginManagerComponent, PluginManagerProfile, PluginManagerSettings } from '../../types'
+import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
+import { Profile } from '@remixproject/plugin-utils'
+import PermisssionsSettings from './permissions/permissionsSettings'
 
 const initialState: FormStateProps = {
   name: 'test',
@@ -16,28 +18,40 @@ const initialState: FormStateProps = {
   location: 'sidePanel'
 }
 
-function RootView () {
-  const { appManager, pluginComponent, activePluginNames } = useContext(PluginManagerContext)
+interface RootViewProps {
+  pluginComponent: PluginManagerComponent
+}
+
+function RootView ({ pluginComponent }: RootViewProps) {
+  /**
+   * Component Local State declaration
+   */
   const [visible, setVisible] = useState<boolean>(true)
   const [plugin, setPlugin] = useState(initialState)
   const [filterPlugins, setFilterPlugin] = useState('')
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setGetAndFilter] = useState<any>()
-  const [activeP, setActiveP] = useState<any[]>()
-  const [inactiveP, setInactiveP] = useState<any[]>()
+  const [activeP, setActiveP] = useState<Partial<PluginManagerProfile>[]>()
+  const [inactiveP, setInactiveP] = useState<Partial<PluginManagerProfile>[]>()
 
   function pluginChangeHandler<P extends keyof FormStateProps> (formProps: P, value: FormStateProps[P]) {
     setPlugin({ ...plugin, [formProps]: value })
-    appManager.activatePlugin('')
   }
+
+  /**
+   * Modal Visibility States
+   */
   const openModal = () => {
     setVisible(false)
   }
-
   const closeModal = () => setVisible(true)
+  // <-- End Modal Visibility States -->
+
+  /**
+   * Plugins list filtering and Sorting based on search input field state change
+   */
+
   const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(filterPlugins)
-  const isNotRequired = (profile) => !appManager.isRequired(profile.name)
-  const isNotDependent = (profile) => !appManager.isDependent(profile.name)
+  const isNotRequired = (profile) => !pluginComponent.appManager.isRequired(profile.name)
+  const isNotDependent = (profile) => !pluginComponent.appManager.isDependent(profile.name)
   const isNotHome = (profile) => profile.name !== 'home'
   const sortByName = (profileA, profileB) => {
     const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
@@ -46,30 +60,32 @@ function RootView () {
   }
 
   const getAndFilterPlugins = () => {
-    const { actives, inactives } = appManager.getAll()
+    const { actives, inactives } = pluginComponent.appManager.getAll()
       .filter(isFiltered)
       .filter(isNotRequired)
       .filter(isNotDependent)
       .filter(isNotHome)
       .sort(sortByName)
       .reduce(({ actives, inactives }, profile) => {
-        return activePluginNames.includes(profile.name)
+        return pluginComponent.isActive(profile.name)
           ? { actives: [...actives, profile], inactives }
           : { inactives: [...inactives, profile], actives }
       }, { actives: [], inactives: [] })
     setActiveP(actives)
+    console.log('profile property on appmanager', pluginComponent.appManager.profile)
     setInactiveP(inactives)
   }
+  //  <-- End Filtering and Sorting based on search input field
 
   useEffect(() => {
-    setGetAndFilter(getAndFilterPlugins())
+    getAndFilterPlugins()
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterPlugins])
 
   useEffect(() => {
 
-  })
-  console.log('This is the result of getting and filtering all plugins from app manager :', inactiveP)
+  }, [activeP, inactiveP])
+
   return (
     <Fragment>
       <form id="local-plugin-form">
@@ -78,21 +94,14 @@ function RootView () {
           hide={visible}
           title="Local Plugin"
           okLabel="OK"
-          okFn={async () => {
-            // const plugins = appManager.getActiveProfiles()
-            // console.log('There are the active plugins from appManager :', plugins)
-            // const profile: any = await localPlugin.open(appManager.getAll())
-            // if (appManager.getIds().includes(profile.name)) {
-            //   throw new Error('This name has already been used')
-            // }
-            // const lPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
-            // console.log('handle submit local plugin', lPlugin)
-            // console.log('Local PLugin type from legacy as props', localPlugin)
-            // engine.register(lPlugin)
-            // console.log('engine has registered lPlugin')
-            // await appManager.activatePlugin(lPlugin.name)
-            // console.log('appManager has activated lPlugin')
-            await pluginComponent.openLocalPlugin()
+          okFn={() => {
+            const profile: any = pluginComponent.localPlugin.open(pluginComponent.appManager.getAll())
+            if (pluginComponent.appManager.getIds().includes(profile.name)) {
+              throw new Error('This name has already been used')
+            }
+            const lPlugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
+            pluginComponent.engine.register(lPlugin)
+            pluginComponent.appManager.activatePlugin(lPlugin.name)
           } }
           cancelLabel="Cancel"
           cancelFn={closeModal}
@@ -183,7 +192,8 @@ function RootView () {
           </div>
 
         </ModalDialog>
-      </form><div id="pluginManager" data-id="pluginManagerComponentPluginManager">
+      </form>
+      <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
         <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
           <input
             type="text"
@@ -204,7 +214,11 @@ function RootView () {
               <Fragment>
                 <ModuleHeading headingLabel="Active Modules" actives={activeP} inactives={inactiveP} />
                 {activeP.map((profile) => (
-                  <PluginCard key={profile.name} profile={profile} />
+                  <PluginCard
+                    key={profile.name}
+                    profile={profile}
+                    pluginComponent={pluginComponent}
+                  />
                 ))}
               </Fragment>
             )
@@ -214,11 +228,16 @@ function RootView () {
             <Fragment>
               <ModuleHeading headingLabel="Inactive Modules" inactives={inactiveP} actives={activeP} />
               {inactiveP.map((profile) => (
-                <PluginCard key={profile.name} profile={profile} />
+                <PluginCard
+                  key={profile.name}
+                  profile={profile}
+                  pluginComponent={pluginComponent}
+                />
               ))}
             </Fragment>
           ) : null}
         </section>
+        <PermisssionsSettings pluginSettings={pluginComponent.pluginSettings}/>
       </div>
     </Fragment>
   )

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

 import React from 'react'
 import { RemixUiPluginManagerProps } from '../types'
 import RootView from './components/rootView'
-import PluginManagerContextProvider from './contexts/pluginmanagercontext'
 import './remix-ui-plugin-manager.css'
 
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
-  console.log('current state of appmanager', props.pluginComponent)
-  console.log('The state of props ', props)
-
   return (
-    <PluginManagerContextProvider props={props}>
-      <RootView />
-    </PluginManagerContextProvider>
+    <RootView pluginComponent={props.pluginComponent}/>
   )
 }

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

@@ -76,6 +76,7 @@ export class PluginManagerSettings {
 export class PluginManagerComponent extends ViewPlugin extends Plugin implements PluginBase {
   constructor(appManager: RemixAppManager, engine: Engine)
   appManager: RemixAppManager
+  pluginSettings: PluginManagerSettings
   engine: Engine
   htmlElement: HTMLDivElement
   views: { root: null, items: {} }
@@ -138,8 +139,6 @@ export interface PluginManagerContextProviderProps {
   pluginComponent: PluginManagerComponent
   pluginSettings: PluginManagerSettings
   activePluginNames: string[]
-  actives: Partial<PluginManagerProfile>[]
-  inactives: Partial<PluginManagerProfile>[]
   isActive?: (name: string) => boolean
   filterPlugins: () => void
   profile: Partial<PluginManagerProfile>
@@ -152,8 +151,6 @@ export interface RemixUiPluginManagerProps {
   pluginComponent: PluginManagerComponent
   pluginSettings: PluginManagerSettings // Window & typeof globalThis | []
   activePluginNames: string[]
-  actives: Partial<PluginManagerProfile>[]
-  inactives: Partial<PluginManagerProfile>[]
   isActive?: (name: string) => boolean
   filterPlugins: () => void
   profile: Partial<PluginManagerProfile>