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

package/src/SerialPort/ConflictingSettingsDialog.tsx

@@ -0,0 +1,226 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useEffect, useState } from 'react';
+import type { AutoDetectTypes } from '@serialport/bindings-cpp';
+import { SerialPortOpenOptions } from 'serialport';
+
+import { ConfirmationDialog } from '../Dialog/Dialog';
+import logger from '../logging';
+import classNames from '../utils/classNames';
+import {
+    createSerialPort,
+    getSerialPortOptions,
+    SerialPort,
+} from './SerialPort';
+
+const getCurrentOptions = async (
+    portPath: string,
+    setSettings: (options: SerialPortOpenOptions<AutoDetectTypes>) => void
+) => {
+    try {
+        const options = await getSerialPortOptions(portPath);
+        if (options) {
+            setSettings(options);
+        }
+    } catch (err) {
+        console.error(err);
+    }
+};
+
+interface ConflictingSettingsDialog {
+    isVisible: boolean;
+    onOverwrite: () => void;
+    onCancel: () => void;
+    localSettings: SerialPortOpenOptions<AutoDetectTypes>;
+    setSerialPortCallback: (serialPort: SerialPort) => void;
+}
+
+const ConflictingSettingsDialog = ({
+    isVisible,
+    onOverwrite,
+    onCancel,
+    localSettings,
+    setSerialPortCallback,
+}: ConflictingSettingsDialog) => {
+    const [activeSettings, setSettings] =
+        useState<SerialPortOpenOptions<AutoDetectTypes>>();
+
+    useEffect(() => {
+        if (isVisible) {
+            getCurrentOptions(localSettings.path, setSettings);
+        }
+    }, [isVisible, localSettings.path]);
+
+    const connectToSelectedSerialPort = async (
+        overwrite: boolean,
+        newSettings: SerialPortOpenOptions<AutoDetectTypes>
+    ) => {
+        try {
+            const port = await createSerialPort(newSettings, {
+                overwrite,
+                settingsLocked: false,
+            });
+            setSerialPortCallback(port);
+        } catch (error) {
+            const msg = (error as Error).message;
+            if (msg.includes('FAILED_DIFFERENT_SETTINGS')) {
+                onCancel();
+            } else {
+                console.error(
+                    'Port could not be opened. Verify it is not used by some other applications'
+                );
+            }
+        }
+    };
+
+    return (
+        <ConfirmationDialog
+            title={`Conflicting Serial Settings for ${localSettings.path}`}
+            isVisible={isVisible}
+            size="lg"
+            className="tw-preflight"
+            onCancel={onCancel}
+            optionalLabel="Overwrite with Selected"
+            onOptional={onOverwrite}
+            confirmLabel="Continue with Active"
+            onConfirm={() => {
+                onCancel();
+                if (activeSettings) {
+                    connectToSelectedSerialPort(true, activeSettings);
+                } else {
+                    logger.error(
+                        'Could not get the active serial port settings.'
+                    );
+                }
+            }}
+        >
+            <div className="tw-flex tw-flex-col tw-gap-4">
+                <p>
+                    You are about to connect to{' '}
+                    <code>{localSettings.path}</code>. This port is already
+                    active with different serial settings - most likely it is
+                    opened by another nRF Connect app running on your computer.
+                </p>
+                <p>
+                    You may continue with the active serial port settings or
+                    choose to overwrite these with the settings you have
+                    selected. If you choose to overwrite the active settings,
+                    the port will be closed and reopened with the new settings.
+                    Alternatively, you can close the port in the other app and
+                    try again.
+                </p>
+                <p>
+                    The serial settings depend on the attached device and
+                    it&apos;s embedded application, and normally the serial port
+                    settings for all nRF Connect apps should be the same for a
+                    given serial port.
+                </p>
+                <DisplayConflictingSettings
+                    activeSettings={activeSettings}
+                    localSettings={localSettings}
+                />
+            </div>
+        </ConfirmationDialog>
+    );
+};
+
+type DisplayConflictingSettings = {
+    activeSettings?: SerialPortOpenOptions<AutoDetectTypes>;
+    localSettings: SerialPortOpenOptions<AutoDetectTypes>;
+};
+
+const DisplayConflictingSettings = ({
+    activeSettings,
+    localSettings,
+}: DisplayConflictingSettings) => {
+    const allKeys = Object.keys(localSettings);
+    if (activeSettings) {
+        Object.keys(activeSettings).forEach(key => {
+            if (!allKeys.includes(key)) {
+                allKeys.push(key);
+            }
+        });
+    }
+    allKeys.splice(allKeys.indexOf('path'), 1);
+
+    const conflictingSettings = activeSettings
+        ? allKeys.filter(
+              key =>
+                  activeSettings[key as keyof typeof activeSettings] !==
+                  localSettings[key as keyof typeof localSettings]
+          )
+        : [];
+
+    return (
+        <div className="tw-preflight tw-my-4 tw-flex tw-w-full tw-justify-start">
+            <div className="tw-pr-7">
+                {activeSettings ? (
+                    <ul>
+                        <li className="tw-p-1 tw-font-bold">Active settings</li>
+                        {allKeys.map(key => (
+                            <li
+                                key={key}
+                                className={`tw-p-1 ${classNames(
+                                    conflictingSettings.includes(key)
+                                        ? 'tw-bg-red-100'
+                                        : 'tw-bg-green-100'
+                                )}`}
+                            >
+                                <span className="tw-font-semibold">{`${key}: `}</span>
+                                {prettifyValue(
+                                    activeSettings[
+                                        key as keyof typeof activeSettings
+                                    ]
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p>Could not retrieve the current settings</p>
+                )}
+            </div>
+            <div className="tw-pr-7">
+                <ul>
+                    <li className="tw-p-1 tw-font-bold">Selected settings</li>
+                    {allKeys.map(key => (
+                        <li
+                            className={`tw-p-1 ${classNames(
+                                conflictingSettings.includes(key)
+                                    ? 'tw-bg-red-100'
+                                    : 'tw-bg-green-100'
+                            )}`}
+                            key={key}
+                        >
+                            <span className="tw-font-semibold">{`${key}: `}</span>
+                            {prettifyValue(
+                                localSettings[key as keyof typeof localSettings]
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+const prettifyValue = (value: unknown) => {
+    if (typeof value === 'boolean') {
+        return value ? 'on' : 'off';
+    }
+
+    if (typeof value === 'string' || typeof value === 'number') {
+        return value;
+    }
+
+    if (value == null) {
+        return 'N/A';
+    }
+
+    return JSON.stringify(value);
+};
+
+export default ConflictingSettingsDialog;

package/src/SerialPort/SerialPort.test.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2022 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { ipcRenderer } from 'electron';
+
+import { OverwriteOptions, SERIALPORT_CHANNEL } from '../../main';
+import { createSerialPort } from './SerialPort';
+
+jest.mock('electron', () => ({
+    ipcRenderer: { invoke: jest.fn(), on: jest.fn(), send: jest.fn() },
+}));
+
+const defaultOptions = { path: '/dev/ROBOT', baudRate: 115200 };
+
+test('SerialPort is initialized with the correct setup', async () => {
+    const port = await createSerialPort(defaultOptions);
+
+    expect(ipcRenderer.invoke).toHaveBeenCalledWith(
+        SERIALPORT_CHANNEL.OPEN,
+        defaultOptions,
+        { overwrite: false, settingsLocked: false }
+    );
+
+    expect(port.path).toBe(defaultOptions.path);
+});
+
+test('SerialPort may be initialized with overwrite and settingsLocked', async () => {
+    let overwriteOptions: OverwriteOptions = { overwrite: true };
+    await createSerialPort(defaultOptions, overwriteOptions);
+    expect(ipcRenderer.invoke).toHaveBeenCalledWith(
+        SERIALPORT_CHANNEL.OPEN,
+        defaultOptions,
+        overwriteOptions
+    );
+
+    overwriteOptions = { settingsLocked: true };
+    await createSerialPort(defaultOptions, overwriteOptions);
+    expect(ipcRenderer.invoke).toHaveBeenCalledWith(
+        SERIALPORT_CHANNEL.OPEN,
+        defaultOptions,
+        overwriteOptions
+    );
+
+    overwriteOptions = { settingsLocked: true, overwrite: true };
+    await createSerialPort(defaultOptions, overwriteOptions);
+    expect(ipcRenderer.invoke).toHaveBeenCalledWith(
+        SERIALPORT_CHANNEL.OPEN,
+        defaultOptions,
+        overwriteOptions
+    );
+});

package/src/SerialPort/SerialPort.ts

@@ -0,0 +1,202 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import type {
+    AutoDetectTypes,
+    SetOptions,
+    UpdateOptions,
+} from '@serialport/bindings-cpp';
+import { ipcRenderer } from 'electron';
+import EventEmitter from 'events';
+import type { SerialPortOpenOptions } from 'serialport';
+
+import { OverwriteOptions, SERIALPORT_CHANNEL } from '../../main';
+import logger from '../logging';
+
+export type SerialPort = Awaited<ReturnType<typeof createSerialPort>>;
+
+export const createSerialPort = async (
+    options: SerialPortOpenOptions<AutoDetectTypes>,
+    overwriteOptions: OverwriteOptions = {
+        overwrite: false,
+        settingsLocked: false,
+    }
+) => {
+    const { path } = options;
+    const eventEmitter = new EventEmitter();
+    let closed = false;
+
+    ipcRenderer.on(`${SERIALPORT_CHANNEL.ON_DATA}_${path}`, (_event, data) =>
+        eventEmitter.emit('onData', data)
+    );
+    ipcRenderer.on(`${SERIALPORT_CHANNEL.ON_CLOSED}_${path}`, () => {
+        eventEmitter.emit('onClosed');
+        closed = true;
+    });
+    ipcRenderer.on(
+        `${SERIALPORT_CHANNEL.ON_UPDATE}_${path}`,
+        (_event, newOptions) => eventEmitter.emit('onUpdate', newOptions)
+    );
+    ipcRenderer.on(
+        `${SERIALPORT_CHANNEL.ON_SET}_${path}`,
+        (_event, newOptions) => eventEmitter.emit('onSet', newOptions)
+    );
+    ipcRenderer.on(
+        `${SERIALPORT_CHANNEL.ON_CHANGED}_${path}`,
+        (_event, newOptions) => eventEmitter.emit('onChange', newOptions)
+    );
+
+    // The origin of this event is emitted when a renderer writes to the port.
+    ipcRenderer.on(`${SERIALPORT_CHANNEL.ON_WRITE}_${path}`, (_event, data) =>
+        eventEmitter.emit('onDataWritten', data)
+    );
+
+    const write = (data: string | number[] | Buffer): void => {
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.WRITE, path, data);
+    };
+
+    const isOpen = (): Promise<boolean> =>
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.IS_OPEN, path);
+
+    const close = async () => {
+        if (closed) return;
+        const error = await ipcRenderer.invoke(SERIALPORT_CHANNEL.CLOSE, path);
+        if (error) {
+            // IPC only carries the error message, that's why we throw new Error.
+            throw new Error(error);
+        }
+
+        try {
+            if (await isOpen()) {
+                logger.info(
+                    `Port ${options.path} still in use by other window(s)`
+                );
+            }
+        } catch {
+            logger.info(`Closed port: ${options.path}`);
+        }
+    };
+
+    // Only supports baudRate, same as serialport.io
+    const update = (newOptions: UpdateOptions) => {
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.UPDATE, path, newOptions);
+    };
+
+    const set = (newOptions: SetOptions) => {
+        ipcRenderer.invoke(SERIALPORT_CHANNEL.SET, path, newOptions);
+    };
+
+    const getOptions = ():
+        | Promise<SerialPortOpenOptions<AutoDetectTypes>>
+        | undefined => ipcRenderer.invoke(SERIALPORT_CHANNEL.GET_OPTIONS, path);
+
+    const openWithRetries = async (retryCount: number) => {
+        try {
+            return (await ipcRenderer.invoke(
+                SERIALPORT_CHANNEL.OPEN,
+                options,
+                overwriteOptions
+            )) as string;
+        } catch (error) {
+            if (
+                (error as Error).message.includes(
+                    'PORT_IS_ALREADY_BEING_OPENED'
+                ) &&
+                retryCount > 0
+            ) {
+                return new Promise<string>(resolve => {
+                    setTimeout(async () => {
+                        resolve(
+                            (await openWithRetries(retryCount - 1)) as string
+                        );
+                    }, 50 + Math.random() * 100);
+                });
+            }
+            return Promise.resolve<string>((error as Error).message);
+        }
+    };
+
+    const error = await openWithRetries(3);
+
+    if (error) {
+        if (error.includes('FAILED_DIFFERENT_SETTINGS')) {
+            logger.warn(
+                `Failed to connect to port: ${path}. Port is open with different settings.`
+            );
+        } else {
+            logger.error(
+                `Failed to connect to port: ${path}. Make sure the port is not already taken, if you are not sure, try to power cycle the device and try to connect again.`
+            );
+        }
+        throw new Error(error);
+    } else {
+        logger.info(`Opened port with options: ${JSON.stringify(options)}`);
+    }
+
+    return {
+        path,
+        write,
+        close,
+        isOpen,
+        update,
+        set,
+        getOptions,
+        onData: (handler: (data: Uint8Array) => void) => {
+            eventEmitter.on('onData', handler);
+            return () => {
+                eventEmitter.removeListener('onData', handler);
+            };
+        },
+        onClosed: (handler: () => void) => {
+            eventEmitter.on('onClosed', handler);
+            return () => {
+                eventEmitter.removeListener('onClosed', handler);
+            };
+        },
+        onUpdate: (handler: (newOptions: UpdateOptions) => void) => {
+            eventEmitter.on('onUpdate', handler);
+            return () => {
+                eventEmitter.removeListener('onUpdate', handler);
+            };
+        },
+        onSet: (handler: (newOptions: SetOptions) => void) => {
+            eventEmitter.on('onSet', handler);
+            return () => {
+                eventEmitter.removeListener('onSet', handler);
+            };
+        },
+        onChange: (
+            handler: (
+                newOptions: SerialPortOpenOptions<AutoDetectTypes>
+            ) => void
+        ) => {
+            eventEmitter.on('onChange', handler);
+            return () => {
+                eventEmitter.removeListener('onChange', handler);
+            };
+        },
+        onDataWritten: (handler: (data: Uint8Array) => void) => {
+            eventEmitter.on('onDataWritten', handler);
+            return () => {
+                eventEmitter.removeListener('onDataWritten', handler);
+            };
+        },
+    };
+};
+
+export const getSerialPortOptions = async (
+    path: string
+): Promise<SerialPortOpenOptions<AutoDetectTypes> | undefined> => {
+    try {
+        console.log('will fetch options from path=', path);
+        return (await ipcRenderer.invoke(
+            SERIALPORT_CHANNEL.GET_OPTIONS,
+            path
+        )) as SerialPortOpenOptions<AutoDetectTypes> | undefined;
+    } catch (error) {
+        logger.error(`Failed to get options for port: ${path}`);
+    }
+};

package/src/Shortcuts/Shortcut-item.scss

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables.scss';
+
+.shortcut-item {
+    border-top: 1px solid $gray-100;
+    padding-top: 20px;
+    overflow: auto;
+    .shortcut-title {
+        display: inline;
+    }
+    .shortcuts {
+        float: right;
+        .shortcut-element {
+            display: 'block';
+            margin-bottom: 20px;
+            .shortcut-span {
+                background-color: $gray-100;
+                padding: 8px;
+                border-radius: 5px;
+                box-shadow: 0 2px $gray-200;
+            }
+            .separator-span {
+                background-color: $white;
+                padding: 8px;
+            }
+        }
+    }
+}

package/src/Shortcuts/Shortcut-modal.scss

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables.scss';
+
+.shortcut-modal {
+    color: $gray-900;
+    .list-header {
+        margin-bottom: 20px;
+    }
+    .shortcut-lists {
+        margin: 10px 20px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 10ex;
+    }
+}

package/src/Shortcuts/ShortcutItem.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import './Shortcut-item.scss';
+
+export interface Props {
+    title: string;
+    hotKey: string[] | string;
+}
+
+const ShortcutItem: FC<Props> = ({ title, hotKey }) => {
+    const shortcutComboKeys: string[][] = !Array.isArray(hotKey)
+        ? [hotKey.split('+')]
+        : hotKey.map(element => element.split('+'));
+
+    return (
+        <div className="shortcut-item">
+            <h5 className="shortcut-title">{title}</h5>
+            <div className="shortcuts">
+                {shortcutComboKeys.map(shortcutKeys => (
+                    <div
+                        key={shortcutKeys.toString()}
+                        className="shortcut-element"
+                    >
+                        {shortcutKeys.map(shortcutKey => (
+                            <span key={shortcutKey}>
+                                <span className="shortcut-span">
+                                    {shortcutKey}
+                                </span>
+                                {shortcutKey !==
+                                    shortcutKeys[shortcutKeys.length - 1] && (
+                                    <span className="separator-span">+</span>
+                                )}
+                            </span>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ShortcutItem;

package/src/Shortcuts/ShortcutModal.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import { useSelector } from 'react-redux';
+
+import { globalShortcuts, localShortcuts } from '../About/shortcutSlice';
+import ShortcutItem from './ShortcutItem';
+
+import './Shortcut-modal.scss';
+
+export interface Props {
+    isVisible: boolean;
+    onCancel: () => void;
+}
+
+const ShortcutModal: FC<Props> = ({ isVisible, onCancel }) => {
+    const local = useSelector(localShortcuts);
+    const global = useSelector(globalShortcuts);
+
+    return (
+        <Modal
+            show={isVisible}
+            onHide={onCancel}
+            size="lg"
+            className="shortcut-modal"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title>
+                    <h3>Shortcuts</h3>
+                </Modal.Title>
+            </Modal.Header>
+            <Modal.Body className="shortcut-lists">
+                <>
+                    {local.length > 0 && (
+                        <div>
+                            <h4 className="list-header">In this app</h4>
+                            {local.map(shortcut => (
+                                <ShortcutItem
+                                    key={shortcut.title}
+                                    title={shortcut.title}
+                                    hotKey={shortcut.hotKey}
+                                />
+                            ))}
+                        </div>
+                    )}
+                    <div>
+                        <h4 className="list-header">In all apps</h4>
+                        {global.map(shortcut => (
+                            <ShortcutItem
+                                key={shortcut.title}
+                                title={shortcut.title}
+                                hotKey={shortcut.hotKey}
+                            />
+                        ))}
+                    </div>
+                </>
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default ShortcutModal;