@nordicsemiconductor/pc-nrfconnect-shared 157.0.0 → 159.0.0

package/Changelog.md

@@ -7,6 +7,55 @@ This project does _not_ adhere to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html) but contrary to it
 every new version is a new major version.
 
+## 159.0.0 - 2024-02-23
+
+### Added
+
+-   `minWidth` parameter to `Dropdown` component.
+-   `transparentButtonBg` parameter to `Dropdown` component.
+-   `NumberInput` component (provides text, input, optional unit, and slider).
+-   Common way to queue ongoing pending tasks. If an app is closed, a dialog is
+    prompted to alert users before clo sing app. Redux states for this are:
+    -   `addConfirmBeforeClose`
+    -   `clearConfirmBeforeClose`
+    -   `preventAppCloseUntilComplete` can be used to wrap some promise and
+        secure app from closing until promise is resolved
+
+### Removed
+
+-   `NumberInputWithSlider` component.
+
+### Changed
+
+-   `StateSelector` no longer has 16px margin on the bottom. Apps are now
+    responsible to add the appropriate gap per container
+
+### Steps to upgrade
+
+-   Change all occurrences of `NumberInputWithSlider` to `NumberInput`.
+-   Check all use cases of `StateSelector` and that the gap between components
+    is correct if not adjust spacing from the app side
+
+## 158.0.0 - 2024-02-22
+
+### Added
+
+-   `NrfutilDeviceLib.deviceInfo` now has `protectionStatus` property.
+
+### Removed
+
+-   `DeviceSlice` no longer has readbackProtection state
+-   `DeviceSlice` no longer has setReadbackProtection has be removed
+
+### Changed
+
+-   `getReadbackProtection` now returns protection type `ProtectionStatus` from
+    nrfutil device common.ts
+
+### Steps to upgrade when using this package
+
+-   Minimum support version of nrfutil device is now 2.1.1
+
 ## 157.0.0 - 2024-02-06
 
 ### Removed

package/nrfutil/device/deviceInfo.ts

@@ -9,6 +9,7 @@ import {
     DeviceCore,
     deviceSingleTaskEndOperation,
     NrfutilDevice,
+    ProtectionStatus,
 } from './common';
 
 export interface HwInfo {
@@ -25,6 +26,7 @@ export interface JLinkDeviceInfo {
     jlinkObFirmwareVersion: string;
     deviceFamily: string | null;
     deviceVersion?: string | null;
+    protectionStatus: ProtectionStatus;
 }
 
 export interface DfuTriggerInfo {

package/nrfutil/device/getProtectionStatus.ts

@@ -9,6 +9,7 @@ import {
     DeviceCore,
     deviceSingleTaskEndOperation,
     NrfutilDevice,
+    ProtectionStatus,
 } from './common';
 
 type DeviceFamily =
@@ -17,13 +18,6 @@ type DeviceFamily =
     | 'NRF53_FAMILY'
     | 'NRF91_FAMILY';
 
-type ProtectionStatus =
-    | 'NRFDL_PROTECTION_STATUS_NONE'
-    | 'NRFDL_PROTECTION_STATUS_REGION0'
-    | 'NRFDL_PROTECTION_STATUS_REGION0_REGION1'
-    | 'NRFDL_PROTECTION_STATUS_SECURE_REGIONS'
-    | 'NRFDL_PROTECTION_STATUS_ALL';
-
 export interface GetProtectionStatusResult {
     core: DeviceCore;
     deviceFamily?: DeviceFamily;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nordicsemiconductor/pc-nrfconnect-shared",
-    "version": "157.0.0",
+    "version": "159.0.0",
     "description": "Shared commodities for developing pc-nrfconnect-* packages",
     "repository": {
         "type": "git",

package/src/App/App.tsx

@@ -15,6 +15,7 @@ import { Reducer } from 'redux';
 import { inMain as openWindow } from '../../ipc/openWindow';
 import { setNrfutilLogger } from '../../nrfutil/nrfutilLogger';
 import About from '../About/About';
+import ConfirmCloseDialog from '../ConfirmBeforeClose/ConfirmCloseDialog';
 import BrokenDeviceDialog from '../Device/BrokenDeviceDialog/BrokenDeviceDialog';
 import { setAutoReselect } from '../Device/deviceAutoSelectSlice';
 import {
@@ -181,6 +182,7 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
 
             <ErrorDialog />
             <BrokenDeviceDialog />
+            <ConfirmCloseDialog />
             {children}
         </div>
     );

package/src/ConfirmBeforeClose/ConfirmCloseDialog.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getCurrentWindow } from '@electron/remote';
+
+import { ConfirmationDialog } from '../Dialog/Dialog';
+import { AppThunk } from '../store';
+import {
+    addConfirmBeforeClose,
+    clearConfirmBeforeClose,
+    ConfirmBeforeCloseApp,
+    getNextConfirmDialog,
+    getShowConfirmCloseDialog,
+    setShowCloseDialog,
+} from './confirmBeforeCloseSlice';
+
+export default () => {
+    const dispatch = useDispatch();
+    const [confirmedDialogs, setConfirmedDialogs] = useState<
+        ConfirmBeforeCloseApp[]
+    >([]);
+
+    const showCloseDialog = useSelector(getShowConfirmCloseDialog);
+    const nextConfirmDialog = useSelector(getNextConfirmDialog);
+
+    useEffect(() => {
+        if (!nextConfirmDialog && showCloseDialog) {
+            confirmedDialogs.forEach(confirmedDialog => {
+                if (confirmedDialog.onClose) confirmedDialog.onClose();
+            });
+            setConfirmedDialogs([]);
+            getCurrentWindow().close();
+        }
+    }, [nextConfirmDialog, dispatch, showCloseDialog, confirmedDialogs]);
+
+    useEffect(() => {
+        const action = (ev: BeforeUnloadEvent) =>
+            dispatch<AppThunk>((_, getState) => {
+                const hasToGetExplicitConform =
+                    getState().confirmBeforeCloseDialog.confirmCloseApp.length >
+                    0;
+                if (hasToGetExplicitConform) {
+                    dispatch(setShowCloseDialog(true));
+                    ev.returnValue = true;
+                }
+            });
+
+        window.addEventListener('beforeunload', action, true);
+
+        return () => {
+            window.removeEventListener('beforeunload', action);
+        };
+    }, [dispatch]);
+
+    return (
+        <ConfirmationDialog
+            headerIcon="alert-outline"
+            title="Closing nPM PowerUP"
+            isVisible={showCloseDialog && !!nextConfirmDialog}
+            onConfirm={() => {
+                if (nextConfirmDialog) {
+                    setConfirmedDialogs([
+                        ...confirmedDialogs,
+                        nextConfirmDialog,
+                    ]);
+                    dispatch(clearConfirmBeforeClose(nextConfirmDialog.id));
+                }
+            }}
+            onCancel={() => {
+                dispatch(setShowCloseDialog(false));
+                confirmedDialogs.forEach(confirmedDialog =>
+                    dispatch(addConfirmBeforeClose(confirmedDialog))
+                );
+                setConfirmedDialogs([]);
+            }}
+        >
+            {nextConfirmDialog?.message}
+        </ConfirmationDialog>
+    );
+};

package/src/ConfirmBeforeClose/confirmBeforeCloseSlice.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2024 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { v4 as uuid } from 'uuid';
+
+import type { AppThunk, RootState } from '../store';
+
+export interface ConfirmBeforeCloseApp {
+    id: string;
+    message: React.ReactNode;
+    onClose?: () => void;
+}
+
+export interface ConfirmBeforeCloseState {
+    confirmCloseApp: ConfirmBeforeCloseApp[];
+    showCloseDialog: boolean;
+}
+
+const initialState: ConfirmBeforeCloseState = {
+    confirmCloseApp: [],
+    showCloseDialog: false,
+};
+
+const slice = createSlice({
+    name: 'confirmBeforeCloseDialog',
+    initialState,
+    reducers: {
+        addConfirmBeforeClose(
+            state,
+            action: PayloadAction<ConfirmBeforeCloseApp>
+        ) {
+            const index = state.confirmCloseApp.findIndex(
+                confirmCloseApp => confirmCloseApp.id === action.payload.id
+            );
+
+            if (index !== -1) {
+                state.confirmCloseApp[index] = action.payload;
+            } else {
+                state.confirmCloseApp = [
+                    action.payload,
+                    ...state.confirmCloseApp,
+                ];
+            }
+        },
+        clearConfirmBeforeClose(state, action: PayloadAction<string>) {
+            state.confirmCloseApp = state.confirmCloseApp.filter(
+                confirmCloseApp => confirmCloseApp.id !== action.payload
+            );
+        },
+        setShowCloseDialog(state, action: PayloadAction<boolean>) {
+            state.showCloseDialog = action.payload;
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: {
+        addConfirmBeforeClose,
+        setShowCloseDialog,
+        clearConfirmBeforeClose,
+    },
+} = slice;
+
+export const getNextConfirmDialog = (state: RootState) =>
+    state.confirmBeforeCloseDialog.confirmCloseApp.length > 0
+        ? state.confirmBeforeCloseDialog.confirmCloseApp[0]
+        : undefined;
+
+export const getShowConfirmCloseDialog = (state: RootState) =>
+    state.confirmBeforeCloseDialog.showCloseDialog;
+
+export const preventAppCloseUntilComplete =
+    (
+        dialogInfo: Omit<ConfirmBeforeCloseApp, 'id'>,
+        promise: Promise<unknown>,
+        abortController?: AbortController
+    ): AppThunk =>
+    dispatch => {
+        const id = uuid();
+        dispatch(
+            addConfirmBeforeClose({
+                ...dialogInfo,
+                id,
+                onClose: () => {
+                    dialogInfo.onClose?.();
+                    abortController?.abort();
+                },
+            })
+        );
+        promise.finally(() => dispatch(clearConfirmBeforeClose(id)));
+    };

package/src/Device/deviceSetup.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 import { DeviceInfo } from '../../nrfutil/device/deviceInfo';
+import { preventAppCloseUntilComplete } from '../ConfirmBeforeClose/confirmBeforeCloseSlice';
 import logger from '../logging';
 import describeError from '../logging/describeError';
 import { AppThunk, RootState } from '../store';
@@ -151,7 +152,7 @@ export const prepareDevice =
             if (!selectedDeviceSetup) {
                 onFail('No firmware was selected'); // Should never happen
             } else {
-                dispatch(
+                const task = dispatch(
                     selectedDeviceSetup.programDevice(
                         (progress: number, message?: string) => {
                             dispatch(setDeviceSetupProgress(progress));
@@ -164,6 +165,17 @@ export const prepareDevice =
                 )
                     .then(onSuccessWrapper)
                     .catch(onFail);
+
+                dispatch(
+                    preventAppCloseUntilComplete(
+                        {
+                            message: `The device is being programmed. 
+                            Closing application right now might result in some unknown behavior and might also brick the device. 
+                            Are you sure you want to continue?`,
+                        },
+                        task
+                    )
+                );
             }
         };
 

package/src/Device/deviceSlice.ts

@@ -61,14 +61,12 @@ const updateDevice = (
 
 export interface DeviceState {
     devices: Device[];
-    readbackProtection: 'unknown' | 'protected' | 'unprotected';
     selectedDevice?: Device;
     selectedDeviceInfo?: DeviceInfo;
 }
 
 const initialState: DeviceState = {
     devices: [],
-    readbackProtection: 'unknown',
 };
 
 const setPersistedData = (device: Device) => {
@@ -124,7 +122,6 @@ const slice = createSlice({
         deselectDevice: state => {
             state.selectedDevice = undefined;
             state.selectedDeviceInfo = undefined;
-            state.readbackProtection = 'unknown';
         },
 
         addDevice: (state, action: PayloadAction<Device>) => {
@@ -261,13 +258,6 @@ const slice = createSlice({
                 action.payload.serialNumber
             );
         },
-
-        setReadbackProtected: (
-            state,
-            action: PayloadAction<DeviceState['readbackProtection']>
-        ) => {
-            state.readbackProtection = action.payload;
-        },
     },
 });
 
@@ -282,7 +272,6 @@ export const {
         removeDevice,
         setDeviceNickname,
         toggleDeviceFavorited,
-        setReadbackProtected,
         persistSerialPortOptions,
     },
 } = slice;
@@ -304,4 +293,4 @@ export const selectedSerialNumber = (state: RootState) =>
     state.device.selectedDevice?.serialNumber;
 
 export const getReadbackProtection = (state: RootState) =>
-    state.device.readbackProtection;
+    state.device.selectedDeviceInfo?.jlink?.protectionStatus;

package/src/Device/jprogOperations.ts

@@ -6,42 +6,14 @@
 
 import NrfutilDeviceLib from '../../nrfutil/device/device';
 import { DeviceInfo } from '../../nrfutil/device/deviceInfo';
-import { FWInfo } from '../../nrfutil/device/getFwInfo';
 import logger from '../logging';
 import type { AppThunk, RootState } from '../store';
 import { DeviceSetup, JprogEntry } from './deviceSetup';
-import { Device, setReadbackProtected } from './deviceSlice';
-
-const getDeviceReadProtection = async (
-    device: Device
-): Promise<{
-    fwInfo: FWInfo | null;
-    readbackProtection: 'unknown' | 'protected' | 'unprotected';
-}> => {
-    try {
-        logger.info('Checking readback protection on device');
-        const info = await NrfutilDeviceLib.getFwInfo(device);
-        return {
-            fwInfo: info,
-            readbackProtection: 'unprotected',
-        };
-    } catch (e) {
-        const error = e as Error;
-        if (error.message.includes('NotAvailableBecauseProtection')) {
-            logger.warn(
-                'Readback protection on device enabled. Unable to verify that the firmware version is correct.'
-            );
-            return {
-                fwInfo: null,
-                readbackProtection: 'protected',
-            };
-        }
-        return {
-            fwInfo: null,
-            readbackProtection: 'unknown',
-        };
-    }
-};
+import {
+    Device,
+    getReadbackProtection,
+    setSelectedDeviceInfo,
+} from './deviceSlice';
 
 const programDeviceWithFw =
     (
@@ -52,7 +24,10 @@ const programDeviceWithFw =
     async (dispatch, getState) => {
         try {
             const batch = NrfutilDeviceLib.batch();
-            if (getState().device.readbackProtection !== 'unprotected') {
+            if (
+                getReadbackProtection(getState()) !==
+                'NRFDL_PROTECTION_STATUS_NONE'
+            ) {
                 batch.recover('Application', {
                     onTaskBegin: () =>
                         logger.info(`Device protected, recovering device`),
@@ -94,11 +69,10 @@ const programDeviceWithFw =
 
             await batch.run(device);
             await NrfutilDeviceLib.reset(device);
+
             onProgress(0, 'Updating readback protection');
-            const { readbackProtection } = await getDeviceReadProtection(
-                device
-            );
-            dispatch(setReadbackProtected(readbackProtection));
+            const deviceInfo = await NrfutilDeviceLib.deviceInfo(device);
+            dispatch(setSelectedDeviceInfo(deviceInfo));
             onProgress(0, 'Connecting to device');
         } catch (programError) {
             if (programError instanceof Error) {
@@ -150,7 +124,7 @@ export const jprogDeviceSetup = (
                     programDeviceWithFw(device, firmwareOption, onProgress)
                 ),
         })),
-    isExpectedFirmware: (device, deviceInfo) => dispatch => {
+    isExpectedFirmware: (device, deviceInfo) => (dispatch, getState) => {
         const fwVersions = firmwareOptions(device, firmware, deviceInfo);
         if (fwVersions.length === 0) {
             return Promise.resolve({
@@ -159,40 +133,40 @@ export const jprogDeviceSetup = (
             });
         }
 
-        return getDeviceReadProtection(device).then(
-            ({ fwInfo: info, readbackProtection }) => {
-                dispatch(setReadbackProtected(readbackProtection));
-                if (info && info.imageInfoList.length > 0) {
-                    const fw = fwVersions.find(version =>
-                        info.imageInfoList.find(
-                            imageInfo =>
-                                typeof imageInfo.version === 'string' &&
-                                imageInfo.version.includes(version.fwVersion)
-                        )
-                    );
+        if (
+            getReadbackProtection(getState()) !== 'NRFDL_PROTECTION_STATUS_NONE'
+        ) {
+            logger.warn(
+                'Readback protection on device enabled. Unable to verify that the firmware version is correct.'
+            );
 
-                    return Promise.resolve({
-                        device,
-                        validFirmware: fw !== undefined,
-                    });
-                }
+            return Promise.resolve({
+                device,
+                validFirmware: hideDeviceSetupWhenProtected,
+            });
+        }
 
-                if (
-                    hideDeviceSetupWhenProtected &&
-                    readbackProtection === 'protected'
-                ) {
-                    return Promise.resolve({
-                        device,
-                        validFirmware: true,
-                    });
-                }
+        return NrfutilDeviceLib.getFwInfo(device).then(info => {
+            if (info.imageInfoList.length > 0) {
+                const fw = fwVersions.find(version =>
+                    info.imageInfoList.find(
+                        imageInfo =>
+                            typeof imageInfo.version === 'string' &&
+                            imageInfo.version.includes(version.fwVersion)
+                    )
+                );
 
                 return Promise.resolve({
                     device,
-                    validFirmware: false,
+                    validFirmware: fw !== undefined,
                 });
             }
-        );
+
+            return Promise.resolve({
+                device,
+                validFirmware: false,
+            });
+        });
     },
     tryToSwitchToApplicationMode: () => () => Promise.resolve(null),
 });

package/src/Dropdown/Dropdown.tsx

@@ -22,6 +22,8 @@ export type DropdownProps<T> = {
     defaultButtonLabel?: string;
     items: DropdownItem<T>[];
     onSelect: (item: DropdownItem<T>) => void;
+    transparentButtonBg?: boolean;
+    minWidth?: boolean;
     disabled?: boolean;
     selectedItem: DropdownItem<T>;
     numItemsBeforeScroll?: number;
@@ -34,6 +36,8 @@ export default <T,>({
     defaultButtonLabel = '',
     items,
     onSelect,
+    transparentButtonBg = false,
+    minWidth = false,
     disabled = false,
     selectedItem,
     numItemsBeforeScroll = 0,
@@ -48,7 +52,11 @@ export default <T,>({
 
     return (
         <div
-            className={`tw-preflight tw-relative tw-w-full ${className}`}
+            className={classNames(
+                'tw-preflight tw-relative',
+                minWidth ? '' : 'tw-w-full',
+                className
+            )}
             onBlur={event => {
                 if (!event.currentTarget.contains(event.relatedTarget)) {
                     setIsActive(false);
@@ -61,7 +69,13 @@ export default <T,>({
             <button
                 id={id}
                 type="button"
-                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"
+                className={classNames(
+                    'tw-flex tw-items-center tw-justify-between tw-border-0',
+                    minWidth ? '' : 'tw-w-full',
+                    transparentButtonBg
+                        ? 'tw-bg-transparent'
+                        : 'tw-h-8 tw-bg-gray-700 tw-px-2 tw-text-white'
+                )}
                 onClick={() => setIsActive(!isActive)}
                 disabled={disabled}
             >
@@ -71,7 +85,7 @@ export default <T,>({
                         : selectedItem.label}
                 </span>
                 <span
-                    className={`mdi mdi-chevron-down tw-text-lg ${classNames(
+                    className={`mdi mdi-chevron-down tw-text-lg/none ${classNames(
                         isActive && 'tw-rotate-180'
                     )}`}
                 />
@@ -93,8 +107,9 @@ export default <T,>({
                     numItemsBeforeScroll > 0 &&
                     items.length > numItemsBeforeScroll
                 }
-                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(
+                className={`tw-text-while tw-absolute tw-z-10 tw-border-t-2 tw-border-solid tw-border-gray-600 tw-bg-gray-700 tw-p-0 ${classNames(
                     styles.content,
+                    minWidth ? '' : 'tw-right-0 tw-w-full',
                     !isActive && 'tw-hidden'
                 )}`}
             >

package/src/InlineInput/InlineInput.tsx

@@ -57,6 +57,7 @@ interface Props {
     onKeyboardIncrementAction?: () => string;
     onKeyboardDecrementAction?: () => string;
     className?: string;
+    title?: string;
     textAlignLeft?: boolean;
     onValidityChanged?: (validity: boolean) => void;
     preventDefaultInvalidStyle?: boolean;
@@ -73,6 +74,7 @@ const InlineInput = React.forwardRef<HTMLInputElement, Props>(
             onKeyboardIncrementAction = () => externalValue,
             onKeyboardDecrementAction = () => externalValue,
             className = '',
+            title,
             textAlignLeft = false,
             onValidityChanged,
             preventDefaultInvalidStyle,
@@ -161,6 +163,7 @@ const InlineInput = React.forwardRef<HTMLInputElement, Props>(
             <input
                 ref={ref}
                 type="text"
+                title={title}
                 className={classNames(
                     'inline-input',
                     preventDefaultInvalidStyle