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

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,134 @@
+/*
+ * 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 {
+    ConfirmationDialog,
+    Dialog,
+    DialogButton,
+    ErrorDialog,
+    InfoDialog,
+} from './Dialog';
+
+const noop = jest.fn();
+describe('Dialog', () => {
+    const dialog = (isVisible = true) => (
+        <Dialog isVisible={isVisible}>
+            <Dialog.Header title="Test Title" />
+            <Dialog.Body>Test Text</Dialog.Body>
+            <Dialog.Footer>
+                <DialogButton onClick={noop}>Close</DialogButton>
+            </Dialog.Footer>
+        </Dialog>
+    );
+
+    test('is rendered when visible', () => {
+        render(dialog());
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        test;
+    });
+
+    test('is not rendered when not visible', () => {
+        render(dialog(false));
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+        expect(screen.getByText('Test Text')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+});
+
+describe('InfoDialog creator', () => {
+    const dialog = (isVisible = true) => (
+        <InfoDialog isVisible={isVisible} onHide={noop}>
+            Test Body
+        </InfoDialog>
+    );
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Info')).toBeInTheDocument();
+        expect(screen.getByText('Test Body')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+
+    test('invokes the expected action', () => {
+        render(dialog());
+
+        const closeButton = screen.getByText('Close');
+        fireEvent.click(closeButton);
+
+        expect(noop).toHaveBeenCalled();
+    });
+});
+
+describe('ErrorDialog creator', () => {
+    const dialog = (isVisible = true) => (
+        <ErrorDialog isVisible={isVisible} onHide={noop}>
+            Test Body
+        </ErrorDialog>
+    );
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Error')).toBeInTheDocument();
+        expect(screen.getByText('Test Body')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+
+    test('invokes the expected action', () => {
+        render(dialog());
+
+        const closeButton = screen.getByText('Close');
+        fireEvent.click(closeButton);
+
+        expect(noop).toHaveBeenCalled();
+    });
+});
+describe('ConfirmationDialog creator', () => {
+    const dialog = (isVisible = true) => (
+        <ConfirmationDialog
+            isVisible={isVisible}
+            confirmLabel="ConfButton"
+            onConfirm={() => noop(true)}
+            onCancel={() => noop(false)}
+            optionalLabel="Optional"
+            onOptional={() => noop()}
+        >
+            Test Body
+        </ConfirmationDialog>
+    );
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Confirm')).toBeInTheDocument();
+        expect(screen.getByText('Test Body')).toBeInTheDocument();
+        expect(screen.getByText('Optional')).toBeInTheDocument();
+        expect(screen.getByText('ConfButton')).toBeInTheDocument();
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    test('invokes the expected action', () => {
+        render(dialog());
+
+        fireEvent.click(screen.getByText('Optional'));
+        expect(noop).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('ConfButton'));
+        expect(noop).toHaveBeenCalledWith(true);
+        fireEvent.click(screen.getByText('Cancel'));
+        expect(noop).toHaveBeenCalledWith(false);
+    });
+});

package/src/Dialog/Dialog.tsx

@@ -0,0 +1,236 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+import { Spinner } from 'react-bootstrap';
+import Modal from 'react-bootstrap/Modal';
+
+import Button, { ButtonVariants } from '../Button/Button';
+
+import './dialog.scss';
+
+type CoreProps = {
+    isVisible: boolean;
+    onHide?: () => void;
+    className?: string;
+    size?: 'sm' | 'm' | 'lg' | 'xl';
+    children: ReactNode;
+};
+
+type DialogProps = CoreProps & {
+    closeOnUnfocus?: boolean;
+    closeOnEsc?: boolean;
+};
+
+export const Dialog = ({
+    isVisible,
+    closeOnUnfocus = false,
+    closeOnEsc = false,
+    onHide = () => {},
+    className = '',
+    size = 'm',
+    children,
+}: DialogProps) => (
+    <Modal
+        onEscapeKeyDown={() => {
+            if (closeOnEsc && onHide) {
+                onHide();
+            }
+        }}
+        show={isVisible}
+        size={size === 'm' ? undefined : size}
+        backdrop={closeOnUnfocus ? true : 'static'}
+        onHide={() => {
+            if (closeOnUnfocus && onHide) {
+                onHide();
+            }
+        }}
+        centered
+        className={`dialog ${className}`}
+    >
+        {children}
+    </Modal>
+);
+
+Dialog.Header = ({
+    title,
+    headerIcon,
+    showSpinner,
+}: {
+    title: string;
+    headerIcon?: string;
+    showSpinner?: boolean;
+}) => (
+    <Modal.Header closeButton={false}>
+        <div>
+            <b>{title}</b>
+            {showSpinner && <Spinner size="sm" animation="border" />}
+        </div>
+        {headerIcon && <span className={`mdi mdi-${headerIcon}`} />}
+    </Modal.Header>
+);
+
+Dialog.Body = ({ children }: { children: ReactNode }) => (
+    <Modal.Body>{children}</Modal.Body>
+);
+
+Dialog.Footer = ({ children }: { children: ReactNode }) => (
+    <Modal.Footer>{children}</Modal.Footer>
+);
+
+export interface DialogButtonProps {
+    onClick: () => void;
+    variant?: ButtonVariants;
+    className?: string;
+    disabled?: boolean;
+    children: ReactNode;
+}
+
+export const DialogButton = ({
+    variant = 'secondary',
+    onClick,
+    className = '',
+    disabled = false,
+    children,
+}: DialogButtonProps) => (
+    <Button
+        large
+        variant={variant}
+        onClick={onClick}
+        className={className}
+        disabled={disabled}
+    >
+        {children}
+    </Button>
+);
+
+interface GenericDialogProps extends CoreProps {
+    title: string;
+    footer: ReactNode;
+    headerIcon?: string;
+    showSpinner?: boolean;
+    closeOnUnfocus?: boolean;
+    closeOnEsc?: boolean;
+}
+
+export const GenericDialog = ({
+    isVisible,
+    onHide,
+    title,
+    headerIcon,
+    children,
+    className,
+    footer,
+    showSpinner = false,
+    closeOnUnfocus,
+    closeOnEsc,
+    size,
+}: GenericDialogProps) => (
+    <Dialog
+        onHide={onHide}
+        closeOnUnfocus={closeOnUnfocus}
+        closeOnEsc={closeOnEsc}
+        isVisible={isVisible}
+        className={className}
+        size={size}
+    >
+        <Dialog.Header
+            title={title}
+            headerIcon={headerIcon}
+            showSpinner={showSpinner}
+        />
+        <Dialog.Body>{children}</Dialog.Body>
+        <Dialog.Footer>{footer}</Dialog.Footer>
+    </Dialog>
+);
+
+interface InfoProps extends CoreProps {
+    title?: string;
+    headerIcon?: string;
+    onHide: () => void;
+}
+
+export const InfoDialog = ({
+    isVisible,
+    title = 'Info',
+    headerIcon = 'info',
+    children,
+    onHide,
+    size,
+    className,
+}: InfoProps) => (
+    <GenericDialog
+        closeOnEsc
+        closeOnUnfocus
+        onHide={onHide}
+        isVisible={isVisible}
+        headerIcon={headerIcon}
+        title={title}
+        className={className}
+        size={size}
+        footer={<DialogButton onClick={onHide}>Close</DialogButton>}
+    >
+        {children}
+    </GenericDialog>
+);
+
+export const ErrorDialog = (props: Omit<InfoProps, 'headerIcon'>) =>
+    InfoDialog({
+        ...props,
+        title: props.title ?? 'Error',
+        headerIcon: 'alert',
+    });
+
+interface ConfirmationDialogProps extends Omit<CoreProps, 'onHide'> {
+    title?: string;
+    headerIcon?: string;
+    confirmLabel?: string;
+    onConfirm: () => void;
+    cancelLabel?: string;
+    onCancel: () => void;
+    optionalLabel?: string;
+    onOptional?: () => void;
+}
+
+export const ConfirmationDialog = ({
+    isVisible,
+    title = 'Confirm',
+    headerIcon,
+    children,
+    className,
+    confirmLabel = 'Confirm',
+    onConfirm,
+    cancelLabel = 'Cancel',
+    onCancel,
+    optionalLabel,
+    onOptional = () => {},
+    size,
+}: ConfirmationDialogProps) => (
+    <GenericDialog
+        onHide={onCancel}
+        closeOnEsc
+        isVisible={isVisible}
+        headerIcon={headerIcon}
+        title={title}
+        className={className}
+        size={size}
+        footer={
+            <>
+                <DialogButton variant="primary" onClick={onConfirm}>
+                    {confirmLabel}
+                </DialogButton>
+                {optionalLabel && (
+                    <DialogButton onClick={onOptional}>
+                        {optionalLabel}
+                    </DialogButton>
+                )}
+                <DialogButton onClick={onCancel}>{cancelLabel}</DialogButton>
+            </>
+        }
+    >
+        {children}
+    </GenericDialog>
+);

package/src/Dialog/dialog.scss

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.dialog {
+    .modal-content {
+        border: 0 transparent;
+        box-shadow: 0px 3px 6px #00000029;
+        background: #ffffff 0% 0% no-repeat padding-box;
+    }
+
+    .modal-header {
+        height: 40px;
+        border: 0 transparent;
+        background: $gray-50;
+        padding: 0 16px;
+
+        flex-direction: row;
+        align-items: center;
+
+        p {
+            font-size: 14px;
+            margin: 0;
+        }
+
+        .mdi {
+            font-size: 20px;
+        }
+
+        .spinner-border {
+            margin-left: 16px;
+            border-width: 1px;
+        }
+    }
+
+    .modal-body {
+        overflow-wrap: anywhere;
+        padding: 32px 16px 16px 16px;
+        margin: 0;
+        p {
+            font-size: 14px;
+        }
+    }
+
+    .modal-footer {
+        padding: 16px;
+        border: 0 transparent;
+        flex-direction: row-reverse;
+        justify-content: end;
+        display: flex;
+    }
+}

package/src/Dropdown/Dropdown.module.scss

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../styles';
+
+.content {
+    &[data-height='true'] {
+        overflow-y: scroll; // Make Scroll Fixed Height Scrollable
+
+        @include scrollbars($gray-700);
+    }
+}

package/src/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 Dropdown from './Dropdown';
+
+const items = [
+    {
+        label: 'Foo',
+        value: 'foo',
+    },
+    {
+        label: 'Bar',
+        value: 'Bar',
+    },
+];
+
+describe('Dropdown', () => {
+    it('renders a list of items', () => {
+        render(
+            <Dropdown
+                items={items}
+                onSelect={jest.fn()}
+                selectedItem={items[0]}
+            />
+        );
+        expect(screen.getAllByText('Foo').length).toBe(2); // default selected + item
+        expect(screen.getByText('Bar')).toBeInTheDocument();
+    });
+
+    it('calls onSelect when item is clicked', () => {
+        const onSelect = jest.fn();
+        const item = items[1];
+        render(
+            <Dropdown
+                items={items}
+                onSelect={onSelect}
+                selectedItem={items[0]}
+            />
+        );
+        const dropdownItem = screen.getByText(item.label);
+        fireEvent.click(dropdownItem);
+        expect(onSelect).toHaveBeenCalledWith(item);
+    });
+
+    it('correct item is selected', () => {
+        render(
+            <Dropdown
+                items={items}
+                onSelect={jest.fn()}
+                selectedItem={items[1]}
+            />
+        );
+        expect(screen.getAllByText('Bar').length).toBe(2);
+    });
+});

package/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useState } from 'react';
+import FormLabel from 'react-bootstrap/FormLabel';
+
+import classNames from '../utils/classNames';
+
+import styles from './Dropdown.module.scss';
+
+export interface DropdownItem {
+    label: React.ReactNode;
+    value: string;
+}
+
+export interface DropdownProps {
+    id?: string;
+    label?: React.ReactNode;
+    items: DropdownItem[];
+    onSelect: (item: DropdownItem) => void;
+    disabled?: boolean;
+    selectedItem: DropdownItem;
+    numItemsBeforeScroll?: number;
+    className?: string;
+}
+
+export default ({
+    id,
+    label,
+    items,
+    onSelect,
+    disabled = false,
+    selectedItem,
+    numItemsBeforeScroll = 0,
+    className = '',
+}: DropdownProps) => {
+    const [isActive, setIsActive] = useState(false);
+
+    const onClickItem = (item: DropdownItem) => {
+        onSelect(item);
+        setIsActive(false);
+    };
+
+    return (
+        <div
+            className={`tw-preflight tw-relative tw-w-full ${className}`}
+            onBlur={event => {
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setIsActive(false);
+                }
+            }}
+        >
+            {label && (
+                <FormLabel className="tw-mb-1 tw-text-xs">{label}</FormLabel>
+            )}
+            <button
+                id={id}
+                type="button"
+                className="tw-flex tw-h-8 tw-w-full tw-items-center tw-justify-between tw-border-0 tw-bg-gray-700 tw-px-2 tw-text-white"
+                onClick={() => setIsActive(!isActive)}
+                disabled={disabled}
+            >
+                <span>
+                    {items.findIndex(e => e.value === selectedItem.value) === -1
+                        ? ''
+                        : selectedItem.label}
+                </span>
+                <span
+                    className={`mdi mdi-chevron-down tw-text-lg ${classNames(
+                        isActive && 'tw-rotate-180'
+                    )}`}
+                />
+            </button>
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- We need an interactive handler as described below */}
+            <div
+                onMouseDown={ev => {
+                    // To prevent the dropdown from closing when users click on the scrollbar of the items
+                    ev.preventDefault();
+                }}
+                style={
+                    numItemsBeforeScroll > 0
+                        ? {
+                              maxHeight: `${numItemsBeforeScroll * 24}px`,
+                          }
+                        : {}
+                }
+                data-height={
+                    numItemsBeforeScroll > 0 &&
+                    items.length > numItemsBeforeScroll
+                }
+                className={`tw-text-while tw-absolute tw-right-0 tw-z-10 tw-w-full tw-border-t-2 tw-border-solid tw-border-gray-600 tw-bg-gray-700 tw-p-0 ${classNames(
+                    styles.content,
+                    !isActive && 'tw-hidden'
+                )}`}
+            >
+                {items.map(item => (
+                    <button
+                        type="button"
+                        className="tw-bg-transparent tw-clear-both tw-block tw-h-6 tw-w-full tw-whitespace-nowrap tw-border-0 tw-px-2 tw-py-1 tw-text-left tw-font-normal tw-text-white hover:tw-bg-gray-600 focus:tw-bg-gray-600"
+                        key={item.value}
+                        onClick={() => onClickItem(item)}
+                    >
+                        {item.label}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/ErrorBoundary/ErrorBoundary.test.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 { generateSystemReport } from '../utils/systemReport';
+import ErrorBoundary from './ErrorBoundary';
+
+jest.mock('../utils/systemReport');
+jest.mock('../utils/usageData', () => ({
+    ...jest.requireActual('../utils/usageData'),
+    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('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();
+    });
+});