Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
baas-ide
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
guxukai
baas-ide
Commits
d7da2c83
Commit
d7da2c83
authored
Jul 20, 2021
by
joseph izang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Effect changes as advised by IOE Developer. Remove logic from button component and make it an SFC.
parent
c830dd48
Show whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
192 additions
and
189 deletions
+192
-189
plugin-manager-component.js
.../remix-ide/src/app/components/plugin-manager-component.js
+54
-43
customTypes.ts
libs/remix-ui/plugin-manager/src/customTypes.ts
+0
-33
ActivateButton.tsx
...x-ui/plugin-manager/src/lib/components/ActivateButton.tsx
+29
-0
deactivateButton.tsx
...ui/plugin-manager/src/lib/components/deactivateButton.tsx
+9
-15
moduleHeading.tsx
...ix-ui/plugin-manager/src/lib/components/moduleHeading.tsx
+3
-5
permissionsSettings.tsx
...er/src/lib/components/permissions/permissionsSettings.tsx
+17
-33
pluginCard.tsx
...remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
+15
-8
rootView.tsx
libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
+22
-52
remix-ui-plugin-manager.tsx
...mix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
+42
-0
types.d.ts
libs/remix-ui/plugin-manager/src/types.d.ts
+1
-0
No files found.
apps/remix-ide/src/app/components/plugin-manager-component.js
View file @
d7da2c83
...
...
@@ -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
(
<
RemixUiPluginManager
profile
=
{
profile
}
pluginComponent
=
{
this
}
appManager
=
{
this
.
appManager
}
engine
=
{
this
.
engine
}
...
...
@@ -176,41 +187,41 @@ class PluginManagerComponent extends ViewPlugin {
}
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
}
// 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
()
}
}
...
...
libs/remix-ui/plugin-manager/src/customTypes.ts
deleted
100644 → 0
View file @
c830dd48
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
}
libs/remix-ui/plugin-manager/src/lib/components/ActivateButton.tsx
0 → 100644
View file @
d7da2c83
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
(
<
button
onClick=
{
()
=>
{
pluginComponent
.
activateP
(
pluginName
)
}
}
className=
{
buttonText
===
'Activate'
?
'btn btn-success btn-sm'
:
'btn btn-secondary btn-sm'
}
data
-
id=
{
dataId
}
>
{
buttonText
}
</
button
>
)
}
export
default
ActivateButton
libs/remix-ui/plugin-manager/src/lib/components/
b
utton.tsx
→
libs/remix-ui/plugin-manager/src/lib/components/
deactivateB
utton.tsx
View file @
d7da2c83
import
React
,
{
useState
}
from
'react'
import
React
from
'react'
import
{
PluginManagerComponent
}
from
'../../types'
interface
ButtonProps
{
buttonText
:
'Activate'
|
'Deactivate'
interface
Deactivate
ButtonProps
{
buttonText
:
string
pluginName
:
string
pluginComponent
:
PluginManagerComponent
}
function
Button
({
function
Deactivate
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'
)
}:
DeactivateButtonProps
)
{
const
dataId
=
`pluginManagerComponent
${
buttonText
}
Button
${
pluginName
}
`
return
(
<
button
onClick=
{
buttonText
===
'Activate'
?
()
=>
{
pluginComponent
.
activateP
(
pluginName
)
buttonText
=
'Deactivate'
}
:
()
=>
{
onClick=
{
()
=>
{
pluginComponent
.
deactivateP
(
pluginName
)
buttonText
=
'Activate'
}
}
className=
{
buttonText
===
'
Activate'
?
needToActivate
:
needToDeactivate
}
className=
{
buttonText
===
'
Deactivate'
?
'btn btn-secondary btn-sm'
:
''
}
data
-
id=
{
dataId
}
>
{
buttonText
}
</
button
>
)
}
export
default
Button
export
default
Deactivate
Button
libs/remix-ui/plugin-manager/src/lib/components/moduleHeading.tsx
View file @
d7da2c83
import
React
from
'react'
import
{
PluginManagerProfile
}
from
'../../types'
interface
ModuleHeadingProps
{
headingLabel
:
string
actives
:
Partial
<
PluginManagerProfile
>
[]
inactives
:
Partial
<
PluginManagerProfile
>
[]
count
:
number
}
function
ModuleHeading
({
headingLabel
,
actives
,
inactives
}:
ModuleHeadingProps
)
{
function
ModuleHeading
({
headingLabel
,
count
}:
ModuleHeadingProps
)
{
return
(
<
nav
className=
"plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center"
>
<
span
className=
"navbar-brand plugins-list-title h6 mb-0 mr-2"
>
{
headingLabel
}
</
span
>
<
span
className=
"badge badge-primary"
style=
{
{
cursor
:
'default'
}
}
data
-
id=
"pluginManagerComponentInactiveTilesCount"
>
{
headingLabel
===
'Active Modules'
?
actives
.
length
:
inactives
.
length
}
{
count
}
</
span
>
</
nav
>
)
...
...
libs/remix-ui/plugin-manager/src/lib/components/permissions/permissionsSettings.tsx
View file @
d7da2c83
...
...
@@ -12,37 +12,20 @@ interface PermissionSettingsProps {
}
// <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>
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) {
<
h4
>
No Permission requested yet.
</
h4
>
<
div
className=
"form-group remixui_permissionKey"
>
<
div
className=
"remixui_checkbox"
>
{
/* ${checkbox} */
}
{
/* { ShowPermissionsByMethod(pluginSettings.permissions).map(fromPluginPermissions => {
}) } */
}
<
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
>
...
...
libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx
View file @
d7da2c83
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
<
PluginManagerProfile
>
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
<
string
>
((
profile
.
displayName
)
?
profile
.
displayName
:
profile
.
name
)
const
[
docLink
]
=
useState
<
JSX
.
Element
>
((
profile
.
documentation
)
?
(
...
...
@@ -18,6 +24,7 @@ function PluginCard ({
<
i
aria
-
hidden=
"true"
className=
"fas fa-book"
/>
</
a
>
)
:
null
)
const
[
versionWarning
]
=
useState
<
JSX
.
Element
>
((
profile
.
version
&&
profile
.
version
.
match
(
/
\b(\w
*alpha
\w
*
)\b
/g
))
?
(
<
small
title=
"Version Alpha"
className=
"remixui_versionWarning plugin-version"
>
alpha
</
small
>
)
:
(
profile
.
version
&&
profile
.
version
.
match
(
/
\b(\w
*beta
\w
*
)\b
/g
))
?
(
...
...
@@ -34,13 +41,13 @@ function PluginCard ({
{
versionWarning
}
</
div
>
{
pluginComponent
.
isActive
(
profile
.
name
)
?
(
<
Button
buttonText=
"Deactivate"
<
Deactivate
Button
buttonText=
{
buttonText
}
pluginName=
{
profile
.
name
}
pluginComponent=
{
pluginComponent
}
/>)
:
<
Button
buttonText=
"Activate"
:
<
Activate
Button
buttonText=
{
buttonText
}
pluginName=
{
profile
.
name
}
pluginComponent=
{
pluginComponent
}
/>
...
...
libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx
View file @
d7da2c83
...
...
@@ -3,10 +3,10 @@ import React, { Fragment, useEffect, useState } from 'react'
import
ModuleHeading
from
'./moduleHeading'
import
PluginCard
from
'./pluginCard'
import
{
ModalDialog
}
from
'@remix-ui/modal-dialog'
import
{
FormStateProps
,
PluginManagerComponent
,
PluginManagerProfile
,
PluginManagerSettings
}
from
'../../types'
import
{
FormStateProps
,
PluginManagerComponent
}
from
'../../types'
import
{
IframePlugin
,
WebsocketPlugin
}
from
'@remixproject/engine-web'
import
{
Profile
}
from
'@remixproject/plugin-utils'
import
PermisssionsSettings
from
'./permissions/permissionsSettings'
import
{
Profile
}
from
'@remixproject/plugin-utils'
const
initialState
:
FormStateProps
=
{
name
:
'test'
,
...
...
@@ -29,8 +29,8 @@ function RootView ({ pluginComponent }: RootViewProps) {
const
[
visible
,
setVisible
]
=
useState
<
boolean
>
(
true
)
const
[
plugin
,
setPlugin
]
=
useState
(
initialState
)
const
[
filterPlugins
,
setFilterPlugin
]
=
useState
(
''
)
const
[
activeP
,
setActiveP
]
=
useState
<
P
artial
<
PluginManagerProfile
>
[]
>
(
)
const
[
inactiveP
,
setInactiveP
]
=
useState
<
P
artial
<
PluginManagerProfile
>
[]
>
(
)
const
[
activeP
,
setActiveP
]
=
useState
<
P
rofile
[]
>
([]
)
const
[
inactiveP
,
setInactiveP
]
=
useState
<
P
rofile
[]
>
([]
)
function
pluginChangeHandler
<
P
extends
keyof
FormStateProps
>
(
formProps
:
P
,
value
:
FormStateProps
[
P
])
{
setPlugin
({
...
plugin
,
[
formProps
]:
value
})
...
...
@@ -45,46 +45,19 @@ function RootView ({ pluginComponent }: RootViewProps) {
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
)
=>
!
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
()
const
nameB
=
((
profileB
.
displayName
)
?
profileB
.
displayName
:
profileB
.
name
).
toUpperCase
()
return
(
nameA
<
nameB
)
?
-
1
:
(
nameA
>
nameB
)
?
1
:
0
}
const
getAndFilterPlugins
=
()
=>
{
const
{
actives
,
inactives
}
=
pluginComponent
.
appManager
.
getAll
()
.
filter
(
isFiltered
)
.
filter
(
isNotRequired
)
.
filter
(
isNotDependent
)
.
filter
(
isNotHome
)
.
sort
(
sortByName
)
.
reduce
(({
actives
,
inactives
},
profile
)
=>
{
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
(()
=>
{
getAndFilterPlugins
(
)
pluginComponent
.
getAndFilterPlugins
(
filterPlugins
)
// eslint-disable-next-line react-hooks/exhaustive-deps
},
[
filterPlugins
])
useEffect
(()
=>
{
},
[
activeP
,
inactiveP
])
if
(
pluginComponent
.
activePlugins
&&
pluginComponent
.
activePlugins
.
length
)
{
setActiveP
(
pluginComponent
.
activePlugins
)
}
if
(
pluginComponent
.
inactivePlugins
&&
pluginComponent
.
inactivePlugins
.
length
)
{
setInactiveP
(
pluginComponent
.
inactivePlugins
)
}
},
[
pluginComponent
.
activePlugins
,
pluginComponent
.
inactivePlugins
])
return
(
<
Fragment
>
...
...
@@ -99,9 +72,9 @@ function RootView ({ pluginComponent }: RootViewProps) {
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
)
const
l
ocal
Plugin
=
profile
.
type
===
'iframe'
?
new
IframePlugin
(
profile
)
:
new
WebsocketPlugin
(
profile
)
pluginComponent
.
engine
.
register
(
l
ocal
Plugin
)
pluginComponent
.
appManager
.
activatePlugin
(
l
ocal
Plugin
.
name
)
}
}
cancelLabel=
"Cancel"
cancelFn=
{
closeModal
}
...
...
@@ -209,33 +182,30 @@ function RootView ({ pluginComponent }: RootViewProps) {
</
button
>
</
header
>
<
section
data
-
id=
"pluginManagerComponentPluginManagerSection"
>
{
activeP
!==
undefined
?
(
<
Fragment
>
<
ModuleHeading
headingLabel=
"Active Modules"
actives=
{
activeP
}
inactives=
{
inactiveP
}
/>
{
activeP
&&
<
Fragment
>
<
ModuleHeading
headingLabel=
"Active Modules"
count=
{
activeP
.
length
}
/>
{
activeP
.
map
((
profile
)
=>
(
<
PluginCard
buttonText=
"Deactivate"
key=
{
profile
.
name
}
profile=
{
profile
}
pluginComponent=
{
pluginComponent
}
/>
))
}
</
Fragment
>
)
:
null
}
{
inactiveP
!==
undefined
?
(
<
Fragment
>
<
ModuleHeading
headingLabel=
"Inactive Modules"
inactives=
{
inactiveP
}
actives=
{
activeP
}
/>
{
inactiveP
&&
<
Fragment
>
<
ModuleHeading
headingLabel=
"Inactive Modules"
count=
{
inactiveP
.
length
}
/>
{
inactiveP
.
map
((
profile
)
=>
(
<
PluginCard
buttonText=
"Activate"
key=
{
profile
.
name
}
profile=
{
profile
}
pluginComponent=
{
pluginComponent
}
/>
))
}
</
Fragment
>
)
:
null
}
}
</
section
>
<
PermisssionsSettings
pluginSettings=
{
pluginComponent
.
pluginSettings
}
/>
</
div
>
...
...
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
View file @
d7da2c83
...
...
@@ -3,6 +3,48 @@ import { RemixUiPluginManagerProps } from '../types'
import
RootView
from
'./components/rootView'
import
'./remix-ui-plugin-manager.css'
// const test = () => {
// const appManager = new RemixAppManager()
// const activePlugins: Profile<any>[] = new Array<Profile<any>>()
// const inactivePlugins: Profile<any>[] = new Array<Profile<any>>()
// const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
// const isNotRequired = (profile) => !appManager.isRequired(profile.name)
// const isNotDependent = (profile) => !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 { finalActives, finalInactives } =
// const tempArray = appManager.getAll()
// .filter(isFiltered)
// .filter(isNotRequired)
// .filter(isNotDependent)
// .filter(isNotHome)
// .sort(sortByName)
// tempArray.forEach(profile => {
// if (appManager.actives.includes(profile.name)) {
// activePlugins.push(profile)
// } else {
// inactivePlugins.push(profile)
// }
// })
// return { activePlugins, inactivePlugins }
// // .reduce(({ actives, inactives }, profile) => {
// // return isActive(profile.name)
// // ? { actives: [...actives, profile], inactives }
// // : { inactives: [...inactives, profile], actives }
// // }, { actives: [], inactives: [] })
// // // eslint-disable-next-line no-debugger
// // // debugger
// // activePlugins = finalActives
// // inactivePlugins = finalInactives
// }
export
const
RemixUiPluginManager
=
(
props
:
RemixUiPluginManagerProps
)
=>
{
return
(
<
RootView
pluginComponent=
{
props
.
pluginComponent
}
/>
...
...
libs/remix-ui/plugin-manager/src/types.d.ts
View file @
d7da2c83
...
...
@@ -93,6 +93,7 @@ export class PluginManagerComponent extends ViewPlugin extends Plugin implements
openLocalPlugin
():
Promise
<
void
>
render
():
HTMLDivElement
filterPlugins
({
target
}:
{
target
:
any
})
:
void
getAndFilterPlugins
:
(
filter
?:
string
)
=>
void
}
// eslint-disable-next-line no-use-before-define
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment