Skip to content

B
baas-ide
Commit 006c370b authored by joseph izang's avatar joseph izang
Browse files
Options

showing inactive plugins correctly

parent 44c42ab1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 257 deletions
apps/remix-ide/src/app/components/plugin-manager-component.js
View file @ 006c370b
......@@ -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
}
......
libs/remix-ui/plugin-manager/src/lib/components/button.tsx
View file @ 006c370b
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 (
<button
onClick={buttonText === 'Activate' ? () => activatePlugin(profile.name) : () => deActivatePlugin(profile.name)}
className="btn btn-secondary btn-sm"
className={buttonText === 'Activate' ? needToActivate : needToDeactivate}
data-id={dataId}
>
{buttonText}
......
libs/remix-ui/plugin-manager/src/lib/components/localPluginForm.tsx deleted 100644 → 0
View file @ 44c42ab1
import React, { FormEvent, MouseEvent, useState } from 'react'
import { FormStateProps } from '../../types'
interface RadioSelectionformState {
pluginType: string
inputLabel: string
radioLabel: string
radioChecked?: boolean
updateProfile: (key: string, e: MouseEvent) => void
}
interface LocalPluginFormProps {
formSubmitHandler: (event: FormEvent, formData: FormStateProps) => void
}
const initialState: FormStateProps = {
name: '',
displayName: '',
url: '',
type: 'iframe',
hash: '',
methods: '',
location: 'sidePanel'
}
function LocalPluginForm ({ formSubmitHandler }: LocalPluginFormProps) {
const [plugin, setPlugin] = useState(initialState)
// const [name, setName] = useState('')
// const [displayName, setDisplayName] = useState('')
// const [methods, setMethods] = useState('')
// const [url, setUrl] = useState('')
// const [type, setType] = useState()
// const [location, setLocation] = useState()
function pluginChangeHandler<P extends keyof FormStateProps> (formProps: P, value: FormStateProps[P]) {
setPlugin({ ...plugin, [formProps]: value })
}
// function handleSubmit (e) {
// console.log('Logging the form submit event', e)
// console.log('state of the plugin', plugin)
// }
// const onValueChange = (event: any) => {
// const value = event.target.type === 'radio' ? event.target.checked : event.target.value
// const name = event.target.name
// if (name === 'name') {
// setName(value)
// } else if (name === 'displayName') {
// setDisplayName(value)
// } else if (name === 'methods') {
// setMethods(value)
// } else if (name === 'url') {
// setUrl(value)
// } else if (name === 'type') {
// setType(value)
// } else if (name === 'location') {
// setLocation(value)
// }
// }
return (
<form id="local-plugin-form" onSubmit={(e) => formSubmitHandler(e, plugin)}>
<div className="form-group">
<label htmlFor="plugin-name">Plugin Name <small>(required)</small></label>
<input className="form-control" onChange={e => pluginChangeHandler('name', e.target.value)} value={plugin.name} id="plugin-name" data-id="localPluginName" placeholder="Should be camelCase"/>
</div>
<div className="form-group">
<label htmlFor="plugin-displayname">Display Name</label>
<input className="form-control" onChange={e => pluginChangeHandler('displayName', e.target.value)} value={plugin.displayName} id="plugin-displayname" data-id="localPluginDisplayName" placeholder="Name in the header"/>
</div>
<div className="form-group">
<label htmlFor="plugin-methods">Api (comma separated list of methods name)</label>
<input className="form-control" onChange={e => pluginChangeHandler('methods', e.target.value)} value={plugin.methods} id="plugin-methods" data-id="localPluginMethods" placeholder="Name in the header"/>
</div>
<div className="form-group">
<label htmlFor="plugin-url">Url <small>(required)</small></label>
<input className="form-control" onChange={e => pluginChangeHandler('url', e.target.value)} value={plugin.url} id="plugin-url" data-id="localPluginUrl" placeholder="ex: https://localhost:8000" />
</div>
<h6>Type of connection <small>(required)</small></h6>
<div className="form-check form-group">
<div className="radio">
<input
className="form-check-input"
type="radio"
name="type"
value="iframe"
id="iframe"
data-id='localPluginRadioButtoniframe'
checked={plugin.type === 'iframe'}
onChange={(e) => pluginChangeHandler('type', e.target.value)}
/>
<label className="form-check-label" htmlFor="iframe">Iframe</label>
</div>
<div className="radio">
<input
className="form-check-input"
type="radio"
name="type"
value="ws"
id="ws"
data-id='localPluginRadioButtonws'
checked={plugin.type === 'ws'}
onChange={(e) => pluginChangeHandler('type', e.target.value)}
/>
<label className="form-check-label" htmlFor="ws">Websocket</label>
</div>
</div>
<h6>Location in remix <small>(required)</small></h6>
<div className="form-check form-group">
<div className="radio">
<input
className="form-check-input"
type="radio"
name="location"
value="sidePanel"
id="sidePanel"
data-id='localPluginRadioButtonsidePanel'
checked={plugin.location === 'sidePanel'}
onChange={(e) => pluginChangeHandler('location', e.target.value)}
/>
<label className="form-check-label" htmlFor="sidePanel">Side Panel</label>
</div>
<div className="radio">
<input
className="form-check-input"
type="radio"
name="location"
value="mainPanel"
id="mainPanel"
data-id='localPluginRadioButtonmainPanel'
checked={plugin.location === 'mainPanel'}
onChange={(e) => pluginChangeHandler('location', e.target.value)}
/>
<label className="form-check-label" htmlFor="mainPanel">Main Panel</label>
</div>
<div className="radio">
<input
className="form-check-input"
type="radio"
name="location"
value="none"
id="none"
data-id='localPluginRadioButtonnone'
checked={plugin.location === 'none'}
onChange={(e) => pluginChangeHandler('location', e.target.value)}
/>
<label className="form-check-label" htmlFor="none">None</label>
</div>
</div>
</form>
)
}
export default LocalPluginForm
libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
View file @ 006c370b
import React, { useContext, useState } from 'react'
import { Profile } from '../../types'
import { PluginManagerProfile } from '../../types'
import { PluginManagerContext } from '../contexts/pluginmanagercontext'
import '../remix-ui-plugin-manager.css'
import Button from './button'
interface PluginCardProps {
profile: Partial<Profile>
profile: Partial<PluginManagerProfile>
}
// eslint-disable-next-line no-empty-pattern
......
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
View file @ 006c370b
......@@ -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 (
<PluginManagerContextProvider props={props}>
<RootView localPluginButtonText="Local Plugin"/>
<RootView />
</PluginManagerContextProvider>
)
}
libs/remix-ui/plugin-manager/src/types.d.ts
View file @ 006c370b
......@@ -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<PluginManagerProfile>[]
inactives: Partial<PluginManagerProfile>[]
activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void
isActive: (name: string) => boolean
openLocalPlugin: () => Promise<void>
filterPlugins: () => void
profile: Profile
profile: Partial<PluginManagerProfile>
defaultProfile: DefaultLocalPlugin
headingLabel: string
}
......@@ -122,14 +124,13 @@ export interface RemixUiPluginManagerProps {
localPlugin: LocalPlugin
_paq: _Paq
filter: string
actives: Profile[]
inactives: Profile[]
actives: Partial<PluginManagerProfile>[]
inactives: Partial<PluginManagerProfile>[]
activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void
isActive: (name: string) => any
openLocalPlugin: () => Promise<void>
isActive: (name: string) => boolean
filterPlugins: () => void
profile: Profile
profile: Partial<PluginManagerProfile>
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<any>,
events?: Array<any>,
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment