fix: refine with vendor

if multiple boards are discovered on the same port

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

Author: Akos Kitta

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

@@ -123,6 +123,7 @@ 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 });
@@ -161,10 +162,11 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
             port.address
           }`}
         >
-          <div className="arduino-boards-dropdown-item--board-name">
+          <div className="arduino-boards-dropdown-item--board-header">
             <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}

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

@@ -172,20 +172,19 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   width: 210px;
 }
 
-.arduino-boards-toolbar-item--protocol, 
+.arduino-boards-toolbar-item--protocol,
 .arduino-boards-dropdown-item--protocol {
   align-items: center;
   display: flex;
   font-size: 16px;
 }
 
-.arduino-boards-toolbar-item--protocol ,
+.arduino-boards-toolbar-item--protocol,
 .arduino-boards-dropdown-item--protocol {
   color: var(--theia-arduino-toolbar-dropdown-label);
 }
 
-.arduino-boards-toolbar-item-container
-  .arduino-boards-toolbar-item {
+.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item {
   display: flex;
   align-items: baseline;
   width: 100%;
@@ -241,11 +240,24 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   padding: 10px;
 }
 
+.arduino-boards-dropdown-item--board-header {
+  display: flex;
+  align-items: center;
+}
+
 .arduino-boards-dropdown-item--label {
   overflow: hidden;
   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;

arduino-ide-extension/src/common/protocol/board-list.ts

@@ -15,9 +15,14 @@ import {
   portProtocolComparator,
 } from './boards-service';
 
+export interface BoardListItemMetadata {
+  readonly vendor?: string;
+}
+
 export interface BoardListItem {
   readonly port: Port;
   readonly board?: BoardIdentifier;
+  readonly metadata?: BoardListItemMetadata;
 }
 
 export function isBoardListItem(arg: unknown): arg is BoardListItem {
@@ -248,7 +253,26 @@ export function createBoardList(
           };
           items.push(inferredItem);
         } else {
-          items.push({ port, board: { fqbn, name } });
+          // If multiple matching boards are discovered for a detected port, attach the vendor ID of the FQBN as an extra metadata to the item.
+          // This is to distinguish between boards with the same name but different FQBNs.
+          // There is not need to apply this, when the board has been overridden.
+          let vendor: string | undefined = undefined;
+          if (
+            board.fqbn &&
+            boards.some(
+              (otherDetectedBoardOnPort) =>
+                otherDetectedBoardOnPort.name === board.name &&
+                otherDetectedBoardOnPort.fqbn !== board.fqbn
+            )
+          ) {
+            [vendor] = board.fqbn.split(':');
+          }
+          const item = { port, board: { fqbn, name } };
+          if (vendor) {
+            const metadata: BoardListItemMetadata = { vendor };
+            Object.assign(item, { metadata });
+          }
+          items.push(item);
         }
       }
     }