firmware/alerts: Add button to install USB driver.

Author: laurensvalk

src/firmware/alerts/NoDfuHub.tsx

@@ -1,15 +1,21 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2022 The Pybricks Authors
 
-import { AnchorButton, Intent } from '@blueprintjs/core';
+import { AnchorButton, Button, Intent } from '@blueprintjs/core';
 import React from 'react';
 import { pybricksUsbDfuTroubleshootingUrl } from '../../app/constants';
 import ExternalLinkIcon from '../../components/ExternalLinkIcon';
 import type { CreateToast } from '../../toasterTypes';
 import { isLinux, isWindows } from '../../utils/os';
 import { useI18n } from './i18n';
 
-const NoDfuHub: React.VoidFunctionComponent = () => {
+type NoDfuHubProps = {
+    onInstallWindowsDriver: () => void;
+};
+
+const NoDfuHub: React.VoidFunctionComponent<NoDfuHubProps> = ({
+    onInstallWindowsDriver,
+}) => {
     const i18n = useI18n();
 
     return (
@@ -18,23 +24,31 @@ const NoDfuHub: React.VoidFunctionComponent = () => {
 
             {isWindows() && <p>{i18n.translate('noDfuHub.suggestion1.windows')}</p>}
             {isLinux() && <p>{i18n.translate('noDfuHub.suggestion1.linux')}</p>}
-
-            <p>{i18n.translate('noDfuHub.suggestion2')}</p>
-
-            <AnchorButton
-                icon="help"
-                href={pybricksUsbDfuTroubleshootingUrl}
-                target="_blank"
-            >
-                {i18n.translate('noDfuHub.troubleshootButton')}
-                <ExternalLinkIcon />
-            </AnchorButton>
+            <div className="pb-ble-alerts-buttons">
+                {isWindows() && (
+                    <Button icon="download" onClick={onInstallWindowsDriver}>
+                        {i18n.translate('noDfuHub.installUsbDriverButton')}
+                    </Button>
+                )}
+                <AnchorButton
+                    icon="help"
+                    href={pybricksUsbDfuTroubleshootingUrl}
+                    target="_blank"
+                >
+                    {i18n.translate('noDfuHub.troubleshootButton')}
+                    <ExternalLinkIcon />
+                </AnchorButton>
+            </div>
         </>
     );
 };
 
-export const noDfuHub: CreateToast = (onAction) => ({
-    message: <NoDfuHub />,
+export const noDfuHub: CreateToast<never, 'dismiss' | 'installWindowsDriver'> = (
+    onAction,
+) => ({
+    message: (
+        <NoDfuHub onInstallWindowsDriver={() => onAction('installWindowsDriver')} />
+    ),
     icon: 'info-sign',
     intent: Intent.PRIMARY,
     onDismiss: () => onAction('dismiss'),

src/firmware/alerts/translations/en.json

@@ -14,8 +14,8 @@
             "windows": "You may need to manually install a USB driver before you can connect to your hub.",
             "linux": "You may need to add udev rules before you can connect to your hub."
         },
-        "suggestion2": "Click the button below for more information.",
-        "troubleshootButton": "Troubleshooting Tips"
+        "troubleshootButton": "Troubleshooting Tips",
+        "installUsbDriverButton": "Install USB Driver"
     },
     "noDfuInterface": {
         "message": "This is very unusual. The USB device did not contain the expected interface."

src/firmware/sagas.ts

@@ -80,6 +80,7 @@ import {
     firmwareRestoreOfficialDfu,
     flashFirmware,
 } from './actions';
+import { firmwareDfuWindowsDriverInstallDialogDialogShow } from './dfuWindowsDriverInstallDialog/actions';
 import {
     firmwareInstallPybricksDialogAccept,
     firmwareInstallPybricksDialogCancel,
@@ -713,6 +714,19 @@ function* handleFlashUsbDfu(action: ReturnType<typeof firmwareFlashUsbDfu>): Gen
         if (!device) {
             yield* put(alertsShowAlert('firmware', 'noDfuHub'));
             yield* put(firmwareDidFailToFlashUsbDfu());
+
+            const { action } = yield* take<
+                ReturnType<typeof alertsDidShowAlert<'firmware', 'noDfuHub'>>
+            >(
+                alertsDidShowAlert.when(
+                    (a) => a.domain === 'firmware' && a.specific === 'noDfuHub',
+                ),
+            );
+
+            if (action === 'installWindowsDriver') {
+                yield* put(firmwareDfuWindowsDriverInstallDialogDialogShow());
+            }
+
             return;
         }