@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/About/documentationSlice.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { createSlice } from '@reduxjs/toolkit';
+
+interface DocumentationSectionProps {
+    title?: string;
+    linkLabel?: string;
+    link?: string;
+}
+
+export interface DocumentationState {
+    sections: React.Component<DocumentationSectionProps>[];
+}
+
+const initialState: DocumentationState = {
+    sections: [],
+};
+
+const slice = createSlice({
+    name: 'documentation',
+    initialState,
+    reducers: {
+        setDocumentationSections: (state, action) => {
+            state.sections = action.payload;
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: { setDocumentationSections },
+} = slice;
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const documentationSections = ({ documentation }: any) =>
+    documentation.sections;

package/src/About/section.scss

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.about {
+    .about-section:first-child { margin-top: 0 }
+    .about-section { margin-top: 1em }
+
+    .about-section-title {
+        font-size: inherit;
+        margin-bottom: 2px;
+    }
+}

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,227 @@
+/*
+ * 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 { ipcRenderer } from 'electron';
+import { Reducer } from 'redux';
+
+import About from '../About/About';
+import { setDocumentationSections } from '../About/documentationSlice';
+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 LogViewer from '../Log/LogViewer';
+import NavBar from '../NavBar/NavBar';
+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';
+
+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[];
+    children?: ReactNode;
+    autoReselectByDefault?: boolean;
+}
+
+const ConnectedApp: FC<ConnectedAppProps> = ({
+    deviceSelect,
+    panes,
+    sidePanel,
+    showLogByDefault = true,
+    reportUsageData = false,
+    documentation,
+    children,
+    autoReselectByDefault = false,
+}) => {
+    usePersistedPane();
+    const isLogVisible = useSelector(isLogVisibleSelector);
+    const currentPane = useSelector(currentPaneSelector);
+    const allPanes = useAllPanes(panes);
+    const dispatch = useDispatch();
+
+    useHotKey({
+        hotKey: 'alt+l',
+        title: 'Open launcher',
+        isGlobal: true,
+        action: () => ipcRenderer.send('open-app-launcher'),
+    });
+
+    useEffect(() => {
+        dispatch(setAutoReselect(autoReselectByDefault));
+    }, [dispatch, autoReselectByDefault]);
+
+    useEffect(() => {
+        if (!showLogByDefault) {
+            dispatch(toggleLogVisible());
+        }
+    }, [dispatch, showLogByDefault]);
+
+    useEffect(() => {
+        if (documentation) dispatch(setDocumentationSections(documentation));
+    }, [dispatch, documentation]);
+
+    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>
+            </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[]) => {
+    const dispatch = useDispatch();
+
+    const allPanes = useMemo(
+        () => [...panes, { name: 'About', Main: About }] as Pane[],
+        [panes]
+    );
+
+    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>;

package/src/App/VisibilityBar.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+    autoScroll as autoScrollSelector,
+    clear,
+    toggleAutoScroll,
+} from '../Log/logSlice';
+import logger from '../logging';
+import { Toggle } from '../Toggle/Toggle';
+import useHotKey from '../utils/useHotKey';
+import {
+    isLogVisible as isLogVisibleSelector,
+    isSidePanelVisible as isSidePanelVisibleSelector,
+    toggleLogVisible,
+    toggleSidePanelVisible,
+} from './appLayout';
+
+import './visibility-bar.scss';
+
+export default ({ isSidePanelEnabled }: { isSidePanelEnabled: boolean }) => {
+    const dispatch = useDispatch();
+    const isSidePanelVisible = useSelector(isSidePanelVisibleSelector);
+    const isLogVisible = useSelector(isLogVisibleSelector);
+    const autoScroll = useSelector(autoScrollSelector);
+
+    useHotKey({
+        hotKey: ['ctrl+p', 'ctrl+n'],
+        title: 'Show side panel',
+        isGlobal: true,
+        action: () => dispatch(toggleSidePanelVisible()),
+    });
+
+    useHotKey({
+        hotKey: 'ctrl+d',
+        title: 'Clear log',
+        isGlobal: true,
+        action: () => dispatch(clear()),
+    });
+
+    useHotKey({
+        hotKey: 'ctrl+l',
+        title: 'Show log',
+        isGlobal: true,
+        action: () => dispatch(toggleLogVisible()),
+    });
+
+    return (
+        <div className="core19-visibility-bar">
+            {isSidePanelEnabled && (
+                <div className="core19-visibility-bar-show-side-panel">
+                    <Toggle
+                        id="visibility-bar-show-side-panel"
+                        label="Show side panel"
+                        title="ctrl+p or ctr+n"
+                        onToggle={() => dispatch(toggleSidePanelVisible())}
+                        isToggled={isSidePanelVisible}
+                        variant="primary"
+                    />
+                </div>
+            )}
+            <div className="core19-visibility-bar-show-log">
+                <button
+                    type="button"
+                    title="ctrl+d"
+                    className="log-button"
+                    onClick={() => dispatch(clear())}
+                >
+                    Clear log
+                </button>
+                <button
+                    type="button"
+                    className="log-button"
+                    onClick={logger.openLogFile}
+                >
+                    Open log file
+                </button>
+                <div className="flex-grow-1" />
+                <Toggle
+                    id="autoscroll-log"
+                    label="Autoscroll log"
+                    onToggle={() => dispatch(toggleAutoScroll())}
+                    isToggled={autoScroll}
+                    variant="secondary"
+                />
+                <Toggle
+                    id="visibility-bar-show-log"
+                    label="Show log"
+                    title="ctrl+l"
+                    onToggle={() => dispatch(toggleLogVisible())}
+                    isToggled={isLogVisible}
+                    variant="secondary"
+                />
+            </div>
+        </div>
+    );
+};

package/src/App/app.scss

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-app {
+    background-color: $gray-50;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+}
+
+.core19-app-content {
+    display: flex;
+    flex-flow: row;
+    height: calc(100% - #{$nav-bar-height + $visibility-bar-height});
+
+    .core19-main-and-log {
+        flex: 1;
+        display: flex;
+        flex-flow: column;
+        min-width: 0;
+        position: relative;
+        background-color: $gray-100;
+
+        .core19-main-container {
+            flex: 1;
+            overflow: auto;
+
+            .carousel-inner {
+                height: 100%;
+                padding: 16px;
+
+                overflow-y: overlay;
+                @include scrollbars($gray-100);
+
+                .carousel-item {
+                    height: 100%;
+                    transition: opacity $normal-transition;
+                }
+            }
+        }
+
+        .core19-log-viewer {
+            background-color: $gray-900;
+            color: $gray-400;
+
+            overflow: hidden;
+            width: 100%;
+
+            max-height: $log-viewer-height;
+            transition: max-height $normal-transition;
+
+            &.hidden {
+                max-height: 0;
+            }
+
+            &:hover {
+                color: $gray-100;
+            }
+        }
+    }
+
+    .core19-side-panel-container {
+        width: $side-panel-width;
+        padding: 0 24px;
+        background-color: $gray-50;
+        height: 100%;
+        margin-left: 0;
+        transition: margin-left $normal-transition;
+
+        &.hidden {
+            margin-left: -$side-panel-width;
+        }
+
+        overflow-y: overlay;
+        @include scrollbars($gray-50);
+    }
+}