From 77cd0472dd367fc99b90e2789f9735ba001e4e6f Mon Sep 17 00:00:00 2001 From: joseph izang Date: Tue, 20 Jul 2021 18:56:47 +0100 Subject: [PATCH] Effect changes as advised by IOE Developer. Remove logic from button component and make it an SFC. --- .../components/plugin-manager-component.js | 97 +++++++++------- .../plugin-manager/src/customTypes.ts | 33 ------ .../src/lib/components/ActivateButton.tsx | 29 +++++ .../src/lib/components/button.tsx | 34 ------ .../src/lib/components/deactivateButton.tsx | 28 +++++ .../src/lib/components/moduleHeading.tsx | 8 +- .../permissions/permissionsSettings.tsx | 50 +++------ .../src/lib/components/pluginCard.tsx | 23 ++-- .../src/lib/components/rootView.tsx | 106 +++++++----------- .../src/lib/remix-ui-plugin-manager.tsx | 42 +++++++ libs/remix-ui/plugin-manager/src/types.d.ts | 1 + 11 files changed, 227 insertions(+), 224 deletions(-) delete mode 100644 libs/remix-ui/plugin-manager/src/customTypes.ts create mode 100644 libs/remix-ui/plugin-manager/src/lib/components/ActivateButton.tsx delete mode 100644 libs/remix-ui/plugin-manager/src/lib/components/button.tsx create mode 100644 libs/remix-ui/plugin-manager/src/lib/components/deactivateButton.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 ca95b9b400..7eddde51e5 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -92,7 +92,7 @@ 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() @@ -105,42 +105,53 @@ class PluginManagerComponent extends ViewPlugin { this.localPlugin = new LocalPlugin() this.filter = '' 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() }) + this.activePlugins = [] + this.inactivePlugins = [] } + /** + * Checks and returns true or false if plugin name + * passed in exists in the actives string array in + * RemixAppManager + * @param {string} name name of Plugin + */ isActive (name) { this.appManager.actives.includes(name) } + /** + * Delegates to method activatePlugin in + * RemixAppManager to enable plugin activation + * @param {string} name name of Plugin + */ activateP (name) { this.appManager.activatePlugin(name) this.appManager.event.on('activate', () => { - this.renderComponent() - console.log('activateP method reached. And activation of method was successful') + this.getAndFilterPlugins() }) _paq.push(['trackEvent', 'manager', 'activate', name]) - console.log('activation was logged in _paq and renderComponent has been called.') } + /** + * Calls and triggers the event deactivatePlugin + * with with manager permission passing in the name + * of the plugin + * @param {string} name name of Plugin + */ deactivateP (name) { this.call('manager', 'deactivatePlugin', name) - console.log('deactivateP has been called successfully') _paq.push(['trackEvent', 'manager', 'deactivate', name]) - this.renderComponent() - console.log('deactivation was logged and renderComponent has has been called.') + this.getAndFilterPlugins() } onActivation () { + // this.getAndFilterPlugins() this.renderComponent() } renderComponent () { ReactDOM.render( (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 - // } - - // 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: [] }) - // this.activePlugins = actives - // this.inactivePlugins = inactives return this.htmlElement } - // reRender () { - // if (this.views.root) { - // yo.update(this.views.root, this.render()) - // } - // } + getAndFilterPlugins (filter) { + this.filter = filter ? filter.toLowerCase() : this.filter + + 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 + } + const activatedPlugins = [] + const deactivatedPlugins = [] + const tempArray = this.appManager.getAll() + .filter(isFiltered) + .filter(isNotRequired) + .filter(isNotDependent) + .filter(isNotHome) + .sort(sortByName) + // eslint-disable-next-line no-debugger + // debugger + tempArray.forEach(profile => { + if (this.appManager.actives.includes(profile.name)) { + activatedPlugins.push(profile) + } else { + deactivatedPlugins.push(profile) + } + }) + this.activePlugins = activatedPlugins + this.inactivePlugins = deactivatedPlugins - filterPlugins ({ target }) { - this.filter = target.value.toLowerCase() this.renderComponent() } } diff --git a/libs/remix-ui/plugin-manager/src/customTypes.ts b/libs/remix-ui/plugin-manager/src/customTypes.ts deleted file mode 100644 index 8f6a286e25..0000000000 --- a/libs/remix-ui/plugin-manager/src/customTypes.ts +++ /dev/null @@ -1,33 +0,0 @@ -export type PluginManagerSettings = { - openDialog: () => void - onValidation: () => void - clearPermission: (from: any, to: any, method: any) => void - settings: () => HTMLElement - render: () => HTMLElement -} - -export type 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: any -} - -export type TileLabel = { - label: 'Active Module' | 'Inactive Modules' -} - -export type LocalPlugin = { - create: () => Profile - updateName: (target: string) => void - updateDisplayName: (displayName: string) => void - updateProfile: (key: string, e: Event) => void - updateMethods: (target: any) => void - form: () => HTMLElement -} diff --git a/libs/remix-ui/plugin-manager/src/lib/components/ActivateButton.tsx b/libs/remix-ui/plugin-manager/src/lib/components/ActivateButton.tsx new file mode 100644 index 0000000000..f1c3e9f4ad --- /dev/null +++ b/libs/remix-ui/plugin-manager/src/lib/components/ActivateButton.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { PluginManagerComponent } from '../../types' + +interface ActivateButtonProps { + buttonText: string + pluginName: string + pluginComponent: PluginManagerComponent +} + +function ActivateButton ({ + buttonText, + pluginName, + pluginComponent +}: ActivateButtonProps) { + const dataId = `pluginManagerComponent${buttonText}Button${pluginName}` + + return ( + + ) +} +export default ActivateButton diff --git a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx b/libs/remix-ui/plugin-manager/src/lib/components/button.tsx deleted file mode 100644 index 54cb447fa1..0000000000 --- a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react' -import { PluginManagerComponent } from '../../types' - -interface ButtonProps { - buttonText: 'Activate' | 'Deactivate' - pluginName: string - pluginComponent: PluginManagerComponent -} - -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') - return ( - - ) -} -export default Button diff --git a/libs/remix-ui/plugin-manager/src/lib/components/deactivateButton.tsx b/libs/remix-ui/plugin-manager/src/lib/components/deactivateButton.tsx new file mode 100644 index 0000000000..1aea469b44 --- /dev/null +++ b/libs/remix-ui/plugin-manager/src/lib/components/deactivateButton.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { PluginManagerComponent } from '../../types' + +interface DeactivateButtonProps { + buttonText: string + pluginName: string + pluginComponent: PluginManagerComponent +} + +function DeactivateButton ({ + buttonText, + pluginName, + pluginComponent +}: DeactivateButtonProps) { + const dataId = `pluginManagerComponent${buttonText}Button${pluginName}` + return ( + + ) +} +export default DeactivateButton diff --git a/libs/remix-ui/plugin-manager/src/lib/components/moduleHeading.tsx b/libs/remix-ui/plugin-manager/src/lib/components/moduleHeading.tsx index 5693cd1e0e..9bf700982f 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/moduleHeading.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/moduleHeading.tsx @@ -1,18 +1,16 @@ import React from 'react' -import { PluginManagerProfile } from '../../types' interface ModuleHeadingProps { headingLabel: string - actives: Partial[] - inactives: Partial[] + count: number } -function ModuleHeading ({ headingLabel, actives, inactives }: ModuleHeadingProps) { +function ModuleHeading ({ headingLabel, count }: ModuleHeadingProps) { return ( ) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx b/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx index ce24c1729a..e45d5f9802 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx @@ -12,37 +12,20 @@ interface PermissionSettingsProps { } -//
-//
-// {fromPluginPermission.allow -// ? -// togglePermission(fromName, toPlugin, methodName)} -// inputType="checkbox" -// id={`permission-checkbox-${toPlugin}-${methodName}-${toPlugin}`} -// aria-describedby={`module ${fromPluginPermission} asks permission for ${methodName}`} -// /> -// -// : -// togglePermission(fromName, toPlugin, methodName)} -// inputType="checkbox" -// id={`permission-checkbox-${toPlugin}-${methodName}-${toPlugin}`} -// aria-describedby={`module ${fromPluginPermission} asks permission for ${methodName}`} -// /> -// -// } -// -//
-// pluginSettings.clearPersmission(fromName, toPlugin, methodName)} className="fa fa-trash-alt" data-id={`pluginManagerSettingsRemovePermission-${toPlugin}-${methodName}-${toPlugin}`}> -//
+interface ShowPermissionsByMethodProps { + methodName: string + fromPlugins: any + toPlugin: string + togglePermission: (fromName: string, methodName: string, toPlugin: string) => void + pluginSettings: PluginManagerSettings +} + +function ShowPermissionsByMethod (fromPlugins) { + const checkBoxes = Object.keys(fromPlugins).map(fromName => { + return fromPlugins[fromName] + }) + return checkBoxes +} function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { /** @@ -52,7 +35,6 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) { const toPluginP = '' const fromName = '' const methodName = '' - const openModal = () => setModalVisibility(false) const closeModal = () => setModalVisibility(true) const togglePermission = (fromPlugin: string, toPlugin: string, methodName: string) => { @@ -75,7 +57,9 @@ function PermisssionsSettings ({ pluginSettings }: PermissionSettingsProps) {

No Permission requested yet.

- {/* ${checkbox} */} + {/* { ShowPermissionsByMethod(pluginSettings.permissions).map(fromPluginPermissions => { + + }) } */}
pluginSettings.clearPersmission(fromName, toPluginP, methodName)} className="fa fa-trash-alt" data-id={`pluginManagerSettingsRemovePermission-${toPluginP}-${methodName}-${toPluginP}`}> diff --git a/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx index bd77425ad0..2c9258779e 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx @@ -1,16 +1,22 @@ +import { Profile } from '@remixproject/plugin-utils' import React, { useState } from 'react' -import { PluginManagerComponent, PluginManagerProfile } from '../../types' +import { PluginManagerComponent } from '../../types' import '../remix-ui-plugin-manager.css' -import Button from './button' +import ActivateButton from './ActivateButton' +import DeactivateButton from './deactivateButton' interface PluginCardProps { - profile: Partial + profile: Profile & { + icon?: string + } pluginComponent: PluginManagerComponent + buttonText: string } // eslint-disable-next-line no-empty-pattern function PluginCard ({ profile, - pluginComponent + pluginComponent, + buttonText }: PluginCardProps) { const [displayName] = useState((profile.displayName) ? profile.displayName : profile.name) const [docLink] = useState((profile.documentation) ? ( @@ -18,6 +24,7 @@ function PluginCard ({