fix: clean up typings for the UI

Author: Akos Kitta

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

@@ -89,18 +89,19 @@ export interface EditBoardsConfigAction {
   (params?: EditBoardsConfigActionParams): void;
 }
 
-export interface BoardListUI extends BoardList {
+export interface BoardListUIActions {
   /**
    * Sets the frontend's port and board configuration according to the params.
    */
-  onSelect: SelectBoardsConfigAction;
+  readonly select: SelectBoardsConfigAction;
   /**
    * Opens up the boards config dialog with the port and (optional) board to select in the dialog.
    * Calling this function does not immediately change the frontend's port and board config, but
    * preselects items in the dialog.
    */
-  onEdit: EditBoardsConfigAction;
+  readonly edit: EditBoardsConfigAction;
 }
+export type BoardListUI = BoardList & BoardListUIActions;
 
 @injectable()
 export class BoardListDumper implements Disposable {
@@ -195,6 +196,10 @@ export class BoardsServiceProvider
       .finally(() => this._ready.resolve());
   }
 
+  onStop(): void {
+    this.boardListDumper?.dispose();
+  }
+
   private async maybeUpdateSelectedBoard(platformDidInstallEvent: {
     item: BoardsPackage;
   }): Promise<void> {
@@ -237,10 +242,6 @@ export class BoardsServiceProvider
     }
   }
 
-  onStop(): void {
-    this.boardListDumper?.dispose();
-  }
-
   registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(USE_INHERITED_CONFIG, {
       execute: (
@@ -305,8 +306,8 @@ export class BoardsServiceProvider
 
   private createBoardListUI(boardList: BoardList): BoardListUI {
     return Object.assign(boardList, {
-      onSelect: this.onBoardsConfigSelect.bind(this),
-      onEdit: this.onBoardsConfigEdit.bind(this),
+      select: this.onBoardsConfigSelect.bind(this),
+      edit: this.onBoardsConfigEdit.bind(this),
     });
   }
 

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

@@ -10,10 +10,7 @@ import React from '@theia/core/shared/react';
 import ReactDOM from '@theia/core/shared/react-dom';
 import classNames from 'classnames';
 import { boardIdentifierLabel, Port } from '../../common/protocol';
-import {
-  BoardListItem,
-  BoardListItemUI,
-} from '../../common/protocol/board-list';
+import { BoardListItemUI } from '../../common/protocol/board-list';
 import { assertUnreachable } from '../../common/utils';
 import { BoardListUI, BoardsServiceProvider } from './boards-service-provider';
 
@@ -29,13 +26,11 @@ export namespace BoardsDropDown {
     readonly coords: BoardsDropDownListCoords | 'hidden';
     readonly boardList: BoardListUI;
     readonly openBoardsConfig: () => void;
+    readonly hide: () => void;
   }
 }
 
-export class BoardListDropDown extends React.Component<
-  BoardsDropDown.Props,
-  { expandedItems: BoardListItem[] }
-> {
+export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
   private dropdownElement: HTMLElement;
   private listRef: React.RefObject<HTMLDivElement>;
 
@@ -49,7 +44,6 @@ export class BoardListDropDown extends React.Component<
       document.body.appendChild(list);
       this.dropdownElement = list;
     }
-    this.state = { expandedItems: [] };
   }
 
   override componentDidUpdate(prevProps: BoardsDropDown.Props): void {
@@ -105,14 +99,15 @@ export class BoardListDropDown extends React.Component<
   }
 
   private readonly onDefaultAction = (item: BoardListItemUI): unknown => {
-    const { boardList } = this.props;
+    const { boardList, hide } = this.props;
     const { type, params } = item.defaultAction;
+    hide();
     switch (type) {
       case 'select-boards-config': {
-        return boardList.onSelect(params);
+        return boardList.select(params);
       }
       case 'edit-boards-config': {
-        return boardList.onEdit(params);
+        return boardList.edit(params);
       }
       default:
         return assertUnreachable(type);
@@ -166,11 +161,20 @@ export class BoardListDropDown extends React.Component<
   }
 
   private renderActions(item: BoardListItemUI): React.ReactNode {
-    const { boardList } = this.props;
+    const { boardList, hide } = this.props;
     const { revert, edit } = item.otherActions;
     if (!edit && !revert) {
       return undefined;
     }
+    const handleOnClick = (
+      event: React.MouseEvent<HTMLElement, MouseEvent>,
+      callback: () => void
+    ) => {
+      event.preventDefault();
+      event.stopPropagation();
+      hide();
+      callback();
+    };
     return (
       <div className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR}>
         {edit && (
@@ -185,11 +189,9 @@ export class BoardListDropDown extends React.Component<
                   'arduino/board/editBoardsConfig',
                   'Edit Board and Port...'
                 )}
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  boardList.onEdit(edit.params);
-                }}
+                onClick={(event) =>
+                  handleOnClick(event, () => boardList.edit(edit.params))
+                }
               />
             }
           </div>
@@ -208,11 +210,9 @@ export class BoardListDropDown extends React.Component<
                   boardIdentifierLabel(revert.params.selectedBoard),
                   item.labels.portLabel
                 )}
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  boardList.onSelect(revert.params);
-                }}
+                onClick={(event) =>
+                  handleOnClick(event, () => boardList.select(revert.params))
+                }
               />
             }
           </div>
@@ -292,16 +292,6 @@ export class BoardsToolBarItem extends React.Component<
       'fa',
       protocolIcon
     );
-    const originalOnSelect = boardList.onSelect;
-    boardList['onSelect'] = (params) => {
-      this.hide();
-      return originalOnSelect.bind(boardList)(params);
-    };
-    const originalOnEdit = boardList.onEdit;
-    boardList['onEdit'] = (params) => {
-      this.hide();
-      return originalOnEdit.bind(boardList)(params);
-    };
     return (
       <React.Fragment>
         <div
@@ -325,7 +315,8 @@ export class BoardsToolBarItem extends React.Component<
         <BoardListDropDown
           coords={coords}
           boardList={boardList}
-          openBoardsConfig={() => boardList.onEdit({ query: '' })}
+          openBoardsConfig={() => boardList.edit({ query: '' })}
+          hide={this.hide}
         />
       </React.Fragment>
     );

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

@@ -667,6 +667,10 @@ function createEditAction(item: BoardListItem): EditBoardsConfigAction {
     const uniqueBoardName = findUniqueBoardName(item);
     params.query = uniqueBoardName ?? '';
     params.searchSet = item.boards;
+  } else if (isInferredBoardListItem(item)) {
+    params.query = item.inferredBoard.name;
+  } else if (item.board) {
+    params.query = item.board.name;
   } else {
     params.query = '';
   }