Bugfix and yarn.lock update

Signed-off-by: jbicker <jan.bicker@typefox.io>

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -27,7 +27,6 @@ import { ArduinoOpenSketchContextMenu } from './arduino-file-menu';
 import { Sketch, SketchesService } from '../common/protocol/sketches-service';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution'
-import { BoardsToolBarItem } from './components/boards-toolbar-item';
 
 @injectable()
 export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution {
@@ -119,15 +118,15 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         });
         registry.registerItem({
             id: ConnectedBoards.TOOLBAR_ID,
-            render: () => <BoardsToolBarItem
-                onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
-                onUnknownBoard={this.onUnknownBoard.bind(this)} />,
-            // render: () => <ConnectedBoards
-            //     boardsService={this.boardService}
-            //     boardsNotificationService={this.boardsNotificationService}
-            //     quickPickService={this.quickPickService}
+            // render: () => <BoardsToolBarItem
             //     onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
             //     onUnknownBoard={this.onUnknownBoard.bind(this)} />,
+            render: () => <ConnectedBoards
+                boardsService={this.boardService}
+                boardsNotificationService={this.boardsNotificationService}
+                quickPickService={this.quickPickService}
+                onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
+                onUnknownBoard={this.onUnknownBoard.bind(this)} />,
             isVisible: widget => this.isArduinoToolbar(widget)
         })
     }

arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts

@@ -2,6 +2,8 @@ import { FrontendApplicationContribution, FrontendApplication } from "@theia/cor
 import { injectable, inject } from "inversify";
 import { ArduinoToolbar } from "./arduino-toolbar";
 import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
+import { CommandRegistry } from "@theia/core";
+import { LabelParser } from "@theia/core/lib/browser/label-parser";
 
 @injectable()
 export class ArduinoToolbarContribution implements FrontendApplicationContribution {
@@ -9,10 +11,13 @@ export class ArduinoToolbarContribution implements FrontendApplicationContributi
     protected toolbarWidget: ArduinoToolbar;
 
     constructor(
-        @inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry) {
-        this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry);
+        @inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
+        @inject(CommandRegistry) protected commandRegistry: CommandRegistry,
+        @inject(LabelParser) protected labelParser: LabelParser) {
+        this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser);
     }
 
+
     onStart(app: FrontendApplication) {
         app.shell.addWidget(this.toolbarWidget, {
             area: 'top'

arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx

@@ -21,17 +21,17 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
 
     constructor(props: ArduinoToolbarComponent.Props) {
         super(props);
-        this.state = {tooltip: ''};
+        this.state = { tooltip: '' };
     }
 
-    protected renderItem(item: TabBarToolbarItem): React.ReactNode {
+    protected renderItem = (item: TabBarToolbarItem) => {
         let innerText = '';
         const command = this.props.commands.getCommand(item.command);
         const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`
-        return <React.Fragment>
-            <div key={item.id}
+        return <div key={item.id}
                 className={cls} >
                 <div
+                    key={item.id + '-icon'}
                     id={item.id}
                     className={`${item.id} arduino-tool-icon`}
                     onClick={this.props.executeCommand}
@@ -41,12 +41,11 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
                     {innerText}
                 </div>
             </div>
-        </React.Fragment>;
     }
 
     render(): React.ReactNode {
         return <React.Fragment>
-            <div className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
+            <div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
             {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
         </React.Fragment>;
     }
@@ -59,7 +58,7 @@ export class ArduinoToolbar extends ReactWidget {
     constructor(
         protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
         protected readonly commands: CommandRegistry,
-        protected readonly labelParser: LabelParser 
+        protected readonly labelParser: LabelParser
     ) {
         super();
         this.id = 'arduino-toolbar';
@@ -70,7 +69,8 @@ export class ArduinoToolbar extends ReactWidget {
 
     protected updateItems(items: Array<TabBarToolbarItem | ReactTabBarToolbarItem>): void {
         this.items.clear();
-        for (const item of items.sort(TabBarToolbarItem.PRIORITY_COMPARATOR).reverse()) {
+        const revItems = items.reverse();
+        for (const item of revItems) {
             this.items.set(item.id, item);
         }
         this.update();