@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/ErrorBoundary/ErrorBoundary.test.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import reactGA from 'react-ga';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+
+import render from '../../test/testrenderer';
+import { getAppSpecificStore as store } from '../utils/persistentStore';
+import { generateSystemReport } from '../utils/systemReport';
+import ErrorBoundary from './ErrorBoundary';
+
+const mockReactGA = reactGA;
+
+jest.mock('../utils/systemReport');
+jest.mock('react-ga');
+jest.mock('../utils/usageData', () => ({
+    ...jest.requireActual('../utils/usageData'),
+    init: jest.fn(() => {
+        mockReactGA.initialize('');
+    }),
+    sendErrorReport: jest.fn(),
+    isEnabled: () => true,
+}));
+
+const SYSTEM_REPORT = 'system report';
+const OKBUTTONTEXT = 'Restore';
+
+jest.mocked(generateSystemReport).mockImplementation(
+    () =>
+        new Promise(res => {
+            res(SYSTEM_REPORT);
+        })
+);
+
+const Child = () => {
+    throw new Error();
+};
+
+describe('ErrorBoundary', () => {
+    beforeEach(() => {
+        const spy = jest.spyOn(console, 'error');
+        spy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should send GA event', async () => {
+        render(
+            <ErrorBoundary>
+                <Child />
+            </ErrorBoundary>
+        );
+
+        await waitFor(() => expect(reactGA.initialize).toHaveBeenCalled());
+    });
+
+    it('can take custom reporting functions', () => {
+        const sendUsageData = jest.fn();
+
+        render(
+            <ErrorBoundary sendUsageData={sendUsageData}>
+                <Child />
+            </ErrorBoundary>
+        );
+        expect(sendUsageData).toHaveBeenCalled();
+    });
+
+    it('should render error boundary component when there is an error', () => {
+        render(
+            <ErrorBoundary>
+                <Child />
+            </ErrorBoundary>
+        );
+        const errorMessage = screen.getByText('Oops! There was a problem');
+        expect(errorMessage).toBeDefined();
+    });
+
+    it('should clear store if factory reset', async () => {
+        render(
+            <ErrorBoundary>
+                <Child />
+            </ErrorBoundary>
+        );
+        fireEvent.click(screen.getByText('Restore default settings'));
+        await screen.findByText(OKBUTTONTEXT);
+        fireEvent.click(screen.getByText(OKBUTTONTEXT));
+        expect(store().clear).toHaveBeenCalled();
+    });
+
+    it('should present system information', async () => {
+        render(
+            <ErrorBoundary>
+                <Child />
+            </ErrorBoundary>
+        );
+        const report = await screen.findByText(SYSTEM_REPORT);
+        expect(report).toBeDefined();
+    });
+});

package/src/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,186 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+import { Spinner } from 'react-bootstrap';
+import { getCurrentWindow } from '@electron/remote';
+
+import Button from '../Button/Button';
+import { Device } from '../Device/deviceSlice';
+import FactoryResetButton from '../FactoryReset/FactoryResetButton';
+import { CollapsibleGroup } from '../SidePanel/Group';
+import { openUrl } from '../utils/open';
+import packageJson from '../utils/packageJson';
+import { getAppSpecificStore as store } from '../utils/persistentStore';
+import { generateSystemReport } from '../utils/systemReport';
+import {
+    init as initGA,
+    isEnabled,
+    isInitialized as isGAInitialized,
+    sendErrorReport,
+} from '../utils/usageData';
+import bugIcon from './bug.svg';
+
+import './error-boundary.scss';
+
+const sendGAEvent = (error: string) => {
+    if (!isEnabled()) {
+        return;
+    }
+    if (!isGAInitialized()) {
+        initGA(packageJson());
+    }
+    sendErrorReport(error);
+};
+
+interface Props {
+    children: ReactNode;
+    selectedSerialNumber?: string;
+    selectedDevice?: Device;
+    devices?: Device[];
+    appName?: string;
+    restoreDefaults?: () => void;
+    sendUsageData?: (message: string) => void;
+}
+
+const genericRestoreDefaults = () => {
+    store().clear();
+    getCurrentWindow().reload();
+};
+
+class ErrorBoundary extends React.Component<
+    Props,
+    { hasError: boolean; error: Error | null; systemReport: string | null }
+> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null,
+            systemReport: null,
+        };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return {
+            hasError: true,
+            error,
+        };
+    }
+
+    componentDidCatch(error: Error) {
+        const { devices, selectedDevice, selectedSerialNumber, sendUsageData } =
+            this.props;
+        sendUsageData != null
+            ? sendUsageData(error.message)
+            : sendGAEvent(error.message);
+
+        generateSystemReport(
+            new Date().toISOString().replace(/:/g, '-'),
+            devices,
+            selectedDevice,
+            selectedSerialNumber
+        ).then(report => {
+            this.setState({ systemReport: report });
+        });
+    }
+
+    render() {
+        const { hasError, error, systemReport } = this.state;
+
+        const { children, appName, restoreDefaults } = this.props;
+
+        if (!hasError) {
+            return children;
+        }
+
+        const appDisplayName = appName || packageJson().displayName;
+
+        return (
+            <div className="error-boundary__container">
+                <div className="error-boundary__header">
+                    <h1>Oops! There was a problem</h1>
+                    <img src={bugIcon} alt="" />
+                </div>
+                <div className="error-boundary__main">
+                    <div className="error-boundary__info">
+                        <div className="info-header">
+                            nRF Connect for Desktop {appDisplayName} experienced
+                            an unrecoverable error
+                        </div>
+                        <p>
+                            If this is the first time you&apos;ve seen this
+                            problem we recommend restarting the application.
+                        </p>
+                        <Button
+                            large
+                            variant="primary"
+                            onClick={() => getCurrentWindow().reload()}
+                        >
+                            Restart application
+                        </Button>
+                        <p>
+                            If restarting didn&apos;t help, you can also try
+                            restoring to default values.
+                        </p>
+                        <FactoryResetButton
+                            large
+                            resetFn={restoreDefaults || genericRestoreDefaults}
+                            label="Restore default settings"
+                            variant="primary"
+                        />
+                    </div>
+                </div>
+                <div className="error-boundary__footer">
+                    {error !== null && (
+                        <div className="error-boundary__message">
+                            <CollapsibleGroup heading="Show detailed error message">
+                                <div className="report">
+                                    <h4>{error.message}</h4>
+                                    <pre>{error.stack}</pre>
+                                </div>
+                            </CollapsibleGroup>
+                        </div>
+                    )}
+                    <hr />
+                    {systemReport !== null ? (
+                        <div className="error-boundary__message">
+                            <CollapsibleGroup heading="Show system report">
+                                <div className="report">
+                                    <pre>{systemReport}</pre>
+                                </div>
+                            </CollapsibleGroup>
+                        </div>
+                    ) : (
+                        <div className="error-boundary__message--loading">
+                            <h2 className="loading-header">
+                                Generating system report...
+                            </h2>
+                            <Spinner size="sm" animation="border" />
+                        </div>
+                    )}
+                    <p>
+                        Please report the problem on DevZone if you have
+                        experienced it multiple times
+                    </p>
+                    <Button
+                        large
+                        variant="primary"
+                        onClick={() =>
+                            openUrl(
+                                'https://devzone.nordicsemi.com/support/add'
+                            )
+                        }
+                    >
+                        Go to DevZone
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ErrorBoundary;

package/src/ErrorBoundary/bug.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#455a64"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5s-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-4 4v3c0 .22-.03.47-.07.7l-.1.65-.37.65c-.72 1.24-2.04 2-3.46 2s-2.74-.77-3.46-2l-.37-.64-.1-.65C8.03 15.48 8 15.23 8 15v-4c0-.23.03-.48.07-.7l.1-.65.37-.65c.3-.52.72-.97 1.21-1.31l.57-.39.74-.18c.31-.08.63-.12.94-.12.32 0 .63.04.95.12l.68.16.61.42c.5.34.91.78 1.21 1.31l.38.65.1.65c.04.22.07.47.07.69v1zm-6 2h4v2h-4zm0-4h4v2h-4z"/></svg>

package/src/ErrorBoundary/error-boundary.scss

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables.scss';
+
+.error-boundary {
+    &__container {
+        background: white;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        padding: 16px;
+        width: 700px;
+        border: 1px solid $gray-400;
+        box-shadow: 5px 6px 5px -1px rgba(0, 0, 0, 0.1);
+        height: 100%;
+        overflow-y: overlay;
+        @include scrollbars($white);
+    }
+
+    &__header {
+        margin-bottom: 16px;
+        color: $nordic-blue;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        img {
+            height: 32px;
+            width: 32px;
+        }
+    }
+
+    &__main {
+        button {
+            margin-right: 8px;
+        }
+    }
+
+    &__info {
+        .info-header {
+            font-weight: 700;
+            color: $gray-700;
+        }
+
+        p {
+            margin-top: 16px;
+        }
+    }
+
+    &__footer {
+        margin-top: 32px;
+
+        p {
+            margin-top: 16px;
+        }
+
+        button {
+            margin-top: 16px;
+        }
+    }
+
+    &__message {
+        margin-bottom: 16px;
+
+        &--loading {
+            margin-bottom: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .loading-header {
+                color: #263238;
+                font-size: 10px;
+                font-weight: 400;
+                line-height: 13px;
+                text-transform: uppercase;
+                letter-spacing: 2.6416px;
+            }
+        }
+
+        .report {
+            border: 1px solid $gray-400;
+            padding: 16px;
+            user-select: text;
+        }
+
+        pre {
+            margin-top: 12px;
+            font-size: 12px;
+        }
+    }
+
+    .spinner-border {
+        margin-left: 16px;
+        border-width: 1px;
+    }
+}

package/src/ErrorDialog/ErrorDialog.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import {
+    fireEvent,
+    screen,
+    waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+import render from '../../test/testrenderer';
+import ErrorDialog from './ErrorDialog';
+import { showDialog } from './errorDialogSlice';
+
+describe('ErrorDialog', () => {
+    it('is not rendered when there is no error', () => {
+        render(<ErrorDialog />);
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('should render visible dialog with one message', () => {
+        render(<ErrorDialog />, [showDialog('An error occured')]);
+
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        expect(screen.getByText('An error occured')).toBeInTheDocument();
+    });
+
+    it('should render visible dialog with two messages', () => {
+        render(<ErrorDialog />, [
+            showDialog('An error occured'),
+            showDialog('Another error occured'),
+        ]);
+
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        expect(screen.getByText('An error occured')).toBeInTheDocument();
+        expect(screen.getByText('Another error occured')).toBeInTheDocument();
+    });
+
+    describe('has a close button', () => {
+        it('with the text "Close"', () => {
+            render(<ErrorDialog />, [showDialog('An error occured')]);
+
+            expect(screen.getByRole('button')).toHaveTextContent('Close');
+        });
+
+        it('of which the first closes the dialog', async () => {
+            render(<ErrorDialog />, [showDialog('An error occured')]);
+            fireEvent.click(screen.getByRole('button'));
+
+            await waitForElementToBeRemoved(screen.queryByRole('dialog'));
+        });
+    });
+
+    it('can have a custom error resolutions', () => {
+        const specialHandling = jest.fn();
+
+        render(<ErrorDialog />, [
+            showDialog('An error occured', {
+                'Special Handling': specialHandling,
+            }),
+        ]);
+
+        fireEvent.click(screen.getByText('Special Handling'));
+
+        expect(specialHandling).toHaveBeenCalled();
+    });
+});

package/src/ErrorDialog/ErrorDialog.tsx

@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { Fragment } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dialog, DialogButton } from '../Dialog/Dialog';
+import {
+    ErrorMessage,
+    errorResolutions as errorResolutionsSelector,
+    hideDialog,
+    isVisible as isVisibleSelector,
+    messages as messagesSelector,
+} from './errorDialogSlice';
+
+import './error.scss';
+
+const ErrorMessage = ({
+    error: { message, detail },
+}: {
+    error: ErrorMessage;
+}) => (
+    <>
+        <ReactMarkdown source={message} linkTarget="_blank" />
+        {detail != null && (
+            <details className="details">
+                <summary>Show technical details</summary>
+                <pre>{detail}</pre>
+            </details>
+        )}
+    </>
+);
+
+const MultipleErrorMessages = ({ messages }: { messages: ErrorMessage[] }) => (
+    <>
+        There are multiple errors:
+        <ul>
+            {messages.map(message => (
+                <li key={message.message}>
+                    <ErrorMessage error={message} />
+                </li>
+            ))}
+        </ul>
+    </>
+);
+
+const ErrorDialog = () => {
+    const dispatch = useDispatch();
+
+    const isVisible = useSelector(isVisibleSelector);
+    const messages = useSelector(messagesSelector);
+
+    const defaultErrorResolutions = {
+        Close: () => dispatch(hideDialog()),
+    };
+    const errorResolutions =
+        useSelector(errorResolutionsSelector) || defaultErrorResolutions;
+
+    return (
+        <Dialog
+            isVisible={isVisible}
+            onHide={() => dispatch(hideDialog())}
+            className="core19-error-body"
+        >
+            <Dialog.Header title="Error" headerIcon="alert" />
+            <Dialog.Body>
+                {messages.length === 1 ? (
+                    <ErrorMessage error={messages[0]} />
+                ) : (
+                    <MultipleErrorMessages messages={messages} />
+                )}
+            </Dialog.Body>
+            <Dialog.Footer>
+                {Object.entries(errorResolutions).map(
+                    ([label, handler], index) => (
+                        <DialogButton
+                            key={label}
+                            onClick={handler}
+                            variant={index === 0 ? 'primary' : 'secondary'}
+                        >
+                            {label}
+                        </DialogButton>
+                    )
+                )}
+            </Dialog.Footer>
+        </Dialog>
+    );
+};
+
+export default ErrorDialog;

package/src/ErrorDialog/error.scss

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.core19-error-body {
+    user-select: text;
+
+    .details {
+        margin-bottom: 1rem;
+        font-size: 14px;
+    }
+}

package/src/ErrorDialog/errorDialogSlice.test.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import dispatchTo from '../../test/dispatchTo';
+import { hideDialog, reducer, showDialog } from './errorDialogSlice';
+
+const anErrorMessage = 'An error occurred';
+const anotherErrorMessage = 'Another error occurred';
+
+describe('errorDialogReducer', () => {
+    it('should be hidden by default', () => {
+        const initialState = dispatchTo(reducer);
+
+        expect(initialState.isVisible).toEqual(false);
+    });
+
+    it('should be visible and have the supplied message after show action has been dispatched', () => {
+        const withAnError = dispatchTo(reducer, [
+            showDialog(anErrorMessage, {}),
+        ]);
+        expect(withAnError.isVisible).toEqual(true);
+        expect(withAnError.messages).toContainEqual({
+            message: 'An error occurred',
+        });
+    });
+
+    it('should be visible and have all messages after multiple show actions have been dispatched', () => {
+        const withTwoErrors = dispatchTo(reducer, [
+            showDialog(anErrorMessage, {}),
+            showDialog(anotherErrorMessage, {}),
+        ]);
+        expect(withTwoErrors.isVisible).toEqual(true);
+        expect(withTwoErrors.messages).toContainEqual({
+            message: anErrorMessage,
+        });
+        expect(withTwoErrors.messages).toContainEqual({
+            message: anotherErrorMessage,
+        });
+    });
+
+    it('should not add message if it already exists in list', () => {
+        const withAnError = dispatchTo(reducer, [
+            showDialog(anErrorMessage, {}),
+            showDialog(anErrorMessage, {}),
+        ]);
+
+        expect(withAnError.messages).toEqual([
+            expect.objectContaining({ message: anErrorMessage }),
+        ]);
+    });
+
+    it('should set dialog to invisible and clear message list when hide action has been dispatched', () => {
+        const withAClearedError = dispatchTo(reducer, [
+            showDialog(anErrorMessage, {}),
+            hideDialog(),
+        ]);
+
+        expect(withAClearedError.isVisible).toEqual(false);
+        expect(withAClearedError.messages.length).toEqual(0);
+    });
+});