@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre2 → 78.0.0

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;
+        }
+    }
+}

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;
+    }
+}