Unsupported V1 micro:bit dialog for radio bridge flow (#215)

We might support this one day but for now the C++ project is V2 only.

Author: microbit-grace

src/components/HtmlFormattedMessage.svelte

@@ -13,17 +13,24 @@
  -->
 
 <script lang="ts" context="module">
+  interface Options {
+    className?: string;
+    tag?: string;
+  }
   export const linkWithProps =
-    (props: Partial<HTMLAnchorElement>) => (chunks: string[]) => {
+    (props: Partial<HTMLAnchorElement>, options: Options = {}) =>
+    (chunks: string[]) => {
       {
-        const a = document.createElement('a');
-        Object.assign(a, {
+        const tag = options.tag ?? 'a';
+        const element = document.createElement(tag);
+        Object.assign(element, {
           className:
-            'text-link outline-none focus-visible:ring-4 focus-visible:ring-offset-1 focus-visible:ring-ring',
+            'text-link outline-none focus-visible:ring-4 focus-visible:ring-offset-1 focus-visible:ring-ring ' +
+            (options.className ?? ''),
           innerText: chunks.join(''),
           ...props,
         });
-        return a;
+        return element;
       }
     };
 </script>

src/components/UnsupportedMicrobitWarningDialog.svelte

@@ -0,0 +1,71 @@
+<!--
+  (c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
+ 
+  SPDX-License-Identifier: MIT
+ -->
+
+<script lang="ts">
+  import { t } from '../i18n';
+  import DialogHeading from './DialogHeading.svelte';
+  import HtmlFormattedMessage, { linkWithProps } from './HtmlFormattedMessage.svelte';
+  import StandardButton from './StandardButton.svelte';
+
+  export let onClose: () => void;
+  export let onStartBluetoothClick: () => void;
+
+  const linkWithPropsForMicrobitVersionSupport = linkWithProps({
+    href: 'https://support.microbit.org/support/solutions/articles/19000119162',
+    target: '_blank',
+    rel: 'noopener',
+  });
+  const linkToBluetoothFlowId = 'link-to-bluetooth';
+  const linkToBluetoothFlow = linkWithProps(
+    {
+      id: linkToBluetoothFlowId,
+    },
+    { tag: 'button' },
+  );
+  // The elements in translated strings don't support Svelte event handlers
+  // so we wire it up ourselves.
+  const wireLinkToBluetoothFlow = (node: Element) => {
+    const link = node.querySelector('#' + linkToBluetoothFlowId);
+    link?.addEventListener('click', onStartBluetoothClick);
+    return {
+      destroy() {
+        link?.removeEventListener('click', onStartBluetoothClick);
+      },
+    };
+  };
+</script>
+
+<div class="w-175">
+  <DialogHeading>{$t('connectMB.unsupportedMicrobit.header')}</DialogHeading>
+  <div class="space-y-5">
+    <div class="space-y-2">
+      <p>
+        <HtmlFormattedMessage
+          id={$t('connectMB.unsupportedMicrobit.explain')}
+          options={{
+            values: {
+              link: linkWithPropsForMicrobitVersionSupport,
+            },
+          }} />
+      </p>
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+      <p use:wireLinkToBluetoothFlow>
+        <HtmlFormattedMessage
+          id={$t('connectMB.unsupportedMicrobit.advice')}
+          options={{
+            values: {
+              link1: linkToBluetoothFlow,
+              link2: linkWithPropsForMicrobitVersionSupport,
+            },
+          }} />
+      </p>
+    </div>
+    <div class="flex justify-end">
+      <StandardButton onClick={onClose} type="primary"
+        >{$t('actions.close')}</StandardButton>
+    </div>
+  </div>
+</div>

src/components/connection-prompt/ConnectDialogContainer.svelte

@@ -14,6 +14,7 @@
   import Microbits, {
     FlashStage,
     HexType,
+    getHexFileUrl,
   } from '../../script/microbit-interfacing/Microbits';
   import {
     ConnectDialogStates,
@@ -40,6 +41,7 @@
   import DownloadingDialog from './usb/DownloadingDialog.svelte';
   import SelectMicrobitDialogUsb from './usb/SelectMicrobitDialogUsb.svelte';
   import ManualInstallTutorial from './usb/manual/ManualInstallTutorial.svelte';
+  import UnsupportedMicrobitWarningDialog from '../UnsupportedMicrobitWarningDialog.svelte';
 
   const { bluetooth, usb } = get(compatibility);
   let endOfFlow = false;
@@ -118,7 +120,13 @@
     try {
       const deviceId = await usb.getDeviceId();
       const hexForStage = stageToHex(flashStage);
-      await usb.flashHex(hexForStage, progress => {
+      const hexUrl = getHexFileUrl(usb.getModelNumber(), hexForStage);
+      if (hexUrl === undefined) {
+        $connectionDialogState.connectionState = ConnectDialogStates.MICROBIT_UNSUPPORTED;
+        return;
+      }
+
+      await usb.flashHex(hexUrl, progress => {
         // Flash hex
         // Send users to download screen
         if (
@@ -405,6 +413,12 @@
         onTryAgain={() => {
           $connectionDialogState.connectionState = ConnectDialogStates.BLUETOOTH;
         }} />
+    {:else if $connectionDialogState.connectionState === ConnectDialogStates.MICROBIT_UNSUPPORTED}
+      <UnsupportedMicrobitWarningDialog
+        onStartBluetoothClick={() => {
+          $connectionDialogState.connectionState = ConnectDialogStates.START_BLUETOOTH;
+        }}
+        onClose={endFlow} />
     {/if}
   </StandardDialog>
 </div>

src/messages/ui.en.json

@@ -139,6 +139,10 @@
   "connectMB.usbTryAgain.replugMicrobit3": "check that this micro:bit does not have a battery pack connected",
   "connectMB.usbTryAgain.replugMicrobit4": "unplug and replug the USB cable",
 
+  "connectMB.unsupportedMicrobit.header": "micro:bit V1 is not supported for connecting two micro:bits",
+  "connectMB.unsupportedMicrobit.explain": "Unfortunately, we only support using micro:bit V2 when connecting two micro:bits. You have connected a <link>micro:bit V1</link>.",
+  "connectMB.unsupportedMicrobit.advice": "If your computer supports Web Bluetooth then you can use the <link1>alternative method</link1> that uses one micro:bit with your <link2>micro:bit V1</link2>.",
+
   "connectMB.radioStart.heading": "What you will need to get started:",
   "connectMB.radioStart.requirements1": "2 micro:bits",
   "connectMB.radioStart.requirements2": "Computer",

src/script/microbit-interfacing/MicrobitUSB.ts

@@ -5,9 +5,8 @@
  */
 
 import { CortexM, DAPLink, WebUSB } from 'dapjs';
-import MBSpecs from './MBSpecs';
-import { HexType, getHexFileUrl } from './Microbits';
 import { logError } from '../utils/logging';
+import MBSpecs from './MBSpecs';
 import { CortexSpecialReg } from './constants';
 
 const baudRate = 115200;
@@ -112,18 +111,15 @@ class MicrobitUSB {
 
   /**
    * Flashes a .hex file to the micro:bit.
-   * @param {string} hex The hex file to flash. (As a link)
+   * @param {string} url The hex file to flash. (As a link)
    * @param {(progress: number) => void} progressCallback A callback for progress.
    */
   public async flashHex(
-    hexType: HexType,
+    url: string,
     progressCallback: (progress: number) => void,
   ): Promise<void> {
-    const version = this.getModelNumber();
-    const hex = getHexFileUrl(version, hexType);
-    const hexFile: Response = await fetch(hex);
-    const buffer: ArrayBuffer = await hexFile.arrayBuffer();
-
+    const hexFile = await fetch(url);
+    const buffer = await hexFile.arrayBuffer();
     const target = new DAPLink(this.transport);
 
     target.on(DAPLink.EVENT_PROGRESS, (progress: number) => {

src/script/microbit-interfacing/Microbits.ts

@@ -19,7 +19,10 @@ export type HexType =
 
 export type UARTMessageType = 'g' | 's';
 
-export const getHexFileUrl = (version: 1 | 2 | 'universal', type: HexType) => {
+export const getHexFileUrl = (
+  version: 1 | 2 | 'universal',
+  type: HexType,
+): string | undefined => {
   if (type === 'bluetooth') {
     return {
       1: 'firmware/ml-microbit-cpp-version-combined.hex',
@@ -28,7 +31,7 @@ export const getHexFileUrl = (version: 1 | 2 | 'universal', type: HexType) => {
     }[version];
   }
   if (version !== 2) {
-    throw new Error('Only V2 is supported');
+    return undefined;
   }
   return {
     'radio-remote-dev': 'firmware/radio-remote-v0.2.0-dev.hex',

src/script/stores/connectDialogStore.ts

@@ -27,6 +27,7 @@ export enum ConnectDialogStates {
   MANUAL_TUTORIAL, // Prompt with tutorial gif for manual installation (and downloading of program)
   USB_TRY_AGAIN, // Prompt user to try connecting via WebUSB again
   BLUETOOTH_TRY_AGAIN, // Prompt user to try connecting via WebBluetooth again
+  MICROBIT_UNSUPPORTED, // Warn user that micro:bit V1 is not supported
   BROWSER_DIALOG, // Awaiting user interaction with browser dialog
 }