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
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 298 deletions
apps/remix-ide/src/app/components/plugin-manager-component.js
View file @ 006c370b
...@@ -103,28 +103,15 @@ class PluginManagerComponent extends ViewPlugin { ...@@ -103,28 +103,15 @@ class PluginManagerComponent extends ViewPlugin {
// items: {} // items: {}
// } // }
this.localPlugin = new LocalPlugin() this.localPlugin = new LocalPlugin()
// this.filter = '' this.filter = ''
this.activePlugins = []
this.inactivePlugins = []
// this.appManager.event.on('activate', () => { this.reRender() }) // this.appManager.event.on('activate', () => { this.reRender() })
// this.appManager.event.on('deactivate', () => { this.reRender() }) // this.appManager.event.on('deactivate', () => { this.reRender() })
// this.engine.event.on('onRegistration', () => { this.reRender() }) // this.engine.event.on('onRegistration', () => { this.reRender() })
// const { actives, inactives } = this.getAllPlugins() // 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 () { onActivation () {
this.renderComponent() this.renderComponent()
} }
...@@ -137,15 +124,15 @@ class PluginManagerComponent extends ViewPlugin { ...@@ -137,15 +124,15 @@ class PluginManagerComponent extends ViewPlugin {
engine={this.engine} engine={this.engine}
localPlugin={this.localPlugin} localPlugin={this.localPlugin}
isActive={() => false} isActive={() => false}
actives={[]} actives={this.activePlugins}
inactives={[]} inactives={this.inactivePlugins}
/>, />,
document.getElementById('pluginManager')) document.getElementById('pluginManager'))
} }
// isActive (name) { isActive (name) {
// return this.appManager.actives.includes(name) return this.appManager.actives.includes(name)
// } }
// activateP (name) { // activateP (name) {
// this.appManager.activatePlugin(name) // this.appManager.activatePlugin(name)
...@@ -180,38 +167,62 @@ class PluginManagerComponent extends ViewPlugin { ...@@ -180,38 +167,62 @@ class PluginManagerComponent extends ViewPlugin {
} }
} }
// filterHelper () { filterHelper () {
// const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter) const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
// const isNotRequired = (profile) => !this.appManager.isRequired(profile.name) const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
// const isNotDependent = (profile) => !this.appManager.isDependent(profile.name) const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
// const isNotHome = (profile) => profile.name !== 'home' const isNotHome = (profile) => profile.name !== 'home'
// const sortByName = (profileA, profileB) => { const sortByName = (profileA, profileB) => {
// const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase() const nameA = ((profileA.displayName) ? profileA.displayName : profileA.name).toUpperCase()
// const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase() const nameB = ((profileB.displayName) ? profileB.displayName : profileB.name).toUpperCase()
// return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0 return (nameA < nameB) ? -1 : (nameA > nameB) ? 1 : 0
// } }
// return (isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName) return (isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName)
// } }
// getAllPlugins () { getAllPlugins () {
// // // Filter all active and inactive modules that are not required // // Filter all active and inactive modules that are not required
// const [isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName] = this.filterHelper() const [isFiltered, isNotRequired, isNotDependent, isNotHome, sortByName] = this.filterHelper()
// const { actives, inactives } = this.appManager.getAll() const { actives, inactives } = this.appManager.getAll()
// .filter(isFiltered) .filter(isFiltered)
// .filter(isNotRequired) .filter(isNotRequired)
// .filter(isNotDependent) .filter(isNotDependent)
// .filter(isNotHome) .filter(isNotHome)
// .sort(sortByName) .sort(sortByName)
// .reduce(({ actives, inactives }, profile) => { .reduce(({ actives, inactives }, profile) => {
// return this.isActive(profile.name) return this.isActive(profile.name)
// ? { actives: [...actives, profile], inactives } ? { actives: [...actives, profile], inactives }
// : { inactives: [...inactives, profile], actives } : { inactives: [...inactives, profile], actives }
// }, { actives: [], inactives: [] }) }, { actives: [], inactives: [] })
// return (actives, inactives) this.activePlugins = actives
// } this.inactivePlugins = inactives
}
render () { render () {
// Filtering helpers // 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 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' import { PluginManagerContext } from '../contexts/pluginmanagercontext'
interface ButtonProps { interface ButtonProps {
buttonText: 'Activate' | 'Deactivate' buttonText: 'Activate' | 'Deactivate'
} }
function Button ({ buttonText }: ButtonProps) { function Button ({ buttonText }: ButtonProps) {
const { profile, deActivatePlugin, activatePlugin } = useContext(PluginManagerContext) const { profile, deActivatePlugin, activatePlugin } = useContext(PluginManagerContext)
const dataId = `pluginManagerComponentDeactivateButton${profile.name}` const dataId = `pluginManagerComponentDeactivateButton${profile.name}`
const [needToDeactivate] = useState('btn btn-secondary btn-sm')
const [needToActivate] = useState('btn btn-success btn-sm')
return ( return (
<button <button
onClick={buttonText === 'Activate' ? () => activatePlugin(profile.name) : () => deActivatePlugin(profile.name)} onClick={buttonText === 'Activate' ? () => activatePlugin(profile.name) : () => deActivatePlugin(profile.name)}
className="btn btn-secondary btn-sm" className={buttonText === 'Activate' ? needToActivate : needToDeactivate}
data-id={dataId} data-id={dataId}
> >
{buttonText} {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 React, { useContext, useState } from 'react'
import { Profile } from '../../types' import { PluginManagerProfile } from '../../types'
import { PluginManagerContext } from '../contexts/pluginmanagercontext' import { PluginManagerContext } from '../contexts/pluginmanagercontext'
import '../remix-ui-plugin-manager.css' import '../remix-ui-plugin-manager.css'
import Button from './button' import Button from './button'
interface PluginCardProps { interface PluginCardProps {
profile: Partial<Profile> profile: Partial<PluginManagerProfile>
} }
// eslint-disable-next-line no-empty-pattern // eslint-disable-next-line no-empty-pattern
......
libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
View file @ 006c370b
import React, { FormEvent, Fragment, useContext, useState } from 'react' /* eslint-disable no-debugger */
import React, { Fragment, useContext, useEffect, useState } from 'react'
import { PluginManagerContext } from '../contexts/pluginmanagercontext' import { PluginManagerContext } from '../contexts/pluginmanagercontext'
import ModuleHeading from './moduleHeading' import ModuleHeading from './moduleHeading'
import PluginCard from './pluginCard' import PluginCard from './pluginCard'
import { ModalDialog } from '@remix-ui/modal-dialog' import { ModalDialog } from '@remix-ui/modal-dialog'
import LocalPluginForm from './localPluginForm' import { FormStateProps, PluginManagerProfile, RemixAppManager } from '../../types'
import { FormStateProps } from '../../types' import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web'
import { Profile } from '@remixproject/plugin-utils'
import * as lo from 'lodash'
interface RootViewProps { const initialState: FormStateProps = {
localPluginButtonText: string name: 'test',
displayName: 'test',
url: '',
type: 'iframe',
hash: '',
methods: 'test',
location: 'sidePanel'
} }
function RootView ({ localPluginButtonText }: RootViewProps) { interface ShowInactivesProps {
const { actives, inactives } = useContext(PluginManagerContext) inactives: Partial<PluginManagerProfile>[]
appManager?: RemixAppManager
headinglabel: string
}
function ShowInactives ({ inactives, appManager, headinglabel }: ShowInactivesProps) {
const [plugins] = useState<Profile<any>[]>(appManager.getAll())
const [litUpProfiles] = useState<Profile<any>[]>(appManager.getActiveProfiles())
const pluginNames = litUpProfiles.map(p => p.name)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let temp: Profile<any>[]
pluginNames.forEach(x => {
temp = plugins.filter(plugin => plugin.name === x)
})
return (
<Fragment>
<ModuleHeading headingLabel={headinglabel} />
{inactives.map((profile) => (
<PluginCard key={profile.name} profile={profile} />
))}
</Fragment>
)
}
function ShowActives ({ inactives, appManager, headinglabel }: ShowInactivesProps) {
const [plugins] = useState<any[]>([])
if (inactives.length === 0) {
plugins.map(plugin => inactives.push(plugin))
}
return (
<Fragment>
<ModuleHeading headingLabel={headinglabel} />
{inactives.map((profile) => (
<PluginCard key={profile.name} profile={profile} />
))}
</Fragment>
)
}
function RootView () {
const { appManager, actives, engine, inactives, localPlugin, filter } = useContext(PluginManagerContext)
const [visible, setVisible] = useState<boolean>(true) const [visible, setVisible] = useState<boolean>(true)
const [plugin, setPlugin] = useState(initialState)
const [allPlugins] = useState(appManager.getAll())
const [activePlugins, setActivePlugins] = useState([])
const [inactivePlugins, setInactivePlugins] = useState([])
console.log(`allPlugins state has ${allPlugins.length} plugins ready to be filtered`)
function pluginChangeHandler<P extends keyof FormStateProps> (formProps: P, value: FormStateProps[P]) {
setPlugin({ ...plugin, [formProps]: value })
}
const openModal = () => { const openModal = () => {
setVisible(false) setVisible(false)
} }
const closeModal = () => setVisible(true) const closeModal = () => setVisible(true)
const handleSubmit = (evt: FormEvent, formData: FormStateProps) => { const activatePlugin = async (name: string) => {
console.log('Data submitted from the form!!!: ', formData) await appManager.activatePlugin(name)
evt.preventDefault()
closeModal()
} }
console.log('active plugins', activePlugins)
return ( return (
<Fragment> <Fragment>
<ModalDialog <form id="local-plugin-form">
handleHide={closeModal} <ModalDialog
hide={visible} handleHide={closeModal}
title="Local Plugin" hide={visible}
okLabel="OK" title="Local Plugin"
cancelLabel="Cancel" okLabel="OK"
cancelFn={closeModal} okFn={async () => {
> const plugins = appManager.getActiveProfiles()
<LocalPluginForm console.log('There are the active plugins from appManager :', plugins)
formSubmitHandler={handleSubmit} const profile: any = await localPlugin.open(appManager.getAll())
/> if (appManager.getIds().includes(profile.name)) {
</ModalDialog> 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')
} }
cancelLabel="Cancel"
cancelFn={closeModal}
>
<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>
<div id="pluginManager" data-id="pluginManagerComponentPluginManager"> </ModalDialog>
</form><div id="pluginManager" data-id="pluginManagerComponentPluginManager">
<header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader"> <header className="form-group remixui_pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
<input type="text" className="form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput" /> <input type="text" className="form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput" />
<button onClick={openModal} className="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton"> <button onClick={openModal} className="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
Connect to a Local Plugin Connect to a Local Plugin
</button> </button>
</header> </header>
<section data-id="pluginManagerComponentPluginManagerSection"> <section data-id="pluginManagerComponentPluginManagerSection">
{actives.length === 0 ? ( {actives !== undefined
<Fragment> ? (<ShowActives appManager={appManager} headinglabel="Active Modules" inactives={inactivePlugins} />)
<ModuleHeading headingLabel="Active Modules"/> : (<ShowActives headinglabel="Active Modules" inactives={activePlugins}/>)
{actives.map((profile) => ( }
<PluginCard profile={profile}/> {inactives !== undefined ? (<ShowInactives appManager={appManager} inactives={inactives} headinglabel="Inactive Modules" />) : <ShowInactives inactives={inactives} headinglabel="Inactive Modules" />}
))}
</Fragment>
) : null }
{inactives.length === 0 ? (
<Fragment>
<ModuleHeading headingLabel="Inactive Modules"/>
{inactives.map((profile) => (
<PluginCard profile={profile}/>
))}
</Fragment>
) : null}
</section> </section>
</div> </div>
</Fragment> </Fragment>
......
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
View file @ 006c370b
...@@ -8,26 +8,9 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { ...@@ -8,26 +8,9 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
console.log('current state of appmanager', props.appManager) console.log('current state of appmanager', props.appManager)
console.log('The state of props ', props) 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 ( return (
<PluginManagerContextProvider props={props}> <PluginManagerContextProvider props={props}>
<RootView localPluginButtonText="Local Plugin"/> <RootView />
</PluginManagerContextProvider> </PluginManagerContextProvider>
) )
} }
libs/remix-ui/plugin-manager/src/types.d.ts
View file @ 006c370b
...@@ -2,6 +2,7 @@ import { PermissionHandler } from './app/ui/persmission-handler' ...@@ -2,6 +2,7 @@ import { PermissionHandler } from './app/ui/persmission-handler'
import { PluginManager } from '@remixproject/engine/lib/manager' import { PluginManager } from '@remixproject/engine/lib/manager'
import { EventEmitter } from 'events' import { EventEmitter } from 'events'
import { Engine } from '@remixproject/engine/lib/engine' import { Engine } from '@remixproject/engine/lib/engine'
import { Profile } from '@remixproject/plugin-utils'
/* eslint-disable camelcase */ /* eslint-disable camelcase */
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
...@@ -103,16 +104,17 @@ export class RemixAppManager extends PluginManager { ...@@ -103,16 +104,17 @@ export class RemixAppManager extends PluginManager {
export interface PluginManagerContextProviderProps { export interface PluginManagerContextProviderProps {
appManager: RemixAppManager appManager: RemixAppManager
engine: RemixEngine engine: RemixEngine
localPlugin: LocalPlugin
_paq: _Paq _paq: _Paq
filter: string filter: string
actives: Profile[] actives: Partial<PluginManagerProfile>[]
inactives: Profile[] inactives: Partial<PluginManagerProfile>[]
activatePlugin: (name: string) => void activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void deActivatePlugin: (name: string) => void
isActive: (name: string) => boolean isActive: (name: string) => boolean
openLocalPlugin: () => Promise<void>
filterPlugins: () => void filterPlugins: () => void
profile: Profile profile: Partial<PluginManagerProfile>
defaultProfile: DefaultLocalPlugin
headingLabel: string headingLabel: string
} }
...@@ -122,14 +124,13 @@ export interface RemixUiPluginManagerProps { ...@@ -122,14 +124,13 @@ export interface RemixUiPluginManagerProps {
localPlugin: LocalPlugin localPlugin: LocalPlugin
_paq: _Paq _paq: _Paq
filter: string filter: string
actives: Profile[] actives: Partial<PluginManagerProfile>[]
inactives: Profile[] inactives: Partial<PluginManagerProfile>[]
activatePlugin: (name: string) => void activatePlugin: (name: string) => void
deActivatePlugin: (name: string) => void deActivatePlugin: (name: string) => void
isActive: (name: string) => any isActive: (name: string) => boolean
openLocalPlugin: () => Promise<void>
filterPlugins: () => void filterPlugins: () => void
profile: Profile profile: Partial<PluginManagerProfile>
headingLabel: string headingLabel: string
} }
/** @class Reference loaders. /** @class Reference loaders.
...@@ -153,43 +154,40 @@ export type PluginManagerSettings = { ...@@ -153,43 +154,40 @@ export type PluginManagerSettings = {
render: () => HTMLElement render: () => HTMLElement
} }
export type LocalPluginType = { export interface DefaultLocalPlugin extends Profile {
'iframe', name: string
'ws' displayName: string
} url: string
export type DefaultLocalPlugin = {
type: string type: string
hash: string hash: string
methods: any methods: any
location: string location: string
} }
export interface FormStateProps extends DefaultLocalPlugin { export interface FormStateProps {
name: string name: string
displayName: string displayName: string
url: string url: string
type: string
hash: string
methods: any
location: string
} }
export type Profile = { export type PluginManagerProfile = Profile & {
name: 'pluginManager', name: string,
displayName: 'Plugin manager', displayName: string,
methods: [], methods: Array<any>,
events: [], events?: Array<any>,
icon: 'assets/img/pluginManager.webp', icon: 'assets/img/pluginManager.webp',
description: 'Start/stop services, modules and plugins', description: string,
kind: 'settings', kind?: string,
location: 'sidePanel', location: 'sidePanel' | 'mainPanel' | 'none',
documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html', documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
version: any version: any
type: 'iframe' | 'ws' type: 'iframe' | 'ws'
hash: string hash: string
} }
export type TileLabel = {
label: 'Active Module' | 'Inactive Modules'
}
export type LocalPlugin = { export type LocalPlugin = {
create: () => Profile create: () => Profile
updateName: (target: string) => void 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