[experimental]: Introduced the Boards Control.

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

Author: Akos Kitta

arduino-ide-extension/package.json

@@ -36,9 +36,9 @@
     "@theia/workspace": "next",
     "@types/dateformat": "^3.0.1",
     "@types/deepmerge": "^2.2.0",
-    "@types/js-yaml": "^3.12.2",
     "@types/glob": "^5.0.35",
     "@types/google-protobuf": "^3.7.1",
+    "@types/js-yaml": "^3.12.2",
     "@types/lodash.debounce": "^4.0.6",
     "@types/ps-tree": "^1.1.0",
     "@types/react-select": "^3.0.0",
@@ -47,6 +47,7 @@
     "css-element-queries": "^1.2.0",
     "dateformat": "^3.0.3",
     "deepmerge": "^4.2.2",
+    "fuzzy": "^0.1.3",
     "glob": "^7.1.6",
     "google-protobuf": "^3.11.0",
     "lodash.debounce": "^4.0.8",
@@ -105,6 +106,9 @@
     {
       "frontend": "lib/browser/menu/browser-arduino-menu-module",
       "frontendElectron": "lib/electron-browser/menu/electron-arduino-menu-module"
+    },
+    {
+      "frontend": "lib/browser/boards/quick-open/boards-quick-open-module"
     }
   ]
 }

arduino-ide-extension/src/browser/boards/boards-config-quick-open-service.ts

@@ -45,24 +45,25 @@ export class BoardsDetailsMenuUpdater implements FrontendApplicationContribution
                 const boardsConfigMenuPath = [...ArduinoMenus.TOOLS, 'z_boardsConfig']; // `z_` is for ordering.
                 for (const { label, option, values } of configOptions.sort(ConfigOption.LABEL_COMPARATOR)) {
                     const menuPath = [...boardsConfigMenuPath, `${option}`];
-                    const commands = new Map<string, Disposable>()
+                    const commands = new Map<string, Disposable & { label: string }>()
                     for (const value of values) {
                         const id = `${fqbn}-${option}--${value.value}`;
-                        const command = { id, label: value.label };
+                        const command = { id };
                         const selectedValue = value.value;
                         const handler = {
                             execute: () => this.boardsConfigStore.setSelected({ fqbn, option, selectedValue }),
                             isToggled: () => value.selected
                         };
-                        commands.set(id, this.commandRegistry.registerCommand(command, handler));
+                        commands.set(id, Object.assign(this.commandRegistry.registerCommand(command, handler), { label: value.label }));
                     }
                     this.menuRegistry.registerSubmenu(menuPath, label);
                     this.toDisposeOnBoardChange.pushAll([
                         ...commands.values(),
                         Disposable.create(() => this.unregisterSubmenu(menuPath)), // We cannot dispose submenu entries: https://github.com/eclipse-theia/theia/issues/7299
                         ...Array.from(commands.keys()).map((commandId, index) => {
-                            this.menuRegistry.registerMenuAction(menuPath, { commandId, order: String(index) })
-                            return Disposable.create(() => this.menuRegistry.unregisterMenuAction(commandId))
+                            const { label } = commands.get(commandId)!;
+                            this.menuRegistry.registerMenuAction(menuPath, { commandId, order: String(index), label });
+                            return Disposable.create(() => this.menuRegistry.unregisterMenuAction(commandId));
                         })
                     ]);
                 }

arduino-ide-extension/src/browser/boards/boards-details-menu-updater.ts

@@ -7,6 +7,7 @@ import { FrontendApplicationContribution } from '@theia/core/lib/browser/fronten
 import { RecursiveRequired } from '../../common/types';
 import { BoardsServiceClient, AttachedBoardsChangeEvent, BoardInstalledEvent, Board, Port, BoardUninstalledEvent } from '../../common/protocol';
 import { BoardsConfig } from './boards-config';
+import { naturalCompare } from '../../common/utils';
 
 @injectable()
 export class BoardsServiceClientImpl implements BoardsServiceClient, FrontendApplicationContribution {
@@ -262,10 +263,10 @@ export class BoardsServiceClientImpl implements BoardsServiceClient, FrontendApp
             });
         }
 
-        const sortedAvailableBoards = availableBoards.sort(AvailableBoard.COMPARATOR);
+        const sortedAvailableBoards = availableBoards.sort(AvailableBoard.compare);
         let hasChanged = sortedAvailableBoards.length !== currentAvailableBoards.length;
         for (let i = 0; !hasChanged && i < sortedAvailableBoards.length; i++) {
-            hasChanged = AvailableBoard.COMPARATOR(sortedAvailableBoards[i], currentAvailableBoards[i]) !== 0;
+            hasChanged = AvailableBoard.compare(sortedAvailableBoards[i], currentAvailableBoards[i]) !== 0;
         }
         if (hasChanged) {
             this._availableBoards = sortedAvailableBoards;
@@ -312,9 +313,10 @@ export class BoardsServiceClientImpl implements BoardsServiceClient, FrontendApp
 }
 
 /**
- * Representation of a ready-to-use board, configured by the user. Not all of the available boards are
- * necessarily recognized by the CLI (e.g.: it is a 3rd party board) or correctly configured but ready for `verify`.
- * If it has the selected board and a associated port, it can be used for `upload`.
+ * Representation of a ready-to-use board, either the user has configured it or was automatically recognized by the CLI.
+ * An available board was not necessarily recognized by the CLI (e.g.: it is a 3rd party board) or correctly configured but ready for `verify`.
+ * If it has the selected board and a associated port, it can be used for `upload`. We render an available board for the user
+ * when it has the `port` set.
  */
 export interface AvailableBoard extends Board {
     readonly state: AvailableBoard.State;
@@ -339,17 +341,27 @@ export namespace AvailableBoard {
         'incomplete'
     }
 
-    export function isWithPort(board: AvailableBoard): board is AvailableBoard & { port: Port } {
+    export function is(board: any): board is AvailableBoard {
+        return Board.is(board) && 'state' in board;
+    }
+
+    export function hasPort(board: AvailableBoard): board is AvailableBoard & { port: Port } {
         return !!board.port;
     }
 
-    export const COMPARATOR = (left: AvailableBoard, right: AvailableBoard) => {
-        let result = left.name.localeCompare(right.name);
+    export const compare = (left: AvailableBoard, right: AvailableBoard) => {
+        if (left.selected && !right.selected) {
+            return -1;
+        }
+        if (right.selected && !left.selected) {
+            return 1;
+        }
+        let result = naturalCompare(left.name, right.name);
         if (result !== 0) {
             return result;
         }
         if (left.fqbn && right.fqbn) {
-            result = left.name.localeCompare(right.name);
+            result = naturalCompare(left.fqbn, right.fqbn);
             if (result !== 0) {
                 return result;
             }

arduino-ide-extension/src/browser/boards/boards-service-client-impl.ts

@@ -151,7 +151,7 @@ export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props,
             </div>
             <BoardsDropDown
                 coords={coords}
-                items={availableBoards.filter(AvailableBoard.isWithPort).map(board => ({
+                items={availableBoards.filter(AvailableBoard.hasPort).map(board => ({
                     ...board,
                     onClick: () => {
                         if (board.state === AvailableBoard.State.incomplete) {

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

@@ -0,0 +1,16 @@
+import { ContainerModule } from 'inversify';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { CommandContribution } from '@theia/core/lib/common/command';
+import { QuickOpenContribution } from '@theia/core/lib/browser/quick-open';
+import { KeybindingContribution } from '@theia/core/lib/browser/keybinding';
+import { BoardsQuickOpenService } from './boards-quick-open-service';
+
+export default new ContainerModule(bind => {
+    bind(BoardsQuickOpenService).toSelf().inSingletonScope();
+    bind(CommandContribution).toService(BoardsQuickOpenService);
+    bind(KeybindingContribution).toService(BoardsQuickOpenService);
+    bind(QuickOpenContribution).toService(BoardsQuickOpenService);
+    bind(ILogger).toDynamicValue(({ container }) => container.get<ILogger>(ILogger).child('boards-quick-open'))
+        .inSingletonScope()
+        .whenTargetNamed('boards-quick-open');
+});