[atl-1217] sketchbook explorer local & remote

arduino-ide-extension/src/browser/widgets/cloud-sketchbook/cloud-sketchbook-composite-widget.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { inject, injectable } from 'inversify';
+import { Widget } from '@phosphor/widgets';
+import { Message, MessageLoop } from '@phosphor/messaging';
+import { Disposable } from '@theia/core/lib/common/disposable';
+import { BaseWidget } from '@theia/core/lib/browser/widgets/widget';
+import { UserStatus } from './cloud-user-status';
+import { CloudSketchbookTreeWidget } from './cloud-sketchbook-tree-widget';
+import { AuthenticationClientService } from '../../auth/authentication-client-service';
+import { CloudSketchbookTreeModel } from './cloud-sketchbook-tree-model';
+
+@injectable()
+export class CloudSketchbookCompositeWidget extends BaseWidget {
+    @inject(AuthenticationClientService)
+    protected readonly authenticationService: AuthenticationClientService;
+
+    @inject(CloudSketchbookTreeWidget)
+    protected readonly cloudSketchbookTreeWidget: CloudSketchbookTreeWidget;
+
+    private compositeNode: HTMLElement;
+    private cloudUserStatusNode: HTMLElement;
+
+    constructor() {
+        super();
+        this.compositeNode = document.createElement('div');
+        this.compositeNode.classList.add('composite-node');
+        this.cloudUserStatusNode = document.createElement('div');
+        this.cloudUserStatusNode.classList.add('cloud-status-node');
+        this.compositeNode.appendChild(this.cloudUserStatusNode);
+        this.node.appendChild(this.compositeNode);
+        this.title.caption = 'Cloud Sketchbook';
+        this.title.iconClass = 'cloud-sketchbook-tree-icon';
+        this.title.closable = false;
+        this.id = 'cloud-sketchbook-composite-widget';
+    }
+
+    protected onAfterAttach(message: Message): void {
+        super.onAfterAttach(message);
+        Widget.attach(this.cloudSketchbookTreeWidget, this.compositeNode);
+        ReactDOM.render(
+            <UserStatus
+                model={
+                    this.cloudSketchbookTreeWidget
+                        .model as CloudSketchbookTreeModel
+                }
+                authenticationService={this.authenticationService}
+            />,
+            this.cloudUserStatusNode
+        );
+        this.toDisposeOnDetach.push(
+            Disposable.create(() =>
+                Widget.detach(this.cloudSketchbookTreeWidget)
+            )
+        );
+    }
+
+    protected onResize(message: Widget.ResizeMessage): void {
+        super.onResize(message);
+        MessageLoop.sendMessage(
+            this.cloudSketchbookTreeWidget,
+            Widget.ResizeMessage.UnknownSize
+        );
+    }
+}