@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/Log/log-viewer.scss

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.core19-log {
+    position: relative;
+    overflow: auto;
+    height: $log-viewer-height;
+
+    scroll-snap-type: y mandatory;
+
+    > div {
+        display: table;
+        min-width: 100%;
+
+        scroll-snap-align: start;
+    }
+
+    @include scrollbars($gray-900);
+}

package/src/Log/logSlice.ts

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { LogEntry } from 'winston';
+
+import type { RootState } from '../store';
+import { getIsLoggingVerbose } from '../utils/persistentStore';
+
+const MAX_ENTRIES = 1000;
+
+export interface Log {
+    autoScroll: boolean;
+    logEntries: LogEntry[];
+    isLoggingVerbose: boolean;
+}
+
+const initialState: Log = {
+    autoScroll: true,
+    logEntries: [],
+    isLoggingVerbose: getIsLoggingVerbose(),
+};
+
+const infoEntry = () => ({
+    id: -1,
+    level: 'info',
+    timestamp: new Date().toISOString(),
+    message:
+        'The log in this view has been shortened. Open the log file to see the full content.',
+});
+
+const limitedToMaxSize = (entries: LogEntry[]) =>
+    entries.length <= MAX_ENTRIES
+        ? entries
+        : [infoEntry(), ...entries.slice(-MAX_ENTRIES)];
+
+export const autoScroll = (state: RootState) => state.log.autoScroll;
+export const logEntries = (state: RootState) => state.log.logEntries;
+let isLoggingVerboseLocal = initialState.isLoggingVerbose;
+export const isLoggingVerbose = () => isLoggingVerboseLocal;
+export const isLoggingVerboseSelector = (state: RootState) =>
+    state.log.isLoggingVerbose;
+
+const slice = createSlice({
+    name: 'log',
+    initialState,
+    reducers: {
+        addEntries: (state, action: PayloadAction<LogEntry[]>) => {
+            state.logEntries = limitedToMaxSize([
+                ...state.logEntries,
+                ...action.payload,
+            ]);
+        },
+        clear: state => {
+            state.logEntries = [];
+        },
+        toggleAutoScroll: state => {
+            state.autoScroll = !state.autoScroll;
+        },
+        toggleIsLoggingVerbose: state => {
+            state.isLoggingVerbose = !state.isLoggingVerbose;
+            isLoggingVerboseLocal = state.isLoggingVerbose;
+        },
+    },
+});
+
+export const {
+    reducer,
+    actions: { addEntries, clear, toggleAutoScroll, toggleIsLoggingVerbose },
+} = slice;

package/src/Log/syncLogToStore.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import logger from '../logging';
+import { AppDispatch } from '../store';
+import { addEntries } from './logSlice';
+
+const addLogEntriesToStore = (dispatch: AppDispatch) => () => {
+    const entries = logger.getAndClearEntries();
+    if (entries.length > 0) {
+        dispatch(addEntries(entries));
+    }
+};
+
+/**
+ * Starts syncing to new log entries from the application's log buffer.
+ * Incoming entries are added to the state, so that they can be displayed
+ * in the UI.
+ *
+ * @param {function} dispatch The redux dispatch function.
+ * @returns {function(*)} Function that stops the listener.
+ */
+export default (dispatch: AppDispatch) => {
+    const LOG_UPDATE_INTERVAL = 400;
+    const logListener = setInterval(
+        addLogEntriesToStore(dispatch),
+        LOG_UPDATE_INTERVAL
+    );
+
+    return () => {
+        clearInterval(logListener);
+    };
+};

package/src/Logo/Logo.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+import { useSelector } from 'react-redux';
+
+import { deviceIsSelected as deviceIsSelectedSelector } from '../Device/deviceSlice';
+import { openUrl } from '../utils/open';
+import logoConnected from './nordic-logo-blue-icon-only.png';
+import logoDisconnected from './nordic-logo-gray-icon-only.png';
+import logoUniform from './nordic-logo-white-icon-only.png';
+
+import './logo.scss';
+
+const goToNRFConnectWebsite = () =>
+    openUrl('http://www.nordicsemi.com/nRFConnect');
+
+const LogoImage: FC<{ src: string }> = ({ src }) => (
+    <img
+        className="core19-logo"
+        src={src}
+        alt="Nordic Semiconductor logo"
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+        role="link"
+        onClick={goToNRFConnectWebsite}
+        onKeyPress={() => {}}
+        tabIndex={0}
+    />
+);
+
+const DynamicLogo = () => {
+    const deviceIsSelected = useSelector(deviceIsSelectedSelector);
+
+    return (
+        <LogoImage src={deviceIsSelected ? logoConnected : logoDisconnected} />
+    );
+};
+
+const StaticLogo = () => <LogoImage src={logoUniform} />;
+
+const Logo: FC<{ changeWithDeviceState?: boolean }> = ({
+    changeWithDeviceState = false,
+}) => (changeWithDeviceState ? <DynamicLogo /> : <StaticLogo />);
+
+export default Logo;

package/src/Logo/logo.scss

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.core19-logo {
+    margin-right: 19px;
+    margin-left: auto;
+    cursor: pointer;
+}

package/src/Main/Main.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+
+import './main.scss';
+
+export default ({ children }: { children?: ReactNode }) => (
+    <div className="core19-main-view">{children}</div>
+);

package/src/Main/main.scss

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.core19-main-view {
+    padding: 0.6em 1em;
+    background-color: $white;
+    height: 100%;
+}

package/src/MasonryLayout/MasonryLayout.tsx

@@ -0,0 +1,234 @@
+/*
+ * Copyright (c) 2022 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+
+import classNames from '../utils/classNames';
+
+import styles from './masonryLayout.module.scss';
+
+interface MasonryLayoutProperties {
+    minWidth: number;
+    className?: string;
+}
+
+interface WrappedChildrenProperties {
+    hiddenChildren: boolean[];
+    width: number;
+    columns: number;
+    minWidth: number;
+    orders: number[];
+}
+
+const WrappedChildren = ({
+    children,
+    hiddenChildren,
+    width,
+    columns,
+    minWidth,
+    orders,
+}: PropsWithChildren<WrappedChildrenProperties>) => (
+    <>
+        {React.Children.map(children, (child, i) => (
+            <div
+                data-hidden={hiddenChildren[i] === true ? 'true' : 'false'}
+                style={{
+                    width: `${width / columns}px`,
+                    minWidth,
+                    order: `${orders[i] ?? 1}`,
+                    pageBreakBefore: `${i < columns ? 'always' : 'auto'}`,
+                }}
+            >
+                {child}
+            </div>
+        ))}
+    </>
+);
+
+interface FillersProperties {
+    maxHeight: number;
+    columns: number;
+    width: number;
+    columnHeights: number[];
+}
+
+const Fillers = ({
+    maxHeight,
+    columns,
+    width,
+    columnHeights,
+}: FillersProperties) => (
+    <>
+        {columnHeights.map((h, i) =>
+            h !== maxHeight ? (
+                <div
+                    data-filler="true"
+                    key={`filler_${i + 0}`}
+                    style={{
+                        height: `${maxHeight - h}px`,
+                        order: `${i + 1}`,
+                        width: `${width / columns}px`,
+                    }}
+                />
+            ) : null
+        )}
+    </>
+);
+
+/**
+ * Builds a masonry layout around all depth 1 child components.
+ * Note: only depth 1 children are considered for the layout.
+ * This also applies for React.Fragment wrapped components.
+ * @param {number} minWidth minimum width of every item in this layout.
+ * @returns {React.FC<MasonryLayoutProperties>} React Component.
+ */
+export default ({
+    children,
+    minWidth,
+    className,
+}: PropsWithChildren<MasonryLayoutProperties>) => {
+    const [width, setWidth] = useState(-1);
+    const [maxHeight, setMaxHeight] = useState(0);
+    const [columns, setColumns] = useState(-1);
+    const [orders, setOrders] = useState<number[]>([]);
+    const [hiddenChildren, setHiddenChildren] = useState<boolean[]>([]);
+    const [columnHeights, setColumnHeights] = useState<number[]>([]);
+
+    const masonryLayoutRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (masonryLayoutRef.current === null) return;
+
+        const generateMetaData = (col: number) => {
+            let child = masonryLayoutRef.current?.firstElementChild;
+            const heightMatrix: number[][] = [];
+            const zeroHeightChildren: boolean[] = [];
+
+            let i = 0;
+            while (child) {
+                if (child instanceof HTMLElement) {
+                    if (!child.hasAttribute('data-filler')) {
+                        const rowIndex = Math.floor(i / col);
+
+                        if (heightMatrix[rowIndex] === undefined) {
+                            heightMatrix[rowIndex] = [];
+                        }
+
+                        const row = heightMatrix[rowIndex];
+                        const columnIndex = i % col;
+
+                        i += 1;
+                        if (
+                            child.offsetHeight <=
+                            Number.parseInt(styles.margin, 10)
+                        ) {
+                            row[columnIndex] = 0;
+                            zeroHeightChildren.push(true);
+                        } else {
+                            row[columnIndex] = child.offsetHeight + 1;
+                            zeroHeightChildren.push(false);
+                        }
+                    }
+
+                    child = child.nextElementSibling;
+                }
+            }
+
+            return { heightMatrix, hiddenChildren: zeroHeightChildren };
+        };
+
+        const calcData = (col: number) => {
+            const metaData = generateMetaData(col);
+            const heights: number[] = Array(col).fill(0);
+            const newOrder: number[] = [];
+
+            metaData.heightMatrix.forEach(row => {
+                row.forEach(itemHeight => {
+                    const smallest =
+                        heights.findIndex(h => h === Math.min(...heights)) ?? 0;
+                    heights[smallest] += itemHeight;
+                    newOrder.push(smallest + 1);
+                });
+            });
+
+            return {
+                maxHeight: Math.max(
+                    ...heights,
+                    masonryLayoutRef.current?.scrollHeight ?? 0
+                ),
+                order: newOrder,
+                columnHeights: heights,
+                columns: Math.min(
+                    metaData.hiddenChildren.filter(v => !v).length,
+                    col
+                ),
+                maxColums: col,
+                hiddenChildren: metaData.hiddenChildren,
+            };
+        };
+
+        const action = () => {
+            const noOfColumns = Math.floor(
+                current.clientWidth /
+                    (minWidth + Number.parseInt(styles.margin, 10))
+            );
+
+            if (current.clientWidth !== width) {
+                setWidth(current.clientWidth);
+            }
+
+            const data = calcData(noOfColumns);
+            if (data) {
+                setOrders(data.order);
+                setColumnHeights(data.columnHeights);
+                setMaxHeight(data.maxHeight);
+                setHiddenChildren(data.hiddenChildren);
+                setColumns(data.columns);
+            }
+        };
+
+        const current = masonryLayoutRef.current;
+
+        const observer = new ResizeObserver(action);
+        observer.observe(masonryLayoutRef.current);
+        const mutationObserver = new MutationObserver(action);
+        mutationObserver.observe(masonryLayoutRef.current, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+
+        return () => {
+            current && observer.unobserve(current);
+            current && mutationObserver.disconnect();
+        };
+    }, [columns, maxHeight, minWidth, width]);
+
+    return (
+        <div className={styles.masonryLayoutOut}>
+            <div
+                ref={masonryLayoutRef}
+                className={classNames(styles.masonryLayout, className)}
+                style={{ maxHeight: `${maxHeight}px` }}
+            >
+                <WrappedChildren
+                    hiddenChildren={hiddenChildren}
+                    width={width}
+                    columns={columns}
+                    minWidth={minWidth}
+                    orders={orders}
+                >
+                    {children}
+                </WrappedChildren>
+                <Fillers
+                    maxHeight={maxHeight}
+                    columns={columns}
+                    width={width}
+                    columnHeights={columnHeights}
+                />
+            </div>
+        </div>
+    );
+};

package/src/MasonryLayout/masonryLayout.module.scss

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+$margin: 8px; //px unit dependency in dropdown.tsx
+
+:export {
+    margin: $margin;
+}
+
+.masonryLayoutOut {
+    overflow-x: hidden;
+
+    .masonryLayout {
+        display: flex;
+        flex-flow: column wrap;
+        align-content: stretch;
+        height: fit-content;
+        width: calc(100% + $margin);
+        position: relative;
+        right: 4px;
+        overflow: hidden;
+
+        > div {
+            border-bottom: $margin solid transparent;
+            border-left: calc($margin / 2) solid transparent;
+            border-right: calc($margin / 2) solid transparent;
+            border-color: transparent;
+            background-clip: padding-box;
+        }
+
+        > div[data-filler='true'] {
+            border: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        > div[data-hidden='true'] {
+            border-bottom: 0 !important;
+            border-left: 0 !important;
+            border-right: 0 !important;
+        }
+    }
+}

package/src/NavBar/NavBar.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+
+import Logo from '../Logo/Logo';
+import NavMenu from './NavMenu';
+
+import './nav-bar.scss';
+
+export default ({ deviceSelect }: { deviceSelect?: ReactNode }) => (
+    <div className="core19-nav-bar">
+        {deviceSelect && (
+            <div className="core19-nav-bar-device-selector">{deviceSelect}</div>
+        )}
+        <NavMenu />
+        <Logo changeWithDeviceState />
+    </div>
+);

package/src/NavBar/NavMenu.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { setPanes } from '../App/appLayout';
+import NavMenu from './NavMenu';
+
+const aPane = {
+    name: 'an menu item',
+    Main: () => <div>A pane</div>,
+};
+const anotherPane = {
+    name: 'another menu item',
+    Main: () => <div>Another pane</div>,
+};
+
+expect.extend({
+    toBeHighlighted(element) {
+        const pass = element.classList.contains('selected');
+        const not = pass ? 'not ' : '';
+        const message = () =>
+            `Expected the element to ${not}contain a class 'selected' to signify that ` +
+            `it is ${not}highlighted. It actually contained: ${element.className}`;
+        return { pass, message };
+    },
+});
+
+describe('NavMenu', () => {
+    it('displays multiple items', () => {
+        render(<NavMenu />, [setPanes([aPane, anotherPane])]);
+
+        expect(screen.getByText('an menu item')).toBeInTheDocument();
+        expect(screen.getByText('another menu item')).toBeInTheDocument();
+    });
+});

package/src/NavBar/NavMenu.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+    currentPane as currentPaneSelector,
+    paneNames as paneNamesSelector,
+    switchToNextPane,
+    switchToPreviousPane,
+} from '../App/appLayout';
+import useHotKey from '../utils/useHotKey';
+import NavMenuItem from './NavMenuItem';
+
+const NavMenu = () => {
+    const currentPane = useSelector(currentPaneSelector);
+    const paneNames = useSelector(paneNamesSelector);
+    const dispatch = useDispatch();
+
+    useHotKey({
+        hotKey: 'ctrl+tab',
+        title: 'Switch pane right',
+        isGlobal: true,
+        action: () => dispatch(switchToNextPane()),
+    });
+
+    useHotKey({
+        hotKey: 'ctrl+shift+tab',
+        title: 'Switch pane left',
+        isGlobal: true,
+        action: () => dispatch(switchToPreviousPane()),
+    });
+
+    return (
+        <div data-testid="nav-menu">
+            {paneNames.map((name, index: number) => (
+                <NavMenuItem
+                    key={name}
+                    index={index}
+                    isFirst={index === 0}
+                    isSelected={currentPane === index}
+                    label={name}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default NavMenu;

package/src/NavBar/NavMenuItem.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { setCurrentPane } from '../App/appLayout';
+import Button from '../Button/Button';
+import classNames from '../utils/classNames';
+
+import './nav-menu-item.scss';
+
+interface Props {
+    index: number;
+    isFirst: boolean;
+    isSelected: boolean;
+    label: string;
+}
+
+const NavMenuItem: FC<Props> = ({ index, isFirst, isSelected, label }) => {
+    const dispatch = useDispatch();
+
+    return (
+        <Button
+            variant="custom"
+            className={classNames(
+                'core19-nav-menu-item',
+                isSelected && 'selected',
+                isFirst && 'first'
+            )}
+            onClick={() => dispatch(setCurrentPane(index))}
+        >
+            {label}
+        </Button>
+    );
+};
+
+export default NavMenuItem;