hub/alerts/UserProgramSize: add alert for program too big

This finishes the TODO about adding a proper message.

Fixes: https://github.com/pybricks/support/issues/810

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Fixed
 - Fixed missing warning sign icon.
+- Fixed error message for program too big for download ([support#810]).
 
 ## [2.0.0-beta.11] - 2022-11-11
 
@@ -20,6 +21,7 @@
 
 [pybricks-code#1299]: https://github.com/pybricks/pybricks-code/issues/1299
 [support#792]: https://github.com/orgs/pybricks/discussions/792
+[support#810]: https://github.com/pybricks/support/issues/810
 
 ## [2.0.0-beta.10] - 2022-11-11
 

src/alerts.ts

@@ -7,6 +7,7 @@ import app from './app/alerts';
 import ble from './ble/alerts';
 import explorer from './explorer/alerts';
 import firmware from './firmware/alerts';
+import hub from './hub/alerts';
 import mpy from './mpy/alerts';
 import type { CreateToast } from './toasterTypes';
 
@@ -17,6 +18,7 @@ const alertDomains = {
     ble,
     explorer,
     firmware,
+    hub,
     mpy,
 };
 

src/hub/alerts/UserProgramSize.test.tsx

@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import React from 'react';
+import { testRender } from '../../../test';
+import { userProgramSize } from './UserProgramSize';
+
+it('should be valid', () => {
+    const callback = jest.fn();
+    const toast = userProgramSize(callback, { actual: 10000, max: 8000 });
+
+    // TODO: refactor this to a common function to be used by all alerts
+
+    // it should render
+    const [, message] = testRender(<>{toast.message}</>);
+    expect(message).toBeDefined();
+
+    // it should have a dismiss callback
+    toast.onDismiss?.(false);
+    expect(callback).toHaveBeenCalledWith('dismiss');
+});

src/hub/alerts/UserProgramSize.tsx

@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { Intent } from '@blueprintjs/core';
+import React from 'react';
+import type { CreateToast } from '../../toasterTypes';
+import { useI18n } from './i18n';
+
+type UserProgramSizeProps = {
+    /** The actual size of the program in bytes. */
+    actual: number;
+    /** The maximum allowable size of the program in bytes. */
+    max: number;
+};
+
+const UserProgramSize: React.VoidFunctionComponent<UserProgramSizeProps> = ({
+    actual,
+    max,
+}) => {
+    const i18n = useI18n();
+    return (
+        <>
+            <p>
+                {i18n.translate('userProgramSize.message', {
+                    actual: i18n.formatNumber(actual),
+                    max: i18n.formatNumber(max),
+                })}
+            </p>
+            <p>{i18n.translate('userProgramSize.suggestion')}</p>
+        </>
+    );
+};
+
+export const userProgramSize: CreateToast<UserProgramSizeProps> = (
+    onAction,
+    props,
+) => ({
+    message: <UserProgramSize {...props} />,
+    icon: 'error',
+    intent: Intent.DANGER,
+    onDismiss: () => onAction('dismiss'),
+});

src/hub/alerts/i18n.ts

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../../i18n';
+import type translations from './translations/en.json';
+
+export function useI18n(): TypedI18n<typeof translations> {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}

src/hub/alerts/index.ts

@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { userProgramSize } from './UserProgramSize';
+
+export default {
+    userProgramSize,
+};

src/hub/alerts/translations/en.json

@@ -0,0 +1,6 @@
+{
+    "userProgramSize": {
+        "message": "This program is too big. Compiled size is {actual} bytes but the hub can only fit {max} bytes.",
+        "suggestion": "Try removing unused code or making names and strings smaller."
+    }
+}

src/hub/sagas.ts

@@ -225,9 +225,14 @@ function* handleDownloadAndRun(action: ReturnType<typeof downloadAndRun>): Gener
             console.log(`Downloading ${didCompile.file.size} bytes`);
         }
 
-        if (didCompile.file.size >= maxUserProgramSize) {
-            // TODO: proper error notification
-            throw new Error('file too big');
+        if (didCompile.file.size > maxUserProgramSize) {
+            yield* put(
+                alertsShowAlert('hub', 'userProgramSize', {
+                    actual: didCompile.file.size,
+                    max: maxUserProgramSize,
+                }),
+            );
+            return;
         }
 
         // let everyone know the runtime is busy loading the program