fix board select component

Author: fstasi

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
-import {
-  AvailableBoard,
-  BoardsServiceProvider,
-} from '../../boards/boards-service-provider';
-import { ArduinoSelect } from '../../widgets/arduino-select';
+import { AvailableBoard } from '../../boards/boards-service-provider';
 import { CertificateListComponent } from './certificate-list';
+import { SelectBoardComponent } from './select-board-components';
 
 export const CertificateUploaderComponent = ({
-  boardsServiceClient,
+  availableBoards,
   certificates,
   // addCertificate,
+  updatableFqbns,
   uploadCertificates,
   openContextMenu,
 }: {
-  boardsServiceClient: BoardsServiceProvider;
+  availableBoards: AvailableBoard[];
   certificates: string[];
   addCertificate: (cert: string) => void;
+  updatableFqbns: string[];
   uploadCertificates: (
     fqbn: string,
     address: string,
@@ -29,64 +28,20 @@ export const CertificateUploaderComponent = ({
 
   const [selectedCerts, setSelectedCerts] = React.useState<string[]>([]);
 
-  const [selectedBoard, setSelectedBoard] = React.useState<{
-    label: string;
-    value: AvailableBoard;
-  } | null>(null);
-
-  const [selectBoardPlaceholder, setSelectBoardPlaceholder] =
-    React.useState('');
-  const [availableBoards, setAvailableBoards] = React.useState<
-    {
-      label: string;
-      value: AvailableBoard;
-    }[]
-  >([]);
-
-  React.useEffect(() => {
-    boardsServiceClient.onAvailableBoardsChanged((availableBoards) => {
-      let placeholderTxt = 'Select a board...';
-      let selectedBoard = -1;
-      const boardsList = availableBoards
-        .filter(
-          (board) =>
-            !!board.fqbn && board.state === AvailableBoard.State.recognized
-        )
-        .map((board, i) => {
-          if (board.selected) {
-            selectedBoard = i;
-          }
-          return {
-            label: `${board.name} at ${board.port?.address}`,
-            value: board,
-          };
-        });
-
-      if (boardsList.length === 0) {
-        placeholderTxt = 'No board connected to serial port';
-      }
-
-      setSelectBoardPlaceholder(placeholderTxt);
-      setAvailableBoards(boardsList);
-      setSelectedBoard(boardsList[selectedBoard] || null);
-    });
-  }, [boardsServiceClient]);
+  const [selectedBoard, setSelectedBoard] =
+    React.useState<AvailableBoard | null>(null);
 
   const installCertificates = async () => {
-    if (
-      !selectedBoard?.value ||
-      !selectedBoard.value.fqbn ||
-      !selectedBoard.value.port
-    ) {
+    if (!selectedBoard || !selectedBoard.fqbn || !selectedBoard.port) {
       return;
     }
 
     setInstallFeedback('installing');
 
     try {
       await uploadCertificates(
-        selectedBoard.value.fqbn,
-        selectedBoard.value.port.address,
+        selectedBoard.fqbn,
+        selectedBoard.port.address,
         selectedCerts
       );
       setInstallFeedback('ok');
@@ -119,31 +74,23 @@ export const CertificateUploaderComponent = ({
         </div>
         <div className="dialogRow">
           <div className="fl1">
-            <ArduinoSelect
-              id="board-select"
-              menuPosition="fixed"
-              isDisabled={availableBoards.length === 0}
-              placeholder={selectBoardPlaceholder}
-              options={availableBoards}
-              value={selectedBoard}
-              tabSelectsValue={false}
-              onChange={(value) => {
-                if (value) {
+            <SelectBoardComponent
+              availableBoards={availableBoards}
+              updatableFqbns={updatableFqbns}
+              onBoardSelect={(board) => {
+                if (board) {
                   setInstallFeedback(null);
-                  setSelectedBoard(value);
+                  setSelectedBoard(board);
                 }
               }}
+              selectedBoard={selectedBoard}
             />
           </div>
           <button
             type="button"
             className="theia-button primary"
             onClick={installCertificates}
-            disabled={
-              selectedCerts.length === 0 ||
-              availableBoards.length === 0 ||
-              !selectedBoard
-            }
+            disabled={selectedCerts.length === 0 || !selectedBoard}
           >
             Upload
           </button>

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx

@@ -4,7 +4,10 @@ import { AbstractDialog, DialogProps } from '@theia/core/lib/browser/dialogs';
 import { Widget } from '@phosphor/widgets';
 import { Message } from '@phosphor/messaging';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { BoardsServiceProvider } from '../../boards/boards-service-provider';
+import {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from '../../boards/boards-service-provider';
 import { CertificateUploaderComponent } from './certificate-uploader-component';
 import { ArduinoPreferences } from '../../arduino-preferences';
 import {
@@ -13,6 +16,7 @@ import {
 } from '@theia/core/lib/browser/preferences/preference-service';
 import { CommandRegistry } from '@theia/core/lib/common/command';
 import { certificateList, sanifyCertString } from './utils';
+import { ArduinoFirmwareUploader } from '../../../common/protocol/arduino-firmware-uploader';
 
 @injectable()
 export class UploadCertificateDialogWidget extends ReactWidget {
@@ -28,7 +32,12 @@ export class UploadCertificateDialogWidget extends ReactWidget {
   @inject(CommandRegistry)
   protected readonly commandRegistry: CommandRegistry;
 
+  @inject(ArduinoFirmwareUploader)
+  protected readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
+
   protected certificates: string[] = [];
+  protected updatableFqbns: string[] = [];
+  protected availableBoards: AvailableBoard[] = [];
 
   constructor() {
     super();
@@ -50,6 +59,16 @@ export class UploadCertificateDialogWidget extends ReactWidget {
         this.update();
       }
     });
+
+    this.arduinoFirmwareUploader.updatableBoards().then((fqbns) => {
+      this.updatableFqbns = fqbns;
+      this.update();
+    });
+
+    this.boardsServiceClient.onAvailableBoardsChanged((availableBoards) => {
+      this.availableBoards = availableBoards;
+      this.update();
+    });
   }
 
   private addCertificate(certificate: string) {
@@ -88,8 +107,9 @@ export class UploadCertificateDialogWidget extends ReactWidget {
   protected render(): React.ReactNode {
     return (
       <CertificateUploaderComponent
-        boardsServiceClient={this.boardsServiceClient}
+        availableBoards={this.availableBoards}
         certificates={this.certificates}
+        updatableFqbns={this.updatableFqbns}
         addCertificate={this.addCertificate.bind(this)}
         uploadCertificates={this.uploadCertificates.bind(this)}
         openContextMenu={this.openContextMenu.bind(this)}

arduino-ide-extension/src/browser/dialogs/certificate-uploader/select-board-components.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { AvailableBoard } from '../../boards/boards-service-provider';
+import { ArduinoSelect } from '../../widgets/arduino-select';
+
+type BoardOption = { value: string; label: string };
+
+export const SelectBoardComponent = ({
+  availableBoards,
+  updatableFqbns,
+  onBoardSelect,
+  selectedBoard,
+}: {
+  availableBoards: AvailableBoard[];
+  updatableFqbns: string[];
+  onBoardSelect: (board: AvailableBoard | null) => void;
+  selectedBoard: AvailableBoard | null;
+}): React.ReactElement => {
+  const [selectOptions, setSelectOptions] = React.useState<BoardOption[]>([]);
+
+  const [selectBoardPlaceholder, setSelectBoardPlaceholder] =
+    React.useState('');
+
+  const selectOption = React.useCallback(
+    (boardOpt: BoardOption) => {
+      onBoardSelect(
+        (boardOpt &&
+          availableBoards.find((board) => board.fqbn === boardOpt.value)) ||
+          null
+      );
+    },
+    [availableBoards, onBoardSelect]
+  );
+
+  React.useEffect(() => {
+    let placeholderTxt = 'Select a board...';
+    let selBoard = -1;
+    const updatableBoards = availableBoards.filter(
+      (board) => board.fqbn && updatableFqbns.includes(board.fqbn)
+    );
+    const boardsList: BoardOption[] = updatableBoards.map((board, i) => {
+      if (board.selected) {
+        selBoard = i;
+      }
+      return {
+        label: `${board.name} at ${board.port?.address}`,
+        value: board.fqbn || '',
+      };
+    });
+
+    if (boardsList.length === 0) {
+      placeholderTxt = 'No board connected to serial port';
+    }
+
+    setSelectBoardPlaceholder(placeholderTxt);
+    setSelectOptions(boardsList);
+
+    selectOption(boardsList[selBoard]);
+  }, [availableBoards, onBoardSelect, selectOption, updatableFqbns]);
+
+  return (
+    <ArduinoSelect
+      id="board-select"
+      menuPosition="fixed"
+      isDisabled={selectOptions.length === 0}
+      placeholder={selectBoardPlaceholder}
+      options={selectOptions}
+      value={
+        (selectedBoard && {
+          value: selectedBoard.fqbn,
+          label: `${selectedBoard.name} at ${selectedBoard.port?.address}`,
+        }) ||
+        null
+      }
+      tabSelectsValue={false}
+      onChange={selectOption}
+    />
+  );
+};