@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/Device/DeviceSelector/SelectedDevice.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import PseudoButton from '../../PseudoButton/PseudoButton';
+import {
+    getAutoReselectDevice,
+    getWaitingForDeviceTimeout,
+    getWaitingToAutoReselect,
+} from '../deviceAutoSelectSlice';
+import { selectedDevice } from '../deviceSlice';
+import BasicDeviceInfo from './BasicDeviceInfo';
+
+import './selected-device.scss';
+
+const DisconnectDevice = ({
+    doDeselectDevice,
+}: {
+    doDeselectDevice: () => void;
+}) => (
+    <PseudoButton
+        className="mdi mdi-24px mdi-eject disconnect"
+        onClick={doDeselectDevice}
+        title="Disconnect device"
+        testId="disconnect-device"
+    />
+);
+
+export default ({
+    doDeselectDevice,
+    toggleDeviceListVisible,
+}: {
+    doDeselectDevice: () => void;
+    toggleDeviceListVisible: () => void;
+}) => {
+    const waitingForAutoReselect = useSelector(getWaitingToAutoReselect);
+    const waitingForDevice = useSelector(getWaitingForDeviceTimeout);
+    const selDevice = useSelector(selectedDevice);
+    const autoReconnectDevice = useSelector(getAutoReselectDevice);
+    const device = selDevice ?? autoReconnectDevice;
+
+    return (
+        <PseudoButton
+            className={`selected-device ${
+                waitingForAutoReselect || waitingForDevice ? 'reconnecting' : ''
+            }`}
+            onClick={toggleDeviceListVisible}
+        >
+            {device && (
+                <BasicDeviceInfo
+                    device={device}
+                    toggles={
+                        <DisconnectDevice doDeselectDevice={doDeselectDevice} />
+                    }
+                    showWaitingStatus
+                />
+            )}
+        </PseudoButton>
+    );
+};

package/src/Device/DeviceSelector/arrow-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" /></svg>

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

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../variables';
+
+.core19-device-selector {
+    .basic-device-info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+
+        .details {
+            width: inherit;
+
+            display: flex;
+            flex-direction: column;
+
+            line-height: 1;
+
+            .name {
+                font-size: 14px;
+                font-weight: $font-weight-bold;
+                text-overflow: ellipsis;
+
+                &:not(:focus) {
+                    pointer-events: none;
+                }
+            }
+            .reconnecting {
+                border-bottom-style: solid;
+                border-bottom-width: 1px;
+                border-bottom-color: transparent;
+
+                font-size: 14px;
+                font-weight: $font-weight-bold;
+
+                &:not(:focus) {
+                    pointer-events: none;
+                }
+            }
+
+            .serial-number {
+                overflow-wrap: break-word;
+                max-width: 155px;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .toggles {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            width: 44px;
+            margin-right: 10px;
+        }
+    }
+}

package/src/Device/DeviceSelector/device-icon.scss

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../variables";
+
+.core19-device-selector {
+    .icon {
+        width: 68px;
+        flex-shrink: 0;
+        padding-left: 27px;
+
+        fill: $gray-700;
+
+        .mdi {
+            display: flex;
+            flex-direction: column;
+            font-size: 27px;
+        }
+    }
+
+    .selected-device:hover .icon {
+        fill: $primary;
+    }
+}

package/src/Device/DeviceSelector/favorite.scss

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../variables";
+
+.core19-device-selector {
+    .make-favorite .star {
+        margin-right: 1ex;
+    }
+
+    .mdi-star-outline { visibility: hidden; }
+
+    .device:hover .mdi-star-outline { visibility: visible; }
+}

package/src/Device/DeviceSelector/select-device.scss

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../variables";
+
+.core19-device-selector {
+    .select-device {
+        font-size: 16px;
+        background: $primary;
+
+        padding-left: 68px;
+        text-transform: uppercase;
+
+        color: $white;
+
+        height: $nav-bar-height;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        &:hover,&.device-list-visible {
+            background: $primary-darkened;
+        }
+
+        img {
+            margin-right: 10px !important;
+            transition: transform 100ms linear;
+            &.img-rotate {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

package/src/Device/DeviceSelector/selected-device.scss

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../variables';
+
+@keyframes alert {
+    0% {
+        background: $white;
+    }
+    50% {
+        background: $gray-100;
+    }
+    100% {
+        background: $white;
+    }
+}
+
+.core19-device-selector {
+    .selected-device {
+        height: $nav-bar-height;
+
+        font-size: 16px;
+        color: $gray-700;
+        background: $white;
+
+        &.reconnecting {
+            background: $gray-100;
+            animation: alert 2s infinite;
+        }
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .serial-number {
+            font-weight: $font-weight-light;
+            font-size: 11px;
+        }
+
+        .waiting-to-reconnect {
+            font-weight: $font-weight-light;
+            font-size: 11px;
+        }
+
+        .disconnect {
+            color: $gray-700;
+        }
+
+        &:hover,
+        *:hover {
+            color: $primary;
+        }
+    }
+}

package/src/Device/DeviceSetup/DeviceSetupView.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useState } from 'react';
+import { ProgressBar } from 'react-bootstrap';
+import Form from 'react-bootstrap/Form';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dialog, DialogButton } from '../../Dialog/Dialog';
+import {
+    deviceSetupUserInputReceived,
+    getDeviceSetupChoices,
+    getDeviceSetupMessage,
+    getDeviceSetupProgress,
+    getDeviceSetupProgressMessage,
+    getDeviceSetupUserInputCallback,
+    isDeviceSetupDialogVisible,
+} from '../deviceSetupSlice';
+
+export default () => {
+    const dispatch = useDispatch();
+    const [selectedChoices, setSelectedChoices] = useState<number>(0);
+    const isVisible = useSelector(isDeviceSetupDialogVisible);
+    const message = useSelector(getDeviceSetupMessage);
+    const progressMessage = useSelector(getDeviceSetupProgressMessage);
+    const progress = useSelector(getDeviceSetupProgress);
+    const choices = useSelector(getDeviceSetupChoices);
+    const onUserInput = useSelector(getDeviceSetupUserInputCallback);
+
+    const isInProgress = progress !== undefined;
+
+    return (
+        <Dialog isVisible={isVisible}>
+            <Dialog.Header
+                showSpinner={isInProgress}
+                title="Confirm"
+                headerIcon=""
+            />
+            <Dialog.Body>
+                <Form.Group>
+                    <div>{message}</div>
+                </Form.Group>
+                {choices && (
+                    <Form.Group>
+                        {choices.map((choice, index) => (
+                            <Form.Check
+                                key={choice}
+                                name="radioGroup"
+                                type="radio"
+                                disabled={isInProgress}
+                                onClick={() => setSelectedChoices(index)}
+                                label={choice}
+                            />
+                        ))}
+                    </Form.Group>
+                )}
+                <Form.Group>
+                    {progressMessage !== undefined && (
+                        <Form.Label>
+                            <strong>Status:</strong>
+                            <span>{` ${progressMessage}`}</span>
+                        </Form.Label>
+                    )}
+                    {progress !== undefined && (
+                        <ProgressBar now={progress} style={{ height: '4px' }} />
+                    )}
+                </Form.Group>
+            </Dialog.Body>
+            <Dialog.Footer>
+                <DialogButton
+                    variant="primary"
+                    onClick={() => {
+                        if (onUserInput) {
+                            dispatch(deviceSetupUserInputReceived());
+                            onUserInput(
+                                false,
+                                choices ? selectedChoices : undefined
+                            );
+                        }
+                    }}
+                    disabled={!onUserInput || isInProgress}
+                >
+                    Program
+                </DialogButton>
+                <DialogButton
+                    onClick={() => {
+                        if (onUserInput) {
+                            dispatch(deviceSetupUserInputReceived());
+                            onUserInput(true);
+                        }
+                    }}
+                    disabled={isInProgress}
+                >
+                    {choices ? 'Cancel' : 'No'}
+                </DialogButton>
+            </Dialog.Footer>
+        </Dialog>
+    );
+};

package/src/Device/deviceAutoSelectSlice.ts

@@ -0,0 +1,144 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import type { RootState } from '../store';
+import type { Device } from './deviceSlice';
+
+export interface WaitForDevice {
+    timeout: number;
+    when:
+        | 'always'
+        | 'applicationMode'
+        | 'dfuBootLoaderMode'
+        | 'sameTraits'
+        | ((device: Device) => boolean);
+    once: boolean;
+    onSuccess?: (device: Device) => void;
+    onFail?: (reason?: string) => void;
+}
+
+export interface DeviceAutoSelectState {
+    autoReselect: boolean;
+    device?: Device;
+    disconnectionTime?: number;
+    waitForDevice?: WaitForDevice;
+    autoReconnectTimeout?: NodeJS.Timeout;
+    lastArrivedDeviceId?: number;
+    arrivedButWrongWhen?: boolean;
+}
+
+const initialState: DeviceAutoSelectState = {
+    autoReselect: false,
+};
+
+const slice = createSlice({
+    name: 'deviceAutoSelect',
+    initialState,
+    reducers: {
+        setWaitForDeviceTimeout: (
+            state,
+            action: PayloadAction<NodeJS.Timeout>
+        ) => {
+            clearTimeout(state.autoReconnectTimeout);
+            state.autoReconnectTimeout = action.payload;
+        },
+
+        clearWaitForDeviceTimeout: state => {
+            clearTimeout(state.autoReconnectTimeout);
+            state.autoReconnectTimeout = undefined;
+        },
+
+        setAutoSelectDevice: (
+            state,
+            action: PayloadAction<Device | undefined>
+        ) => {
+            state.device = action.payload ? { ...action.payload } : undefined;
+            state.disconnectionTime = undefined;
+            clearTimeout(state.autoReconnectTimeout);
+            state.autoReconnectTimeout = undefined;
+        },
+
+        setDisconnectedTime: (
+            state,
+            action: PayloadAction<number | undefined>
+        ) => {
+            if (state.device) {
+                state.disconnectionTime = action.payload;
+            }
+        },
+
+        setAutoReselect: (state, action: PayloadAction<boolean>) => {
+            state.autoReselect = action.payload;
+            if (state.autoReselect) {
+                state.disconnectionTime = undefined;
+            }
+        },
+
+        setWaitForDevice: (state, action: PayloadAction<WaitForDevice>) => {
+            if (state.device) state.waitForDevice = action.payload;
+        },
+
+        clearWaitForDevice: state => {
+            state.waitForDevice = undefined;
+            clearTimeout(state.autoReconnectTimeout);
+            state.autoReconnectTimeout = undefined;
+        },
+
+        setLastArrivedDeviceId: (
+            state,
+            action: PayloadAction<number | undefined>
+        ) => {
+            if (state.device) state.lastArrivedDeviceId = action.payload;
+        },
+        setArrivedButWrongWhen: (
+            state,
+            action: PayloadAction<boolean | undefined>
+        ) => {
+            state.arrivedButWrongWhen = action.payload;
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: {
+        setWaitForDeviceTimeout,
+        clearWaitForDeviceTimeout,
+        setAutoSelectDevice,
+        setDisconnectedTime,
+        setAutoReselect,
+        setWaitForDevice,
+        clearWaitForDevice,
+        setLastArrivedDeviceId,
+        setArrivedButWrongWhen,
+    },
+} = slice;
+
+export const getAutoReselectDevice = (state: RootState) =>
+    state.deviceAutoSelect.device;
+
+export const getAutoReselect = (state: RootState) =>
+    state.deviceAutoSelect.autoReselect;
+
+export const getWaitingToAutoReselect = (state: RootState) =>
+    state.deviceAutoSelect.disconnectionTime !== undefined &&
+    state.deviceAutoSelect.autoReselect;
+
+export const getWaitingForDeviceTimeout = (state: RootState) =>
+    state.deviceAutoSelect.autoReconnectTimeout !== undefined;
+
+export const getDisconnectionTime = (state: RootState) =>
+    state.deviceAutoSelect.disconnectionTime;
+
+export const getWaitForDevice = (state: RootState) =>
+    state.deviceAutoSelect.waitForDevice;
+
+export const getLastArrivedDeviceId = (state: RootState) =>
+    state.deviceAutoSelect.lastArrivedDeviceId;
+export const getArrivedButWrongWhen = (state: RootState) =>
+    state.deviceAutoSelect.arrivedButWrongWhen;