ATL-786: Progress indication for install.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

arduino-ide-extension/src/browser/theia/messages/notification-center-component.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { NotificationComponent } from './notification-component';
+import { NotificationCenterComponent as TheiaNotificationCenterComponent } from '@theia/messages/lib/browser/notification-center-component'
+
+const PerfectScrollbar = require('react-perfect-scrollbar');
+
+export class NotificationCenterComponent extends TheiaNotificationCenterComponent {
+
+    render(): React.ReactNode {
+        const empty = this.state.notifications.length === 0;
+        const title = empty ? 'NO NEW NOTIFICATIONS' : 'NOTIFICATIONS';
+        return (
+            <div className={`theia-notifications-container theia-notification-center ${this.state.visibilityState === 'center' ? 'open' : 'closed'}`}>
+                <div className='theia-notification-center-header'>
+                    <div className='theia-notification-center-header-title'>{title}</div>
+                    <div className='theia-notification-center-header-actions'>
+                        <ul className='theia-notification-actions'>
+                            <li className='collapse' title='Hide Notification Center' onClick={this.onHide} />
+                            <li className='clear-all' title='Clear All' onClick={this.onClearAll} />
+                        </ul>
+                    </div>
+                </div>
+                <PerfectScrollbar className='theia-notification-list-scroll-container'>
+                    <div className='theia-notification-list'>
+                        {this.state.notifications.map(notification =>
+                            <NotificationComponent key={notification.messageId} notification={notification} manager={this.props.manager} />
+                        )}
+                    </div>
+                </PerfectScrollbar>
+            </div>
+        );
+    }
+
+}

arduino-ide-extension/src/browser/theia/messages/notification-component.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component'
+
+export class NotificationComponent extends TheiaNotificationComponent {
+
+    render(): React.ReactNode {
+        const { messageId, message, type, collapsed, expandable, source, actions } = this.props.notification;
+        return (<div key={messageId} className='theia-notification-list-item'>
+            <div className={`theia-notification-list-item-content ${collapsed ? 'collapsed' : ''}`}>
+                <div className='theia-notification-list-item-content-main'>
+                    <div className={`theia-notification-icon theia-notification-icon-${type}`} />
+                    <div className='theia-notification-message'>
+                        <span dangerouslySetInnerHTML={{ __html: message }} onClick={this.onMessageClick} />
+                    </div>
+                    <ul className='theia-notification-actions'>
+                        {expandable && (
+                            <li className={collapsed ? 'expand' : 'collapse'} title={collapsed ? 'Expand' : 'Collapse'}
+                                data-message-id={messageId} onClick={this.onToggleExpansion} />
+                        )}
+                        {!this.isProgress && (<li className='clear' title='Clear' data-message-id={messageId} onClick={this.onClear} />)}
+                    </ul>
+                </div>
+                {(source || !!actions.length) && (
+                    <div className='theia-notification-list-item-content-bottom'>
+                        <div className='theia-notification-source'>
+                            {source && (<span>{source}</span>)}
+                        </div>
+                        <div className='theia-notification-buttons'>
+                            {actions && actions.map((action, index) => (
+                                <button key={messageId + `-action-${index}`} className='theia-button'
+                                    data-message-id={messageId} data-action={action}
+                                    onClick={this.onAction}>
+                                    {action}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+            {this.renderProgressBar()}
+        </div>);
+    }
+
+    private renderProgressBar(): React.ReactNode {
+        if (!this.isProgress) {
+            return undefined;
+        }
+        if (!Number.isNaN(this.props.notification.progress)) {
+            return <div className='theia-notification-item-progress'>
+                <div className='theia-notification-item-progressbar' style={{ width: `${this.props.notification.progress}%` }} />
+            </div>;
+        }
+        return <div className='theia-progress-bar-container'>
+            <div className='theia-progress-bar' />
+        </div>
+    }
+
+    private get isProgress(): boolean {
+        return typeof this.props.notification.progress === 'number';
+    }
+
+}

arduino-ide-extension/src/browser/theia/messages/notification-toasts-component.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { NotificationComponent } from './notification-component';
+import { NotificationToastsComponent as TheiaNotificationToastsComponent } from '@theia/messages/lib/browser/notification-toasts-component'
+
+export class NotificationToastsComponent extends TheiaNotificationToastsComponent {
+
+    render(): React.ReactNode {
+        return (
+            <div className={`theia-notifications-container theia-notification-toasts ${this.state.visibilityState === 'toasts' ? 'open' : 'closed'}`}>
+                <div className='theia-notification-list'>
+                    {this.state.toasts.map(notification => <NotificationComponent key={notification.messageId} notification={notification} manager={this.props.manager} />)}
+                </div>
+            </div>
+        );
+    }
+
+}

arduino-ide-extension/src/browser/theia/messages/notifications-manager.ts

@@ -0,0 +1,37 @@
+import { injectable } from 'inversify';
+import { CancellationToken } from '@theia/core/lib/common/cancellation';
+import { ProgressMessage, ProgressUpdate } from '@theia/core/lib/common/message-service-protocol';
+import { NotificationManager as TheiaNotificationManager } from '@theia/messages/lib/browser/notifications-manager';
+
+@injectable()
+export class NotificationManager extends TheiaNotificationManager {
+
+    async reportProgress(messageId: string, update: ProgressUpdate, originalMessage: ProgressMessage, cancellationToken: CancellationToken): Promise<void> {
+        const notification = this.find(messageId);
+        if (!notification) {
+            return;
+        }
+        if (cancellationToken.isCancellationRequested) {
+            this.clear(messageId);
+        } else {
+            notification.message = originalMessage.text && update.message ? `${originalMessage.text}: ${update.message}` :
+                originalMessage.text || update?.message || notification.message;
+
+            // Unlike in Theia, we allow resetting the progress monitor to NaN to enforce unknown progress.
+            const candidate = this.toPlainProgress(update);
+            notification.progress = typeof candidate === 'number' ? candidate : notification.progress;
+        }
+        this.fireUpdatedEvent();
+    }
+
+    protected toPlainProgress(update: ProgressUpdate): number | undefined {
+        if (!update.work) {
+            return undefined;
+        }
+        if (Number.isNaN(update.work.done) || Number.isNaN(update.work.total)) {
+            return Number.NaN; // This should trigger the unknown monitor.
+        }
+        return Math.min(update.work.done / update.work.total * 100, 100);
+    }
+
+}

arduino-ide-extension/src/browser/theia/messages/notifications-renderer.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { injectable } from 'inversify';
+import { NotificationCenterComponent } from './notification-center-component';
+import { NotificationToastsComponent } from './notification-toasts-component';
+import { NotificationsRenderer as TheiaNotificationsRenderer } from '@theia/messages/lib/browser/notifications-renderer';
+
+@injectable()
+export class NotificationsRenderer extends TheiaNotificationsRenderer {
+
+    protected render(): void {
+        ReactDOM.render(<div>
+            <NotificationToastsComponent manager={this.manager} corePreferences={this.corePreferences} />
+            <NotificationCenterComponent manager={this.manager} />
+        </div>, this.container);
+    }
+
+}