mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

basic react component to show in plugin manager

Browse Source
pull/1344/head
joseph izang 3 years ago
parent e95ec46b20
commit 5836abdd6e
6 changed files with 249 additions and 171 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 315
      apps/remix-ide/src/app/components/plugin-manager-component.js
  2. 4
      apps/remix-ide/src/app/components/plugin-manager-settings.js
  3. 2
      libs/remix-ui/plugin-manager/src/index.ts
  4. 36
      libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx
  5. 61
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
  6. 2
      libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

315
apps/remix-ide/src/app/components/plugin-manager-component.js
Unescape View File

@ -1,13 +1,18 @@
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
}
// // 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: [] })
// // 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 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 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 settings = new PluginManagerSettings().render()
// const settings = new PluginManagerSettings().render()
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
}
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

4
apps/remix-ide/src/app/components/plugin-manager-settings.js
Unescape View File

@ -2,8 +2,8 @@ const yo = require('yo-yo')
const csjs = require('csjs-inject')
const modalDialog = require('../ui/modaldialog')
const css = csjs`
.permissions {
const css = csjs`
.remixui_permissions {
position: sticky;
bottom: 0;
display: flex;

2
libs/remix-ui/plugin-manager/src/index.ts
Unescape View File

@ -1 +1 @@
export * from './lib/remix-ui-plugin-manager';
export * from './lib/remix-ui-plugin-manager'

36
libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx
Unescape View File

@ -0,0 +1,36 @@
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

61
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css
Unescape View File

@ -1,4 +1,4 @@
.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;
}

2
libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx
Unescape View File

@ -20,5 +20,3 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
</div>
)
}
export default RemixUiPluginManager

Write Preview
Loading…
Cancel
Save