@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/NavBar/nav-bar.scss

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.core19-nav-bar {
+    width: 100%;
+    height: $nav-bar-height;
+
+    background-color: $white;
+
+    display: flex;
+    flex: none;
+    flex-direction: row;
+    align-items: center;
+
+    z-index: 100;
+
+    .core19-nav-bar-device-selector {
+        width: $side-panel-width;
+        align-self: start;
+    }
+}

package/src/NavBar/nav-menu-item.scss

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-nav-menu-item {
+    margin-left: 29px;
+    border: none;
+    background: none;
+
+    &.first {
+        margin-left: 20px;
+    }
+
+    padding: 0;
+
+    font-size: 14px;
+    font-weight: $font-weight-light;
+    color: $gray-700;
+    text-transform: uppercase;
+
+    &.selected {
+        font-weight: $font-weight-bold;
+    }
+
+    &:focus,
+    &:hover {
+        text-decoration: none;
+        color: inherit;
+    }
+}

package/src/OpenApp/openApp.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { ipcRenderer } from 'electron';
+
+import type { OpenAppOptions } from '../../main';
+
+type AppSpec = { name: string; source: string };
+
+export const openAppWindow = (
+    app: AppSpec,
+    openAppOptions?: OpenAppOptions
+) => {
+    ipcRenderer.send('open:app', app, openAppOptions);
+};

package/src/Panes/FeedbackPane.tsx

@@ -0,0 +1,149 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useState } from 'react';
+
+import Button from '../Button/Button';
+import logger from '../logging';
+import { isDevelopment } from '../utils/environment';
+import packageJson from '../utils/packageJson';
+
+export default () => {
+    const [feedback, setFeedback] = useState('');
+    const [sayThankYou, setSayThankYou] = useState(false);
+
+    if (sayThankYou === true) {
+        return (
+            <div className="w-100 d-flex justify-content-center">
+                <div className="d-flex flex-column justify-content-center align-items-start bg-white px-3 py-4">
+                    <b className="mb-3">Thank you!</b>
+                    <section>
+                        <p>
+                            We value your feedback and any ideas you may have
+                            for improving our applications.
+                        </p>
+                        <p>
+                            Click the button below in order to send more
+                            feedback.
+                        </p>
+                    </section>
+                    <Button
+                        large
+                        className="align-self-end"
+                        onClick={() => {
+                            setSayThankYou(false);
+                            setFeedback('');
+                        }}
+                        variant="secondary"
+                    >
+                        Give more feedback
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="w-100 d-flex justify-content-center">
+            <div className="d-flex flex-column justify-content-center align-items-start bg-white px-3 py-4">
+                <b className="mb-3">Give Feedback</b>
+                <section>
+                    <p>
+                        We value your feedback and any ideas you may have for
+                        improving our applications. Please use the form below to
+                        give feedback.
+                    </p>
+                    <p>
+                        Note: this is not a support channel, and you will not
+                        receive a response. For help and support, visit the{' '}
+                        <a
+                            href="https://devzone.nordicsemi.com/"
+                            target="_blank"
+                            rel="noreferrer noopener"
+                        >
+                            Nordic DevZone
+                        </a>
+                        .
+                    </p>
+                </section>
+                <form className="d-flex flex-column w-100">
+                    <label htmlFor="feedback-text">
+                        <b>What is your feedback?</b>
+                        <textarea
+                            name="feedback-text"
+                            className="w-100 mb-3"
+                            style={{ height: '8rem' }}
+                            required
+                            value={feedback}
+                            onChange={e => setFeedback(e.target.value)}
+                        />
+                    </label>
+                </form>
+                <section>
+                    <p>
+                        We only collect this information when you send feedback:
+                    </p>
+                    <ul>
+                        <li>Application name</li>
+                        <li>Your feedback</li>
+                        <li>Operating system</li>
+                    </ul>
+                </section>
+                <Button
+                    large
+                    className="align-self-end"
+                    variant="primary"
+                    onClick={() => handleFormData(feedback, setSayThankYou)}
+                    disabled={feedback === ''}
+                >
+                    Send Feedback
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+const formURL =
+    isDevelopment === true
+        ? 'https://formkeep.com/f/8deb409a565'
+        : 'https://formkeep.com/f/36b394b92851';
+
+const handleFormData = async (
+    feedback: string,
+    setResponse: (response: boolean) => void
+) => {
+    const data = {
+        name: getAppName(),
+        feedback,
+        platform: process.platform,
+    };
+
+    try {
+        const response = await fetch(formURL, {
+            method: 'POST',
+            body: JSON.stringify(data),
+            headers: {
+                'Content-Type': 'application/json',
+                enctype: 'multipart/form-data',
+            },
+        });
+
+        if (response.ok) {
+            setResponse(true);
+            return;
+        }
+
+        logger.error(
+            `FeedbackForm: Server responded with status code ${response.status}`
+        );
+    } catch (error: unknown) {
+        logger.error(
+            `FeedbackForm: Could not send feedback. ${JSON.stringify(error)}`
+        );
+    }
+};
+
+const getAppName = () => packageJson().name;

package/src/PseudoButton/PseudoButton.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import './pseudo-button.scss';
+
+const invokeIfSpaceOrEnterPressed =
+    (onClick: React.KeyboardEventHandler<Element>) =>
+    (event: React.KeyboardEvent) => {
+        event.stopPropagation();
+        if (event.key === ' ' || event.key === 'Enter') {
+            onClick(event);
+        }
+    };
+
+const blurAndInvoke =
+    (
+        onClick: React.MouseEventHandler<HTMLElement>
+    ): React.MouseEventHandler<HTMLElement> =>
+    (event: React.MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+        event.currentTarget.blur();
+        onClick(event);
+    };
+
+// Motivation for this class: A normal button in HTML must not contain divs or other buttons,
+// but we do have things that behave like buttons and at the same time should contain such things
+export default ({
+    onClick = () => {},
+    className = '',
+    children,
+    title,
+    testId,
+}: {
+    onClick?: React.EventHandler<React.SyntheticEvent>;
+    className?: string;
+    children?: React.ReactNode;
+    title?: string;
+    testId?: string;
+}) => (
+    <div
+        role="button"
+        className={`core19-pseudo-button ${className}`}
+        tabIndex={0}
+        onClick={blurAndInvoke(onClick)}
+        onKeyUp={invokeIfSpaceOrEnterPressed(onClick)}
+        title={title}
+        data-testid={testId}
+    >
+        {children}
+    </div>
+);

package/src/PseudoButton/pseudo-button.scss

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.core19-pseudo-button {
+    cursor: pointer;
+}

package/src/SerialPort/ConflictingSettingsDialog.tsx

@@ -0,0 +1,242 @@
+/*
+ * 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 {
+    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 (!activeSettings) {
+            getCurrentOptions(localSettings.path, setSettings);
+        }
+    }, [isVisible, activeSettings, 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"
+            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.'
+                    );
+                }
+            }}
+        >
+            <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}
+            />
+        </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);
+            }
+        });
+    }
+
+    const conflictingSettings = activeSettings
+        ? allKeys.filter(
+              key =>
+                  activeSettings[key as keyof typeof activeSettings] !==
+                  localSettings[key as keyof typeof localSettings]
+          )
+        : [];
+
+    return (
+        <div
+            style={{
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'flex-start',
+                margin: '32px 0',
+            }}
+        >
+            <div style={{ marginRight: '128px' }}>
+                <b>Active settings</b>
+                {activeSettings ? (
+                    <ul style={listStyle}>
+                        {allKeys.map(key => (
+                            <li
+                                key={key}
+                                style={{
+                                    ...listItemStyle,
+                                    backgroundColor:
+                                        conflictingSettings.includes(key)
+                                            ? '#FFCDD2'
+                                            : undefined,
+                                }}
+                            >
+                                {key}:
+                                {prettifyValue(
+                                    activeSettings[
+                                        key as keyof typeof activeSettings
+                                    ]
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p>Could not retrieve the current settings</p>
+                )}
+            </div>
+            <div>
+                <b>Selected settings</b>
+                <ul style={listStyle}>
+                    {allKeys.map(key => (
+                        <li
+                            key={key}
+                            style={{
+                                ...listItemStyle,
+                                backgroundColor: conflictingSettings.includes(
+                                    key
+                                )
+                                    ? '#FFCDD2'
+                                    : undefined,
+                            }}
+                        >
+                            {key}:
+                            {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;
+
+const listStyle: React.CSSProperties = {
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+};
+
+const listItemStyle: React.CSSProperties = {
+    padding: '4px 0',
+};

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