@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/Device/DeviceSelector/BasicDeviceInfo.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import InlineInput from '../../InlineInput/InlineInput';
+import {
+    getAutoReselectDevice,
+    getWaitingForDeviceTimeout,
+    getWaitingToAutoReselect,
+} from '../deviceAutoSelectSlice';
+import { displayedDeviceName } from '../deviceInfo/deviceInfo';
+import { Device, resetDeviceNickname, setDeviceNickname } from '../deviceSlice';
+import DeviceIcon from './DeviceIcon';
+
+import './basic-device-info.scss';
+
+interface Props {
+    device: Device;
+    inputRef?: React.Ref<HTMLInputElement>;
+    messageType: 'AutoReselect' | 'WaitingForDevice' | 'DeviceName';
+}
+
+const DeviceName = ({ device, inputRef, messageType }: Props) => {
+    const dispatch = useDispatch();
+    const setOrResetNickname = (name: string) => {
+        const newNameIsEqualToDefaultName =
+            name === displayedDeviceName(device, { respectNickname: false });
+
+        if (newNameIsEqualToDefaultName) {
+            dispatch(resetDeviceNickname(device.serialNumber));
+        } else {
+            dispatch(setDeviceNickname(device.serialNumber, name));
+        }
+    };
+
+    switch (messageType) {
+        case 'AutoReselect':
+            return <div className="reconnecting">Reconnecting...</div>;
+        case 'WaitingForDevice':
+            return <div className="reconnecting">Rebooting...</div>;
+        case 'DeviceName':
+            return (
+                <InlineInput
+                    ref={inputRef}
+                    className="name"
+                    value={displayedDeviceName(device)}
+                    isValid={name => name !== ''}
+                    onChange={setOrResetNickname}
+                />
+            );
+    }
+};
+
+const DeviceSerialNumber = ({ device }: { device: Device }) => (
+    <div className="serial-number">{device.serialNumber}</div>
+);
+
+interface BasicDeviceProps {
+    device: Device;
+    deviceNameInputRef?: React.Ref<HTMLInputElement>;
+    toggles?: ReactNode;
+    showWaitingStatus?: boolean;
+}
+
+export default ({
+    device,
+    deviceNameInputRef,
+    toggles,
+    showWaitingStatus = false,
+}: BasicDeviceProps) => {
+    const [messageType, setMessageType] = useState<
+        'AutoReselect' | 'WaitingForDevice' | 'DeviceName'
+    >('DeviceName');
+    const autoReselectDevice = useSelector(getAutoReselectDevice);
+    const waitingToAutoReselect = useSelector(getWaitingToAutoReselect);
+    const waitingForDevice = useSelector(getWaitingForDeviceTimeout);
+    const thisDevice = device.serialNumber === autoReselectDevice?.serialNumber;
+
+    useEffect(() => {
+        if (!showWaitingStatus) {
+            setMessageType('DeviceName');
+        } else if (waitingForDevice && thisDevice) {
+            setMessageType('WaitingForDevice');
+        } else if (waitingToAutoReselect && thisDevice) {
+            setMessageType('AutoReselect');
+        } else {
+            setMessageType('DeviceName');
+        }
+    }, [
+        thisDevice,
+        showWaitingStatus,
+        waitingForDevice,
+        waitingToAutoReselect,
+    ]);
+
+    return (
+        <div className="basic-device-info">
+            <DeviceIcon device={device} />
+            <div className="details">
+                <DeviceName
+                    device={device}
+                    inputRef={deviceNameInputRef}
+                    messageType={messageType}
+                />
+                <DeviceSerialNumber device={device} />
+            </div>
+            <div className="toggles">{toggles}</div>
+        </div>
+    );
+};

package/src/Device/DeviceSelector/DeviceIcon.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import { deviceInfo } from '../deviceInfo/deviceInfo';
+import { Device } from '../deviceSlice';
+
+import './device-icon.scss';
+
+const DeviceIcon: FC<{ device: Device }> = ({ device }) => {
+    const Icon = deviceInfo(device).icon;
+    return (
+        <div className="icon">
+            {device.traits.broken ? (
+                <span className="mdi mdi-alert" />
+            ) : (
+                <Icon />
+            )}
+        </div>
+    );
+};
+
+export default DeviceIcon;

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

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, ReactNode } from 'react';
+import { Flipped, Flipper, spring } from 'react-flip-toolkit';
+
+import { Device } from '../../deviceSlice';
+
+const changesOnReorder = (devices: Device[]) =>
+    devices.map(device => device.serialNumber).join('\n');
+
+export const AnimatedList: FC<{
+    children: ReactNode;
+    devices: Device[];
+}> = ({ children, devices }) => (
+    <Flipper element="ul" flipKey={changesOnReorder(devices)}>
+        {children}
+    </Flipper>
+);
+type onAppear = React.ComponentProps<typeof Flipped>['onAppear'];
+type onExit = React.ComponentProps<typeof Flipped>['onExit'];
+
+const fadeIn: onAppear = element =>
+    spring({
+        values: {
+            opacity: [0, 1],
+            scale: [0, 1],
+        },
+        // @ts-expect-error Library types not correct
+        onUpdate: ({ opacity, scale }) => {
+            element.style.opacity = opacity;
+            element.style.transform = `scaleY(${scale})`;
+        },
+    });
+
+const fadeOut: onExit = (element, _, removeElement) =>
+    spring({
+        values: {
+            opacity: [1, 0],
+            scale: [1, 0],
+        },
+        // @ts-expect-error Library types not correct
+        onUpdate: ({ opacity, scale }) => {
+            element.style.opacity = opacity;
+            element.style.transform = `scaleY(${scale})`;
+        },
+        onComplete: () => {
+            removeElement();
+        },
+    });
+
+export const AnimatedItem: FC<{
+    itemKey: string;
+    children: ReactNode;
+}> = ({ children, itemKey }) => (
+    <Flipped flipId={itemKey} onAppear={fadeIn} onExit={fadeOut}>
+        <li>{children}</li>
+    </Flipped>
+);

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import PseudoButton from '../../../PseudoButton/PseudoButton';
+import { showDialog } from '../../BrokenDeviceDialog/brokenDeviceDialogSlice';
+import { Device as DeviceProps } from '../../deviceSlice';
+import BasicDeviceInfo from '../BasicDeviceInfo';
+
+import './broken-device.scss';
+
+export default ({ device }: { device: DeviceProps }) => {
+    const dispatch = useDispatch();
+
+    return (
+        <PseudoButton
+            className="broken-device"
+            onClick={() => dispatch(showDialog(device.broken))}
+        >
+            <BasicDeviceInfo device={device} />
+            <div className="broken-device-info">
+                <p>Unusable device detected </p>
+                <p>
+                    <u>More information</u>
+                </p>
+            </div>
+        </PseudoButton>
+    );
+};

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

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useRef, useState } from 'react';
+
+import PseudoButton from '../../../PseudoButton/PseudoButton';
+import classNames from '../../../utils/classNames';
+import { Device as DeviceProps } from '../../deviceSlice';
+import BasicDeviceInfo from '../BasicDeviceInfo';
+import { FavoriteIndicator } from '../Favorite';
+import EditDeviceButtons from './EditDeviceButtons';
+import MoreDeviceInfo from './MoreDeviceInfo';
+
+import './device.scss';
+
+const ShowMoreInfo = ({
+    isVisible,
+    toggleVisible,
+}: {
+    isVisible: boolean;
+    toggleVisible: () => void;
+}) => (
+    <PseudoButton
+        className={`show-more mdi mdi-chevron-${isVisible ? 'up' : 'down'}`}
+        testId="show-more-device-info"
+        onClick={toggleVisible}
+    />
+);
+
+interface Props {
+    device: DeviceProps;
+    doSelectDevice: (device: DeviceProps, autoReselected: boolean) => void;
+    allowMoreInfoVisible: boolean;
+}
+
+export default ({ device, doSelectDevice, allowMoreInfoVisible }: Props) => {
+    const [moreVisible, setMoreVisible] = useState(false);
+    const toggleMoreVisible = () => setMoreVisible(!moreVisible);
+
+    const deviceNameInputRef = useRef<HTMLInputElement>(null);
+    const startEditingDeviceName = () => {
+        deviceNameInputRef.current?.focus();
+    };
+
+    if (moreVisible && !allowMoreInfoVisible) {
+        setMoreVisible(false);
+    }
+
+    return (
+        <PseudoButton
+            className={classNames(
+                'device',
+                moreVisible && 'more-infos-visible'
+            )}
+            onClick={() => doSelectDevice(device, false)}
+        >
+            <BasicDeviceInfo
+                deviceNameInputRef={deviceNameInputRef}
+                device={device}
+                toggles={
+                    <>
+                        <FavoriteIndicator device={device} />
+                        <ShowMoreInfo
+                            isVisible={moreVisible}
+                            toggleVisible={toggleMoreVisible}
+                        />
+                    </>
+                }
+            />
+            {moreVisible && (
+                <>
+                    <MoreDeviceInfo device={device} />
+                    <EditDeviceButtons
+                        device={device}
+                        startEditingDeviceName={startEditingDeviceName}
+                    />
+                </>
+            )}
+        </PseudoButton>
+    );
+};

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

@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+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 { AnimatedItem, AnimatedList } from './AnimatedList';
+import BrokenDevice from './BrokenDevice';
+import Device from './Device';
+
+import './device-list.scss';
+
+const NoDevicesConnected = () => (
+    <div className="no-devices-connected">
+        Connect a{' '}
+        <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://www.nordicsemi.com/Software-and-tools/Development-Kits"
+        >
+            Nordic development kit
+        </a>{' '}
+        to your computer.
+    </div>
+);
+
+const NoSupportedDevicesConnected = () => (
+    <div className="no-devices-connected">No supported devices connected</div>
+);
+
+const showAllDevices = () => true;
+
+const sorted = (devices: DeviceProps[]) =>
+    [...devices].sort((a, b) => {
+        if (a.favorite !== b.favorite) {
+            return a.favorite ? -1 : 1;
+        }
+
+        return displayedDeviceName(a) < displayedDeviceName(b) ? -1 : 1;
+    });
+interface Props {
+    doSelectDevice: (device: DeviceProps, autoReselected: boolean) => void;
+    isVisible: boolean;
+    deviceFilter?: (device: DeviceProps) => boolean;
+}
+
+const DeviceList: FC<Props> = ({
+    isVisible,
+    doSelectDevice,
+    deviceFilter = showAllDevices,
+}) => {
+    const dispatch = useDispatch();
+    const autoReconnect = useSelector(getAutoReselect);
+    const devices = useSelector(getDevices);
+
+    const sortedDevices = useMemo(
+        () => sorted([...devices.values()]),
+        [devices]
+    );
+
+    const filteredDevices = useMemo(
+        () => sortedDevices.filter(deviceFilter),
+        [deviceFilter, sortedDevices]
+    );
+
+    return (
+        <div className={classNames('device-list', isVisible || 'hidden')}>
+            <div className="global-auto-reconnect">
+                <Toggle
+                    id="toggle-global-auto-reconnect"
+                    label="Auto Reconnect"
+                    isToggled={autoReconnect}
+                    onToggle={value => {
+                        dispatch(setAutoReselect(value));
+                    }}
+                />
+            </div>
+            {sortedDevices.length === 0 && <NoDevicesConnected />}
+            {sortedDevices.length > 0 && filteredDevices.length === 0 ? (
+                <NoSupportedDevicesConnected />
+            ) : (
+                <AnimatedList devices={sortedDevices}>
+                    {filteredDevices.map(device => (
+                        <AnimatedItem
+                            key={device.serialNumber}
+                            itemKey={device.serialNumber}
+                        >
+                            {device.traits.broken ? (
+                                <BrokenDevice device={device} />
+                            ) : (
+                                <Device
+                                    device={device}
+                                    doSelectDevice={doSelectDevice}
+                                    allowMoreInfoVisible={isVisible}
+                                />
+                            )}
+                        </AnimatedItem>
+                    ))}
+                </AnimatedList>
+            )}
+        </div>
+    );
+};
+
+export default DeviceList;

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+
+import { Device } from '../../deviceSlice';
+import { MakeDeviceFavorite } from '../Favorite';
+import RenameDevice from './RenameDevice';
+
+import './edit-device-buttons.scss';
+
+interface Props {
+    device: Device;
+    startEditingDeviceName: () => void;
+}
+
+const EditDeviceButtons: FC<Props> = ({ device, startEditingDeviceName }) => (
+    <ButtonGroup className="edit-device-buttons">
+        <MakeDeviceFavorite device={device} />
+        <RenameDevice startEditingDeviceName={startEditingDeviceName} />
+    </ButtonGroup>
+);
+
+export default EditDeviceButtons;

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

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+import { SerialPort } from '@nordicsemiconductor/nrf-device-lib-js';
+
+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" />
+        {children}
+    </div>
+);
+
+const PcaNumber = ({ device }: { device: Device }) => {
+    if (device.boardVersion == null) {
+        return null;
+    }
+
+    return <div>{device.boardVersion}</div>;
+};
+
+const MaybeDeviceName = ({ device }: { device: Device }) => {
+    const hasNickname = device.nickname !== '';
+    if (!hasNickname) {
+        return null;
+    }
+
+    return (
+        <div className="name">
+            {displayedDeviceName(device, { respectNickname: false })}
+        </div>
+    );
+};
+
+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">
+        <Row>
+            <PcaNumber device={device} />
+        </Row>
+        <Row>
+            <MaybeDeviceName device={device} />
+        </Row>
+        {device.serialPorts && (
+            <Row>
+                <Serialports ports={device.serialPorts} />
+            </Row>
+        )}
+    </div>
+);

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import PseudoButton from '../../../PseudoButton/PseudoButton';
+
+import './rename-device.scss';
+
+export default ({
+    startEditingDeviceName,
+}: {
+    startEditingDeviceName: () => void;
+}) => (
+    <PseudoButton className="rename-button" onClick={startEditingDeviceName}>
+        <span className="mdi mdi-pencil-circle pencil" />
+        Rename device
+    </PseudoButton>
+);

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../../variables';
+
+.core19-device-selector {
+    .broken-device {
+        display: flex;
+        flex-direction: column;
+
+        padding: 12px 0;
+        font-weight: $font-weight-light;
+
+        .icon {
+            transform: translateY(0);
+        }
+
+        .broken-device-info {
+            margin: 8px 0 8px 68px;
+            font-size: 12px;
+            p {
+                margin: 0;
+            }
+            p + p {
+                margin-top: 1em;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+ @use "sass:color";
+
+ @import "../../../variables";
+ 
+ .core19-device-selector {
+     .device-list {
+         @include scrollbars($gray-50);
+         background: $gray-50;
+         color: $gray-700;
+         display: flex;
+     flex-direction: column;
+ 
+         position: fixed;
+         width: $side-panel-width;
+         height: calc(100vh - #{$nav-bar-height});
+         z-index: -1;
+ 
+         overflow-y: overlay;
+ 
+         transition: transform $normal-transition;
+ 
+         &.hidden {
+             transform: translateY(-100%);
+         }
+ 
+         .no-devices-connected {
+             padding: 20px;
+         }
+ 
+         > ul {
+             padding: 0;
+             margin-bottom: 0;
+ 
+             > li {
+                 border-bottom: 1px solid $gray-200;
+             }
+         }
+     }
+ }
+ 
+ .global-auto-reconnect{
+     background-color: $gray-200;
+     color: $gray-700;
+     text-transform: uppercase;
+     padding: 8px 27px;
+ 
+     .toggle-label {
+         font-size: 10px;
+     }
+ 
+     .toggle {
+         label {
+             display: flex;
+             justify-content: flex-start;
+         }
+     }
+ }
+ 

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../../../variables";
+
+.core19-device-selector {
+    .device {
+        display: flex;
+        flex-direction: column;
+
+        padding: 12px 0;
+        font-weight: $font-weight-light;
+
+        .show-more { visibility: hidden; }
+
+        &:hover, &.more-infos-visible {
+            background: $white;
+            .show-more { visibility: visible; }
+        }
+
+        &.more-infos-visible {
+            padding-bottom: 0;
+        }
+    }
+}