Select Board Dialog Style and Layout

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

Author: jbicker

arduino-ide-extension/src/browser/arduino-file-menu.ts

@@ -54,7 +54,7 @@ export class ArduinoToolbarMenuContribution implements MenuContribution {
             });
             registry.registerMenuAction(ArduinoToolbarContextMenu.CONNECTED_GROUP, {
                 commandId: command.id,
-                label: board.name + (selectedPort === port ? '*' : '')
+                label: board.name + ' at ' + port + (selectedPort === port ? '*' : '')
             });
         });
     }

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

@@ -90,6 +90,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     @inject(SelectBoardsDialog)
     protected readonly selectBoardsDialog: SelectBoardsDialog;
 
+    protected boardsToolbarItem: BoardsToolBarItem | null;
+
     @postConstruct()
     protected async init(): Promise<void> {
         // This is a hack. Otherwise, the backend services won't bind.
@@ -124,15 +126,10 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         registry.registerItem({
             id: ConnectedBoards.TOOLBAR_ID,
             render: () => <BoardsToolBarItem
+                ref={ref => this.boardsToolbarItem = ref}
                 contextMenuRenderer={this.contextMenuRenderer}
-                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)} />,
+                boardsNotificationService={this.boardsNotificationService}
+                boardService={this.boardService} />,
             isVisible: widget => this.isArduinoToolbar(widget)
         })
     }
@@ -230,31 +227,37 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         });
         registry.registerCommand(ArduinoCommands.SELECT_BOARD, {
             isEnabled: () => true,
-            execute: (board: Board) => {
-                this.boardService.selectBoard(board).then(() => {
-                    return this.boardService.getSelectBoard();
-                }).then(board => {
-                    console.log("and the selected board is", board);
-                })
+            execute: async (board: Board) => {
+                this.selectBoard(board);
             }
         })
         registry.registerCommand(ArduinoCommands.OPEN_BOARDS_DIALOG, {
             isEnabled: () => true,
             execute: async () => {
                 const boardAndPort = await this.selectBoardsDialog.open();
-                if(boardAndPort && boardAndPort.board){
+                if (boardAndPort && boardAndPort.board) {
                     const selectedBoard = {
                         fqbn: boardAndPort.board.fqbn,
                         name: boardAndPort.board.name,
                         port: boardAndPort.port
                     }
-                    this.boardService.selectBoard(selectedBoard);
-
+                    this.selectBoard(selectedBoard);
                 }
             }
         })
     }
 
+    protected async selectBoard(board: Board) {
+        const attached = await this.boardService.getAttachedBoards();
+        if(attached.boards.length) {
+            board = attached.boards.find(b => b.name === board.name && b.fqbn === board.fqbn) || board;
+        }
+        await this.boardService.selectBoard(board)
+        if (this.boardsToolbarItem) {
+            this.boardsToolbarItem.setSelectedBoard(board);
+        }
+    }
+
     protected async openSketchFilesInNewWindow(uri: string) {
         const location = new URL(window.location.href);
         location.searchParams.set('sketch', uri);
@@ -309,24 +312,24 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         return widget;
     }
 
-    private async onNoBoardsInstalled() {
-        const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
-        if (!action) {
-            return;
-        }
+    // private async onNoBoardsInstalled() {
+    //     const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
+    //     if (!action) {
+    //         return;
+    //     }
 
-        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
-    }
+    //     this.boardsListWidgetFrontendContribution.openView({ reveal: true });
+    // }
 
-    private async onUnknownBoard() {
-        const action = await this.messageService.warn("There's a board connected for which you need to install software." +
-            " If this were not a PoC we would offer you the right package now.", "Open Boards Manager");
-        if (!action) {
-            return;
-        }
+    // private async onUnknownBoard() {
+    //     const action = await this.messageService.warn("There's a board connected for which you need to install software." +
+    //         " If this were not a PoC we would offer you the right package now.", "Open Boards Manager");
+    //     if (!action) {
+    //         return;
+    //     }
 
-        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
-    }
+    //     this.boardsListWidgetFrontendContribution.openView({ reveal: true });
+    // }
 
     private isArduinoToolbar(maybeToolbarWidget: any): boolean {
         if (maybeToolbarWidget instanceof ArduinoToolbar) {

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

@@ -1,20 +1,53 @@
 import * as React from 'react';
-import { Board } from '../../common/protocol/boards-service';
+import { BoardsService, Board } from '../../common/protocol/boards-service';
 import { ContextMenuRenderer } from '@theia/core/lib/browser';
 import { ArduinoToolbarContextMenu } from '../arduino-file-menu';
+import { BoardsNotificationService } from '../boards-notification-service';
 
 export namespace BoardsToolBarItem {
     export interface Props {
-        readonly onNoBoardsInstalled: () => void;
-        readonly onUnknownBoard: (board: Board) => void;
         readonly contextMenuRenderer: ContextMenuRenderer;
+        readonly boardsNotificationService: BoardsNotificationService;
+        readonly boardService: BoardsService;
+    }
+
+    export interface State {
+        selectedBoard?: Board;
+        selectedIsAttached: boolean
     }
 }
 
-export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, {}> {
+export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
+
+    protected attachedBoards: Board[];
 
     constructor(props: BoardsToolBarItem.Props) {
         super(props);
+
+        this.state = {
+            selectedBoard: undefined,
+            selectedIsAttached: true
+        };
+    }
+
+    componentDidMount() {
+        this.setAttachedBoards();
+    }
+
+    protected async setAttachedBoards() {
+        const { boards } = await this.props.boardService.getAttachedBoards();
+        this.attachedBoards = boards;
+        if(this.attachedBoards.length){
+            await this.props.boardService.selectBoard(this.attachedBoards[0]);
+            this.setSelectedBoard(this.attachedBoards[0]);
+        }
+    }
+
+    setSelectedBoard(board: Board) {
+        if (this.attachedBoards.length) {
+            this.setState({ selectedIsAttached: !!this.attachedBoards.find(attachedBoard => attachedBoard.name === board.name) });
+        }
+        this.setState({ selectedBoard: board });
     }
 
     protected readonly doShowSelectBoardsMenu = (event: React.MouseEvent<HTMLElement>) => this.showSelectBoardsMenu(event);
@@ -29,12 +62,13 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
     }
 
     render(): React.ReactNode {
-
         return <React.Fragment>
             <div className='arduino-boards-toolbar-item-container' onClick={this.doShowSelectBoardsMenu}>
                 <div className='arduino-boards-toolbar-item'>
                     <div className='inner-container'>
-                        <div className='label'>Show selected Board here</div>
+                        <span className={!this.state.selectedBoard || !this.state.selectedIsAttached ? 'fa fa-times notAttached' : ''}></span>
+                        <div className='label'>{this.state.selectedBoard ? this.state.selectedBoard.name : 'no board selected'}</div>
+                        <span className='fa fa-caret-down'></span>
                     </div>
                 </div>
             </div>