Progress/mock tweaks for library changes

Author: microbit-matt-hillsdon

src/common/ProgressDialog.tsx

@@ -19,7 +19,7 @@ const doNothing = () => {};
 export interface ProgressDialogParameters {
   header: ReactNode;
   body?: ReactNode;
-  progress: number | undefined;
+  progress?: number;
 }
 
 interface ProgressDialogProps extends ProgressDialogParameters {
@@ -29,10 +29,15 @@ interface ProgressDialogProps extends ProgressDialogParameters {
 /**
  * A progress dialog used for the flashing process.
  */
-const ProgressDialog = ({ header, body, progress }: ProgressDialogProps) => {
+const ProgressDialog = ({
+  isOpen,
+  header,
+  body,
+  progress,
+}: ProgressDialogProps) => {
   return (
     <Modal
-      isOpen={progress !== undefined}
+      isOpen={isOpen}
       onClose={doNothing}
       isCentered
       size={body ? "xl" : "md"}
@@ -53,7 +58,7 @@ const ProgressDialog = ({ header, body, progress }: ProgressDialogProps) => {
             alignItems="flex-start"
           >
             {body}
-            <Progress value={progress! * 100} width="100%" />
+            <Progress value={(progress ?? 0) * 100} width="100%" />
           </VStack>
         </ModalBody>
       </ModalContent>

src/common/use-dialogs.tsx

@@ -65,11 +65,11 @@ export class Dialogs {
   }
 
   progress(options: ProgressDialogParameters): void {
-    if (options.progress === undefined) {
-      this.progressDialogSetState(undefined);
-    } else {
-      this.progressDialogSetState(options);
-    }
+    this.progressDialogSetState(options);
+  }
+
+  closeProgress(): void {
+    this.progressDialogSetState(undefined);
   }
 }
 

src/device/mock.ts

@@ -5,6 +5,7 @@
  */
 import {
   BoardVersion,
+  ConnectionAvailabilityStatus,
   ConnectionStatus,
   DeviceConnectionEventMap,
   FlashDataSource,
@@ -31,6 +32,7 @@ export class MockDeviceConnection
   status: ConnectionStatus = ConnectionStatus.NoAuthorizedDevice;
 
   private connectResults: DeviceErrorCode[] = [];
+  private availability: ConnectionAvailabilityStatus = "available";
 
   constructor() {
     super();
@@ -48,7 +50,7 @@ export class MockDeviceConnection
 
   async initialize(): Promise<void> {}
   async checkAvailability() {
-    return "available" as const;
+    return this.availability;
   }
 
   dispose() {}
@@ -110,4 +112,8 @@ export class MockDeviceConnection
   clearDevice(): void {
     this.setStatus(ConnectionStatus.NoAuthorizedDevice);
   }
+
+  mockWebUsbNotSupported(): void {
+    this.availability = "unsupported";
+  }
 }

src/project/project-actions.tsx

@@ -135,6 +135,12 @@ export class ProjectActions {
       type: "connect",
     });
 
+    const availability = await this.device.checkAvailability();
+    if (availability !== "available") {
+      this.webusbNotSupportedError(finalFocusRef);
+      return false;
+    }
+
     if (await this.showConnectHelp(forceConnectHelp, finalFocusRef)) {
       return this.connectInternal(userAction, finalFocusRef);
     }
@@ -514,8 +520,8 @@ export class ProjectActions {
       }
     }
 
+    const flashingCode = this.intl.formatMessage({ id: "flashing-code" });
     try {
-      const flashingCode = this.intl.formatMessage({ id: "flashing-code" });
       const firstFlashNotice = (
         <Text fontSize="lg">
           <FormattedMessage id="flashing-full-flash-detail" />
@@ -546,6 +552,8 @@ export class ProjectActions {
       } else {
         this.handleWebUSBError(e, ConnectionAction.FLASH, finalFocusRef);
       }
+    } finally {
+      this.dialogs.closeProgress();
     }
   };