diff --git a/apps/remix-ide-e2e/src/tests/debugger.test.ts b/apps/remix-ide-e2e/src/tests/debugger.test.ts index f6d72362c1..6698c13635 100644 --- a/apps/remix-ide-e2e/src/tests/debugger.test.ts +++ b/apps/remix-ide-e2e/src/tests/debugger.test.ts @@ -200,7 +200,7 @@ module.exports = { browser .addFile('test_jsGetTrace.js', { content: jsGetTrace }) .executeScript('remix.exeCurrent()') - .pause(1000) + .pause(3000) .waitForElementContainsText('*[data-id="terminalJournal"]', '{"gas":"0x575f","return":"0x0000000000000000000000000000000000000000000000000000000000000000","structLogs":', 60000) }, // depends on Should debug using generated sources diff --git a/apps/remix-ide/src/app/components/vertical-icons.js b/apps/remix-ide/src/app/components/vertical-icons.js index f1c3827c8d..3883181836 100644 --- a/apps/remix-ide/src/app/components/vertical-icons.js +++ b/apps/remix-ide/src/app/components/vertical-icons.js @@ -33,6 +33,8 @@ export class VerticalIcons extends Plugin { this.targetProfileForChange = {} this.targetProfileForRemoval = {} this.registry = globalRegistry + this.keys = ['succeed', 'edited', 'none', 'loading', 'failed'] + this.types = ['error', 'warning', 'success', 'info', ''] } renderComponent () { @@ -62,19 +64,19 @@ export class VerticalIcons extends Plugin { listenOnStatus (profile) { // the list of supported keys. 'none' will remove the status - const keys = ['edited', 'succeed', 'none', 'loading', 'failed'] - const types = ['error', 'warning', 'success', 'info', ''] - const fn = (status) => { - if (!types.includes(status.type) && status.type) throw new Error(`type should be ${keys.join()}`) - if (status.key === undefined) throw new Error('status key should be defined') - - if (typeof status.key === 'string' && (!keys.includes(status.key))) { - throw new Error('key should contain either number or ' + keys.join()) - } - this.setIconStatus(profile.name, status) - } - this.iconStatus[profile.name] = fn - this.on(profile.name, 'statusChanged', this.iconStatus[profile.name]) + // const keys = ['edited', 'succeed', 'none', 'loading', 'failed'] + // const types = ['error', 'warning', 'success', 'info', ''] + // const fn = (status) => { + // if (!this.types.includes(status.type) && status.type) throw new Error(`type should be ${this.keys.join()}`) + // if (status.key === undefined) throw new Error('status key should be defined') + + // if (typeof status.key === 'string' && (!this.keys.includes(status.key))) { + // throw new Error('key should contain either number or ' + this.keys.join()) + // } + // this.setIconStatus(profile.name, status) + // } + // this.iconStatus[profile.name] = fn + // this.on(profile.name, 'statusChanged', this.iconStatus[profile.name]) } /** @@ -84,6 +86,7 @@ export class VerticalIcons extends Plugin { */ resolveClasses (key, type) { let classes = 'remixui_status' + switch (key) { case 'succeed': classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' @@ -111,6 +114,8 @@ export class VerticalIcons extends Plugin { */ setIconStatus (name, status) { const el = this.icons[name] + // eslint-disable-next-line no-debugger + debugger if (!el) return const statusEl = el.querySelector('i') if (statusEl) { diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx index ab84bfd59d..6e4cfbfc23 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Debugger.tsx @@ -22,19 +22,7 @@ function Debugger ({ verticalIconsPlugin, itemContextAction, addActive, removeAc verticalIconsPlugin.targetProfileForChange[p].displayName }> void addActive: (profileName: string) => void removeActive: () => void } -// eslint-disable-next-line @typescript-eslint/no-unused-vars function Icon ({ - // eslint-disable-next-line @typescript-eslint/no-unused-vars - kind, - name, - icon, - displayName, - tooltip, - documentation, + profile, verticalIconPlugin, contextMenuAction, addActive, removeActive }: IconProps) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { tooltip, displayName, name, kind, icon, documentation } = profile const [title] = useState(() => { const temp = tooltip || displayName || name return temp.replace(/^\w/, word => word.toUpperCase()) @@ -47,6 +44,7 @@ function Icon ({ const [showContext, setShowContext] = useState(false) const [canDeactivate] = useState(false) const iconRef = useRef(null) + const iconStatusValues = { title: '', key: '', type: '', text: '' } const handleContextMenu = (e: SyntheticEvent & PointerEvent) => { const deactivationState = verticalIconPlugin.appManager @@ -65,6 +63,94 @@ function Icon ({ setShowContext(false) } + /** + * resolve a classes list for @arg key + * @param {String} key + * @param {String} type + */ + function resolveClasses (key: string, type: string) { + let classes = 'remixui_status' + + switch (key) { + case 'succeed': + classes += ' fas fa-check-circle text-' + type + ' ' + 'remixui_statusCheck' + break + case 'edited': + classes += ' fas fa-sync text-' + type + ' ' + 'remixui_statusCheck' + break + case 'loading': + classes += ' fas fa-spinner text-' + type + ' ' + 'remixui_statusCheck' + break + case 'failed': + classes += ' fas fa-exclamation-triangle text-' + type + ' ' + 'remixui_statusCheck' + break + default: { + classes += ' badge badge-pill badge-' + type + } + } + return classes + } + + /** + * Set a new status for the @arg name + * @param {String} name + * @param {Object} status + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + function setIconStatus (name: string, status: { key: string | number, title: string, type: string }) { + if (!iconRef.current) return + const statusEl = iconRef.current.querySelector('i') + if (statusEl) { + iconRef.current.removeChild(statusEl) + } + if (status.key === 'none') return // remove status + + let text = '' + let key = '' + if (typeof status.key === 'number') { + key = status.key.toString() + text = key + } else key = helper.checkSpecialChars(status.key) ? '' : status.key + + let type = '' + if (status.type === 'error') { + type = 'danger' // to use with bootstrap + } else type = helper.checkSpecialChars(status.type) ? '' : status.type + const title = helper.checkSpecialChars(status.title) ? '' : status.title + + const icon = document.createElement('i') + icon.title = title + icon.className = resolveClasses(key, type) + icon.ariaHidden = 'true' + const innerText = document.createTextNode(text) + icon.appendChild(innerText) + iconRef.current!.appendChild(icon) + iconRef.current.classList.add('remixui_icon') + } + + function listenOnStatus (profile: any) { + function setErrorStatus (status: any) { + if (!verticalIconPlugin.types.includes(status.type) && status.type) throw new Error(`type should be ${verticalIconPlugin.keys.join()}`) + if (status.key === undefined) throw new Error('status key should be defined') + if (typeof status.key === 'string' && (!verticalIconPlugin.keys.includes(status.key))) { + throw new Error('key should contain either number or ' + verticalIconPlugin.keys.join()) + } + setIconStatus(profile.name, status) + } + verticalIconPlugin.iconStatus[profile.name] = setErrorStatus + verticalIconPlugin.on(profile.name, 'statusChanged', verticalIconPlugin.iconStatus[profile.name]) + } + + useEffect(() => { + listenOnStatus(profile) + return () => { + console.log('just listened for status change ', { profile }) + addEventListener('statusChanged', (e) => { + console.log('statusChanged just happend for this icon and this is its payload ', e) + }) + } + }, []) + return (
{name}
+ {verticalIconPlugin.iconStatus && Object.keys(verticalIconPlugin.iconStatus).length !== null ? ( + + ) : null } {showContext ? ( ( p === 'pluginManager') .map(p => ( p === 'settings') .map(p => ( { targetProfileForChange: any targetProfileForRemoval: any registry: registry + keys: string[] + types: string[] renderComponent(): void linkContent(profile: any): void unlinkContent(profile: any): void