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

package/src/Device/BrokenDeviceDialog/BrokenDeviceDialog.tsx

@@ -1,58 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import { useDispatch, useSelector } from 'react-redux';
-
-import {
-    hideDialog,
-    info as infoSelector,
-    isVisible as isVisibleSelector,
-} from './brokenDeviceDialogSlice';
-
-import './broken-device-dialog.scss';
-
-const BrokenDeviceDialog = () => {
-    const dispatch = useDispatch();
-
-    const isVisible = useSelector(isVisibleSelector);
-    const { description, url } = useSelector(infoSelector);
-
-    return (
-        <Modal
-            show={isVisible}
-            onHide={() => dispatch(hideDialog())}
-            centered
-            className="broken-device-dialog"
-        >
-            <Modal.Header closeButton={false}>
-                <p>
-                    <b>Unusable device</b>
-                </p>
-
-                <span className="mdi mdi-alert" />
-            </Modal.Header>
-            <Modal.Body>
-                <p>{description}</p>
-                <a target="_blank" rel="noreferrer" href={url}>
-                    {url}
-                </a>
-            </Modal.Body>
-            <Modal.Footer>
-                <Button
-                    onClick={() => dispatch(hideDialog())}
-                    variant="secondary"
-                >
-                    Close
-                </Button>
-            </Modal.Footer>
-        </Modal>
-    );
-};
-
-export default BrokenDeviceDialog;

package/src/Device/BrokenDeviceDialog/broken-device-dialog.scss

@@ -1,18 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../../variables';
-
-.broken-device-dialog {
-    .modal-body {
-        p {
-            margin: 0;
-        }
-        p + p {
-            margin-bottom: 24px;
-        }
-    }
-}

package/src/Device/BrokenDeviceDialog/brokenDeviceDialogSlice.tsx

@@ -1,48 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import { createSlice } from '@reduxjs/toolkit';
-
-import type { RootState } from '../../store';
-
-export interface BrokenDeviceDialog {
-    isVisible: boolean;
-    description: string;
-    url: string;
-}
-
-const initialState: BrokenDeviceDialog = {
-    isVisible: false,
-    description: '',
-    url: '',
-};
-
-const slice = createSlice({
-    name: 'brokenDeviceDialog',
-    initialState,
-    reducers: {
-        showDialog: (state, action) => {
-            state.isVisible = true;
-            state.description = action.payload.description;
-            state.url = action.payload.url;
-        },
-        hideDialog: state => {
-            state.isVisible = false;
-        },
-    },
-});
-
-export const {
-    reducer,
-    actions: { hideDialog, showDialog },
-} = slice;
-
-export const isVisible = (state: RootState) =>
-    state.brokenDeviceDialog.isVisible;
-export const info = (state: RootState) => ({
-    description: state.brokenDeviceDialog.description,
-    url: state.brokenDeviceDialog.url,
-});

package/src/Device/DeviceSelector/BasicDeviceInfo.tsx

@@ -1,115 +0,0 @@
-/*
- * 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

@@ -1,27 +0,0 @@
-/*
- * 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

@@ -1,62 +0,0 @@
-/*
- * 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

@@ -1,34 +0,0 @@
-/*
- * 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

@@ -1,84 +0,0 @@
-/*
- * 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

@@ -1,113 +0,0 @@
-/*
- * 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

@@ -1,28 +0,0 @@
-/*
- * 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

@@ -1,65 +0,0 @@
-/*
- * 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

@@ -1,22 +0,0 @@
-/*
- * 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>
-);