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

package/src/About/Section.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+
+interface Props {
+    title?: string;
+    children?: ReactNode;
+}
+
+export default ({ children, title }: Props) => (
+    <div className="tw-preflight tw-w-full">
+        {title != null && <h3 className="tw-pb-1 tw-font-medium">{title}</h3>}
+        <div className="tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+            {children}
+        </div>
+    </div>
+);

package/src/About/ShortcutButton.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, useState } from 'react';
+
+import Button from '../Button/Button';
+import ShortcutModal from '../Shortcuts/ShortcutModal';
+import useHotKey from '../utils/useHotKey';
+
+interface Props {
+    label: string;
+}
+
+const ShortcutButton: FC<Props> = ({ label }) => {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const toggleModalVisible = () => setIsModalVisible(!isModalVisible);
+
+    useHotKey({
+        hotKey: '?',
+        title: 'Open shortcut overview',
+        isGlobal: true,
+        action: () => toggleModalVisible(),
+    });
+
+    return (
+        <>
+            <Button variant="secondary" onClick={toggleModalVisible}>
+                {label}
+            </Button>
+            <ShortcutModal
+                isVisible={isModalVisible}
+                onCancel={toggleModalVisible}
+            />
+        </>
+    );
+};
+
+export default ShortcutButton;

package/src/About/SupportCard.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getCurrentWindow } from '@electron/remote';
+
+import Button from '../Button/Button';
+import Card from '../Card/Card';
+import { setVerboseDeviceLibLogging } from '../Device/deviceLibWrapper';
+import {
+    deviceInfo,
+    getDevices,
+    selectedSerialNumber,
+} from '../Device/deviceSlice';
+import {
+    isLoggingVerboseSelector,
+    toggleIsLoggingVerbose,
+} from '../Log/logSlice';
+import { Toggle } from '../Toggle/Toggle';
+import { persistIsLoggingVerbose } from '../utils/persistentStore';
+import systemReport from '../utils/systemReport';
+import AboutButton from './AboutButton';
+import Section from './Section';
+
+export default () => {
+    const dispatch = useDispatch();
+    const devices = useSelector(getDevices);
+    const currentSerialNumber = useSelector(selectedSerialNumber);
+    const verboseLogging = useSelector(isLoggingVerboseSelector);
+    const currentDevice = useSelector(deviceInfo);
+
+    return (
+        <Card title="Support">
+            <div className="tw-preflight tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+                <Section title="DevZone">
+                    <p>
+                        All support requests must be sent through our developer
+                        portal DevZone.
+                    </p>
+                    <AboutButton
+                        url="https://devzone.nordicsemi.com"
+                        label="Go to DevZone"
+                    />
+                </Section>
+                <Section title="System report">
+                    <p>
+                        In order to get the best support it is helpful for our
+                        employees to know details about your operating system
+                        and related software. Create a system report and add to
+                        your support request.
+                    </p>
+                    <AboutButton
+                        onClick={() =>
+                            systemReport(
+                                [...devices.values()],
+                                currentSerialNumber as string,
+                                currentDevice
+                            )
+                        }
+                        label="Create system report"
+                    />
+                </Section>
+                <Section title="Verbose Logging">
+                    <p>
+                        Aid our support team with additional log information.
+                        Enable this only when necessary as the log will grow
+                        quickly.
+                    </p>
+                    <div className="tw-w-full">
+                        <Toggle
+                            id="enableVerboseLoggin"
+                            label="VERBOSE LOGGING"
+                            onToggle={() => {
+                                setVerboseDeviceLibLogging(!verboseLogging);
+                                dispatch(toggleIsLoggingVerbose());
+                            }}
+                            isToggled={verboseLogging}
+                            variant="primary"
+                        />
+                    </div>
+                    <Section>
+                        <Button
+                            variant="secondary"
+                            onClick={() => {
+                                persistIsLoggingVerbose(true);
+                                getCurrentWindow().emit('restart-window');
+                            }}
+                            title="Restart application with verbose logging turned on to get log messages from initial enumeration"
+                            disabled={!verboseLogging}
+                        >
+                            Restart with verbose logging
+                        </Button>
+                    </Section>
+                </Section>
+            </div>
+        </Card>
+    );
+};

package/src/About/about.scss

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.about {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    .about-inner {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+        width: 100%;
+        margin: auto;
+        padding-bottom: 16px;
+        padding-right: 16px;
+        .card {
+            min-width: 230px;
+            max-width: 20em;
+            margin-left: 8px;
+            margin-bottom: 8px;
+        }
+        .card-body {
+            margin-bottom: 1em;
+        }
+        .factory-reset-button {
+            height: 24px;
+            padding: 0;
+        }
+    }
+    button {
+        width: 100%;
+    }
+}

package/src/About/shortcutSlice.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { enableMapSet } from 'immer';
+
+import type { RootState } from '../store';
+
+enableMapSet();
+
+export interface Shortcut {
+    hotKey: string[] | string;
+    title: string;
+    isGlobal: boolean;
+    action: () => void;
+}
+
+export type ShortcutState = Set<Shortcut>;
+
+const initialState: ShortcutState = new Set();
+
+const slice = createSlice({
+    name: 'shortcuts',
+    initialState,
+    reducers: {
+        addShortcut: (state, action: PayloadAction<Shortcut>) => {
+            state.add(action.payload);
+        },
+        removeShortcut: (state, action: PayloadAction<Shortcut>) => {
+            state.delete(action.payload);
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: { addShortcut, removeShortcut },
+} = slice;
+
+const sortedShortcuts = (shortcuts: Iterable<Shortcut>, global: boolean) =>
+    Array.from(shortcuts)
+        .filter(shortcut => shortcut.isGlobal === global)
+        .sort((s1, s2) => s1.title.localeCompare(s2.title));
+
+export const globalShortcuts = (state: RootState) =>
+    sortedShortcuts(state.shortcuts, true);
+
+export const localShortcuts = (state: RootState) =>
+    sortedShortcuts(state.shortcuts, false);

package/src/Alert/Alert.module.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+ 
+@import '../variables.scss';
+
+.container {
+    border-radius: 0;
+    color: white;
+    border: 0; 
+
+    &.info {
+        background-color: $nordic-blue;
+    }
+
+    &.warning {
+        background-color: $brand-warning;
+    }
+
+    &.success {
+        background-color: $brand-success;
+    }
+
+    &.danger {
+        background-color: $brand-danger;
+    }
+}

package/src/Alert/Alert.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import BootstrapAlert from 'react-bootstrap/Alert';
+
+import styles from './Alert.module.scss';
+
+type Variant = 'info' | 'warning' | 'success' | 'danger';
+export interface AlertProps {
+    variant: Variant;
+    label?: React.ReactNode;
+    dismissable?: boolean;
+    onClose?: () => void;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+    children,
+    label,
+    variant,
+    dismissable = false,
+    onClose,
+}) => (
+    <BootstrapAlert
+        variant={variant}
+        dismissible={dismissable}
+        onClose={onClose}
+        className={`${styles.container} ${styles[variant]}`}
+    >
+        {label && <strong>{label}</strong>}
+        {/* eslint-disable-next-line react/jsx-no-useless-fragment -- I think we need a fragment because children could also be an array of components */}
+        <>{children}</>
+    </BootstrapAlert>
+);

package/src/App/App.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import render from '../../test/testrenderer';
+import App, { Pane } from './App';
+
+jest.mock('../Log/LogViewer', () => ({
+    __esModule: true,
+    default: () => null,
+}));
+
+const renderApp = (panes: Pane[]) => {
+    const dummyReducer = (s = null) => s;
+    const dummyNode = <div />;
+
+    return render(
+        <App
+            appReducer={dummyReducer}
+            deviceSelect={dummyNode}
+            sidePanel={dummyNode}
+            panes={panes}
+        />
+    );
+};
+
+const aPane = {
+    name: 'an menu item',
+    Main: () => <div>A pane</div>,
+};
+const anotherPane = {
+    name: 'another menu item',
+    Main: () => <div>Another pane</div>,
+};
+
+describe('App', () => {
+    it('automatically gets an About pane attached', () => {
+        renderApp([aPane, anotherPane]);
+
+        expect(screen.getByText('About')).toBeInTheDocument();
+    });
+});

package/src/App/App.tsx

@@ -0,0 +1,252 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import 'focus-visible';
+
+import React, { FC, ReactNode, useEffect, useMemo } from 'react';
+import Carousel from 'react-bootstrap/Carousel';
+import { useDispatch, useSelector } from 'react-redux';
+import { Reducer } from 'redux';
+
+import { inMain as openWindow } from '../../ipc/openWindow';
+import About from '../About/About';
+import BrokenDeviceDialog from '../Device/BrokenDeviceDialog/BrokenDeviceDialog';
+import { setAutoReselect } from '../Device/deviceAutoSelectSlice';
+import {
+    getDevices,
+    selectedDevice as selectedDeviceSelector,
+    selectedSerialNumber as selectedSerialNumberSelector,
+} from '../Device/deviceSlice';
+import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
+import ErrorDialog from '../ErrorDialog/ErrorDialog';
+import FlashMessages from '../FlashMessage/FlashMessage';
+import LogViewer from '../Log/LogViewer';
+import NavBar from '../NavBar/NavBar';
+import FeedbackPane, { FeedbackPaneProps } from '../Panes/FeedbackPane';
+import classNames from '../utils/classNames';
+import packageJson from '../utils/packageJson';
+import { getPersistedCurrentPane } from '../utils/persistentStore';
+import { init as usageDataInit } from '../utils/usageData';
+import useHotKey from '../utils/useHotKey';
+import {
+    currentPane as currentPaneSelector,
+    isLogVisible as isLogVisibleSelector,
+    isSidePanelVisible as isSidePanelVisibleSelector,
+    setCurrentPane,
+    setPanes,
+    toggleLogVisible,
+} from './appLayout';
+import ConnectedToStore from './ConnectedToStore';
+import VisibilityBar from './VisibilityBar';
+
+import './app.scss';
+import './shared.scss';
+import './tailwind.css';
+
+let usageDataAlreadyInitialised = false;
+const initialiseUsageData = () => {
+    if (!usageDataAlreadyInitialised) {
+        usageDataAlreadyInitialised = true;
+        try {
+            usageDataInit(packageJson());
+        } catch (error) {
+            // No need to display the error message for the user
+            console.log(error);
+        }
+    }
+};
+
+export interface PaneProps {
+    active: boolean;
+}
+
+export interface Pane {
+    name: string;
+    Main: FC<PaneProps>;
+    SidePanel?: FC;
+}
+
+interface ConnectedAppProps {
+    deviceSelect?: ReactNode;
+    panes: Pane[];
+    sidePanel?: ReactNode;
+    showLogByDefault?: boolean;
+    reportUsageData?: boolean;
+    documentation?: ReactNode[];
+    feedback?: boolean | FeedbackPaneProps;
+    children?: ReactNode;
+    autoReselectByDefault?: boolean;
+}
+
+const ConnectedApp: FC<ConnectedAppProps> = ({
+    deviceSelect,
+    panes,
+    sidePanel,
+    showLogByDefault = true,
+    reportUsageData = false,
+    documentation,
+    feedback,
+    children,
+    autoReselectByDefault = false,
+}) => {
+    usePersistedPane();
+    const isLogVisible = useSelector(isLogVisibleSelector);
+    const currentPane = useSelector(currentPaneSelector);
+    const allPanes = useAllPanes(panes, documentation, feedback);
+    const dispatch = useDispatch();
+
+    useHotKey({
+        hotKey: 'alt+l',
+        title: 'Open launcher',
+        isGlobal: true,
+        action: openWindow.openLauncher,
+    });
+
+    useEffect(() => {
+        dispatch(setAutoReselect(autoReselectByDefault));
+    }, [dispatch, autoReselectByDefault]);
+
+    useEffect(() => {
+        if (!showLogByDefault) {
+            dispatch(toggleLogVisible());
+        }
+    }, [dispatch, showLogByDefault]);
+
+    const SidePanelComponent = allPanes[currentPane].SidePanel;
+    const currentSidePanel =
+        SidePanelComponent != null ? <SidePanelComponent /> : sidePanel;
+
+    const isSidePanelVisible =
+        useSelector(isSidePanelVisibleSelector) && currentSidePanel;
+
+    useEffect(() => {
+        if (reportUsageData) {
+            initialiseUsageData();
+        }
+    }, [reportUsageData]);
+
+    return (
+        <div className="core19-app">
+            <NavBar deviceSelect={deviceSelect} />
+            <div className="core19-app-content">
+                <div
+                    className={classNames(
+                        'core19-side-panel-container',
+                        isSidePanelVisible || 'hidden'
+                    )}
+                >
+                    {currentSidePanel}
+                </div>
+                <div className="core19-main-and-log">
+                    <Carousel
+                        className="core19-main-container"
+                        activeIndex={currentPane}
+                        controls={false}
+                        indicators={false}
+                        keyboard={false}
+                        interval={null}
+                        slide
+                        fade
+                    >
+                        {allPanes.map(({ name, Main }, paneIndex) => (
+                            <Carousel.Item key={name}>
+                                <Main active={paneIndex === currentPane} />
+                            </Carousel.Item>
+                        ))}
+                    </Carousel>
+                    <div
+                        className={classNames(
+                            'core19-log-viewer',
+                            isLogVisible || 'hidden'
+                        )}
+                    >
+                        <LogViewer />
+                    </div>
+                </div>
+                <FlashMessages />
+            </div>
+            <VisibilityBar isSidePanelEnabled={sidePanel !== null} />
+
+            <ErrorDialog />
+            <BrokenDeviceDialog />
+            {children}
+        </div>
+    );
+};
+
+const ConnectedErrorBoundary: React.FC = ({ children }) => {
+    const devices = useSelector(getDevices);
+    const selectedDevice = useSelector(selectedDeviceSelector);
+    const selectedSerialNumber = useSelector(selectedSerialNumberSelector);
+
+    return (
+        <ErrorBoundary
+            devices={[...devices.values()]}
+            selectedDevice={selectedDevice}
+            selectedSerialNumber={selectedSerialNumber ?? undefined}
+        >
+            {children}
+        </ErrorBoundary>
+    );
+};
+
+export default ({
+    appReducer,
+    ...props
+}: { appReducer?: Reducer } & ConnectedAppProps) => (
+    <ConnectedToStore appReducer={appReducer}>
+        <ConnectedErrorBoundary>
+            <ConnectedApp {...props} />
+        </ConnectedErrorBoundary>
+    </ConnectedToStore>
+);
+
+const usePersistedPane = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        const pane = getPersistedCurrentPane() ?? 0;
+        dispatch(setCurrentPane(pane));
+    }, [dispatch]);
+};
+
+const useAllPanes = (
+    panes: Pane[],
+    documentation: ReactNode[] | undefined,
+    feedback: boolean | FeedbackPaneProps | undefined
+) => {
+    const dispatch = useDispatch();
+
+    const allPanes = useMemo(() => {
+        const newPanes = [...panes];
+
+        if (feedback) {
+            newPanes.push({
+                name: 'Feedback',
+                Main: props => (
+                    <FeedbackPane
+                        {...(typeof feedback === 'object'
+                            ? feedback
+                            : undefined)}
+                        {...props}
+                    />
+                ),
+            });
+        }
+
+        newPanes.push({
+            name: 'About',
+            Main: props => <About documentation={documentation} {...props} />,
+        });
+
+        return newPanes;
+    }, [panes, documentation, feedback]);
+
+    useEffect(() => {
+        dispatch(setPanes(allPanes));
+    }, [dispatch, allPanes]);
+
+    return allPanes;
+};

package/src/App/ConnectedToStore.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { Reducer } from 'redux';
+
+import store from '../store';
+
+export default ({
+    appReducer,
+    children,
+}: {
+    appReducer?: Reducer;
+    children: ReactNode;
+}) => <Provider store={store(appReducer)}>{children}</Provider>;