firmware/installPybricksDialog: add warning for windows/linux usb

This warns the user before failure. Otherwise they will click the flash
button and no devices will appear in the scan dialog.

src/app/constants.ts

@@ -38,6 +38,12 @@ export const pybricksBluetoothTroubleshootingUrl =
 export const pybricksUsbDfuTroubleshootingUrl =
     'https://github.com/pybricks/support/discussions/688';
 
+export const pybricksUsbDfuWindowsDriverInstallUrl =
+    'https://github.com/pybricks/support/discussions/688#discussioncomment-3201466';
+
+export const pybricksUsbLinuxUdevRulesUrl =
+    'https://github.com/pybricks/support/discussions/688#discussioncomment-3239099';
+
 /** Pybricks copyright statement. */
 export const pybricksCopyright = 'Copyright (c) 2020-2022 The Pybricks Authors';
 

src/firmware/installPybricksDialog/InstallPybricksDialog.tsx

@@ -4,6 +4,7 @@
 import './installPybricksDialog.scss';
 import {
     Button,
+    Callout,
     Checkbox,
     Classes,
     ControlGroup,
@@ -24,7 +25,11 @@ import { Select2 } from '@blueprintjs/select';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { appName } from '../../app/constants';
+import {
+    appName,
+    pybricksUsbDfuWindowsDriverInstallUrl,
+    pybricksUsbLinuxUdevRulesUrl,
+} from '../../app/constants';
 import HelpButton from '../../components/HelpButton';
 import {
     Hub,
@@ -37,6 +42,8 @@ import { HubPicker } from '../../components/hubPicker/HubPicker';
 import { FileMetadata } from '../../fileStorage';
 import { useFileStorageMetadata } from '../../fileStorage/hooks';
 import { useSelector } from '../../reducers';
+import ExternalLinkIcon from '../../utils/ExternalLinkIcon';
+import { isLinux, isWindows } from '../../utils/os';
 import {
     firmwareInstallPybricksDialogAccept,
     firmwareInstallPybricksDialogCancel,
@@ -348,6 +355,37 @@ const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps>
 
     return (
         <div className={dialogBody}>
+            {hubHasUSB(hubType) && isLinux() && (
+                <p>
+                    <Callout intent={Intent.WARNING} icon="warning-sign">
+                        {i18n.translate('bootloaderPanel.warning.linux')}{' '}
+                        <a
+                            href={pybricksUsbLinuxUdevRulesUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            {i18n.translate('bootloaderPanel.warning.learnMore')}
+                        </a>
+                        <ExternalLinkIcon />
+                    </Callout>
+                </p>
+            )}
+            {hubHasUSB(hubType) && isWindows() && (
+                <p>
+                    <Callout intent={Intent.WARNING} icon="warning-sign">
+                        {i18n.translate('bootloaderPanel.warning.windows')}{' '}
+                        <a
+                            href={pybricksUsbDfuWindowsDriverInstallUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            {i18n.translate('bootloaderPanel.warning.learnMore')}
+                        </a>
+                        <ExternalLinkIcon />
+                    </Callout>
+                </p>
+            )}
+
             <p>{i18n.translate('bootloaderPanel.instruction1')}</p>
             <ol>
                 {hubHasUSB(hubType) && (

src/firmware/installPybricksDialog/translations/en.json

@@ -55,6 +55,11 @@
     },
     "bootloaderPanel": {
         "title": "Place hub in bootloader mode",
+        "warning": {
+            "linux": "If you have never used Pybricks with USB on Linux, you will need to configure udev rules to allow permission before you can flash the hub firmware.",
+            "windows": " If you have never used Pybricks with USB on Windows, you may need to manually install a USB driver before you can flash the hub firmware.",
+            "learnMore": "Learn more."
+        },
         "instruction1": "To flash the firmware, the hub must be placed in bootloader mode. Follow the steps below to do this:",
         "button": {
             "bluetooth": "Bluetooth button",