fix: wired in multiple boards per port

Author: Akos Kitta

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

@@ -9,12 +9,18 @@ import { nls } from '@theia/core/lib/common/nls';
 import React from '@theia/core/shared/react';
 import ReactDOM from '@theia/core/shared/react-dom';
 import classNames from 'classnames';
-import { unknownBoard } from '../../common/protocol';
+import {
+  boardIdentifierEquals,
+  createPlatformIdentifier,
+  serializePlatformIdentifier,
+  unknownBoard,
+} from '../../common/protocol';
 import {
   BoardListItem,
   getInferredBoardOrBoard,
   InferredBoardListItem,
   isInferredBoardListItem,
+  isMultiBoardsBoardListItem,
 } from '../../common/protocol/board-list';
 import {
   BoardListUI,
@@ -38,7 +44,10 @@ export namespace BoardsDropDown {
   }
 }
 
-export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
+export class BoardListDropDown extends React.Component<
+  BoardsDropDown.Props,
+  { expandedItems: BoardListItem[] }
+> {
   private dropdownElement: HTMLElement;
   private listRef: React.RefObject<HTMLDivElement>;
 
@@ -52,6 +61,7 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
       document.body.appendChild(list);
       this.dropdownElement = list;
     }
+    this.state = { expandedItems: [] };
   }
 
   override componentDidUpdate(prevProps: BoardsDropDown.Props): void {
@@ -123,7 +133,6 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
     const board = getInferredBoardOrBoard(item);
     const boardLabel = board?.name ?? unknownBoard;
     const boardFqbn = board?.fqbn;
-    const vendor = item.metadata?.vendor;
     const onDefaultAction = () => {
       if (board) {
         onSelect({ selectedBoard: board, selectedPort: port });
@@ -166,18 +175,107 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
             <div className="arduino-boards-dropdown-item--board-label noWrapInfo noselect">
               {boardLabel}
             </div>
-            {vendor && <div className="vendor">{vendor}</div>}
           </div>
           <div className="arduino-boards-dropdown-item--port-label noWrapInfo noselect">
             {port.addressLabel}
           </div>
+          {this.renderVendors(item, onSelect)}
         </div>
         {isInferredBoardListItem(item) &&
           this.renderActions(item, onSelect, onEdit)}
       </div>
     );
   }
 
+  private renderVendors(
+    item: BoardListItem,
+    onSelect: SelectBoardsConfigAction
+  ): React.ReactNode {
+    if (!isMultiBoardsBoardListItem(item)) {
+      return undefined;
+    }
+    const inferredBoard = isInferredBoardListItem(item)
+      ? item.inferredBoard
+      : undefined;
+    // If the inferred board is not one of the discovered ones, do not show the vendors.
+    // It's the same use-case when there is one discoverd board, but the user overrides it.
+    if (
+      inferredBoard &&
+      item.allBoards.every(
+        (otherBoard) => !boardIdentifierEquals(inferredBoard, otherBoard)
+      )
+    ) {
+      return undefined;
+    }
+    const expanded = this.state.expandedItems.includes(item);
+    const boards = !expanded
+      ? [inferredBoard ? inferredBoard : item.board]
+      : item.allBoards;
+    return (
+      <div className="arduino-boards-dropdown-item--vendors noWrapInfo noselect">
+        <div className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR}>
+          <div
+            className={`${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} enabled`}
+          >
+            {expanded ? (
+              <div
+                id="collapse"
+                className={codicon('chevron-down', true)}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.setState((prevState) => ({
+                    expandedItems: prevState.expandedItems.filter(
+                      (expendedItem) => item !== expendedItem
+                    ),
+                  }));
+                }}
+              />
+            ) : (
+              <div
+                id="expand"
+                className={codicon('chevron-right', true)}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.setState((prevState) => ({
+                    expandedItems: prevState.expandedItems.concat(item),
+                  }));
+                }}
+              />
+            )}
+          </div>
+        </div>
+        <div>
+          {boards.map((board) => {
+            const platformId = createPlatformIdentifier(board);
+            if (!platformId) {
+              return undefined;
+            }
+            return (
+              <div
+                key={board.fqbn}
+                className="vendor"
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  this.setState((prevState) => ({
+                    expandedItems: prevState.expandedItems.filter(
+                      (expendedItem) => item !== expendedItem
+                    ),
+                  }));
+                  onSelect({ selectedBoard: board, selectedPort: item.port });
+                }}
+              >
+                {serializePlatformIdentifier(platformId)}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
   private renderActions(
     inferredItem: InferredBoardListItem,
     onRevert: SelectBoardsConfigAction,
@@ -210,9 +308,10 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
           className={codicon('discard', true)}
           title={nls.localize(
             'arduino/board/revertBoardsConfig',
-            "Revert the selected '{0}' board to '{1}' detected on '{2}'",
-            inferredItem.inferredBoard.name,
-            inferredItem.board.name,
+            "Use '{0}' discovered on '{1}'",
+            `${inferredItem.board.name}${
+              inferredItem.board.fqbn ? ` (${inferredItem.board.fqbn})` : ''
+            }`,
             port.address
           )}
           onClick={(event) => {

arduino-ide-extension/src/browser/style/boards-config-dialog.css

@@ -250,14 +250,6 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   flex: 1;
 }
 
-.arduino-boards-dropdown-item--board-header .vendor {
-  color: var(--theia-button-background);
-  background-color: var(--theia-arduino-toolbar-dropdown-option-backgroundHover);
-  font-size: 10px;
-  border-radius: 4px;
-  margin-left: 2px;
-}
-
 /* Redefine default codicon size https://github.com/microsoft/vscode/commit/38cd0a377b7abef34fb07fe770fc633e68819ba6 */
 .arduino-boards-dropdown-item .codicon[class*='codicon-'] {
   font-size: 14px;
@@ -285,6 +277,24 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   margin-right: 10px;
 }
 
+.arduino-boards-dropdown-item .arduino-boards-dropdown-item--vendors {
+  display: flex;
+}
+
+/* Redefine default codicon size https://github.com/microsoft/vscode/commit/38cd0a377b7abef34fb07fe770fc633e68819ba6 */
+.arduino-boards-dropdown-item .arduino-boards-dropdown-item--vendors .codicon[class*='codicon-'] {
+  font-size: 10px;
+}
+
+.arduino-boards-dropdown-item .arduino-boards-dropdown-item--vendors .vendor {
+  color: var(--theia-button-background);
+  background-color: var(--theia-arduino-toolbar-dropdown-option-backgroundHover);
+  font-size: 10px;
+  border-radius: 4px;
+  margin-left: 2px;
+  cursor: pointer;
+}
+
 .arduino-boards-dropdown-item--port-label {
   font-size: 12px;
 }