ble/alerts/Disconnected: better error message for disconnected

WebBluetooth generally uses DomException with name NetworkError to mean
that Bluetooth is disconnected, so we can use that to provide a helpful
error message.

src/ble/alerts/Disconnected.test.tsx

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022-2023 The Pybricks Authors
+
+import { Toast } from '@blueprintjs/core';
+import { act } from '@testing-library/react';
+import React from 'react';
+import { testRender } from '../../../test';
+import { disconnected } from './Disconnected';
+
+it('should dismiss when close is clicked', async () => {
+    const callback = jest.fn();
+    const toast = disconnected(callback, undefined as never);
+
+    const [user, message] = testRender(<Toast {...toast} />);
+
+    await act(() => user.click(message.getByRole('button', { name: /close/i })));
+
+    expect(callback).toHaveBeenCalledWith('dismiss');
+});

src/ble/alerts/Disconnected.tsx

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022-2023 The Pybricks Authors
+
+import { Intent } from '@blueprintjs/core';
+import React from 'react';
+import type { CreateToast } from '../../toasterTypes';
+import { useI18n } from './i18n';
+
+const Disconnected: React.VoidFunctionComponent = () => {
+    const i18n = useI18n();
+    return <p>{i18n.translate('disconnected.message')}</p>;
+};
+
+export const disconnected: CreateToast = (onAction) => ({
+    message: <Disconnected />,
+    icon: 'error',
+    intent: Intent.DANGER,
+    onDismiss: () => onAction('dismiss'),
+});

src/ble/alerts/index.ts

@@ -1,7 +1,8 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { bluetoothNotAvailable } from './BluetoothNotAvailable';
+import { disconnected } from './Disconnected';
 import { missingService } from './MissingService';
 import { noGatt } from './NoGatt';
 import { noHub } from './NoHub';
@@ -11,6 +12,7 @@ import { oldFirmware } from './OldFirmware';
 // gathers all of the alert creation functions for passing up to the top level
 export default {
     bluetoothNotAvailable,
+    disconnected,
     missingService,
     noGatt,
     noHub,

src/ble/alerts/translations/en.json

@@ -29,5 +29,8 @@
         "flashFirmware": {
             "label": "Update Pybricks firmware"
         }
+    },
+    "disconnected": {
+        "message": "The hub is no longer connected. Please reconnect and try again."
     }
 }

src/hub/sagas.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import {
     SagaGenerator,
@@ -326,9 +326,15 @@ function* handleDownloadAndRun(action: ReturnType<typeof downloadAndRun>): Gener
             console.error(err);
         }
 
-        yield* put(
-            alertsShowAlert('alerts', 'unexpectedError', { error: ensureError(err) }),
-        );
+        if (err instanceof DOMException && err.name === 'NetworkError') {
+            yield* put(alertsShowAlert('ble', 'disconnected'));
+        } else {
+            yield* put(
+                alertsShowAlert('alerts', 'unexpectedError', {
+                    error: ensureError(err),
+                }),
+            );
+        }
 
         yield* put(didFailToFinishDownload());
     }