@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../../variables";
+
+.core19-device-selector {
+    .edit-device-buttons {
+        margin-top: 10px;
+        height: 35px;
+
+        font-size: 11px;
+        font-weight: $font-weight-normal;
+
+        text-transform: uppercase;
+        text-align: center;
+
+        border-top: 1px solid $gray-200;
+
+        & > * {
+            padding-top: 9px;
+            width: 50%;
+        }
+
+        & > *:first-child {
+            border-right: 1px solid $gray-200;
+        }
+    }
+}

package/src/Device/DeviceSelector/DeviceList/more-device-info.scss

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../../variables";
+
+.core19-device-selector {
+    .more-infos {
+        .info-row {
+            display: flex;
+            flex-direction: row;
+            padding-right: 20px;
+        }
+
+        .flex-space {
+            width: 68px;
+        }
+
+        .name {
+            margin-top: 1em;
+        }
+
+        .ports {
+            list-style: none;
+            padding: 0;
+            text-decoration: underline;
+            margin-top: 1em;
+            text-align: center;
+        }
+    }
+}

package/src/Device/DeviceSelector/DeviceList/rename-device.scss

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../../variables";
+
+.core19-device-selector {
+    .rename-button .pencil {
+        margin-right: 1ex;
+    }
+}

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

@@ -0,0 +1,342 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import {
+    fireEvent,
+    screen,
+    waitFor,
+    waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+import render from '../../../test/testrenderer';
+import { Device, setDevices } from '../deviceSlice';
+import { jprogDeviceSetup } from '../jprogOperations';
+import DeviceSelector from './DeviceSelector';
+
+const testDevice: Device = {
+    id: 1,
+    hwInfo: {
+        romSize: 123,
+        ramSize: 456,
+        romPageSize: 789,
+        deviceFamily: 'PCATest',
+        deviceVersion: 'PCATest',
+    },
+    broken: null,
+    usb: {
+        serialNumber: '000000001',
+        manufacturer: 'testManufacturer',
+        product: 'testProduct',
+        osDevicePath: '/some-path',
+        device: {
+            busNumber: 2,
+            address: 3,
+            descriptor: {
+                bcdDevice: 0,
+                bDescriptorType: 4,
+                idVendor: 5,
+                idProduct: 6,
+            },
+            configList: {
+                descriptors: [],
+                interfaceLists: [],
+                length: 0,
+            },
+        },
+    },
+    serialNumber: '000000001',
+    serialPorts: [
+        {
+            path: 'COM1',
+            manufacturer: 'testManufacturer',
+            productId: 'testProduct',
+            serialNumber: '000000001',
+            vendorId: 'testVendor',
+            comName: 'COM1',
+            vcom: 1,
+        },
+        {
+            path: 'COM2',
+            manufacturer: 'testManufacturer',
+            productId: 'testProduct',
+            serialNumber: '000000001',
+            vendorId: 'testVendor',
+            comName: 'COM2',
+            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: {
+        boardVersion: 'PCATest',
+        serialNumber: 'PCATest',
+        jlinkObFirmwareVersion: 'PCATest',
+        deviceFamily: 'PCATest',
+        deviceVersion: 'PCATest',
+    },
+};
+
+const validFirmware = {
+    deviceSetups: [
+        jprogDeviceSetup([
+            {
+                key: 'PCATest',
+                fw: 'firmware/invalidDevice.hex',
+                fwVersion: 'fw-1.0.0',
+                fwIdAddress: 0x6000,
+            },
+        ]),
+    ],
+    allowCustomDevice: false,
+};
+
+describe('DeviceSelector', () => {
+    it('should have no device selected by default', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />
+        );
+        expect(screen.getByText('Select device')).toBeInTheDocument();
+    });
+
+    it('should show no connected devices', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />
+        );
+        fireEvent.click(screen.getByText('Select device'));
+        expect(screen.getByText('Nordic development kit')).toBeInTheDocument();
+    });
+
+    it('should list connected devices', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />,
+            [setDevices([testDevice])]
+        );
+        expect(screen.getByText(testDevice.serialNumber)).toBeInTheDocument();
+    });
+
+    it('should unlist disconnected devices', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />,
+            [setDevices([testDevice]), setDevices([])]
+        );
+        expect(screen.queryByText(testDevice.serialNumber)).toBeNull();
+    });
+
+    it('should show more device info when selecting the expand button', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />,
+            [setDevices([testDevice])]
+        );
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByTestId('show-more-device-info'));
+        expect(screen.getAllByText(/COM/)).toHaveLength(2);
+    });
+
+    it('can select connected devices', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />,
+            [setDevices([testDevice])]
+        );
+
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+    });
+
+    it('can deselect selected devices', async () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+            />,
+            [setDevices([testDevice])]
+        );
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        await screen.findByTestId('disconnect-device');
+        fireEvent.click(screen.getByTestId('disconnect-device'));
+        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(1);
+        expect(screen.getByText('Select device')).toBeInTheDocument();
+    });
+
+    it('should allow device selection when custom devices are enabled and no valid firmware is defined', () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+                deviceSetupConfig={{
+                    deviceSetups: [
+                        jprogDeviceSetup([
+                            {
+                                key: 'firmware_1',
+                                fw: 'firmware/invalidDevice.hex',
+                                fwVersion: 'fw-1.0.0',
+                                fwIdAddress: 0x6000,
+                            },
+                        ]),
+                    ],
+                    allowCustomDevice: true,
+                }}
+            />,
+            [setDevices([testDevice])]
+        );
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByText(testDevice.serialNumber));
+
+        expect(screen.queryByText('OK')).toBeNull();
+        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+    });
+
+    it('should deselect device when custom devices are disabled and no valid firmware is defined', async () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+                deviceSetupConfig={{
+                    deviceSetups: [
+                        jprogDeviceSetup([
+                            {
+                                key: 'invalidDevice',
+                                fw: 'firmware/invalidDevice.hex',
+                                fwVersion: 'fw-1.0.0',
+                                fwIdAddress: 0x6000,
+                            },
+                        ]),
+                    ],
+                    allowCustomDevice: false,
+                }}
+            />,
+            [setDevices([testDevice])]
+        );
+
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByText(testDevice.serialNumber));
+
+        expect(screen.queryByText('OK')).toBeNull();
+        await waitFor(() => {
+            expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(
+                1
+            );
+        });
+        await screen.findByText('Select device');
+    });
+
+    it('should show firmware prompt when a valid firmware is defined', async () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+                deviceSetupConfig={validFirmware}
+            />,
+            [setDevices([testDevice])]
+        );
+
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByText(testDevice.serialNumber));
+
+        await screen.findByText(
+            'Device must be programmed, do you want to proceed?'
+        );
+    });
+
+    it('should select device when cancelling firmware prompt', async () => {
+        render(
+            <DeviceSelector
+                deviceListing={{
+                    nordicUsb: true,
+                    serialPort: true,
+                    jlink: true,
+                    mcuBoot: true,
+                }}
+                deviceSetupConfig={validFirmware}
+            />,
+            [setDevices([testDevice])]
+        );
+
+        fireEvent.click(screen.getByText('Select device'));
+        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        await screen.findByText('No');
+        fireEvent.click(screen.getByText('No'));
+
+        await waitForElementToBeRemoved(() =>
+            screen.queryByText(
+                'Device must be programmed, do you want to proceed?'
+            )
+        );
+        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+    });
+});

package/src/Device/DeviceSelector/DeviceSelector.tsx

@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { DeviceTraits } from '@nordicsemiconductor/nrf-device-lib-js';
+
+import useHotKey from '../../utils/useHotKey';
+import {
+    clearWaitForDevice,
+    getWaitingToAutoReselect,
+    setAutoSelectDevice,
+} from '../deviceAutoSelectSlice';
+import { startWatchingDevices, stopWatchingDevices } from '../deviceLister';
+import { DeviceSetupConfig, setupDevice } from '../deviceSetup';
+import DeviceSetupView from '../DeviceSetup/DeviceSetupView';
+import {
+    deselectDevice,
+    Device,
+    deviceIsSelected as deviceIsSelectedSelector,
+    selectDevice,
+    selectedSerialNumber,
+} from '../deviceSlice';
+import DeviceList from './DeviceList/DeviceList';
+import SelectDevice from './SelectDevice';
+import SelectedDevice from './SelectedDevice';
+
+interface OutdatedDeviceTraits {
+    serialPort?: boolean;
+    serialport?: boolean;
+}
+
+export interface Props {
+    deviceListing: DeviceTraits & OutdatedDeviceTraits;
+    deviceSetupConfig?: DeviceSetupConfig;
+    onDeviceSelected?: (device: Device, autoReselected: boolean) => void;
+    onDeviceDeselected?: () => void;
+    onDeviceConnected?: (device: Device) => void;
+    onDeviceDisconnected?: (device: Device) => void;
+    onDeviceIsReady?: (device: Device) => void;
+    deviceFilter?: (device: Device) => boolean;
+}
+
+const noop = () => {};
+export default ({
+    deviceListing,
+    deviceSetupConfig,
+    onDeviceSelected = noop,
+    onDeviceDeselected = noop,
+    onDeviceConnected = noop,
+    onDeviceDisconnected = noop,
+    onDeviceIsReady = noop,
+    deviceFilter,
+}: Props) => {
+    const dispatch = useDispatch();
+    const [deviceListVisible, setDeviceListVisible] = useState(false);
+
+    const deviceIsSelected = useSelector(deviceIsSelectedSelector);
+    const selectedSN = useSelector(selectedSerialNumber);
+    const waitingToAutoReconnect = useSelector(getWaitingToAutoReselect);
+    const showSelectedDevice = deviceIsSelected || waitingToAutoReconnect;
+
+    const doDeselectDevice = useCallback(() => {
+        onDeviceDeselected();
+        dispatch(deselectDevice());
+        dispatch(clearWaitForDevice());
+        dispatch(setAutoSelectDevice(undefined));
+    }, [dispatch, onDeviceDeselected]);
+
+    // 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) => {
+            dispatch(clearWaitForDevice());
+            setDeviceListVisible(false);
+            dispatch(selectDevice(device));
+            dispatch(setAutoSelectDevice(device));
+            onDeviceSelected(device, autoReselected);
+            if (deviceSetupConfig) {
+                dispatch(
+                    setupDevice(
+                        device,
+                        deviceSetupConfig,
+                        onDeviceIsReady,
+                        doDeselectDevice
+                    )
+                );
+            }
+        },
+        [
+            deviceSetupConfig,
+            dispatch,
+            doDeselectDevice,
+            onDeviceIsReady,
+            onDeviceSelected,
+        ]
+    );
+
+    const doStartWatchingDevices = useCallback(() => {
+        const patchedDeviceListing = {
+            serialPorts: deviceListing.serialPort || deviceListing.serialport,
+            ...deviceListing,
+        };
+        dispatch(
+            startWatchingDevices(
+                patchedDeviceListing,
+                onDeviceConnected,
+                onDeviceDisconnected,
+                onDeviceDeselected,
+                doSelectDevice
+            )
+        );
+    }, [
+        deviceListing,
+        dispatch,
+        onDeviceConnected,
+        onDeviceDisconnected,
+        onDeviceDeselected,
+        doSelectDevice,
+    ]);
+
+    const toggleDeviceListVisible = () =>
+        setDeviceListVisible(!deviceListVisible);
+
+    useEffect(() => {
+        doStartWatchingDevices();
+        return stopWatchingDevices;
+    }, [doStartWatchingDevices]);
+
+    useHotKey({
+        hotKey: 'alt+s',
+        title: 'Select device',
+        isGlobal: true,
+        action: () => toggleDeviceListVisible(),
+    });
+
+    return (
+        <div className="core19-device-selector">
+            {showSelectedDevice ? (
+                <SelectedDevice
+                    doDeselectDevice={doDeselectDevice}
+                    toggleDeviceListVisible={toggleDeviceListVisible}
+                />
+            ) : (
+                <SelectDevice
+                    deviceListVisible={deviceListVisible}
+                    toggleDeviceListVisible={toggleDeviceListVisible}
+                />
+            )}
+            <DeviceList
+                isVisible={deviceListVisible}
+                doSelectDevice={(device, autoReselected) => {
+                    if (device.serialNumber === selectedSN) {
+                        setDeviceListVisible(false);
+                        return;
+                    }
+
+                    if (deviceIsSelected) {
+                        doDeselectDevice();
+                    }
+
+                    doSelectDevice(device, autoReselected);
+                }}
+                deviceFilter={deviceFilter}
+            />
+            <DeviceSetupView />
+        </div>
+    );
+};

package/src/Device/DeviceSelector/Favorite.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+import { useDispatch } from 'react-redux';
+
+import PseudoButton from '../../PseudoButton/PseudoButton';
+import { Device, toggleDeviceFavorited } from '../deviceSlice';
+
+import './favorite.scss';
+
+export const MakeDeviceFavorite: FC<{ device: Device }> = ({ device }) => {
+    const dispatch = useDispatch();
+
+    const toggleFavorite = () => {
+        dispatch(toggleDeviceFavorited(device.serialNumber));
+    };
+
+    return (
+        <PseudoButton className="make-favorite" onClick={toggleFavorite}>
+            <span
+                className={`mdi star ${
+                    device.favorite ? 'mdi-star-off' : 'mdi-star'
+                }`}
+            />
+            {device.favorite ? 'Un-favorite' : 'Favorite'}
+        </PseudoButton>
+    );
+};
+
+export const FavoriteIndicator: FC<{ device: Device }> = ({ device }) => {
+    const dispatch = useDispatch();
+
+    const toggleFavorite = () => {
+        dispatch(toggleDeviceFavorited(device.serialNumber));
+    };
+
+    return (
+        <PseudoButton
+            className={`mdi ${
+                device.favorite ? 'mdi-star' : 'mdi-star-outline'
+            }`}
+            onClick={toggleFavorite}
+        />
+    );
+};

package/src/Device/DeviceSelector/SelectDevice.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import PseudoButton from '../../PseudoButton/PseudoButton';
+import classNames from '../../utils/classNames';
+import chevron from './arrow-down.svg';
+
+import './select-device.scss';
+
+interface Props {
+    deviceListVisible: boolean;
+    toggleDeviceListVisible: () => void;
+}
+
+export default ({ deviceListVisible, toggleDeviceListVisible }: Props) => (
+    <PseudoButton
+        title="alt+s"
+        className={classNames(
+            'select-device',
+            deviceListVisible && 'device-list-visible'
+        )}
+        onClick={toggleDeviceListVisible}
+    >
+        <div>Select device</div>
+        <img
+            className={classNames(deviceListVisible && 'img-rotate')}
+            src={chevron}
+            alt=""
+        />
+    </PseudoButton>
+);