@nordicsemiconductor/pc-nrfconnect-shared 120.0.0 → 122.0.0

package/src/Device/DeviceSelector/BasicDeviceInfo.tsx

@@ -28,13 +28,15 @@ interface Props {
 const DeviceName = ({ device, inputRef, messageType }: Props) => {
     const dispatch = useDispatch();
     const setOrResetNickname = (name: string) => {
+        if (!device.serialNumber) return;
+
         const newNameIsEqualToDefaultName =
             name === displayedDeviceName(device, { respectNickname: false });
 
         if (newNameIsEqualToDefaultName) {
-            dispatch(resetDeviceNickname(device.serialNumber));
+            dispatch(resetDeviceNickname(device));
         } else {
-            dispatch(setDeviceNickname(device.serialNumber, name));
+            dispatch(setDeviceNickname(device, name));
         }
     };
 
@@ -79,7 +81,9 @@ export default ({
     const autoReselectDevice = useSelector(getAutoReselectDevice);
     const waitingToAutoReselect = useSelector(getWaitingToAutoReselect);
     const waitingForDevice = useSelector(getWaitingForDeviceTimeout);
-    const thisDevice = device.serialNumber === autoReselectDevice?.serialNumber;
+    const thisDevice =
+        device.serialNumber &&
+        device.serialNumber === autoReselectDevice?.serialNumber;
 
     useEffect(() => {
         if (!showWaitingStatus) {
@@ -99,9 +103,9 @@ export default ({
     ]);
 
     return (
-        <div className="basic-device-info">
+        <div className="basic-device-info tw-h-[42px]">
             <DeviceIcon device={device} />
-            <div className="details">
+            <div className="details tw-flex tw-flex-col">
                 <DeviceName
                     device={device}
                     inputRef={deviceNameInputRef}
@@ -109,7 +113,9 @@ export default ({
                 />
                 <DeviceSerialNumber device={device} />
             </div>
-            <div className="toggles">{toggles}</div>
+            <div className="tw-mr-2.5 tw-flex tw-h-full tw-w-11 tw-flex-col tw-items-center tw-justify-center">
+                {toggles}
+            </div>
         </div>
     );
 };

package/src/Device/DeviceSelector/DeviceList/AnimatedList.tsx

@@ -57,6 +57,6 @@ export const AnimatedItem: FC<{
     children: ReactNode;
 }> = ({ children, itemKey }) => (
     <Flipped flipId={itemKey} onAppear={fadeIn} onExit={fadeOut}>
-        <li>{children}</li>
+        <li className="tw-group">{children}</li>
     </Flipped>
 );

package/src/Device/DeviceSelector/DeviceList/Device.tsx

@@ -14,8 +14,6 @@ import { FavoriteIndicator } from '../Favorite';
 import EditDeviceButtons from './EditDeviceButtons';
 import MoreDeviceInfo from './MoreDeviceInfo';
 
-import './device.scss';
-
 const ShowMoreInfo = ({
     isVisible,
     toggleVisible,
@@ -24,7 +22,10 @@ const ShowMoreInfo = ({
     toggleVisible: () => void;
 }) => (
     <PseudoButton
-        className={`show-more mdi mdi-chevron-${isVisible ? 'up' : 'down'}`}
+        className={classNames(
+            isVisible ? 'tw-visible' : 'tw-invisible  group-hover:tw-visible',
+            `mdi mdi-chevron-${isVisible ? 'up' : 'down'}`
+        )}
         testId="show-more-device-info"
         onClick={toggleVisible}
     />
@@ -52,8 +53,9 @@ export default ({ device, doSelectDevice, allowMoreInfoVisible }: Props) => {
     return (
         <PseudoButton
             className={classNames(
-                'device',
-                moreVisible && 'more-infos-visible'
+                'tw-flex tw-flex-col tw-gap-2 tw-py-3 tw-font-light group-hover:tw-bg-white',
+                moreVisible && 'tw-bg-white',
+                moreVisible && device.serialNumber && 'tw-pb-0'
             )}
             onClick={() => doSelectDevice(device, false)}
         >

package/src/Device/DeviceSelector/DeviceList/DeviceList.tsx

@@ -11,7 +11,11 @@ import { Toggle } from '../../../Toggle/Toggle';
 import classNames from '../../../utils/classNames';
 import { getAutoReselect, setAutoReselect } from '../../deviceAutoSelectSlice';
 import { displayedDeviceName } from '../../deviceInfo/deviceInfo';
-import { Device as DeviceProps, getDevices } from '../../deviceSlice';
+import {
+    Device as DeviceProps,
+    getDevices,
+    selectedDevice,
+} from '../../deviceSlice';
 import { AnimatedItem, AnimatedList } from './AnimatedList';
 import BrokenDevice from './BrokenDevice';
 import Device from './Device';
@@ -40,7 +44,7 @@ const showAllDevices = () => true;
 
 const sorted = (devices: DeviceProps[]) =>
     [...devices].sort((a, b) => {
-        if (a.favorite !== b.favorite) {
+        if (!!a.favorite !== !!b.favorite) {
             return a.favorite ? -1 : 1;
         }
 
@@ -60,6 +64,7 @@ const DeviceList: FC<Props> = ({
     const dispatch = useDispatch();
     const autoReconnect = useSelector(getAutoReselect);
     const devices = useSelector(getDevices);
+    const currentDevice = useSelector(selectedDevice);
 
     const sortedDevices = useMemo(
         () => sorted([...devices.values()]),
@@ -71,13 +76,26 @@ const DeviceList: FC<Props> = ({
         [deviceFilter, sortedDevices]
     );
 
+    const canUseAutoReconnect =
+        (!!currentDevice && !!currentDevice?.serialNumber) || !currentDevice;
+
     return (
         <div className={classNames('device-list', isVisible || 'hidden')}>
             <div className="global-auto-reconnect">
                 <Toggle
                     id="toggle-global-auto-reconnect"
                     label="Auto Reconnect"
-                    isToggled={autoReconnect}
+                    title={
+                        !canUseAutoReconnect
+                            ? 'Cannot auto reconnect to a device with no serial number'
+                            : ''
+                    }
+                    disabled={!canUseAutoReconnect}
+                    isToggled={
+                        autoReconnect &&
+                        ((!!currentDevice && !!currentDevice?.serialNumber) ||
+                            !currentDevice)
+                    }
                     onToggle={value => {
                         dispatch(setAutoReselect(value));
                     }}
@@ -90,8 +108,8 @@ const DeviceList: FC<Props> = ({
                 <AnimatedList devices={sortedDevices}>
                     {filteredDevices.map(device => (
                         <AnimatedItem
-                            key={device.serialNumber}
-                            itemKey={device.serialNumber}
+                            key={device.id.toString()}
+                            itemKey={device.id.toString()}
                         >
                             {device.traits.broken ? (
                                 <BrokenDevice device={device} />

package/src/Device/DeviceSelector/DeviceList/EditDeviceButtons.tsx

@@ -18,11 +18,12 @@ interface Props {
     startEditingDeviceName: () => void;
 }
 
-const EditDeviceButtons: FC<Props> = ({ device, startEditingDeviceName }) => (
-    <ButtonGroup className="edit-device-buttons">
-        <MakeDeviceFavorite device={device} />
-        <RenameDevice startEditingDeviceName={startEditingDeviceName} />
-    </ButtonGroup>
-);
+const EditDeviceButtons: FC<Props> = ({ device, startEditingDeviceName }) =>
+    device.serialNumber ? (
+        <ButtonGroup className="edit-device-buttons">
+            <MakeDeviceFavorite device={device} />
+            <RenameDevice startEditingDeviceName={startEditingDeviceName} />
+        </ButtonGroup>
+    ) : null;
 
 export default EditDeviceButtons;

package/src/Device/DeviceSelector/DeviceList/MoreDeviceInfo.tsx

@@ -10,56 +10,52 @@ import { SerialPort } from '../../../../nrfutil/device/common';
 import { displayedDeviceName } from '../../deviceInfo/deviceInfo';
 import { Device } from '../../deviceSlice';
 
-import './more-device-info.scss';
-
 const Row = ({ children }: { children: ReactNode }) => (
-    <div className="info-row">
-        <div className="flex-space" />
+    <div className=" tw-flex tw-flex-row tw-pr-5">
+        <div className=" tw-w-[68px]" />
         {children}
     </div>
 );
 
 const PcaNumber = ({ device }: { device: Device }) => {
-    if (!device.jlink?.boardVersion) {
+    if (!device.devkit?.boardVersion) {
         return null;
     }
 
-    return <div>{device.jlink.boardVersion}</div>;
+    return (
+        <Row>
+            <div>{device.devkit.boardVersion}</div>
+        </Row>
+    );
 };
 
 const MaybeDeviceName = ({ device }: { device: Device }) => {
-    const hasNickname = device.nickname !== '';
-    if (!hasNickname) {
+    if (!device.nickname) {
         return null;
     }
 
     return (
-        <div className="name">
-            {displayedDeviceName(device, { respectNickname: false })}
-        </div>
+        <Row>
+            <div>{displayedDeviceName(device, { respectNickname: false })}</div>
+        </Row>
     );
 };
 
-const Serialports = ({ ports }: { ports: SerialPort[] }) => (
-    <ul className="ports">
-        {ports.map(port => (
-            <li key={port.path}>{port.comName}</li>
-        ))}
-    </ul>
-);
-
-export default ({ device }: { device: Device }) => (
-    <div className="more-infos">
+const Serialports = ({ ports }: { ports: SerialPort[] }) =>
+    ports.length > 0 ? (
         <Row>
-            <PcaNumber device={device} />
+            <ul className="tw-text-center tw-underline">
+                {ports.map(port => (
+                    <li key={port.path}>{port.comName}</li>
+                ))}
+            </ul>
         </Row>
-        <Row>
-            <MaybeDeviceName device={device} />
-        </Row>
-        {device.serialPorts && (
-            <Row>
-                <Serialports ports={device.serialPorts} />
-            </Row>
-        )}
+    ) : null;
+
+export default ({ device }: { device: Device }) => (
+    <div className="tw-preflight tw-flex tw-flex-col tw-gap-2">
+        <PcaNumber device={device} />
+        <MaybeDeviceName device={device} />
+        <Serialports ports={device.serialPorts ?? []} />
     </div>
 );

package/src/Device/DeviceSelector/DeviceList/edit-device-buttons.scss

@@ -4,11 +4,10 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-@import "../../../variables";
+@import '../../../variables';
 
 .core19-device-selector {
     .edit-device-buttons {
-        margin-top: 10px;
         height: 35px;
 
         font-size: 11px;

package/src/Device/DeviceSelector/DeviceSelector.test.tsx

@@ -5,12 +5,7 @@
  */
 
 import React from 'react';
-import {
-    fireEvent,
-    screen,
-    waitFor,
-    waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 
 import render from '../../../test/testrenderer';
 import { addDevice, Device, removeDevice } from '../deviceSlice';
@@ -19,18 +14,13 @@ import DeviceSelector from './DeviceSelector';
 
 jest.mock('../../../nrfutil/device/device');
 
+const DEVICE_SERIAL_NUMBER = '000000001';
+
 const testDevice: Device = {
     id: 1,
-    hwInfo: {
-        romSize: 123,
-        ramSize: 456,
-        romPageSize: 789,
-        deviceFamily: 'PCATest',
-        deviceVersion: 'PCATest',
-    },
     broken: null,
     usb: {
-        serialNumber: '000000001',
+        serialNumber: DEVICE_SERIAL_NUMBER,
         manufacturer: 'testManufacturer',
         product: 'testProduct',
         osDevicePath: '/some-path',
@@ -71,26 +61,13 @@ const testDevice: Device = {
             vcom: 2,
         },
     ],
-    boardVersion: 'PCATest',
-    serialport: {
-        path: 'COM1',
-        manufacturer: 'testManufacturer',
-        productId: 'testProduct',
-        serialNumber: '000000001',
-        vendorId: 'testVendor',
-        comName: 'COM1',
-        vcom: 0,
-    },
     favorite: false,
     traits: {
         jlink: true,
     },
-    jlink: {
+    devkit: {
         boardVersion: 'PCATest',
-        serialNumber: 'PCATest',
-        jlinkObFirmwareVersion: 'PCATest',
         deviceFamily: 'PCATest',
-        deviceVersion: 'PCATest',
     },
 };
 
@@ -156,7 +133,7 @@ describe('DeviceSelector', () => {
             />,
             [addDevice(testDevice)]
         );
-        expect(screen.getByText(testDevice.serialNumber)).toBeInTheDocument();
+        expect(screen.getByText(DEVICE_SERIAL_NUMBER)).toBeInTheDocument();
     });
 
     it('should unlist disconnected devices', () => {
@@ -171,7 +148,7 @@ describe('DeviceSelector', () => {
             />,
             [addDevice(testDevice), removeDevice(testDevice)]
         );
-        expect(screen.queryByText(testDevice.serialNumber)).toBeNull();
+        expect(screen.queryByText(DEVICE_SERIAL_NUMBER)).toBeNull();
     });
 
     it('should show more device info when selecting the expand button', () => {
@@ -205,8 +182,8 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(2);
     });
 
     it('can deselect selected devices', async () => {
@@ -222,10 +199,10 @@ describe('DeviceSelector', () => {
             [addDevice(testDevice)]
         );
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
         await screen.findByTestId('disconnect-device');
         fireEvent.click(screen.getByTestId('disconnect-device'));
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(1);
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(1);
         expect(screen.getByText('Select device')).toBeInTheDocument();
     });
 
@@ -255,10 +232,10 @@ describe('DeviceSelector', () => {
             [addDevice(testDevice)]
         );
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         expect(screen.queryByText('OK')).toBeNull();
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(2);
     });
 
     it('should deselect device when custom devices are disabled and no valid firmware is defined', async () => {
@@ -288,13 +265,11 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         expect(screen.queryByText('OK')).toBeNull();
         await waitFor(() => {
-            expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(
-                1
-            );
+            expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(1);
         });
         await screen.findByText('Select device');
     });
@@ -314,7 +289,7 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         await screen.findByText(
             'Device must be programmed, do you want to proceed?'
@@ -336,15 +311,20 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
-        await screen.findByText('No');
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
+
+        await screen.findByText(
+            'Device must be programmed, do you want to proceed?'
+        );
+
         fireEvent.click(screen.getByText('No'));
 
-        await waitForElementToBeRemoved(() =>
+        expect(
             screen.queryByText(
                 'Device must be programmed, do you want to proceed?'
             )
-        );
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+        ).toBeNull();
+
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(2);
     });
 });

package/src/Device/DeviceSelector/DeviceSelector.tsx

@@ -4,10 +4,12 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { NrfutilDeviceLib } from '../../../nrfutil';
 import { DeviceTraits } from '../../../nrfutil/device/common';
+import logger from '../../logging';
 import useHotKey from '../../utils/useHotKey';
 import {
     clearWaitForDevice,
@@ -22,7 +24,8 @@ import {
     Device,
     deviceIsSelected as deviceIsSelectedSelector,
     selectDevice,
-    selectedSerialNumber,
+    selectedDevice,
+    setSelectedDeviceInfo,
 } from '../deviceSlice';
 import DeviceList from './DeviceList/DeviceList';
 import SelectDevice from './SelectDevice';
@@ -54,36 +57,58 @@ export default ({
     const [deviceListVisible, setDeviceListVisible] = useState(false);
 
     const deviceIsSelected = useSelector(deviceIsSelectedSelector);
-    const selectedSN = useSelector(selectedSerialNumber);
+    const currentDevice = useSelector(selectedDevice);
     const waitingToAutoReconnect = useSelector(getWaitingToAutoReselect);
     const showSelectedDevice = deviceIsSelected || waitingToAutoReconnect;
 
     const doDeselectDevice = useCallback(() => {
-        onDeviceDeselected();
-        dispatch(deselectDevice());
         dispatch(clearWaitForDevice());
         dispatch(setAutoSelectDevice(undefined));
+        onDeviceDeselected();
+        dispatch(deselectDevice());
     }, [dispatch, onDeviceDeselected]);
 
+    const abortController = useRef<AbortController>();
+
     // Ensure that useCallback is
     // not updated frequently as this
     // will have a side effect to stop and start the hotplug events
     const doSelectDevice = useCallback(
-        (device: Device, autoReselected: boolean) => {
+        async (device: Device, autoReselected: boolean) => {
             dispatch(clearWaitForDevice());
             setDeviceListVisible(false);
             dispatch(selectDevice(device));
             dispatch(setAutoSelectDevice(device));
             onDeviceSelected(device, autoReselected);
+
+            abortController.current?.abort();
+            abortController.current = new AbortController();
+            const deviceInfo = await NrfutilDeviceLib.deviceInfo(
+                device,
+                undefined,
+                undefined,
+                abortController.current
+            );
+            abortController.current = undefined;
+            setSelectedDeviceInfo(deviceInfo);
+
             if (deviceSetupConfig) {
-                dispatch(
-                    setupDevice(
-                        device,
-                        deviceSetupConfig,
-                        onDeviceIsReady,
-                        doDeselectDevice
-                    )
-                );
+                if (device.serialNumber) {
+                    dispatch(
+                        setupDevice(
+                            device,
+                            deviceSetupConfig,
+                            onDeviceIsReady,
+                            doDeselectDevice,
+                            deviceInfo
+                        )
+                    );
+                } else {
+                    logger.warn(
+                        `Selected device has no serial number. Device setup is not supported`
+                    );
+                    onDeviceIsReady(device);
+                }
             }
         },
         [
@@ -145,7 +170,7 @@ export default ({
             <DeviceList
                 isVisible={deviceListVisible}
                 doSelectDevice={(device, autoReselected) => {
-                    if (device.serialNumber === selectedSN) {
+                    if (device.id === currentDevice?.id) {
                         setDeviceListVisible(false);
                         return;
                     }

package/src/Device/DeviceSelector/Favorite.tsx

@@ -8,19 +8,18 @@ import React, { FC } from 'react';
 import { useDispatch } from 'react-redux';
 
 import PseudoButton from '../../PseudoButton/PseudoButton';
+import classNames from '../../utils/classNames';
 import { Device, toggleDeviceFavorited } from '../deviceSlice';
 
-import './favorite.scss';
-
 export const MakeDeviceFavorite: FC<{ device: Device }> = ({ device }) => {
     const dispatch = useDispatch();
 
     const toggleFavorite = () => {
-        dispatch(toggleDeviceFavorited(device.serialNumber));
+        dispatch(toggleDeviceFavorited(device));
     };
 
     return (
-        <PseudoButton className="make-favorite" onClick={toggleFavorite}>
+        <PseudoButton className="tw-mr-[1ex]" onClick={toggleFavorite}>
             <span
                 className={`mdi star ${
                     device.favorite ? 'mdi-star-off' : 'mdi-star'
@@ -35,15 +34,16 @@ export const FavoriteIndicator: FC<{ device: Device }> = ({ device }) => {
     const dispatch = useDispatch();
 
     const toggleFavorite = () => {
-        dispatch(toggleDeviceFavorited(device.serialNumber));
+        dispatch(toggleDeviceFavorited(device));
     };
 
-    return (
+    return device.serialNumber ? (
         <PseudoButton
-            className={`mdi ${
-                device.favorite ? 'mdi-star' : 'mdi-star-outline'
-            }`}
+            className={classNames(
+                !device.favorite && 'tw-invisible group-hover:tw-visible',
+                `mdi ${device.favorite ? 'mdi-star' : 'mdi-star-outline'}`
+            )}
             onClick={toggleFavorite}
         />
-    );
+    ) : null;
 };

package/src/Device/DeviceSelector/basic-device-info.scss

@@ -16,9 +16,6 @@
         .details {
             width: inherit;
 
-            display: flex;
-            flex-direction: column;
-
             line-height: 1;
 
             .name {
@@ -49,14 +46,5 @@
                 text-overflow: ellipsis;
             }
         }
-
-        .toggles {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            width: 44px;
-            margin-right: 10px;
-        }
     }
 }

package/src/Device/deviceInfo/deviceInfo.ts

@@ -199,7 +199,7 @@ const devicesByPca: { [P in KnownDevicePCA]: DeviceInfo } = {
 
 const deviceByPca = (device: Device) =>
     devicesByPca[
-        String(device.jlink?.boardVersion).toUpperCase() as KnownDevicePCA
+        String(device.devkit?.boardVersion).toUpperCase() as KnownDevicePCA
     ];
 
 const NORDIC_VENDOR_ID = '1915';
@@ -252,7 +252,7 @@ export const displayedDeviceName = (
         return device.nickname;
     }
 
-    return deviceInfo(device).name || device.jlink?.boardVersion || 'Unknown';
+    return deviceInfo(device).name || device.devkit?.boardVersion || 'Unknown';
 };
 
 export const productPageUrl = (device: Device) =>