@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/ErrorDialog/errorDialogSlice.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import type { RootState } from '../store';
+
+const appendIfNew = (messages: ErrorMessage[], message: ErrorMessage) => {
+    const messageExists = messages.some(
+        existingMessage =>
+            existingMessage.message === message.message &&
+            existingMessage.detail === message.detail
+    );
+
+    return messageExists ? messages : [...messages, message];
+};
+
+export interface ErrorResolutions {
+    [key: string]: () => void;
+}
+
+export interface ErrorMessage {
+    message: string;
+    detail?: string;
+}
+
+export interface ErrorDialog {
+    isVisible: boolean;
+    messages: ErrorMessage[];
+    errorResolutions?: ErrorResolutions;
+}
+
+const initialState: ErrorDialog = {
+    messages: [],
+    isVisible: false,
+    errorResolutions: undefined,
+};
+
+const slice = createSlice({
+    name: 'errorDialog',
+    initialState,
+    reducers: {
+        showDialog: {
+            prepare: (
+                message: string,
+                errorResolutions?: ErrorResolutions,
+                detail?: string
+            ) => ({
+                payload: { message: { message, detail }, errorResolutions },
+            }),
+            reducer: (
+                state,
+                {
+                    payload: error,
+                }: PayloadAction<{
+                    message: ErrorMessage;
+                    errorResolutions?: ErrorResolutions;
+                }>
+            ) => {
+                state.isVisible = true;
+                state.errorResolutions = error.errorResolutions;
+                state.messages = appendIfNew(state.messages, error.message);
+            },
+        },
+        hideDialog: () => initialState,
+    },
+});
+
+export const {
+    reducer,
+    actions: { hideDialog, showDialog },
+} = slice;
+
+export const isVisible = (state: RootState) => state.errorDialog.isVisible;
+export const messages = (state: RootState) => state.errorDialog.messages;
+export const errorResolutions = (state: RootState) =>
+    state.errorDialog.errorResolutions;

package/src/FactoryReset/FactoryResetButton.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+
+import render from '../../test/testrenderer';
+import { getAppSpecificStore as store } from '../utils/persistentStore';
+import FactoryResetButton from './FactoryResetButton';
+
+const LABEL = 'Factory reset';
+const OKBUTTONTEXT = 'Restore';
+
+describe('FactoryReset', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should clear store when confirmed', async () => {
+        render(<FactoryResetButton label={LABEL} />);
+        fireEvent.click(screen.getByText(LABEL));
+        await screen.findByText(OKBUTTONTEXT);
+        fireEvent.click(screen.getByText(OKBUTTONTEXT));
+        expect(store().clear).toHaveBeenCalled();
+    });
+
+    it('should not clear store when cancelled', async () => {
+        render(<FactoryResetButton label={LABEL} />);
+        fireEvent.click(screen.getByText(LABEL));
+        await screen.findByText('Cancel');
+        fireEvent.click(screen.getByText('Cancel'));
+        expect(store().clear).not.toHaveBeenCalled();
+    });
+
+    it('is possible to override reset function', async () => {
+        const overrideResetFn = jest.fn();
+        render(<FactoryResetButton label={LABEL} resetFn={overrideResetFn} />);
+        fireEvent.click(screen.getByText(LABEL));
+        await screen.findByText(OKBUTTONTEXT);
+        fireEvent.click(screen.getByText(OKBUTTONTEXT));
+        expect(overrideResetFn).toHaveBeenCalled();
+    });
+});

package/src/FactoryReset/FactoryResetButton.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, useRef, useState } from 'react';
+
+import Button, { ButtonVariants } from '../Button/Button';
+import { Dialog, DialogButton } from '../Dialog/Dialog';
+import logger from '../logging';
+import { getAppSpecificStore as store } from '../utils/persistentStore';
+
+interface Props {
+    resetFn?: () => void;
+    label: string;
+    modalText?: string;
+    variant?: ButtonVariants;
+    classNames?: string;
+    large?: boolean;
+}
+
+const DEFAULT_MODAL_TEXT =
+    'By restoring defaults, all stored app-specific configuration values will be lost. This does not include configurations such as device renames and favorites. Are you sure you want to proceed?';
+
+const FactoryResetButton: FC<Props> = ({
+    resetFn,
+    label,
+    modalText,
+    variant = 'secondary',
+    classNames,
+    large = false,
+}) => {
+    const [showDialog, setShowDialog] = useState(false);
+    useRef(); // showdialog
+    const defaultResetFn = () => {
+        store().clear();
+        logger.info('Successfully restored defaults');
+    };
+
+    return (
+        <>
+            <Button
+                large={large}
+                variant={variant}
+                onClick={() => setShowDialog(true)}
+                className={classNames}
+            >
+                {label}
+            </Button>
+            <Dialog
+                isVisible={showDialog}
+                closeOnUnfocus
+                onHide={() => setShowDialog(false)}
+            >
+                <Dialog.Header
+                    title="Restore factory settings"
+                    headerIcon="alert"
+                />
+                <Dialog.Body>{modalText || DEFAULT_MODAL_TEXT}</Dialog.Body>
+                <Dialog.Footer>
+                    <DialogButton
+                        variant="danger"
+                        onClick={() => {
+                            if (resetFn) resetFn();
+                            else defaultResetFn();
+                            setShowDialog(false);
+                        }}
+                    >
+                        Restore
+                    </DialogButton>
+                    <DialogButton onClick={() => setShowDialog(false)}>
+                        Cancel
+                    </DialogButton>
+                </Dialog.Footer>
+            </Dialog>
+        </>
+    );
+};
+
+export default FactoryResetButton;

package/src/InlineInput/InlineInput.tsx

@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from '../utils/classNames';
+
+import './inline-input.scss';
+
+/*
+This input component is a bit tricky, because it has several constraints:
+
+We want to be able validate the input and indicate to the user whether the current input is
+invalid.
+
+Users should be able to enter invalid values, we just want to indicate that they are invalid
+and do not use the value unless it is valid. We want to allow users to enter momentarily
+invalid values, because forbidding them to do so would be a pain. E.g. if we have a range from
+100 to 1000, then entering the number 500 would be hard if the system forbids to just type '5'
+because it is below 10).
+
+To accomplish the above we need not just one, but two values: An internal value, which is what
+is displayed to the user, can be potentially invalid, and is held in a state local to this
+component. Only when this internal value is valid, then onChange is called, which should update
+the external value, which is passed in as a prop.
+
+We want to enable other controls to also update the external value and then have it reflect in
+this input, so the external value and the internal value need to be synchronised, but the
+external value must only overwrite the internal value if the former was changed.
+useSynchronisationIfChangedFromOutside does take care of this by remembering the previous
+external value and comparing with it to determine whether it has changed.
+*/
+
+const useSynchronisationIfChangedFromOutside = (
+    externalValue: string,
+    setInternalValue: (value: string) => void
+) => {
+    const previousExternalValue = useRef(externalValue);
+    useEffect(() => {
+        if (previousExternalValue.current !== externalValue) {
+            setInternalValue(externalValue);
+            previousExternalValue.current = externalValue;
+        }
+    });
+    return previousExternalValue.current;
+};
+
+interface Props {
+    disabled?: boolean;
+    value: string;
+    isValid?: (value: string) => boolean;
+    onChange: (value: string) => void;
+    onChangeComplete?: (value: string) => void;
+    onKeyboardIncrementAction?: () => string;
+    onKeyboardDecrementAction?: () => string;
+    className?: string;
+}
+
+const InlineInput = React.forwardRef<HTMLInputElement, Props>(
+    (
+        {
+            disabled = false,
+            value: externalValue,
+            isValid = () => true,
+            onChange,
+            onChangeComplete = () => {},
+            onKeyboardIncrementAction = () => externalValue,
+            onKeyboardDecrementAction = () => externalValue,
+            className = '',
+        },
+        ref
+    ) => {
+        const [internalValue, setInternalValue] = useState(externalValue);
+        const [initialValue, setInitialValue] = useState(externalValue);
+        useSynchronisationIfChangedFromOutside(externalValue, setInternalValue);
+        const onChangeIfValid = (newValue: string) => {
+            if (disabled) {
+                return;
+            }
+
+            setInternalValue(newValue);
+            if (isValid(newValue)) {
+                if (externalValue !== newValue) {
+                    onChange(newValue);
+                }
+            }
+        };
+
+        const resetToExternalValueOrOnChangeCompleteIfValid = () => {
+            if (disabled) {
+                return;
+            }
+
+            if (isValid(internalValue)) {
+                if (initialValue !== internalValue) {
+                    setInitialValue(internalValue);
+                    onChangeComplete(internalValue);
+                }
+            } else {
+                setInternalValue(externalValue);
+            }
+        };
+
+        const onChangeCompleteIfValid = (event: React.KeyboardEvent) => {
+            if (disabled) {
+                return;
+            }
+
+            event.stopPropagation();
+
+            if (event.key === 'Enter' && isValid(internalValue)) {
+                if (initialValue !== internalValue) {
+                    setInitialValue(internalValue);
+                    onChangeComplete(internalValue);
+                }
+            }
+        };
+
+        const startKeyboardEvents = (event: React.KeyboardEvent) => {
+            if (disabled) {
+                return;
+            }
+
+            event.stopPropagation();
+
+            switch (event.key) {
+                case 'ArrowUp':
+                    onChangeIfValid(onKeyboardIncrementAction());
+                    break;
+                case 'ArrowDown':
+                    onChangeIfValid(onKeyboardDecrementAction());
+                    break;
+            }
+        };
+        const stopPropagation = (event: React.MouseEvent) =>
+            event.stopPropagation();
+
+        return (
+            <input
+                ref={ref}
+                type="text"
+                className={classNames(
+                    'inline-input',
+                    isValid(internalValue) || 'invalid',
+                    disabled && 'disabled',
+                    className
+                )}
+                size={
+                    Math.max(1, internalValue.length) +
+                    (process.platform === 'darwin' ? 2 : 0)
+                }
+                disabled={disabled}
+                value={internalValue}
+                onFocus={() => {
+                    setInitialValue(internalValue);
+                }}
+                onChange={event => onChangeIfValid(event.target.value)}
+                onBlur={resetToExternalValueOrOnChangeCompleteIfValid}
+                onKeyUp={onChangeCompleteIfValid}
+                onKeyDown={startKeyboardEvents}
+                onClick={stopPropagation}
+            />
+        );
+    }
+);
+
+export default InlineInput;

package/src/InlineInput/NumberInlineInput.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import { isFactor } from '../Slider/factor';
+import {
+    getStep,
+    isValues,
+    Range,
+    RangeOrValues,
+    useValidatedRangeOrValues,
+    Values,
+} from '../Slider/range';
+import InlineInput from './InlineInput';
+
+import './number-inline-input.scss';
+
+export interface Props {
+    disabled?: boolean;
+    value: number;
+    range: RangeOrValues;
+    onChange: (value: number) => void;
+    onChangeComplete?: (value: number) => void;
+}
+
+const isInValues = (value: number, values: Values) => values.includes(value);
+
+const isInRange = (value: number, { min, max, decimals, step }: Range) =>
+    value >= min &&
+    value <= max &&
+    value === Number(value.toFixed(decimals)) &&
+    (step == null ? true : isFactor(value - min, step));
+
+const isValid = (value: number, rangeOrValues: RangeOrValues) =>
+    isValues(rangeOrValues)
+        ? isInValues(value, rangeOrValues)
+        : isInRange(value, rangeOrValues);
+
+const nextInValues = (
+    current: number,
+    values: Values,
+    steps: number
+): number | undefined => {
+    const currentIndex = values.indexOf(current);
+    const newIndex = currentIndex + steps;
+
+    return values[newIndex];
+};
+
+const nextInRange = (current: number, range: Range, steps: number) => {
+    const newValue = Number(
+        (current + steps * getStep(range)).toFixed(range.decimals)
+    );
+
+    if (newValue >= range.min && newValue <= range.max) {
+        return newValue;
+    }
+};
+
+const changeValueStepwise = (
+    current: number,
+    rangeOrValues: RangeOrValues,
+    steps: number
+) => {
+    const nextValue = isValues(rangeOrValues)
+        ? nextInValues(current, rangeOrValues, steps)
+        : nextInRange(current, rangeOrValues, steps);
+
+    if (nextValue != null) {
+        return nextValue;
+    }
+
+    return nextValue != null ? nextValue : current;
+};
+
+const NumberInlineInput: FC<Props> = ({
+    disabled,
+    value,
+    range,
+    onChange,
+    onChangeComplete = () => {},
+}) => {
+    useValidatedRangeOrValues(range);
+
+    return (
+        <InlineInput
+            className="number-inline-input"
+            disabled={disabled}
+            value={String(value)}
+            isValid={newValue => isValid(Number(newValue), range)}
+            onChange={newValue => onChange(Number(newValue))}
+            onChangeComplete={newValue => onChangeComplete(Number(newValue))}
+            onKeyboardIncrementAction={() =>
+                changeValueStepwise(value, range, 1).toString()
+            }
+            onKeyboardDecrementAction={() =>
+                changeValueStepwise(value, range, -1).toString()
+            }
+        />
+    );
+};
+
+export default NumberInlineInput;

package/src/InlineInput/inline-input.scss

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.inline-input {
+    all: inherit;
+
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: transparent;
+
+    overflow-x: hidden;
+
+    &:focus {
+        border-bottom-color: $gray-200;
+    }
+
+    &.invalid {
+        border-bottom-color: $brand-danger;
+    }
+
+    &.disabled {
+        // No clue why, but setting the opacity for disabled elements in shared.scss
+        // is not effective for the inline input, but it works if we set it here
+        opacity: $disabled-opacity;
+    }
+}
+
+// To prevent opacity from stacking up
+.disabled, :disabled {
+    .inline-input.disabled {
+        opacity: 1;
+    }
+}

package/src/InlineInput/number-inline-input.scss

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.number-inline-input {
+    text-align: center;
+    border-bottom-color: $gray-200;
+    font-size: 14px;
+
+    &:focus { background-color: $white; }
+}

package/src/Log/LogEntry.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import formatDate from 'date-fns/format';
+import { LogEntry } from 'winston';
+
+import { openUrl } from '../utils/open';
+
+import './log-entry.scss';
+
+const regex = /(.*?)(https?:\/\/[^\s]+)/g;
+
+/**
+ * Convert strings to array of strings and JSX <a> tags for hrefs
+ *
+ * E.g. 'For reference see: https://github.com/example/doc.md or reboot Windows.'
+ * will be converted to:
+ * [
+ *    'For reference see: ',
+ *    <a href='https://github.com/example/doc.md'>https://github.com/example/doc.md</a>,
+ *    ' or reboot Windows.',
+ * ]
+ *
+ * @param {string} str input string
+ * @returns {Array} strings and JSX <a> tags
+ */
+function hrefReplacer(str: string) {
+    const message = [];
+    const remainder = str.replace(regex, (match, before, href, index) => {
+        message.push(before);
+        message.push(
+            <a
+                href={href}
+                key={index}
+                tabIndex={index}
+                onClick={() => openUrl(href)}
+                onKeyPress={() => {}}
+            >
+                {href}
+            </a>
+        );
+        return '';
+    });
+    message.push(remainder);
+    return message;
+}
+
+export default ({ entry }: { entry: LogEntry }) => {
+    const className = `core19-log-entry core19-log-level-${entry.level}`;
+    const time = formatDate(new Date(entry.timestamp), 'HH:mm:ss.SSS');
+
+    return (
+        <div className={className}>
+            <div className="core19-log-cell core19-log-time">{time}</div>
+            <div className="core19-log-cell">{hrefReplacer(entry.message)}</div>
+        </div>
+    );
+};

package/src/Log/LogViewer.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { forwardLogEventsFromDeviceLib } from '../Device/deviceLibWrapper';
+import logger from '../logging';
+import sendInitialLogMessages from '../logging/sendInitialLogMessages';
+import LogEntry from './LogEntry';
+import {
+    autoScroll as autoScrollSelector,
+    logEntries as logEntriesSelector,
+} from './logSlice';
+import startSyncLogToStore from './syncLogToStore';
+
+import './log-viewer.scss';
+
+export const useInitialisedLog = () => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        logger.initialise();
+        forwardLogEventsFromDeviceLib();
+        sendInitialLogMessages();
+        const stopSyncLogToStore = startSyncLogToStore(dispatch);
+
+        return stopSyncLogToStore;
+    }, [dispatch]);
+};
+
+export default () => {
+    useInitialisedLog();
+
+    const autoScroll = useSelector(autoScrollSelector);
+    const logEntries = useSelector(logEntriesSelector);
+    const logContainer = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (autoScroll && logContainer.current?.lastChild) {
+            (logContainer.current?.lastChild as Element).scrollIntoView();
+        }
+    });
+
+    return (
+        <div ref={logContainer} className="core19-log">
+            {logEntries.map(entry => (
+                <LogEntry entry={entry} key={entry.id} />
+            ))}
+        </div>
+    );
+};

package/src/Log/log-entry.scss

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-log-entry {
+    white-space: nowrap;
+    display: table-row;
+    min-width: 100%;
+
+    .core19-log-cell {
+        display: table-cell;
+        padding: 0 0.7em;
+        user-select: text;
+    }
+    .core19-log-time {
+        width: 7em;
+    }
+}
+
+.core19-log-level-error {
+    color: $brand-danger;
+}
+
+.core19-log-level-warn {
+    color: $brand-warning;
+}