diff --git a/apps/remix-ide/src/app/components/plugin-manager-component.js b/apps/remix-ide/src/app/components/plugin-manager-component.js index 1ec2fb5994..f9d2b3ea24 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -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(, 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`` - : 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`alpha` - } - // Beta - if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { - versionWarning = yo`beta` - } + // renderItem (profile) { + // const displayName = (profile.displayName) ? profile.displayName : profile.name + // const doclink = profile.documentation ? yo`` + // : yo`` - const activationButton = this.isActive(profile.name) - ? yo` - - ` - : yo` - ` + // // Check version of the plugin + // let versionWarning + // // Alpha + // if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) { + // versionWarning = yo`alpha` + // } + // // Beta + // if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { + // versionWarning = yo`beta` + // } - return yo` -
-
-
-
- ${displayName} - ${doclink} - ${versionWarning} -
- ${activationButton} -
-
-
- - ${profile.description} -
-
- ` - } + // const activationButton = this.isActive(profile.name) + // ? yo` + // + // ` + // : yo` + // ` + + // return yo` + //
+ //
+ //
+ //
+ // ${displayName} + // ${doclink} + // ${versionWarning} + //
+ // ${activationButton} + //
+ //
+ //
+ // + // ${profile.description} + //
+ //
+ // ` + // } /*************** * 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` - - ` - : '' - const inactiveTile = inactives.length !== 0 - ? yo` - - ` - : '' + // const activeTile = actives.length !== 0 + // ? yo` + // + // ` + // : '' + // const inactiveTile = inactives.length !== 0 + // ? yo` + // + // ` + // : '' - const settings = new PluginManagerSettings().render() + // const settings = new PluginManagerSettings().render() - const rootView = yo` -
-
- - -
-
- ${activeTile} -
- ${actives.map(profile => this.renderItem(profile))} -
- ${inactiveTile} -
- ${inactives.map(profile => this.renderItem(profile))} -
-
- ${settings} -
- ` - if (!this.views.root) this.views.root = rootView - return rootView - } - - renderComponent () { - ReactDOM.render(, this.htmElement) + // const rootView = yo` + //
+ //
+ // + // + //
+ //
+ // ${activeTile} + //
+ // ${actives.map(profile => this.renderItem(profile))} + //
+ // ${inactiveTile} + //
+ // ${inactives.map(profile => this.renderItem(profile))} + //
+ //
+ // ${settings} + //
+ // ` + // 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 diff --git a/apps/remix-ide/src/app/components/plugin-manager-settings.js b/apps/remix-ide/src/app/components/plugin-manager-settings.js index 3b6cc291cf..ed9ef3bbad 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-settings.js +++ b/apps/remix-ide/src/app/components/plugin-manager-settings.js @@ -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; diff --git a/libs/remix-ui/plugin-manager/src/index.ts b/libs/remix-ui/plugin-manager/src/index.ts index fe4343e6ef..030e10c5dd 100644 --- a/libs/remix-ui/plugin-manager/src/index.ts +++ b/libs/remix-ui/plugin-manager/src/index.ts @@ -1 +1 @@ -export * from './lib/remix-ui-plugin-manager'; +export * from './lib/remix-ui-plugin-manager' diff --git a/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx b/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx new file mode 100644 index 0000000000..3ce7c87a2a --- /dev/null +++ b/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx @@ -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 +// filterPlugins: () => void +// reRender: () => void +// profile: Profile +// } + +export const PluginManagerContext = createContext({}) + +function PluginManagerContextProvider ({ children }) { + const [profile] = useState({ + 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 ( + + {children} + + ) +} + +export default PluginManagerContextProvider diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css index 51b5e0a64d..413e6c5846 100644 --- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css +++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.css @@ -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; +} diff --git a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx index 242a293d8c..f07ea78765 100644 --- a/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx @@ -20,5 +20,3 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { ) } - -export default RemixUiPluginManager