Skip to content

B
baas-ide
Commit 5836abdd authored by joseph izang's avatar joseph izang
Browse files
Options

basic react component to show in plugin manager

parent e95ec46b
Show whitespace changes
Inline Side-by-side
Showing with 248 additions and 170 deletions
apps/remix-ide/src/app/components/plugin-manager-component.js
View file @ 5836abdd
import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web'
/* eslint-disable no-unused-vars */
import {
IframePlugin,
ViewPlugin,
WebsocketPlugin
} from '@remixproject/engine-web'
import { PluginManagerSettings } from './plugin-manager-settings'
import React from 'react'
import { ReactDOM } from 'react-dom'
import { RemixUIPluginManager } from '@remix-ui/plugin-manager'
import React from 'react' // eslint-disable-line
import ReactDOM from 'react-dom'
import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
import * as packageJson from '../../../../../package.json'
const yo = require('yo-yo')
const csjs = require('csjs-inject')
const EventEmitter = require('events')
const LocalPlugin = require('./local-plugin')
const LocalPlugin = require('./local-plugin') // eslint-disable-line
const addToolTip = require('../ui/tooltip')
const _paq = window._paq = window._paq || []
......@@ -87,92 +92,96 @@ const profile = {
class PluginManagerComponent extends ViewPlugin {
constructor (appManager, engine) {
super(profile)
this.event = new EventEmitter()
this.appManager = appManager
this.views = {
root: null,
items: {}
}
this.localPlugin = new LocalPlugin()
this.filter = ''
this.appManager.event.on('activate', () => { this.reRender() })
this.appManager.event.on('deactivate', () => { this.reRender() })
this.engine = engine
this.engine.event.on('onRegistration', () => { this.reRender() })
// this.event = new EventEmitter()
// this.appManager = appManager
// this.engine = engine
this.htmlElement = document.createElement('div')
this.htmlElement.setAttribute('id', 'pluginManager')
// this.views = {
// root: null,
// items: {}
// }
// this.localPlugin = new LocalPlugin()
// this.filter = ''
// this.appManager.event.on('activate', () => { this.reRender() })
// this.appManager.event.on('deactivate', () => { this.reRender() })
// this.engine.event.on('onRegistration', () => { this.reRender() })
}
onActivation () {
this.renderComponent()
}
isActive (name) {
return this.appManager.actives.includes(name)
renderComponent () {
ReactDOM.render(<RemixUiPluginManager />, document.getElementById('pluginManager'))
}
activateP (name) {
this.appManager.activatePlugin(name)
_paq.push(['trackEvent', 'manager', 'activate', name])
}
// isActive (name) {
// return this.appManager.actives.includes(name)
// }
deactivateP (name) {
this.call('manager', 'deactivatePlugin', name)
_paq.push(['trackEvent', 'manager', 'deactivate', name])
}
// activateP (name) {
// this.appManager.activatePlugin(name)
// _paq.push(['trackEvent', 'manager', 'activate', name])
// }
renderItem (profile) {
const displayName = (profile.displayName) ? profile.displayName : profile.name
const doclink = profile.documentation ? yo`<a href="${profile.documentation}" class="px-1" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>`
: yo``
// deactivateP (name) {
// this.call('manager', 'deactivatePlugin', name)
// _paq.push(['trackEvent', 'manager', 'deactivate', name])
// }
// Check version of the plugin
let versionWarning
// Alpha
if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
versionWarning = yo`<small title="Version Alpha" class="${css.versionWarning} plugin-version">alpha</small>`
}
// Beta
if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
versionWarning = yo`<small title="Version Beta" class="${css.versionWarning} plugin-version">beta</small>`
}
// renderItem (profile) {
// const displayName = (profile.displayName) ? profile.displayName : profile.name
// const doclink = profile.documentation ? yo`<a href="${profile.documentation}" class="px-1" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>`
// : yo``
const activationButton = this.isActive(profile.name)
? yo`
<button
onclick="${() => this.deactivateP(profile.name)}"
class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${profile.name}"
>
Deactivate
</button>
`
: yo`
<button
onclick="${() => this.activateP(profile.name)}"
class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${profile.name}"
>
Activate
</button>`
// // Check version of the plugin
// let versionWarning
// // Alpha
// if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {
// versionWarning = yo`<small title="Version Alpha" class="${css.versionWarning} plugin-version">alpha</small>`
// }
// // Beta
// if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) {
// versionWarning = yo`<small title="Version Beta" class="${css.versionWarning} plugin-version">beta</small>`
// }
return yo`
<article id="remixPluginManagerListItem_${profile.name}" class="list-group-item py-1 mb-1 plugins-list-group-item" title="${displayName}" >
<div class="${css.row} justify-content-between align-items-center mb-2">
<h6 class="${css.displayName} plugin-name">
<div>
${displayName}
${doclink}
${versionWarning}
</div>
${activationButton}
</h6>
</div>
<div class="${css.description} d-flex text-body plugin-text mb-2">
<img src="${profile.icon}" class="mr-1 mt-1 ${css.pluginIcon}" />
<span class="${css.descriptiontext}">${profile.description}</span>
</div>
</article>
`
}
// const activationButton = this.isActive(profile.name)
// ? yo`
// <button
// onclick="${() => this.deactivateP(profile.name)}"
// class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${profile.name}"
// >
// Deactivate
// </button>
// `
// : yo`
// <button
// onclick="${() => this.activateP(profile.name)}"
// class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${profile.name}"
// >
// Activate
// </button>`
// return yo`
// <article id="remixPluginManagerListItem_${profile.name}" class="list-group-item py-1 mb-1 plugins-list-group-item" title="${displayName}" >
// <div class="${css.row} justify-content-between align-items-center mb-2">
// <h6 class="${css.displayName} plugin-name">
// <div>
// ${displayName}
// ${doclink}
// ${versionWarning}
// </div>
// ${activationButton}
// </h6>
// </div>
// <div class="${css.description} d-flex text-body plugin-text mb-2">
// <img src="${profile.icon}" class="mr-1 mt-1 ${css.pluginIcon}" />
// <span class="${css.descriptiontext}">${profile.description}</span>
// </div>
// </article>
// `
// }
/***************
* SUB-COMPONENT
......@@ -197,95 +206,91 @@ class PluginManagerComponent extends ViewPlugin {
}
}
// return this.htmlElement()
// // return this.htmlElement()
// render () {
// return this.htmlElement()
// }
// // render () {
// // return this.htmlElement()
// // }
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
}
// Filter all active and inactive modules that are not required
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: [] })
// // 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 activeTile = actives.length !== 0
? yo`
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title">Active Modules</span>
<span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
</nav>
`
: ''
const inactiveTile = inactives.length !== 0
? yo`
<nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
<span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
<span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
</nav>
`
: ''
// // Filter all active and inactive modules that are not required
// 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: [] })
const settings = new PluginManagerSettings().render()
// const activeTile = actives.length !== 0
// ? yo`
// <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
// <span class="navbar-brand plugins-list-title">Active Modules</span>
// <span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
// </nav>
// `
// : ''
// const inactiveTile = inactives.length !== 0
// ? yo`
// <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
// <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
// <span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
// </nav>
// `
// : ''
const rootView = yo`
<div id='pluginManager' data-id="pluginManagerComponentPluginManager">
<header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
<input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
<button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
Connect to a Local Plugin
</button>
</header>
<section data-id="pluginManagerComponentPluginManagerSection">
${activeTile}
<div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
${actives.map(profile => this.renderItem(profile))}
</div>
${inactiveTile}
<div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
${inactives.map(profile => this.renderItem(profile))}
</div>
</section>
${settings}
</div>
`
if (!this.views.root) this.views.root = rootView
return rootView
}
// const settings = new PluginManagerSettings().render()
renderComponent () {
ReactDOM.render(<RemixUIPluginManager />, this.htmElement)
// const rootView = yo`
// <div id='pluginManager' data-id="pluginManagerComponentPluginManager">
// <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
// <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
// <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
// Connect to a Local Plugin
// </button>
// </header>
// <section data-id="pluginManagerComponentPluginManagerSection">
// ${activeTile}
// <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
// ${actives.map(profile => this.renderItem(profile))}
// </div>
// ${inactiveTile}
// <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
// ${inactives.map(profile => this.renderItem(profile))}
// </div>
// </section>
// ${settings}
// </div>
// `
// if (!this.views.root) this.views.root = rootView
return this.htmlElement
}
reRender () {
if (this.views.root) {
yo.update(this.views.root, this.render())
}
}
// reRender () { --> no needed possibly
// if (this.views.root) {
// yo.update(this.views.root, this.render())
// }
// }
filterPlugins ({ target }) {
this.filter = target.value.toLowerCase()
this.reRender()
}
// filterPlugins ({ target }) {
// this.filter = target.value.toLowerCase()
// this.reRender()
// }
}
module.exports = PluginManagerComponent
apps/remix-ide/src/app/components/plugin-manager-settings.js
View file @ 5836abdd
......@@ -3,7 +3,7 @@ const csjs = require('csjs-inject')
const modalDialog = require('../ui/modaldialog')
const css = csjs`
.permissions {
.remixui_permissions {
position: sticky;
bottom: 0;
display: flex;
......
libs/remix-ui/plugin-manager/src/index.ts
View file @ 5836abdd
export * from './lib/remix-ui-plugin-manager';
export * from './lib/remix-ui-plugin-manager'
libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx 0 → 100644
View file @ 5836abdd
import React, { createContext, useState } from 'react'
import { Profile } from '../../customTypes'
import * as packageJson from '../../../../../../package.json'
// export interface RemixUiPluginManagerProps {
// activatePlugin: (name: string) => void
// deActivatePlugin: (name: string) => void
// isActive: () => void
// openLocalPlugin: () => Promise<void>
// filterPlugins: () => void
// reRender: () => void
// profile: Profile
// }
export const PluginManagerContext = createContext({})
function PluginManagerContextProvider ({ children }) {
const [profile] = useState<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: packageJson.version
})
return (
<PluginManagerContext.Provider value={profile}>
{children}
</PluginManagerContext.Provider>
)
}
export default PluginManagerContextProvider
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
View file @ 5836abdd
.pluginSearch {
.remixui_pluginSearch {
display: flex;
flex-direction: column;
align-items: center;
......@@ -9,42 +9,42 @@
z-index: 2;
margin-bottom: 0px;
}
.pluginSearchInput {
.remixui_pluginSearchInput {
height: 38px;
}
.pluginSearchButton {
.remixui_pluginSearchButton {
font-size: 13px;
}
.displayName {
.remixui_displayName {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.pluginIcon {
.remixui_pluginIcon {
height: 0.7rem;
width: 0.7rem;
filter: invert(0.5);
}
.description {
.remixui_description {
font-size: 13px;
line-height: 18px;
}
.descriptiontext {
.remixui_descriptiontext {
display: block;
}
.descriptiontext:first-letter {
.remixui_descriptiontext:first-letter {
text-transform: uppercase;
}
.row {
.remixui_row {
display: flex;
flex-direction: row;
}
.isStuck {
.remixui_isStuck {
background-color: var(--primary);
/* color: */
}
.versionWarning {
.remixui_versionWarning {
padding: 4px;
margin: 0 8px;
font-weight: 700;
......@@ -55,3 +55,42 @@
border: 1px solid;
border-radius: 2px;
}
.remixui_permissions {
position: sticky;
bottom: 0;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 5px 20px;
}
.remixui_permissions button {
padding: 2px 5px;
cursor: pointer;
}
.remixui_permissionForm h4 {
font-size: 1.3rem;
text-align: center;
}
.remixui_permissionForm h6 {
font-size: 1.1rem;
}
.remixui_permissionForm hr {
width: 80%;
}
.remixui_permissionKey {
display: flex;
justify-content: space-between;
align-items: center;
}
.remixui_permissionKey i {
cursor: pointer;
}
.remixui_checkbox {
display: flex;
align-items: center;
}
.remixui_checkbox label {
margin: 0;
font-size: 1rem;
}
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
View file @ 5836abdd
......@@ -20,5 +20,3 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
</div>
)
}
export default RemixUiPluginManager
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