feat: Tweak unsupported Windows firmware update notification (#705)

* feat: Tweak unsupported Windows firmware update notification

* feat: Display firmware update status

* feat: throw error when left half not connected under firmware upgrade

packages/uhk-usb/src/uhk-operations.ts

@@ -59,8 +59,9 @@ export class UhkOperations {
 
         const leftModuleBricked = await this.waitForKbootIdle();
         if (!leftModuleBricked) {
-            this.logService.error('[UhkOperations] Couldn\'t connect to the left keyboard half.');
-            return;
+            const msg = '[UhkOperations] Couldn\'t connect to the left keyboard half.';
+            this.logService.error(msg);
+            throw new Error(msg);
         }
 
         await this.device.reenumerate(EnumerationModes.Buspal);

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -12,13 +12,10 @@
                 Firmware {{ hardwareModules.rightModuleInfo.firmwareVersion }} is running on the right keyboard half.
             </p>
 
-            <p *ngIf="showUnsupportedOsToFirmwareUpgrade$ | async">Firmware update doesn't work on Windows 7, Windows Vista, and Windows XP. Use Windows 10, Windows 8, Linux, or OSX instead.</p>
+            <p *ngIf="runningOnNotSupportedWindows$ | async">Firmware update doesn't work on Windows 7, Windows Vista,
+                and Windows XP. Use Windows 10, Windows 8, Linux, or OSX instead.</p>
 
-            <p>If the update process fails, disconnect every USB device from your computer including USB hubs, KVM switches, and every USB device. Then connect only your UHK and retry.</p>
-
-            <p>If you tried the above and the update still keeps failing, please <a class="link-github" (click)="openFirmwareGitHubIssuePage($event)">create a GitHub issue</a>, and attach the update log.</p>
-
-            <p>
+            <p *ngIf="firmwareUpgradeAllowed$ | async">
                 <button class="btn btn-primary"
                         [disabled]="flashFirmwareButtonDisbabled$ | async"
                         (click)="onUpdateFirmware()">
@@ -29,9 +26,23 @@
                              accept=".tar.bz2"
                              label="Choose firmware file and flash it"></file-upload>
             </p>
+
+            <div *ngIf="firmwareUpgradeFailed$ | async"
+                 class="alert alert-danger"
+                 role="alert">
+                <p>Firmware update failed. Disconnect every USB device from your computer (including USB hubs, KVM switches, USB dongles, and everything else), then only connect your UHK and retry.</p>
+
+                <p>If you tried the above and the update still keeps failing, please<a class="link-github" (click)="openFirmwareGitHubIssuePage($event)">create a GitHub issue</a>, and attach the update log.</p>
+            </div>
+
+            <div *ngIf="firmwareUpgradeSuccess$ | async"
+                 class="alert alert-success"
+                 role="alert">
+                <p>Firmware update succeeded.</p>
+            </div>
         </div>
 
-        <div class="flex-grow">
+        <div class="flex-grow" *ngIf="firmwareUpgradeAllowed$ | async">
             <xterm [logs]="xtermLog$ | async"></xterm>
         </div>
         <div class="flex-footer">

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -7,10 +7,13 @@ import { Constants, HardwareModules, VersionInformation } from 'uhk-common';
 import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
 import {
     AppState,
+    firmwareUpgradeAllowed,
+    firmwareUpgradeFailed,
+    firmwareUpgradeSuccess,
     flashFirmwareButtonDisbabled,
     getAgentVersionInfo,
     getHardwareModules,
-    showUnsupportedOsToFirmwareUpgrade,
+    runningOnNotSupportedWindows,
     xtermLog
 } from '../../../store';
 import { UpdateFirmwareAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
@@ -31,7 +34,10 @@ export class DeviceFirmwareComponent implements OnDestroy {
     getAgentVersionInfo$: Observable<VersionInformation>;
     hardwareModulesSubscription: Subscription;
     hardwareModules: HardwareModules;
-    showUnsupportedOsToFirmwareUpgrade$: Observable<boolean>;
+    runningOnNotSupportedWindows$: Observable<boolean>;
+    firmwareUpgradeAllowed$: Observable<boolean>;
+    firmwareUpgradeFailed$: Observable<boolean>;
+    firmwareUpgradeSuccess$: Observable<boolean>;
 
     constructor(private store: Store<AppState>) {
         this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
@@ -40,7 +46,10 @@ export class DeviceFirmwareComponent implements OnDestroy {
         this.hardwareModulesSubscription = store.select(getHardwareModules).subscribe(data => {
             this.hardwareModules = data;
         });
-        this.showUnsupportedOsToFirmwareUpgrade$ = store.select(showUnsupportedOsToFirmwareUpgrade);
+        this.runningOnNotSupportedWindows$ = store.select(runningOnNotSupportedWindows);
+        this.firmwareUpgradeAllowed$ = store.select(firmwareUpgradeAllowed);
+        this.firmwareUpgradeFailed$ = store.select(firmwareUpgradeFailed);
+        this.firmwareUpgradeSuccess$ = store.select(firmwareUpgradeSuccess);
     }
 
     ngOnDestroy(): void {

packages/uhk-web/src/app/store/index.ts

@@ -53,6 +53,7 @@ export const deviceConfigurationLoaded = createSelector(appState, fromApp.device
 export const getAgentVersionInfo = createSelector(appState, fromApp.getAgentVersionInfo);
 export const getPrivilegePageState = createSelector(appState, fromApp.getPrivilagePageState);
 export const runningOnNotSupportedWindows = createSelector(appState, fromApp.runningOnNotSupportedWindows);
+export const firmwareUpgradeAllowed = createSelector(runningOnNotSupportedWindows, notSupportedOs => !notSupportedOs);
 
 export const appUpdateState = (state: AppState) => state.appUpdate;
 export const getShowAppUpdateAvailable = createSelector(appUpdateState, fromAppUpdate.getShowAppUpdateAvailable);
@@ -83,6 +84,7 @@ export const getBackupUserConfigurationState = createSelector(deviceState, fromD
 export const getRestoreUserConfiguration = createSelector(deviceState, fromDevice.getHasBackupUserConfiguration);
 export const bootloaderActive = createSelector(deviceState, fromDevice.bootloaderActive);
 export const firmwareUpgradeFailed = createSelector(deviceState, fromDevice.firmwareUpgradeFailed);
+export const firmwareUpgradeSuccess = createSelector(deviceState, fromDevice.firmwareUpgradeSuccess);
 
 export const getSideMenuPageState = createSelector(
     showAddonMenu,
@@ -108,9 +110,3 @@ export const getSideMenuPageState = createSelector(
 );
 
 export const getRouterState = (state: AppState) => state.router;
-
-export const showUnsupportedOsToFirmwareUpgrade = createSelector(
-    runningOnNotSupportedWindows,
-    firmwareUpgradeFailed,
-    (isUnsupportedOs,
-     hasFirmwareUpgradeFailed) => isUnsupportedOs && hasFirmwareUpgradeFailed);

packages/uhk-web/src/app/store/reducers/device.ts

@@ -24,6 +24,7 @@ export interface State {
     updatingFirmware: boolean;
     firmwareUpdateFinished: boolean;
     firmwareUpdateFailed?: boolean;
+    firmwareUpdateSuccess?: boolean;
     modules: HardwareModules;
     log: Array<XtermLog>;
     restoringUserConfiguration: boolean;
@@ -129,6 +130,8 @@ export function reducer(state = initialState, action: Action): State {
                 ...state,
                 updatingFirmware: true,
                 firmwareUpdateFinished: false,
+                firmwareUpdateFailed: false,
+                firmwareUpdateSuccess: false,
                 log: [{message: 'Start flashing firmware', cssClass: XtermCssClass.standard}]
             };
 
@@ -137,7 +140,7 @@ export function reducer(state = initialState, action: Action): State {
                 ...state,
                 updatingFirmware: false,
                 firmwareUpdateFinished: true,
-                firmwareUpdateFailed: false,
+                firmwareUpdateSuccess: true,
                 modules: (action as UpdateFirmwareSuccessAction).payload
             };
 
@@ -232,3 +235,4 @@ export const getBackupUserConfigurationState = (state: State): RestoreConfigurat
 };
 export const bootloaderActive = (state: State) => state.bootloaderActive;
 export const firmwareUpgradeFailed = (state: State) => state.firmwareUpdateFailed;
+export const firmwareUpgradeSuccess = (state: State) => state.firmwareUpdateSuccess;