@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1 → 76.0.0

package/src/Device/deviceLister.ts

@@ -11,13 +11,13 @@ import nrfDeviceLib, {
 } from '@nordicsemiconductor/nrf-device-lib-js';
 
 import logger from '../logging';
-import type { AppDispatch, RootState } from '../store';
+import type { AppThunk, RootState } from '../store';
 import {
-    clearWaitForDevice,
     clearWaitForDeviceTimeout,
     setArrivedButWrongWhen,
     setDisconnectedTime,
     setLastArrivedDeviceId,
+    setOnCancelTimeout,
     setWaitForDeviceTimeout,
     WaitForDevice,
 } from './deviceAutoSelectSlice';
@@ -72,10 +72,12 @@ const shouldAutoReselect = (
 };
 
 const initAutoReconnectTimeout =
-    (onTimeout: () => void, waitForDevice: WaitForDevice) =>
-    (dispatch: AppDispatch) => {
+    (onTimeout: () => void, waitForDevice: WaitForDevice): AppThunk =>
+    dispatch => {
         const timeout = waitForDevice.timeout;
 
+        dispatch(setOnCancelTimeout(onTimeout));
+
         dispatch(
             setWaitForDeviceTimeout(
                 setTimeout(() => {
@@ -86,8 +88,7 @@ const initAutoReconnectTimeout =
                                 timeout / 1000
                             } seconds.`
                         );
-                    dispatch(clearWaitForDeviceTimeout());
-                    onTimeout();
+                    dispatch(clearWaitForDevice());
                     logger.warn(
                         `Failed to detect device after reboot. Timed out after ${
                             timeout / 1000
@@ -135,6 +136,33 @@ export const hasValidDeviceTraits = (
         rule => requiredTraits[rule as keyof DeviceTraits] === false
     );
 
+const removeDeviceFromList =
+    (
+        removedDevice: Device,
+        onDeviceDeselected: () => void,
+        onDeviceDisconnected: (device: Device) => void
+    ): AppThunk =>
+    (dispatch, getState) => {
+        if (
+            removedDevice.serialNumber ===
+            getState().device.selectedSerialNumber
+        ) {
+            onDeviceDeselected();
+        }
+
+        if (
+            removedDevice.serialNumber ===
+                getState().device.selectedSerialNumber &&
+            !getState().deviceAutoSelect.waitForDevice
+        ) {
+            dispatch(closeDeviceSetupDialog());
+        }
+
+        if (!getState().deviceAutoSelect.arrivedButWrongWhen) {
+            dispatch(removeDevice(removedDevice));
+            onDeviceDisconnected(removedDevice);
+        }
+    };
 /*
  * Starts watching for devices with the given traits. See the nrf-device-lib
  * library for available traits. Whenever devices are attached/detached, this
@@ -147,31 +175,9 @@ export const startWatchingDevices =
         onDeviceDisconnected: (device: Device) => void,
         onDeviceDeselected: () => void,
         doSelectDevice: (device: Device, autoReselected: boolean) => void
-    ) =>
-    async (dispatch: AppDispatch, getState: () => RootState) => {
+    ): AppThunk<RootState, Promise<void>> =>
+    async (dispatch, getState) => {
         const updateDeviceList = (event: HotplugEvent) => {
-            const removeDeviceFromList = (remove: Device) => {
-                if (
-                    remove.serialNumber ===
-                    getState().device.selectedSerialNumber
-                ) {
-                    onDeviceDeselected();
-                }
-
-                if (
-                    remove.serialNumber ===
-                        getState().device.selectedSerialNumber &&
-                    !getState().deviceAutoSelect.waitForDevice
-                ) {
-                    dispatch(closeDeviceSetupDialog());
-                }
-
-                if (!getState().deviceAutoSelect.arrivedButWrongWhen) {
-                    dispatch(removeDevice(remove));
-                    onDeviceDisconnected(remove);
-                }
-            };
-
             switch (event.event_type) {
                 case 'NRFDL_DEVICE_EVENT_ARRIVED':
                     if (!event.device) {
@@ -276,11 +282,11 @@ export const startWatchingDevices =
                                         'Wait For Device was successfully'
                                     );
 
-                                    if (waitForDevice.once) {
-                                        dispatch(clearWaitForDevice());
-                                    } else {
-                                        dispatch(clearWaitForDeviceTimeout());
-                                    }
+                                    dispatch(
+                                        clearWaitForDeviceTimeout(
+                                            waitForDevice.once
+                                        )
+                                    );
 
                                     if (waitForDevice.onSuccess)
                                         waitForDevice.onSuccess(
@@ -314,19 +320,35 @@ export const startWatchingDevices =
                                         dispatch(
                                             initAutoReconnectTimeout(
                                                 () =>
-                                                    removeDeviceFromList(
-                                                        device
+                                                    dispatch(
+                                                        removeDeviceFromList(
+                                                            device,
+                                                            onDeviceDeselected,
+                                                            onDeviceDisconnected
+                                                        )
                                                     ),
                                                 waitForDevice
                                             )
                                         );
                                     } else {
-                                        removeDeviceFromList(device);
+                                        dispatch(
+                                            removeDeviceFromList(
+                                                device,
+                                                onDeviceDeselected,
+                                                onDeviceDisconnected
+                                            )
+                                        );
                                     }
 
                                     dispatch(setDisconnectedTime(Date.now()));
                                 } else {
-                                    removeDeviceFromList(device);
+                                    dispatch(
+                                        removeDeviceFromList(
+                                            device,
+                                            onDeviceDeselected,
+                                            onDeviceDisconnected
+                                        )
+                                    );
                                 }
                             }
                         });
@@ -377,6 +399,13 @@ const getAutoSelectDeviceCLISerial = () => {
     return serialIndex > -1 ? argv[serialIndex + 1] : undefined;
 };
 
+export const clearWaitForDevice = (): AppThunk => (dispatch, getState) => {
+    if (getState().deviceAutoSelect.autoReconnectTimeout) {
+        getState().deviceAutoSelect.onCancelTimeout?.();
+    }
+    dispatch(clearWaitForDeviceTimeout(true));
+};
+
 /**
  * Stops watching for devices.
  *
@@ -386,7 +415,6 @@ export const stopWatchingDevices = () => {
     // Not sure, if this guard clause is really needed
     if (getDeviceLibContext() && hotplugTaskId !== null) {
         try {
-            // @ts-expect-error Type will be updated in device-lib-js
             nrfDeviceLib.stopHotplugEvents(hotplugTaskId);
             hotplugTaskId = null;
         } catch (error) {

package/src/Device/deviceSetup.ts

@@ -5,7 +5,7 @@
  */
 import logger from '../logging';
 import describeError from '../logging/describeError';
-import { AppDispatch, RootState } from '../store';
+import { AppThunk, RootState } from '../store';
 import {
     closeDeviceSetupDialog,
     openDeviceSetupDialog,
@@ -39,24 +39,18 @@ export interface DeviceSetup {
         description?: string;
         programDevice: (
             onProgress: (progress: number, message?: string) => void
-        ) => (
-            dispatch: AppDispatch,
-            getState: () => RootState
-        ) => Promise<Device>;
+        ) => AppThunk<RootState, Promise<Device>>;
     }[]; // The list of all firmware that can be applied for this device with the program function for that fw item
-    isExpectedFirmware: (device: Device) => (
-        dispatch: AppDispatch,
-        getState: () => RootState
-    ) => Promise<{
-        device: Device;
-        validFirmware: boolean;
-    }>; // returns true if device has one of the expected firmware returned by getFirmwareOptions
+    isExpectedFirmware: (device: Device) => AppThunk<
+        RootState,
+        Promise<{
+            device: Device;
+            validFirmware: boolean;
+        }>
+    >; // returns true if device has one of the expected firmware returned by getFirmwareOptions
     tryToSwitchToApplicationMode: (
         device: Device
-    ) => (
-        dispatch: AppDispatch,
-        getState: () => RootState
-    ) => Promise<Device | null>; // returns the device after switched to app mode. If this is not possible or not relevant return null
+    ) => AppThunk<RootState, Promise<Device | null>>; // returns the device after switched to app mode. If this is not possible or not relevant return null
 }
 
 export interface DeviceSetupConfig {
@@ -74,8 +68,8 @@ export const prepareDevice =
         onFail: (reason?: unknown) => void,
         checkCurrentFirmwareVersion = true,
         requireUserConfirmation = true
-    ) =>
-    async (dispatch: AppDispatch) => {
+    ): AppThunk<RootState, Promise<void>> =>
+    async dispatch => {
         const onSuccessWrapper = (d: Device) => {
             onSuccess(d);
             dispatch(closeDeviceSetupDialog());
@@ -221,6 +215,7 @@ export const prepareDevice =
                     message:
                         deviceSetupConfig.choiceMessage ??
                         'Which firmware do you want to program?',
+                    choices,
                 })
             );
         }
@@ -232,8 +227,8 @@ export const setupDevice =
         deviceSetupConfig: DeviceSetupConfig,
         onDeviceIsReady: (device: Device) => void,
         doDeselectDevice: () => void
-    ) =>
-    (dispatch: AppDispatch, getState: () => RootState) =>
+    ): AppThunk<RootState> =>
+    (dispatch, getState) =>
         dispatch(
             prepareDevice(
                 device,

package/src/Device/jprogOperations.ts

@@ -14,7 +14,7 @@ import nrfDeviceLib, {
 } from '@nordicsemiconductor/nrf-device-lib-js';
 
 import logger from '../logging';
-import type { AppDispatch, RootState } from '../store';
+import type { AppThunk, RootState } from '../store';
 import { getDeviceLibContext } from './deviceLibWrapper';
 import { DeviceSetup, JprogEntry } from './deviceSetup';
 import { Device, setReadbackProtected } from './deviceSlice';
@@ -100,8 +100,8 @@ const programDeviceWithFw =
         device: Device,
         selectedFw: JprogEntry,
         onProgress: (progress: number, message?: string) => void
-    ) =>
-    async (dispatch: AppDispatch, getState: () => RootState) => {
+    ): AppThunk<RootState, Promise<Device>> =>
+    async (dispatch, getState) => {
         try {
             if (getState().device.readbackProtection === 'protected') {
                 logger.info('Recovering device');
@@ -163,12 +163,12 @@ export const jprogDeviceSetup = (
         firmwareOptions(device, firmware).map(firmwareOption => ({
             key: firmwareOption.key,
             description: firmwareOption.description,
-            programDevice: onProgress => (dispatch: AppDispatch) =>
+            programDevice: onProgress => dispatch =>
                 dispatch(
                     programDeviceWithFw(device, firmwareOption, onProgress)
                 ),
         })),
-    isExpectedFirmware: (device: Device) => (dispatch: AppDispatch) => {
+    isExpectedFirmware: (device: Device) => dispatch => {
         const fwVersions = firmwareOptions(device, firmware);
         if (fwVersions.length === 0) {
             return Promise.resolve({

package/src/Device/sdfuOperations.ts

@@ -11,7 +11,7 @@ import fs from 'fs';
 import MemoryMap from 'nrf-intel-hex';
 
 import logger from '../logging';
-import { AppDispatch } from '../store';
+import { AppThunk, RootState } from '../store';
 import { getAppFile } from '../utils/appDirs';
 import { setWaitForDevice } from './deviceAutoSelectSlice';
 import { getDeviceLibContext } from './deviceLibWrapper';
@@ -87,8 +87,8 @@ const updateBootloader =
         onSuccess: (device: Device) => void,
         onFail: (reason?: unknown) => void,
         onProgress: (progress: number, message?: string) => void
-    ) =>
-    async (dispatch: AppDispatch) => {
+    ): AppThunk =>
+    async dispatch => {
         logger.info(`Update Bootloader ${device}`);
         const zip = new AdmZip(getAppFile(LATEST_BOOTLOADER));
         const zipBuffer = zip.toBuffer();
@@ -153,8 +153,8 @@ const switchToDeviceMode =
         mcuState: nrfDeviceLib.MCUState,
         onSuccess: (device: Device) => void,
         onFail: (reason?: unknown) => void
-    ) =>
-    (dispatch: AppDispatch) => {
+    ): AppThunk =>
+    dispatch => {
         nrfDeviceLib
             .deviceControlSetMcuState(
                 getDeviceLibContext(),
@@ -183,8 +183,8 @@ export const switchToBootloaderMode =
         device: Device,
         onSuccess: (device: Device) => void,
         onFail: (reason?: unknown) => void
-    ) =>
-    (dispatch: AppDispatch) => {
+    ): AppThunk =>
+    dispatch => {
         if (!isDeviceInDFUBootloader(device)) {
             dispatch(
                 switchToDeviceMode(
@@ -210,22 +210,28 @@ export const switchToApplicationMode =
         device: Device,
         onSuccess: (device: Device) => void,
         onFail: (reason?: unknown) => void
-    ) =>
-    (dispatch: AppDispatch) => {
-        dispatch(
-            switchToDeviceMode(
-                device,
-                'NRFDL_MCU_STATE_APPLICATION',
-                d => {
-                    if (isDeviceInDFUBootloader(d))
-                        onFail(
-                            new Error('Failed to switch to Application Mode')
-                        );
-                    else onSuccess(d);
-                },
-                onFail
-            )
-        );
+    ): AppThunk =>
+    dispatch => {
+        if (isDeviceInDFUBootloader(device)) {
+            dispatch(
+                switchToDeviceMode(
+                    device,
+                    'NRFDL_MCU_STATE_APPLICATION',
+                    d => {
+                        if (isDeviceInDFUBootloader(d))
+                            onFail(
+                                new Error(
+                                    'Failed to switch to Application Mode'
+                                )
+                            );
+                        else onSuccess(d);
+                    },
+                    onFail
+                )
+            );
+        } else {
+            onSuccess(device);
+        }
     };
 
 const isLatestBootloader = async (device: Device) => {
@@ -253,8 +259,8 @@ const askAndUpdateBootloader =
         onSuccess: (device: Device) => void,
         onFail: (reason?: unknown) => void,
         onProgress: (progress: number, message?: string) => void
-    ) =>
-    (dispatch: AppDispatch) => {
+    ): AppThunk =>
+    dispatch => {
         dispatch(
             switchToBootloaderMode(
                 device,
@@ -413,8 +419,8 @@ const programInDFUBootloader =
         onProgress: (progress: number, message?: string) => void,
         onSuccess: (device: Device) => void,
         onFail: (reason?: unknown) => void
-    ) =>
-    async (dispatch: AppDispatch) => {
+    ): AppThunk<RootState, Promise<void>> =>
+    async dispatch => {
         logger.debug(
             `${device.serialNumber} on ${device.serialport?.comName} is now in DFU-Bootloader...`
         );
@@ -526,8 +532,8 @@ const programDeviceWithFw =
         device: Device,
         selectedFw: DfuEntry,
         onProgress: (progress: number, message?: string) => void
-    ) =>
-    (dispatch: AppDispatch) =>
+    ): AppThunk<RootState, Promise<Device>> =>
+    dispatch =>
         new Promise<Device>((resolve, reject) => {
             const action = (d: Device) => {
                 dispatch(
@@ -560,7 +566,7 @@ export const sdfuDeviceSetup = (
         dfuFirmware.map(firmwareOption => ({
             key: firmwareOption.key,
             description: firmwareOption.description,
-            programDevice: onProgress => (dispatch: AppDispatch) =>
+            programDevice: onProgress => dispatch =>
                 dispatch(
                     programDeviceWithFw(device, firmwareOption, onProgress)
                 ),
@@ -577,12 +583,12 @@ export const sdfuDeviceSetup = (
 
                 const { semVer } = device.dfuTriggerVersion;
 
-                if (dfuFirmware.filter(fw => fw.semver === semVer).length > 0) {
-                    resolve({
-                        device,
-                        validFirmware: true,
-                    });
-                }
+                resolve({
+                    device,
+                    validFirmware:
+                        dfuFirmware.filter(fw => fw.semver === semVer).length >
+                        0,
+                });
             } else {
                 resolve({
                     device,
@@ -590,7 +596,7 @@ export const sdfuDeviceSetup = (
                 });
             }
         }),
-    tryToSwitchToApplicationMode: device => (dispatch: AppDispatch) =>
+    tryToSwitchToApplicationMode: device => dispatch =>
         new Promise<Device>((resolve, reject) => {
             dispatch(switchToApplicationMode(device, resolve, reject));
         }),

package/src/Dialog/dialog.scss

@@ -52,9 +52,5 @@
         flex-direction: row-reverse;
         justify-content: end;
         display: flex;
-
-        button {
-            padding: 0 16px;
-        }
     }
 }

package/src/Dropdown/Dropdown.module.scss

@@ -1,83 +1,15 @@
 /*
- * Copyright (c) 2015 Nordic Semiconductor ASA
+ * Copyright (c) 2023 Nordic Semiconductor ASA
  *
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
 @import '../../styles';
 
-$dropdown-item-height: 24px; //px unit dependency in dropdown.tsx
-
-:export {
-    dropdownItemHeight: $dropdown-item-height;
-}
-
-.container {
-    position: relative;
-    width: 100%;
-}
-
-.label {
-    font-size: 12px;
-    margin-bottom: 4px !important;
-}
-
-.btn {
-    width: 100%;
-    height: 32px;
-    padding: 0 8px;
-    background: $gray-700;
-    color: $white;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: none;
-}
-
-.mdi {
-    font-size: 18px;
-}
-
-.btnActive .mdi {
-    transform: rotate(180deg);
-}
-
 .content {
-    background: $gray-700;
-    color: $white;
-    position: absolute;
-    width: 100%;
-    right: 0;
-    padding: 0;
-    border-top: solid 2px $gray-600;
-    z-index: 2;
-
     &[data-height='true'] {
-        overflow-y: scroll; // Make Scroll Fixed Height Scrolable
+        overflow-y: scroll; // Make Scroll Fixed Height Scrollable
 
         @include scrollbars($gray-700);
     }
 }
-
-.itemsInactive {
-    display: none;
-}
-
-.item {
-    color: $white;
-    padding: 4px 8px;
-    height: $dropdown-item-height;
-    background-color: transparent;
-    border: 0;
-    width: 100%;
-    text-align: inherit;
-    display: block;
-    clear: both;
-    font-weight: 400;
-    white-space: nowrap;
-}
-
-.item:hover,
-.item:focus {
-    background: $gray-600;
-}

package/src/Dropdown/Dropdown.tsx

@@ -7,6 +7,8 @@
 import React, { useState } from 'react';
 import FormLabel from 'react-bootstrap/FormLabel';
 
+import classNames from '../utils/classNames';
+
 import styles from './Dropdown.module.scss';
 
 export interface DropdownItem {
@@ -22,6 +24,7 @@ export interface DropdownProps {
     disabled?: boolean;
     selectedItem: DropdownItem;
     numItemsBeforeScroll?: number;
+    className?: string;
 }
 
 export default ({
@@ -32,6 +35,7 @@ export default ({
     disabled = false,
     selectedItem,
     numItemsBeforeScroll = 0,
+    className = '',
 }: DropdownProps) => {
     const [isActive, setIsActive] = useState(false);
 
@@ -42,20 +46,20 @@ export default ({
 
     return (
         <div
-            className={styles.container}
+            className={`tw-preflight tw-relative tw-w-full ${className}`}
             onBlur={event => {
                 if (!event.currentTarget.contains(event.relatedTarget)) {
                     setIsActive(false);
                 }
             }}
         >
-            {label && <FormLabel className={styles.label}>{label}</FormLabel>}
+            {label && (
+                <FormLabel className="tw-mb-1 tw-text-xs">{label}</FormLabel>
+            )}
             <button
                 id={id}
                 type="button"
-                className={`${styles.btn} ${
-                    isActive ? styles.btnActive : styles.btnInactive
-                }`}
+                className="tw-flex tw-h-8 tw-w-full tw-items-center tw-justify-between tw-border-0 tw-bg-gray-700 tw-px-2 tw-text-white"
                 onClick={() => setIsActive(!isActive)}
                 disabled={disabled}
             >
@@ -64,7 +68,11 @@ export default ({
                         ? ''
                         : selectedItem.label}
                 </span>
-                <span className={`mdi mdi-chevron-down ${styles.mdi}`} />
+                <span
+                    className={`mdi mdi-chevron-down tw-text-lg ${classNames(
+                        isActive && 'tw-rotate-180'
+                    )}`}
+                />
             </button>
             {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- We need an interactive handler as described below */}
             <div
@@ -75,10 +83,7 @@ export default ({
                 style={
                     numItemsBeforeScroll > 0
                         ? {
-                              maxHeight: `${
-                                  numItemsBeforeScroll *
-                                  Number.parseInt(styles.dropdownItemHeight, 10)
-                              }px`,
+                              maxHeight: `${numItemsBeforeScroll * 24}px`,
                           }
                         : {}
                 }
@@ -86,14 +91,15 @@ export default ({
                     numItemsBeforeScroll > 0 &&
                     items.length > numItemsBeforeScroll
                 }
-                className={`${styles.content} ${
-                    isActive ? styles.itemsActive : styles.itemsInactive
-                }`}
+                className={`tw-text-while tw-absolute tw-right-0 tw-z-10 tw-w-full tw-border-t-2 tw-border-solid tw-border-gray-600 tw-bg-gray-700 tw-p-0 ${classNames(
+                    styles.content,
+                    !isActive && 'tw-hidden'
+                )}`}
             >
                 {items.map(item => (
                     <button
                         type="button"
-                        className={styles.item}
+                        className="tw-bg-transparent tw-clear-both tw-block tw-h-6 tw-w-full tw-whitespace-nowrap tw-border-0 tw-px-2 tw-py-1 tw-text-left tw-font-normal tw-text-white hover:tw-bg-gray-600 focus:tw-bg-gray-600"
                         key={item.value}
                         onClick={() => onClickItem(item)}
                     >

package/src/ErrorBoundary/ErrorBoundary.test.tsx

@@ -5,23 +5,16 @@
  */
 
 import React from 'react';
-import reactGA from 'react-ga';
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 
 import render from '../../test/testrenderer';
 import { getAppSpecificStore as store } from '../utils/persistentStore';
 import { generateSystemReport } from '../utils/systemReport';
 import ErrorBoundary from './ErrorBoundary';
 
-const mockReactGA = reactGA;
-
 jest.mock('../utils/systemReport');
-jest.mock('react-ga');
 jest.mock('../utils/usageData', () => ({
     ...jest.requireActual('../utils/usageData'),
-    init: jest.fn(() => {
-        mockReactGA.initialize('');
-    }),
     sendErrorReport: jest.fn(),
     isEnabled: () => true,
 }));
@@ -50,16 +43,6 @@ describe('ErrorBoundary', () => {
         jest.clearAllMocks();
     });
 
-    it('should send GA event', async () => {
-        render(
-            <ErrorBoundary>
-                <Child />
-            </ErrorBoundary>
-        );
-
-        await waitFor(() => expect(reactGA.initialize).toHaveBeenCalled());
-    });
-
     it('can take custom reporting functions', () => {
         const sendUsageData = jest.fn();