Reworked board selection dialog ordering

Author: silvanocerza

Diff for: arduino-ide-extension/src/browser/boards/boards-config.tsx

@@ -184,6 +184,10 @@ export class BoardsConfig extends React.Component<
       .filter(notEmpty);
   }
 
+  protected get availableBoards(): Board[] {
+    return this.props.boardsServiceProvider.availableBoards;
+  }
+
   protected queryPorts = async (
     availablePorts: MaybePromise<Port[]> = this.availablePorts
   ) => {
@@ -281,8 +285,25 @@ export class BoardsConfig extends React.Component<
   }
 
   protected renderPorts(): React.ReactNode {
-    const filter = this.state.showAllPorts ? () => true : Port.isBoardPort;
-    const ports = this.state.knownPorts.filter(filter);
+    let ports = [] as Port[];
+    debugger;
+    if (this.state.showAllPorts) {
+      ports = this.state.knownPorts;
+    } else {
+      ports = this.state.knownPorts.filter((port) => {
+        if (port.protocol === 'serial') {
+          return true;
+        }
+        // All other ports with different protocol are
+        // only shown if there is a recognized board
+        // connected
+        for (const board of this.availableBoards) {
+          if (board.port?.address === port.address) {
+            return true;
+          }
+        }
+      });
+    }
     return !ports.length ? (
       <div className="loading noselect">No ports discovered</div>
     ) : (

Diff for: arduino-ide-extension/src/common/protocol/boards-service.ts

@@ -176,25 +176,20 @@ export namespace Port {
   }
 
   export function compare(left: Port, right: Port): number {
-    // Board ports have higher priorities, they come first.
-    if (isBoardPort(left) && !isBoardPort(right)) {
+    // Ports must be sorted in this order:
+    // 1. Serial
+    // 2. Network
+    // 3. Other protocols
+    if (left.protocol === "serial" && right.protocol !== "serial") {
       return -1;
-    }
-    if (!isBoardPort(left) && isBoardPort(right)) {
+    } else if (left.protocol !== "serial" && right.protocol === "serial") {
+      return 1;
+    } else if (left.protocol === "network" && right.protocol !== "network") {
+      return -1;
+    } else if (left.protocol !== "network" && right.protocol === "network") {
       return 1;
     }
-    let result = naturalCompare(
-      left.protocol.toLocaleLowerCase(),
-      right.protocol.toLocaleLowerCase()
-    );
-    if (result !== 0) {
-      return result;
-    }
-    result = naturalCompare(left.address, right.address);
-    if (result !== 0) {
-      return result;
-    }
-    return naturalCompare(left.label || '', right.label || '');
+    return naturalCompare(left.address!, right.address!);
   }
 
   export function equals(