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 f3f95bd568..be83edac72 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -103,28 +103,15 @@ class PluginManagerComponent extends ViewPlugin { // items: {} // } this.localPlugin = new LocalPlugin() - // this.filter = '' + this.filter = '' + this.activePlugins = [] + this.inactivePlugins = [] // 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() } - reactProps () { - return { - views: this.views, - filter: this.filter, - localPlugin: this.localPlugin, - isActive: this.isActive, - activatePlugin: this.activateP, - deactivePlugin: this.deactivateP, - openLocalPlugin: this.openLocalPlugin, - profile: this.profile - // actives: actives, - // inactives: inactives - } - } - onActivation () { this.renderComponent() } @@ -137,15 +124,15 @@ class PluginManagerComponent extends ViewPlugin { engine={this.engine} localPlugin={this.localPlugin} isActive={() => false} - actives={[]} - inactives={[]} + actives={this.activePlugins} + inactives={this.inactivePlugins} />, document.getElementById('pluginManager')) } - // isActive (name) { - // return this.appManager.actives.includes(name) - // } + isActive (name) { + return this.appManager.actives.includes(name) + } // activateP (name) { // this.appManager.activatePlugin(name) @@ -180,38 +167,62 @@ class PluginManagerComponent extends ViewPlugin { } } - // filterHelper () { - // 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 - // } - // return (isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName) - // } - - // getAllPlugins () { - // // // Filter all active and inactive modules that are not required - // const [isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName] = this.filterHelper() - // 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: [] }) - // return (actives, inactives) - // } + filterHelper () { + 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 + } + return (isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName) + } + + getAllPlugins () { + // // Filter all active and inactive modules that are not required + const [isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName] = this.filterHelper() + 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 + } 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 + } + + 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 } diff --git a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx b/libs/remix-ui/plugin-manager/src/lib/components/button.tsx index 2d7bf93c31..3986c860d7 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/button.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/button.tsx @@ -1,18 +1,20 @@ -import React, { useContext } from 'react' +import React, { useContext, useState } from 'react' import { PluginManagerContext } from '../contexts/pluginmanagercontext' interface ButtonProps { buttonText: 'Activate' | 'Deactivate' + } function Button ({ buttonText }: ButtonProps) { const { profile, deActivatePlugin, activatePlugin } = useContext(PluginManagerContext) const dataId = `pluginManagerComponentDeactivateButton${profile.name}` - + const [needToDeactivate] = useState('btn btn-secondary btn-sm') + const [needToActivate] = useState('btn btn-success btn-sm') return (
- {actives.length === 0 ? ( - - - {actives.map((profile) => ( - - ))} - - ) : null } - {inactives.length === 0 ? ( - - - {inactives.map((profile) => ( - - ))} - - ) : null} + {actives !== undefined + ? () + : () + } + {inactives !== undefined ? () : }
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 d98404b662..26e5e33cbe 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 @@ -8,26 +8,9 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { console.log('current state of appmanager', props.appManager) console.log('The state of props ', props) - // openLocalPlugin () { - // try { - // const profile = await props.localPlugin.open(props.appManager.getAll()) - // if (!profile) return - // if (props.appManager.getIds().includes(profile.name)) { - // throw new Error('This name has already been used') - // } - // const plugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile) - // props.engine.register(plugin) - // await props.appManager.activatePlugin(plugin.name) - // } catch (err) { - // // TODO : Use an alert to handle this error instead of a console.log - // console.log(`Cannot create Plugin : ${err.message}`) - // addToolTip(`Cannot create Plugin : ${err.message}`) - // } - // } - return ( - + ) } diff --git a/libs/remix-ui/plugin-manager/src/types.d.ts b/libs/remix-ui/plugin-manager/src/types.d.ts index 1a954bba74..c2cdfc1aaa 100644 --- a/libs/remix-ui/plugin-manager/src/types.d.ts +++ b/libs/remix-ui/plugin-manager/src/types.d.ts @@ -2,6 +2,7 @@ import { PermissionHandler } from './app/ui/persmission-handler' import { PluginManager } from '@remixproject/engine/lib/manager' import { EventEmitter } from 'events' import { Engine } from '@remixproject/engine/lib/engine' +import { Profile } from '@remixproject/plugin-utils' /* eslint-disable camelcase */ // eslint-disable-next-line no-use-before-define @@ -103,16 +104,17 @@ export class RemixAppManager extends PluginManager { export interface PluginManagerContextProviderProps { appManager: RemixAppManager engine: RemixEngine + localPlugin: LocalPlugin _paq: _Paq filter: string - actives: Profile[] - inactives: Profile[] + actives: Partial[] + inactives: Partial[] activatePlugin: (name: string) => void deActivatePlugin: (name: string) => void isActive: (name: string) => boolean - openLocalPlugin: () => Promise filterPlugins: () => void - profile: Profile + profile: Partial + defaultProfile: DefaultLocalPlugin headingLabel: string } @@ -122,14 +124,13 @@ export interface RemixUiPluginManagerProps { localPlugin: LocalPlugin _paq: _Paq filter: string - actives: Profile[] - inactives: Profile[] + actives: Partial[] + inactives: Partial[] activatePlugin: (name: string) => void deActivatePlugin: (name: string) => void - isActive: (name: string) => any - openLocalPlugin: () => Promise + isActive: (name: string) => boolean filterPlugins: () => void - profile: Profile + profile: Partial headingLabel: string } /** @class Reference loaders. @@ -153,43 +154,40 @@ export type PluginManagerSettings = { render: () => HTMLElement } -export type LocalPluginType = { - 'iframe', - 'ws' -} - -export type DefaultLocalPlugin = { +export interface DefaultLocalPlugin extends Profile { + name: string + displayName: string + url: string type: string hash: string methods: any location: string } -export interface FormStateProps extends DefaultLocalPlugin { +export interface FormStateProps { name: string displayName: string url: string + type: string + hash: string + methods: any + location: string } -export type Profile = { - name: 'pluginManager', - displayName: 'Plugin manager', - methods: [], - events: [], +export type PluginManagerProfile = Profile & { + name: string, + displayName: string, + methods: Array, + events?: Array, icon: 'assets/img/pluginManager.webp', - description: 'Start/stop services, modules and plugins', - kind: 'settings', - location: 'sidePanel', + description: string, + kind?: string, + location: 'sidePanel' | 'mainPanel' | 'none', documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html', version: any type: 'iframe' | 'ws' hash: string } - -export type TileLabel = { - label: 'Active Module' | 'Inactive Modules' -} - export type LocalPlugin = { create: () => Profile updateName: (target: string) => void