mpy/alerts: implement compiler error

This shows the output from mpy-cross and has a button to go to the
error.

src/mpy/alerts/CompilerError.tsx

@@ -0,0 +1,58 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { Button, Intent } from '@blueprintjs/core';
+import React, { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { editorGoto } from '../../editor/actions';
+import { useFileStorageUuid } from '../../fileStorage/hooks';
+import type { CreateToast } from '../../toasterTypes';
+import { useI18n } from './i18n';
+
+type CompilerErrorProps = {
+    error: string[];
+};
+
+const CompilerError: React.VoidFunctionComponent<CompilerErrorProps> = ({ error }) => {
+    const dispatch = useDispatch();
+    const i18n = useI18n();
+
+    const [file, line] = useMemo(() => {
+        for (const line of error) {
+            const match = line.match(/^ {2}File "(.*)", line (\d+)/);
+
+            if (match) {
+                return [match[1], Number(match[2])];
+            }
+        }
+
+        return [undefined, undefined];
+    }, [error]);
+
+    const uuid = useFileStorageUuid(file ?? '');
+
+    return (
+        <>
+            <p>{i18n.translate('compilerError.message')}</p>
+            <pre className="pb-mpy-alerts-compile-error">{error.join('\n')}</pre>
+            {file && uuid && (
+                <Button icon="code" onClick={() => dispatch(editorGoto(uuid, line))}>
+                    {i18n.translate('compilerError.gotoErrorButton')}
+                </Button>
+            )}
+        </>
+    );
+};
+
+export const compilerError: CreateToast<CompilerErrorProps, 'dismiss' | 'gotoError'> = (
+    onAction,
+    props,
+) => {
+    return {
+        message: <CompilerError {...props} />,
+        icon: 'error',
+        intent: Intent.DANGER,
+        timeout: 0,
+        onDismiss: () => onAction('dismiss'),
+    };
+};

src/mpy/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/mpy/alerts/index.scss

@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+pre.pb-mpy-alerts-compile-error {
+    white-space: pre-wrap;
+    word-break: keep-all;
+}

src/mpy/alerts/index.ts

@@ -0,0 +1,10 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import './index.scss';
+import { compilerError } from './CompilerError';
+
+// gathers all of the alert creation functions for passing up to the top level
+export default {
+    compilerError,
+};

src/mpy/alerts/translations/en.json

@@ -0,0 +1,6 @@
+{
+    "compilerError": {
+        "message": "Failed to compile MicroPython file.",
+        "gotoErrorButton": "Goto error"
+    }
+}