fix: move UI labels building to to model

Author: Akos Kitta

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

@@ -283,27 +283,9 @@ export class BoardsToolBarItem extends React.Component<
 
   override render(): React.ReactNode {
     const { coords, boardList } = this.state;
-    const { selectedBoard, selectedPort } = boardList.boardsConfig;
-
-    const boardLabel =
-      selectedBoard?.name ||
-      nls.localize('arduino/board/selectBoard', 'Select Board');
-    const boardFqbn = selectedBoard?.fqbn;
-    const selectedItem: BoardListItem | undefined =
-      boardList.items[boardList.selectedIndex];
-    let tooltip = `${boardLabel}${boardFqbn ? ` (${boardFqbn})` : ''}${
-      selectedPort ? `\n${selectedPort.address}` : ''
-    }`;
-    if (selectedPort && !selectedItem) {
-      tooltip += ` ${nls.localize(
-        'arduino/common/notConnected',
-        '[not connected]'
-      )}`;
-    }
-
-    const isConnected = boardList.selectedIndex >= 0;
-    const protocolIcon = isConnected
-      ? iconNameFromProtocol(selectedPort?.protocol || '')
+    const { boardLabel, selected, portProtocol, tooltip } = boardList.labels;
+    const protocolIcon = portProtocol
+      ? iconNameFromProtocol(portProtocol)
       : null;
     const protocolIconClassNames = classNames(
       'arduino-boards-toolbar-item--protocol',
@@ -333,7 +315,7 @@ export class BoardsToolBarItem extends React.Component<
               'arduino-boards-toolbar-item--label',
               'noWrapInfo',
               'noselect',
-              { 'arduino-boards-toolbar-item--label-connected': isConnected }
+              { 'arduino-boards-toolbar-item--label-connected': selected }
             )}
           >
             {boardLabel}

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

@@ -1,3 +1,4 @@
+import { nls } from '@theia/core/lib/common/nls';
 import type { Mutable } from '@theia/core/lib/common/types';
 import type { Defined } from '../types';
 import { naturalCompare } from '../utils';
@@ -16,6 +17,7 @@ import {
   PortIdentifier,
   portIdentifierEquals,
   portProtocolComparator,
+  selectBoard,
   unconfirmedBoard,
   unknownBoard,
 } from './boards-service';
@@ -245,7 +247,44 @@ function boardListItemComparator(
 }
 
 /**
- * What is show in the UI with all the refinements, fallbacks, and tooltips.
+ * What is shown in the UI for the entire board list.
+ */
+export interface BoardListLabels {
+  readonly boardLabel: string;
+  readonly portProtocol: string | undefined;
+  readonly tooltip: string;
+  /**
+   * The client's board+port selection matches with one of the board list items.
+   */
+  readonly selected: boolean;
+}
+
+function createBoardListLabels(
+  boardsConfig: BoardsConfig,
+  selectedItem: BoardListItem | undefined
+): BoardListLabels {
+  const { selectedBoard, selectedPort } = boardsConfig;
+  const boardLabel = selectedBoard?.name || selectBoard;
+  const boardFqbn = selectedBoard?.fqbn;
+  let tooltip = `${boardLabel}${boardFqbn ? ` (${boardFqbn})` : ''}${
+    selectedPort ? `\n${selectedPort.address}` : ''
+  }`;
+  if (selectedPort && !selectedItem) {
+    tooltip += ` ${nls.localize(
+      'arduino/common/notConnected',
+      '[not connected]'
+    )}`;
+  }
+  return {
+    boardLabel,
+    portProtocol: selectedPort?.protocol,
+    tooltip,
+    selected: Boolean(selectedItem),
+  };
+}
+
+/**
+ * What is show in the UI for a particular board with all its refinements, fallbacks, and tooltips.
  */
 export interface BoardListItemLabels {
   readonly boardLabel: string;
@@ -301,6 +340,7 @@ function createBoardListItemLabels(item: BoardListItem): BoardListItemLabels {
  * and makes a `1..1` association between a board identifier and the port it belongs to.
  */
 export interface BoardList {
+  readonly labels: BoardListLabels;
   /**
    * All detected ports with zero to many boards and optional inferred information based on historical selection/usage.
    */
@@ -375,46 +415,10 @@ export function createBoardList(
     items.push(item);
   }
   items.sort(boardListItemComparator);
+  const selectedIndex = findSelectedIndex(boardsConfig, items);
+  const labels = createBoardListLabels(boardsConfig, items[selectedIndex]);
 
   const length = items.length;
-  const findSelectedIndex = (): number => {
-    if (!isDefinedBoardsConfig(boardsConfig)) {
-      return -1;
-    }
-    const { selectedPort, selectedBoard } = boardsConfig;
-    const portKey = Port.keyOf(selectedPort);
-    // find the exact match of the board and port combination
-    for (let index = 0; index < length; index++) {
-      const item = items[index];
-      const { board, port } = item;
-      if (!board) {
-        continue;
-      }
-      if (
-        Port.keyOf(port) === portKey &&
-        boardIdentifierEquals(board, selectedBoard)
-      ) {
-        return index;
-      }
-    }
-    // find match from inferred board
-    for (let index = 0; index < length; index++) {
-      const item = items[index];
-      if (!isInferredBoardListItem(item)) {
-        continue;
-      }
-      const { inferredBoard, port } = item;
-      if (
-        Port.keyOf(port) === portKey &&
-        boardIdentifierEquals(inferredBoard, boardsConfig.selectedBoard)
-      ) {
-        return index;
-      }
-    }
-    return -1;
-  };
-
-  let _selectedIndex: number | undefined;
   let _allPorts: DetectedPort[] | undefined;
   const ports = (
     predicate: (detectedPort: DetectedPort) => boolean = () => true
@@ -442,19 +446,14 @@ export function createBoardList(
     );
     return Object.assign(ports, { matchingIndex });
   };
-  const selectedIndexMemoized = () => {
-    if (typeof _selectedIndex !== 'number') {
-      _selectedIndex = findSelectedIndex();
-    }
-    return _selectedIndex;
-  };
 
   let _boards: (BoardListItemWithBoard | InferredBoardListItem)[] | undefined;
   return {
+    labels,
     items,
     boardsConfig,
     get selectedIndex() {
-      return selectedIndexMemoized();
+      return selectedIndex;
     },
     get boards() {
       if (!_boards) {
@@ -497,7 +496,6 @@ export function createBoardList(
       return result;
     },
     toString() {
-      const selectedIndex = selectedIndexMemoized();
       return JSON.stringify(
         {
           detectedPorts,
@@ -513,6 +511,47 @@ export function createBoardList(
   };
 }
 
+function findSelectedIndex(
+  boardsConfig: BoardsConfig,
+  items: readonly BoardListItem[]
+): number {
+  if (!isDefinedBoardsConfig(boardsConfig)) {
+    return -1;
+  }
+  const length = items.length;
+  const { selectedPort, selectedBoard } = boardsConfig;
+  const portKey = Port.keyOf(selectedPort);
+  // find the exact match of the board and port combination
+  for (let index = 0; index < length; index++) {
+    const item = items[index];
+    const { board, port } = item;
+    if (!board) {
+      continue;
+    }
+    if (
+      Port.keyOf(port) === portKey &&
+      boardIdentifierEquals(board, selectedBoard)
+    ) {
+      return index;
+    }
+  }
+  // find match from inferred board
+  for (let index = 0; index < length; index++) {
+    const item = items[index];
+    if (!isInferredBoardListItem(item)) {
+      continue;
+    }
+    const { inferredBoard, port } = item;
+    if (
+      Port.keyOf(port) === portKey &&
+      boardIdentifierEquals(inferredBoard, boardsConfig.selectedBoard)
+    ) {
+      return index;
+    }
+  }
+  return -1;
+}
+
 function createBoardListItemUI(
   detectedPort: DetectedPort,
   boardListHistory: BoardListHistory

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

@@ -867,6 +867,10 @@ export const unconfirmedBoard = nls.localize(
   'arduino/board/unconfirmedBoard',
   'Unconfirmed board'
 );
+export const selectBoard = nls.localize(
+  'arduino/board/selectBoard',
+  'Select Board'
+);
 
 /**
  * The returned promise resolves to a `BoardInfo` if available to show in the UI or an info message explaining why showing the board info is not possible.