Listen on the client's port change event

If the board select dialog is listening on the backend's event,
the frontend might miss the event when it comes up, although boards
are connected and ports are discovered.

Closes #573

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

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

@@ -6,7 +6,6 @@ import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import {
   Board,
   Port,
-  AttachedBoardsChangeEvent,
   BoardWithPackage,
 } from '../../common/protocol/boards-service';
 import { NotificationCenter } from '../notification-center';
@@ -113,11 +112,15 @@ export class BoardsConfig extends React.Component<
           );
         }
       }),
-      this.props.notificationCenter.onAttachedBoardsDidChange((event) =>
-        this.updatePorts(
-          event.newState.ports,
-          AttachedBoardsChangeEvent.diff(event).detached.ports
-        )
+      this.props.boardsServiceProvider.onAvailablePortsChanged(
+        ({ newState, oldState }) =>
+          this.updatePorts(
+            newState,
+            oldState.filter(
+              (oldPort) =>
+                !newState.find((newPort) => Port.sameAs(newPort, oldPort))
+            )
+          )
       ),
       this.props.boardsServiceProvider.onBoardsConfigChanged(
         ({ selectedBoard, selectedPort }) => {

Diff for: arduino-ide-extension/src/browser/boards/boards-service-provider.ts

@@ -63,7 +63,10 @@ export class BoardsServiceProvider
   protected readonly onAvailableBoardsChangedEmitter = new Emitter<
     AvailableBoard[]
   >();
-  protected readonly onAvailablePortsChangedEmitter = new Emitter<Port[]>();
+  protected readonly onAvailablePortsChangedEmitter = new Emitter<{
+    newState: Port[];
+    oldState: Port[];
+  }>();
   private readonly inheritedConfig = new Deferred<BoardsConfig.Config>();
 
   /**
@@ -120,8 +123,12 @@ export class BoardsServiceProvider
       const { boards: attachedBoards, ports: availablePorts } =
         AvailablePorts.split(state);
       this._attachedBoards = attachedBoards;
+      const oldState = this._availablePorts.slice();
       this._availablePorts = availablePorts;
-      this.onAvailablePortsChangedEmitter.fire(this._availablePorts);
+      this.onAvailablePortsChangedEmitter.fire({
+        newState: this._availablePorts.slice(),
+        oldState,
+      });
 
       await this.reconcileAvailableBoards();
 
@@ -229,8 +236,12 @@ export class BoardsServiceProvider
     }
 
     this._attachedBoards = event.newState.boards;
+    const oldState = this._availablePorts.slice();
     this._availablePorts = event.newState.ports;
-    this.onAvailablePortsChangedEmitter.fire(this._availablePorts);
+    this.onAvailablePortsChangedEmitter.fire({
+      newState: this._availablePorts.slice(),
+      oldState,
+    });
     this.reconcileAvailableBoards().then(() => {
       const { uploadInProgress } = event;
       // avoid attempting "auto-selection" while an