From a3eb3f548bc6a0b868f83c9d64b01248a7568551 Mon Sep 17 00:00:00 2001 From: joseph izang Date: Mon, 5 Jul 2021 18:32:00 +0100 Subject: [PATCH] generate types to align remixuipluginmanager props --- app/ui/modal-dialog-custom.d.ts | 30 +++++++ app/ui/modaldialog.d.ts | 7 ++ app/ui/persmission-handler.d.ts | 36 ++++++++ app/ui/styles/modal-dialog-custom-styles.d.ts | 2 + app/ui/styles/modaldialog-styles.d.ts | 2 + app/ui/styles/tooltip-styles.d.ts | 2 + app/ui/tooltip.d.ts | 2 + .../components/plugin-manager-component.js | 44 +++++----- global/registry.d.ts | 9 ++ lib/query-params.d.ts | 7 ++ .../plugin-manager/src/customTypes.ts | 6 +- .../src/lib/components/activeTile.tsx | 7 +- .../src/lib/components/listGroupItem.tsx | 12 ++- .../src/lib/components/pluginCard.tsx | 2 +- .../lib/components/pluginManagerProvider.tsx | 36 -------- .../src/lib/components/renderItem.tsx | 54 ++++++++++++ .../src/lib/components/rootView.tsx | 15 ++-- .../src/lib/remix-ui-plugin-manager.tsx | 82 +++++++++++++++++-- libs/remix-ui/plugin-manager/src/types.d.ts | 56 +++++++++++++ registry.d.ts | 10 +++ 20 files changed, 337 insertions(+), 84 deletions(-) create mode 100644 app/ui/modal-dialog-custom.d.ts create mode 100644 app/ui/modaldialog.d.ts create mode 100644 app/ui/persmission-handler.d.ts create mode 100644 app/ui/styles/modal-dialog-custom-styles.d.ts create mode 100644 app/ui/styles/modaldialog-styles.d.ts create mode 100644 app/ui/styles/tooltip-styles.d.ts create mode 100644 app/ui/tooltip.d.ts create mode 100644 global/registry.d.ts create mode 100644 lib/query-params.d.ts delete mode 100644 libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx create mode 100644 libs/remix-ui/plugin-manager/src/lib/components/renderItem.tsx create mode 100644 registry.d.ts diff --git a/app/ui/modal-dialog-custom.d.ts b/app/ui/modal-dialog-custom.d.ts new file mode 100644 index 0000000000..4d90a2b68b --- /dev/null +++ b/app/ui/modal-dialog-custom.d.ts @@ -0,0 +1,30 @@ +export function alert(title: any, text: any): { + container: HTMLElement; + okListener: () => void; + cancelListener: () => void; + hide: () => void; +}; +export function prompt(title: any, text: any, inputValue: any, ok: any, cancel: any, focus: any): void; +export function promptPassphrase(title: any, text: any, inputValue: any, ok: any, cancel: any): void; +export function promptPassphraseCreation(ok: any, cancel: any): { + container: HTMLElement; + okListener: () => void; + cancelListener: () => void; + hide: () => void; +}; +export function promptMulti({ title, text, inputValue }: { + title: any; + text: any; + inputValue: any; +}, ok: any, cancel: any): { + container: HTMLElement; + okListener: () => void; + cancelListener: () => void; + hide: () => void; +}; +export function confirm(title: any, text: any, ok: any, cancel: any): { + container: HTMLElement; + okListener: () => void; + cancelListener: () => void; + hide: () => void; +}; diff --git a/app/ui/modaldialog.d.ts b/app/ui/modaldialog.d.ts new file mode 100644 index 0000000000..8ca5058d19 --- /dev/null +++ b/app/ui/modaldialog.d.ts @@ -0,0 +1,7 @@ +declare function _exports(title: any, content: any, ok: any, cancel: any, focusSelector: any, opts: any): { + container: HTMLElement; + okListener: () => void; + cancelListener: () => void; + hide: () => void; +}; +export = _exports; diff --git a/app/ui/persmission-handler.d.ts b/app/ui/persmission-handler.d.ts new file mode 100644 index 0000000000..1458be6c9b --- /dev/null +++ b/app/ui/persmission-handler.d.ts @@ -0,0 +1,36 @@ +export class PermissionHandler { + permissions: any; + currentVersion: number; + _getFromLocal(): any; + persistPermissions(): void; + clear(): void; + /** + * Show a message to ask the user for a permission + * @param {PluginProfile} from The name and hash of the plugin that make the call + * @param {ModuleProfile} to The name of the plugin that receive the call + * @param {string} method The name of the function to be called + * @param {string} message from the caller plugin to add more details if needed + * @returns {Promise<{ allow: boolean; remember: boolean }} Answer from the user to the permission + */ + openPermission(from: any, to: any, method: string, message: string): Promise<{ + allow: boolean; + remember: boolean; + }>; + /** + * Check if a plugin has the permission to call another plugin and askPermission if needed + * @param {PluginProfile} from the profile of the plugin that make the call + * @param {ModuleProfile} to The profile of the module that receive the call + * @param {string} method The name of the function to be called + * @param {string} message from the caller plugin to add more details if needed + * @returns {Promise} + */ + askPermission(from: any, to: any, method: string, message: string): Promise; + /** + * The permission form + * @param {PluginProfile} from The name and hash of the plugin that make the call + * @param {ModuleProfile} to The name of the plugin that receive the call + * @param {string} method The name of te methode to be called + * @param {string} message from the caller plugin to add more details if needed + */ + form(from: any, to: any, method: string, message: string): any; +} diff --git a/app/ui/styles/modal-dialog-custom-styles.d.ts b/app/ui/styles/modal-dialog-custom-styles.d.ts new file mode 100644 index 0000000000..17eaa199b0 --- /dev/null +++ b/app/ui/styles/modal-dialog-custom-styles.d.ts @@ -0,0 +1,2 @@ +export = css; +declare var css: any; diff --git a/app/ui/styles/modaldialog-styles.d.ts b/app/ui/styles/modaldialog-styles.d.ts new file mode 100644 index 0000000000..17eaa199b0 --- /dev/null +++ b/app/ui/styles/modaldialog-styles.d.ts @@ -0,0 +1,2 @@ +export = css; +declare var css: any; diff --git a/app/ui/styles/tooltip-styles.d.ts b/app/ui/styles/tooltip-styles.d.ts new file mode 100644 index 0000000000..17eaa199b0 --- /dev/null +++ b/app/ui/styles/tooltip-styles.d.ts @@ -0,0 +1,2 @@ +export = css; +declare var css: any; diff --git a/app/ui/tooltip.d.ts b/app/ui/tooltip.d.ts new file mode 100644 index 0000000000..3dabc371e3 --- /dev/null +++ b/app/ui/tooltip.d.ts @@ -0,0 +1,2 @@ +declare function _exports(tooltipText: string, action?: Function, opts: any): any; +export = _exports; 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 f9d2b3ea24..cea87ed9ed 100644 --- a/apps/remix-ide/src/app/components/plugin-manager-component.js +++ b/apps/remix-ide/src/app/components/plugin-manager-component.js @@ -92,7 +92,7 @@ const profile = { class PluginManagerComponent extends ViewPlugin { constructor (appManager, engine) { super(profile) - // this.event = new EventEmitter() + // this.event = new EventEmitter() //already exists in engine so not needed here // this.appManager = appManager // this.engine = engine this.htmlElement = document.createElement('div') @@ -120,15 +120,15 @@ class PluginManagerComponent extends ViewPlugin { // return this.appManager.actives.includes(name) // } - // activateP (name) { - // this.appManager.activatePlugin(name) - // _paq.push(['trackEvent', 'manager', 'activate', name]) - // } + activateP (name) { + this.appManager.activatePlugin(name) + _paq.push(['trackEvent', 'manager', 'activate', name]) + } - // deactivateP (name) { - // this.call('manager', 'deactivatePlugin', name) - // _paq.push(['trackEvent', 'manager', 'deactivate', name]) - // } + deactivateP (name) { + this.call('manager', 'deactivatePlugin', name) + _paq.push(['trackEvent', 'manager', 'deactivate', name]) + } // renderItem (profile) { // const displayName = (profile.displayName) ? profile.displayName : profile.name @@ -206,23 +206,17 @@ class PluginManagerComponent extends ViewPlugin { } } - // // 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() diff --git a/global/registry.d.ts b/global/registry.d.ts new file mode 100644 index 0000000000..f706ab2a37 --- /dev/null +++ b/global/registry.d.ts @@ -0,0 +1,9 @@ +declare const _exports: { + state: {}; + put({ api, name }: { + api: any; + name: any; + }): any; + get(name: any): any; +}; +export = _exports; diff --git a/lib/query-params.d.ts b/lib/query-params.d.ts new file mode 100644 index 0000000000..537b864249 --- /dev/null +++ b/lib/query-params.d.ts @@ -0,0 +1,7 @@ +export = QueryParams; +declare function QueryParams(_window: any): void; +declare class QueryParams { + constructor(_window: any); + get: () => {}; + update: (params: any) => void; +} diff --git a/libs/remix-ui/plugin-manager/src/customTypes.ts b/libs/remix-ui/plugin-manager/src/customTypes.ts index 5004c94b60..8f6a286e25 100644 --- a/libs/remix-ui/plugin-manager/src/customTypes.ts +++ b/libs/remix-ui/plugin-manager/src/customTypes.ts @@ -16,7 +16,11 @@ export type Profile = { kind: 'settings', location: 'sidePanel', documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html', - version: string + version: any +} + +export type TileLabel = { + label: 'Active Module' | 'Inactive Modules' } export type LocalPlugin = { diff --git a/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx b/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx index f2a8a0050a..fa1ea10316 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/activeTile.tsx @@ -1,13 +1,10 @@ import React from 'react' - -type tileLabel = { - label: 'Active Module' | 'Inactive Modules' -} +import { TileLabel } from '../../customTypes' interface ActiveTileProps { inactivesCount?: number activesCount?: number - tileLabel?: tileLabel + tileLabel?: TileLabel } function ActiveTile ({ inactivesCount, activesCount, tileLabel }: ActiveTileProps) { diff --git a/libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx b/libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx index fab9496217..cc92302409 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx @@ -1,18 +1,22 @@ import React from 'react' import { Profile } from '../../customTypes' +import RenderItem from './renderItem' interface ListGroupItemProps { activeProfiles: Profile[] inactiveProfiles: Profile[] - renderItem: (profile: Profile) => void } -function ListGroupItem ({ activeProfiles, inactiveProfiles, renderItem }: ListGroupItemProps) { +function ListGroupItem ({ activeProfiles, inactiveProfiles }: ListGroupItemProps) { return (
{ activeProfiles.length > 0 - ? activeProfiles.map(profile => renderItem(profile)) - : inactiveProfiles.map(profile => renderItem(profile)) + ? activeProfiles.map(profile => ( + + )) + : inactiveProfiles.map(profile => ( + + )) }
) diff --git a/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx index 85e95dc707..da9bca617e 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/pluginCard.tsx @@ -5,7 +5,7 @@ interface PluginCardProps { profileName: string displayName: string docLink: string - versionWarning: string + versionWarning: any profileIcon: string profileDescription: string } diff --git a/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx b/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx deleted file mode 100644 index 3ce7c87a2a..0000000000 --- a/libs/remix-ui/plugin-manager/src/lib/components/pluginManagerProvider.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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/components/renderItem.tsx b/libs/remix-ui/plugin-manager/src/lib/components/renderItem.tsx new file mode 100644 index 0000000000..f976357f24 --- /dev/null +++ b/libs/remix-ui/plugin-manager/src/lib/components/renderItem.tsx @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from 'react' +import { Profile } from '../../customTypes' +import PluginCard from './pluginCard' + +interface RenderItemProps { + profile: Profile +} + +function RenderItem ({ profile }: RenderItemProps) { + const [displayName, setDisplayName] = useState('') + const [docLink, setDocLink] = useState() + const [versionWarning, setVersionWarning] = useState, HTMLElement>>() + + useEffect(() => { + const checkPluginVersion = (version: string) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + let versionWarning: React.DetailedHTMLProps, HTMLElement> + if (version && version.match(/\b(\w*alpha\w*)\b/g)) { + versionWarning = alpha + } + // Beta + if (version && version.match(/\b(\w*beta\w*)\b/g)) { + versionWarning = beta + } + return versionWarning + } + + setDisplayName((profile.displayName) ? profile.displayName : profile.name) + setDocLink( + profile.documentation ? ( + + + + ) : '') + setVersionWarning(checkPluginVersion(profile.version)) + }, [profile.displayName, profile.documentation, profile.name, profile.version, versionWarning]) + + return ( + + ) +} + +export default RenderItem diff --git a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx index 266014cd7d..e4d2aeffbb 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Profile } from '../../customTypes' +import { Profile, TileLabel } from '../../customTypes' import ActiveTile from './activeTile' import ListGroupItem from './listGroupItem' @@ -9,7 +9,7 @@ interface RootViewProps { inactiveProfiles?: Profile[] filterPlugins: () => void openLocalPlugins: () => void - renderItem: (profile: Profile) => void + tileLabel: TileLabel } function RootView ({ @@ -18,20 +18,23 @@ function RootView ({ inactiveProfiles, filterPlugins, openLocalPlugins, - renderItem + tileLabel }: RootViewProps) { return (
-
+
- +
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 f07ea78765..ab845dc6dc 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 @@ -1,22 +1,92 @@ -import React from 'react' +import React, { createContext, useEffect, useState } from 'react' import { Profile } from '../customTypes' +import { RemixAppManager, RemixEngine, _Paq } from '../types' +import RootView from './components/rootView' import './remix-ui-plugin-manager.css' /* eslint-disable-next-line */ export interface RemixUiPluginManagerProps { + appManager: RemixAppManager + engine: RemixEngine + _paq: _Paq + filter: string activatePlugin: (name: string) => void deActivatePlugin: (name: string) => void - isActive: () => void + isActive: (name: string) => void openLocalPlugin: () => Promise filterPlugins: () => void - reRender: () => void profile: Profile } +export const PluginManagerContext = createContext({}) + +function PluginManagerContextProvider ({ children }) { + const [globalState] = useState({} as RemixUiPluginManagerProps) + return ( + + {children} + + ) +} + +// // 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: [] }) + export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => { + const [isFiltered] = useState((profile) => + (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(props.filter)) + const [isNotRequired, setIsNotRequired] = useState(false) + const [isNotDependent, setIsNotDependent] = useState((profile) => !props.appManager.isDependent(profile.name)) + const [isNotHome, setIsNotHome] = useState((profile) => profile.name !== 'home') + const [sortByName, setSortByName] = useState<1 | -1 | 0>((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 } = props.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: [] }) + useEffect(() => { + const notRequired = (profile: Profile) => !props.appManager.isRequired(profile.name) + setIsNotRequired(notRequired(props.profile)) + }) + return ( -
-

Welcome to remix-ui-plugin-manager!

-
+ + + ) } diff --git a/libs/remix-ui/plugin-manager/src/types.d.ts b/libs/remix-ui/plugin-manager/src/types.d.ts index 2014ac099b..4167ddc17b 100644 --- a/libs/remix-ui/plugin-manager/src/types.d.ts +++ b/libs/remix-ui/plugin-manager/src/types.d.ts @@ -1,3 +1,7 @@ +import { PermissionHandler } from './app/ui/persmission-handler' +import { PluginManager } from '@remixproject/engine/lib/manager' +import { EventEmitter } from 'events' +import { Engine } from '@remixproject/engine/lib/engine' /* eslint-disable camelcase */ declare module 'yo-yo'{ @@ -17,3 +21,55 @@ declare module 'dom-css'{ var css:dom_css export = css; } + +interface SetPluginOptionType { + queueTimeout: number +} + +export interface _Paq { + _paq: Window & typeof globalThis | [] +} + +export class RemixEngine extends Engine { + event: EventEmitter; + setPluginOption ({ name, kind }) : SetPluginOptionType + onRegistration (plugin) : void +} + +export function isNative(name: any): any; +/** + * Checks if plugin caller 'from' is allowed to activate plugin 'to' + * The caller can have 'canActivate' as a optional property in the plugin profile. + * This is an array containing the 'name' property of the plugin it wants to call. + * canActivate = ['plugin1-to-call','plugin2-to-call',....] + * or the plugin is allowed by default because it is native + * + * @param {any, any} + * @returns {boolean} + */ +export function canActivate(from: any, to: any): boolean; +export class RemixAppManager extends PluginManager { + constructor(); + event: EventEmitter; + pluginsDirectory: string; + pluginLoader: PluginLoader; + permissionHandler: PermissionHandler; + getAll(): import('@remixproject/plugin-utils').Profile[]; + getIds(): string[]; + isDependent(name: any): any; + isRequired(name: any): any; + registeredPlugins(): Promise; +} +/** @class Reference loaders. + * A loader is a get,set based object which load a workspace from a defined sources. + * (localStorage, queryParams) + **/ +declare class PluginLoader { + get currentLoader(): any; + donotAutoReload: string[]; + loaders: {}; + current: string; + set(plugin: any, actives: any): void; + get(): any; +} +export { } diff --git a/registry.d.ts b/registry.d.ts new file mode 100644 index 0000000000..7257a4b711 --- /dev/null +++ b/registry.d.ts @@ -0,0 +1,10 @@ +declare class registry { + state: {}; + put({ api, name }: { + api: any; + name: any; + }): any + + get(name: any): any; +} +export = registry;