finish ui for plugins permissions

3 years ago · 1e9f713b38
parent 648d464871
commit 1e9f713b38
8 changed files with 184 additions and 75 deletions
--- a/apps/remix-ide/src/app/components/plugin-manager-component.js
+++ b/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)
+    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}
      />,
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/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)
--- a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/button.tsx
@ -1,13 +1,17 @@
-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')
--- a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
@ -0,0 +1,97 @@
+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
--- a/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
@ -1,15 +1,17 @@
-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>
--- a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
@ -1,10 +1,12 @@
 /* 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>
  )
--- 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
@ -1,16 +1,10 @@
 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}/>
  )
 }
--- a/libs/remix-ui/plugin-manager/src/types.d.ts
+++ b/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>