disabled close modal while fwuploader operations are in progress

Author: fstasi

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

@@ -39,6 +39,10 @@ export class UploadCertificateDialogWidget extends ReactWidget {
   protected updatableFqbns: string[] = [];
   protected availableBoards: AvailableBoard[] = [];
 
+  public busyCallback = (busy: boolean) => {
+    return;
+  };
+
   constructor() {
     super();
   }
@@ -97,11 +101,14 @@ export class UploadCertificateDialogWidget extends ReactWidget {
     address: string,
     urls: string[]
   ): Promise<any> {
-    return this.commandRegistry.executeCommand('arduino-certificate-upload', {
-      fqbn,
-      address,
-      urls,
-    });
+    this.busyCallback(true);
+    return this.commandRegistry
+      .executeCommand('arduino-certificate-upload', {
+        fqbn,
+        address,
+        urls,
+      })
+      .finally(() => this.busyCallback(false));
   }
 
   protected render(): React.ReactNode {
@@ -126,6 +133,8 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
   @inject(UploadCertificateDialogWidget)
   protected readonly widget: UploadCertificateDialogWidget;
 
+  private busy = false;
+
   constructor(
     @inject(UploadCertificateDialogProps)
     protected readonly props: UploadCertificateDialogProps
@@ -144,6 +153,7 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
       Widget.detach(this.widget);
     }
     Widget.attach(this.widget, this.contentNode);
+    this.widget.busyCallback = this.busyCallback.bind(this);
     super.onAfterAttach(msg);
     this.update();
   }
@@ -161,4 +171,20 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
   protected handleEnter(event: KeyboardEvent): boolean | void {
     return false;
   }
+
+  close(): void {
+    if (this.busy) {
+      return;
+    }
+    super.close();
+  }
+
+  busyCallback(busy: boolean): void {
+    this.busy = busy;
+    if (busy) {
+      this.closeCrossNode.classList.add('disabled');
+    } else {
+      this.closeCrossNode.classList.remove('disabled');
+    }
+  }
 }

Diff for: arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-component.tsx

@@ -13,10 +13,12 @@ export const FirmwareUploaderComponent = ({
   availableBoards,
   firmwareUploader,
   updatableFqbns,
+  flashFirmware,
 }: {
   availableBoards: AvailableBoard[];
   firmwareUploader: ArduinoFirmwareUploader;
   updatableFqbns: string[];
+  flashFirmware: (firmware: FirmwareInfo, port: string) => Promise<any>;
 }): React.ReactElement => {
   // boolean states for buttons
   const [firmwaresFetching, setFirmwaresFetching] = React.useState(false);
@@ -73,10 +75,7 @@ export const FirmwareUploaderComponent = ({
       const installStatus =
         !!firmwareToFlash &&
         !!selectedBoard?.port &&
-        (await firmwareUploader.flash(
-          firmwareToFlash,
-          selectedBoard?.port.address
-        ));
+        (await flashFirmware(firmwareToFlash, selectedBoard?.port.address));
 
       setInstallFeedback((installStatus && 'ok') || 'fail');
     } catch {

Diff for: arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx

@@ -8,7 +8,10 @@ import {
   AvailableBoard,
   BoardsServiceProvider,
 } from '../../boards/boards-service-provider';
-import { ArduinoFirmwareUploader } from '../../../common/protocol/arduino-firmware-uploader';
+import {
+  ArduinoFirmwareUploader,
+  FirmwareInfo,
+} from '../../../common/protocol/arduino-firmware-uploader';
 import { FirmwareUploaderComponent } from './firmware-uploader-component';
 import { UploadFirmware } from '../../contributions/upload-firmware';
 
@@ -23,6 +26,10 @@ export class UploadFirmwareDialogWidget extends ReactWidget {
   protected updatableFqbns: string[] = [];
   protected availableBoards: AvailableBoard[] = [];
 
+  public busyCallback = (busy: boolean) => {
+    return;
+  };
+
   constructor() {
     super();
   }
@@ -40,12 +47,20 @@ export class UploadFirmwareDialogWidget extends ReactWidget {
     });
   }
 
+  protected flashFirmware(firmware: FirmwareInfo, port: string): Promise<any> {
+    this.busyCallback(true);
+    return this.arduinoFirmwareUploader
+      .flash(firmware, port)
+      .finally(() => this.busyCallback(false));
+  }
+
   protected render(): React.ReactNode {
     return (
       <form>
         <FirmwareUploaderComponent
           availableBoards={this.availableBoards}
           firmwareUploader={this.arduinoFirmwareUploader}
+          flashFirmware={this.flashFirmware.bind(this)}
           updatableFqbns={this.updatableFqbns}
         />
       </form>
@@ -61,6 +76,8 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
   @inject(UploadFirmwareDialogWidget)
   protected readonly widget: UploadFirmwareDialogWidget;
 
+  private busy = false;
+
   constructor(
     @inject(UploadFirmwareDialogProps)
     protected readonly props: UploadFirmwareDialogProps
@@ -79,6 +96,7 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
       Widget.detach(this.widget);
     }
     Widget.attach(this.widget, this.contentNode);
+    this.widget.busyCallback = this.busyCallback.bind(this);
     super.onAfterAttach(msg);
     this.update();
   }
@@ -96,4 +114,20 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
   protected handleEnter(event: KeyboardEvent): boolean | void {
     return false;
   }
+
+  close(): void {
+    if (this.busy) {
+      return;
+    }
+    super.close();
+  }
+
+  busyCallback(busy: boolean): void {
+    this.busy = busy;
+    if (busy) {
+      this.closeCrossNode.classList.add('disabled');
+    } else {
+      this.closeCrossNode.classList.remove('disabled');
+    }
+  }
 }

Diff for: arduino-ide-extension/src/browser/style/dialogs.css

@@ -50,4 +50,8 @@
 .status-icon {
     margin-right: 6px;
     font-size: 17px;
+}
+
+.fa.disabled {
+    opacity: .4;
 }