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

package/src/SerialPort/ConflictingSettingsDialog.tsx

@@ -10,6 +10,7 @@ import { SerialPortOpenOptions } from 'serialport';
 
 import { ConfirmationDialog } from '../Dialog/Dialog';
 import logger from '../logging';
+import classNames from '../utils/classNames';
 import {
     createSerialPort,
     getSerialPortOptions,
@@ -49,10 +50,10 @@ const ConflictingSettingsDialog = ({
         useState<SerialPortOpenOptions<AutoDetectTypes>>();
 
     useEffect(() => {
-        if (!activeSettings) {
+        if (isVisible) {
             getCurrentOptions(localSettings.path, setSettings);
         }
-    }, [isVisible, activeSettings, localSettings.path]);
+    }, [isVisible, localSettings.path]);
 
     const connectToSelectedSerialPort = async (
         overwrite: boolean,
@@ -81,6 +82,7 @@ const ConflictingSettingsDialog = ({
             title={`Conflicting Serial Settings for ${localSettings.path}`}
             isVisible={isVisible}
             size="lg"
+            className="tw-preflight"
             onCancel={onCancel}
             optionalLabel="Overwrite with Selected"
             onOptional={onOverwrite}
@@ -96,29 +98,32 @@ const ConflictingSettingsDialog = ({
                 }
             }}
         >
-            <p>
-                You are about to connect to <code>{localSettings.path}</code>.
-                This port is already active with different serial settings -
-                most likely it is opened by another nRF Connect app running on
-                your computer.
-            </p>
-            <p>
-                You may continue with the active serial port settings or choose
-                to overwrite these with the settings you have selected. If you
-                choose to overwrite the active settings, the port will be closed
-                and reopened with the new settings. Alternatively, you can close
-                the port in the other app and try again.
-            </p>
-            <p>
-                The serial settings depend on the attached device and it&apos;s
-                embedded application, and normally the serial port settings for
-                all nRF Connect apps should be the same for a given serial port.
-            </p>
-
-            <DisplayConflictingSettings
-                activeSettings={activeSettings}
-                localSettings={localSettings}
-            />
+            <div className="tw-flex tw-flex-col tw-gap-4">
+                <p>
+                    You are about to connect to{' '}
+                    <code>{localSettings.path}</code>. This port is already
+                    active with different serial settings - most likely it is
+                    opened by another nRF Connect app running on your computer.
+                </p>
+                <p>
+                    You may continue with the active serial port settings or
+                    choose to overwrite these with the settings you have
+                    selected. If you choose to overwrite the active settings,
+                    the port will be closed and reopened with the new settings.
+                    Alternatively, you can close the port in the other app and
+                    try again.
+                </p>
+                <p>
+                    The serial settings depend on the attached device and
+                    it&apos;s embedded application, and normally the serial port
+                    settings for all nRF Connect apps should be the same for a
+                    given serial port.
+                </p>
+                <DisplayConflictingSettings
+                    activeSettings={activeSettings}
+                    localSettings={localSettings}
+                />
+            </div>
         </ConfirmationDialog>
     );
 };
@@ -140,6 +145,7 @@ const DisplayConflictingSettings = ({
             }
         });
     }
+    allKeys.splice(allKeys.indexOf('path'), 1);
 
     const conflictingSettings = activeSettings
         ? allKeys.filter(
@@ -150,30 +156,21 @@ const DisplayConflictingSettings = ({
         : [];
 
     return (
-        <div
-            style={{
-                width: '100%',
-                display: 'flex',
-                justifyContent: 'flex-start',
-                margin: '32px 0',
-            }}
-        >
-            <div style={{ marginRight: '128px' }}>
-                <b>Active settings</b>
+        <div className="tw-preflight tw-my-4 tw-flex tw-w-full tw-justify-start">
+            <div className="tw-pr-7">
                 {activeSettings ? (
-                    <ul style={listStyle}>
+                    <ul>
+                        <li className="tw-p-1 tw-font-bold">Active settings</li>
                         {allKeys.map(key => (
                             <li
                                 key={key}
-                                style={{
-                                    ...listItemStyle,
-                                    backgroundColor:
-                                        conflictingSettings.includes(key)
-                                            ? '#FFCDD2'
-                                            : undefined,
-                                }}
+                                className={`tw-p-1 ${classNames(
+                                    conflictingSettings.includes(key)
+                                        ? 'tw-bg-red-100'
+                                        : 'tw-bg-green-100'
+                                )}`}
                             >
-                                {key}:
+                                <span className="tw-font-semibold">{`${key}: `}</span>
                                 {prettifyValue(
                                     activeSettings[
                                         key as keyof typeof activeSettings
@@ -186,22 +183,19 @@ const DisplayConflictingSettings = ({
                     <p>Could not retrieve the current settings</p>
                 )}
             </div>
-            <div>
-                <b>Selected settings</b>
-                <ul style={listStyle}>
+            <div className="tw-pr-7">
+                <ul>
+                    <li className="tw-p-1 tw-font-bold">Selected settings</li>
                     {allKeys.map(key => (
                         <li
+                            className={`tw-p-1 ${classNames(
+                                conflictingSettings.includes(key)
+                                    ? 'tw-bg-red-100'
+                                    : 'tw-bg-green-100'
+                            )}`}
                             key={key}
-                            style={{
-                                ...listItemStyle,
-                                backgroundColor: conflictingSettings.includes(
-                                    key
-                                )
-                                    ? '#FFCDD2'
-                                    : undefined,
-                            }}
                         >
-                            {key}:
+                            <span className="tw-font-semibold">{`${key}: `}</span>
                             {prettifyValue(
                                 localSettings[key as keyof typeof localSettings]
                             )}
@@ -230,13 +224,3 @@ const prettifyValue = (value: unknown) => {
 };
 
 export default ConflictingSettingsDialog;
-
-const listStyle: React.CSSProperties = {
-    listStyleType: 'none',
-    margin: 0,
-    padding: 0,
-};
-
-const listItemStyle: React.CSSProperties = {
-    padding: '4px 0',
-};

package/src/StateSelector/StateSelector.tsx

@@ -57,7 +57,7 @@ export default ({ items, onSelect, disabled = false, selectedItem }: Props) => {
     };
 
     return (
-        <ButtonGroup className="w-100 d-flex flex-row channel-selection">
+        <ButtonGroup className="w-100 d-flex channel-selection flex-row">
             {items.map((item, index) => selectionButton(item, index))}
         </ButtonGroup>
     );

package/src/Stepper/Stepper.tsx

@@ -7,7 +7,6 @@
 import React from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
-import Button from '../Button/Button';
 import classNames from '../utils/classNames';
 
 import './stepper.scss';
@@ -54,9 +53,9 @@ const isStringCaption = (
     (!isToolTipCaption(caption) && !isActionCaption(caption));
 
 const StepActionCaption = ({ caption }: { caption: ActionCaption }) => (
-    <Button variant="custom" className="action-link" onClick={caption.action}>
+    <button type="button" className="action-link" onClick={caption.action}>
         {`${caption.caption}`}
-    </Button>
+    </button>
 );
 
 const StepTooltipCaption = ({ caption }: { caption: TooltipCaption }) => (

package/src/index.ts

@@ -45,10 +45,12 @@ export { Group, CollapsibleGroup } from './SidePanel/Group';
 
 export { default as InlineInput } from './InlineInput/InlineInput';
 export { default as NumberInlineInput } from './InlineInput/NumberInlineInput';
+export { default as NumberInputSliderWithUnit } from './NumberInputWithSlider/NumberInputSliderWithUnit';
 
 export { default as MasonryLayout } from './MasonryLayout/MasonryLayout';
 
 export { default as useStopwatch } from './utils/useStopwatch';
+export { default as useFocusedOnVisible } from './utils/useFocusedOnVisible';
 
 export { reducer as errorDialogReducer } from './ErrorDialog/errorDialogSlice';
 export { default as logger } from './logging';
@@ -82,6 +84,8 @@ export {
     getAppSpecificStore as getPersistentStore,
     persistTerminalSettings,
     getPersistedTerminalSettings,
+    persistNickname,
+    getPersistedNickname,
 } from './utils/persistentStore';
 
 export { jprogDeviceSetup } from './Device/jprogOperations';
@@ -96,12 +100,12 @@ export {
 } from './Device/deviceSlice';
 export {
     setWaitForDevice,
-    clearWaitForDevice,
     getAutoReselect,
     getWaitingForDeviceTimeout,
     getWaitingToAutoReselect,
     getWaitForDevice,
 } from './Device/deviceAutoSelectSlice';
+export { clearWaitForDevice } from './Device/deviceLister';
 export { deviceInfo } from './Device/deviceInfo/deviceInfo';
 export { getDeviceLibContext } from './Device/deviceLibWrapper';
 export { isDeviceInDFUBootloader } from './Device/sdfuOperations';
@@ -128,7 +132,7 @@ export { default as ConflictingSettingsDialog } from './SerialPort/ConflictingSe
 
 export { openAppWindow } from './OpenApp/openApp';
 
-export type { NrfConnectState } from './store';
+export type { AppDispatch, AppThunk, NrfConnectState } from './store';
 
 export {
     type DeviceSetupConfig,
@@ -143,4 +147,11 @@ export type {
     SourceJson,
 } from './utils/AppTypes';
 
-export { default as FeedbackPane } from './Panes/FeedbackPane';
+export {
+    addNewMessage,
+    newCopiedFlashMessage,
+    newInfoFlashMessage,
+    newWarningFlashMessage,
+    newErrorFlashMessage,
+    newSuccessFlashMessage,
+} from './FlashMessage/FlashMessageSlice';

package/src/store.ts

@@ -4,10 +4,9 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-import { configureStore } from '@reduxjs/toolkit';
+import { AnyAction, configureStore, ThunkAction } from '@reduxjs/toolkit';
 import { Reducer } from 'redux';
 
-import { reducer as documentation } from './About/documentationSlice';
 import { reducer as shortcuts } from './About/shortcutSlice';
 import { reducer as appLayout } from './App/appLayout';
 import { reducer as brokenDeviceDialog } from './Device/BrokenDeviceDialog/brokenDeviceDialogSlice';
@@ -15,6 +14,7 @@ import { reducer as deviceAutoSelect } from './Device/deviceAutoSelectSlice';
 import { reducer as deviceSetup } from './Device/deviceSetupSlice';
 import { reducer as device } from './Device/deviceSlice';
 import { reducer as errorDialog } from './ErrorDialog/errorDialogSlice';
+import { reducer as flashMessages } from './FlashMessage/FlashMessageSlice';
 import { reducer as log } from './Log/logSlice';
 
 const ifBuiltForDevelopment = <X>(value: X) =>
@@ -31,8 +31,8 @@ export const rootReducerSpec = (appReducer: Reducer = noopReducer) => ({
     brokenDeviceDialog,
     errorDialog,
     log,
-    documentation,
     shortcuts,
+    flashMessages,
 });
 
 const store = (appReducer?: Reducer) =>
@@ -50,6 +50,13 @@ const store = (appReducer?: Reducer) =>
 
 // Needed only to infer the types below
 const concreteStore = store();
+
+export type AppThunk<AppLayout = RootState, ReturnType = void> = ThunkAction<
+    ReturnType,
+    AppLayout,
+    unknown,
+    AnyAction
+>;
 export type RootState = ReturnType<typeof concreteStore.getState>;
 export type AppDispatch = typeof concreteStore.dispatch;
 

package/src/utils/colors.ts

@@ -6,14 +6,28 @@
 
 // Keep this file in sync with colors.scss
 export const colors = {
-    nordicBlue: '#00a9ce',
     blueSlate: '#0033a0',
+    blueSlateLighter: '#7c98d3',
     white: 'white',
     black: 'black',
     primary: '#00a9ce',
     primaryDarkened: '#0098b9',
     secondary: 'white',
     accent: '#0033a0',
+
+    nordicBlue: '#00A9CE',
+    nordicBlue50: '#E0F5F9',
+    nordicBlue100: '#B3E5F0',
+    nordicBlue200: '#80D4E7',
+    nordicBlue300: '#4DC3DD',
+    nordicBlue400: '#26B6D5',
+    nordicBlue500: '#00A9CE',
+    nordicBlue600: '#00A2C9',
+    nordicBlue700: '#0098C2',
+    nordicBlue800: '#008FBC',
+    nordicBlue900: '#007EB0',
+
+    gray: '#607d8b',
     gray50: '#eceff1',
     gray100: '#cfd8dc',
     gray200: '#b0bec5',
@@ -24,15 +38,136 @@ export const colors = {
     gray700: '#455a64',
     gray800: '#37474f',
     gray900: '#263238',
-    red: '#f44336',
-    indigo: '#3f51b5',
-    amber: '#ffc107',
-    purple: '#9c27b0',
-    green: '#4caf50',
-    deepPurple: '#673ab7',
-    orange: '#ff9800',
-    lime: '#cddc39',
-    pink: '#e91e63',
-    blueSlateLighter: '#7c98d3',
-    greenLighter: '#b1cbb3',
+
+    red: '#F44336',
+    red50: '#FFEBEE',
+    red100: '#FFCDD2',
+    red200: '#EF9A9A',
+    red300: '#E57373',
+    red400: '#EF5350',
+    red500: '#F44336',
+    red600: '#E53935',
+    red700: '#C62828',
+    red800: '#C62828',
+    red900: '#B71C1C',
+
+    indigo: '#3F51B5',
+    indigo50: '#E8EAF6',
+    indigo100: '#C5CAE9',
+    indigo200: '#9FA8DA',
+    indigo300: '#7986CB',
+    indigo400: '#5C6BC0',
+    indigo500: '#3F51B5',
+    indigo600: '#3949AB',
+    indigo700: '#303F9F',
+    indigo800: '#283593',
+    indigo900: '#1A237E',
+
+    amber: '#FFC107',
+    amber50: '#FFF8E1',
+    amber100: '#FFECB3',
+    amber200: '#FFE082',
+    amber300: '#FFD54F',
+    amber400: '#FFCA28',
+    amber500: '#FFC107',
+    amber600: '#FFB300',
+    amber700: '#FFA000',
+    amber800: '#FF8F00',
+    amber900: '#FF6F00',
+
+    purple: '#9C27B0',
+    purple50: '#F3E5F5',
+    purple100: '#E1BEE7',
+    purple200: '#CE93D8',
+    purple300: '#BA68C8',
+    purple400: '#AB47BC',
+    purple500: '#9C27B0',
+    purple600: '#8E24AA',
+    purple700: '#7B1FA2',
+    purple800: '#6A1B9A',
+    purple900: '#4A148C',
+
+    green: '#4CAF50',
+    green50: '#E8F5E9',
+    green100: '#C8E6C9',
+    green200: '#A5D6A7',
+    green300: '#81C784',
+    green400: '#66BB6A',
+    green500: '#4CAF50',
+    green600: '#43A047',
+    green700: '#388E3C',
+    green800: '#2E7D32',
+    green900: '#1B5E20',
+
+    deepPurple: '#673AB7',
+    deepPurple50: '#EDE7F6',
+    deepPurple100: '#D1C4E9',
+    deepPurple200: '#B39DDB',
+    deepPurple300: '#9575CD',
+    deepPurple400: '#7E57C2',
+    deepPurple500: '#673AB7',
+    deepPurple600: '#5E35B1',
+    deepPurple700: '#512DA8',
+    deepPurple800: '#4527A0',
+    deepPurple900: '#311B92',
+
+    orange: '#FF9800',
+    orange50: '#FFF3E0',
+    orange100: '#FFE0B2',
+    orange200: '#FFCC80',
+    orange300: '#FFB74D',
+    orange400: '#FFA726',
+    orange500: '#FF9800',
+    orange600: '#FB8C00',
+    orange700: '#F57C00',
+    orange800: '#EF6C00',
+    orange900: '#E65100',
+
+    lime: '#CDDC39',
+    lime50: '#F9FBE7',
+    lime100: '#F0F4C3',
+    lime200: '#E6EE9C',
+    lime300: '#DCE775',
+    lime400: '#D4E157',
+    lime500: '#CDDC39',
+    lime600: '#C0CA33',
+    lime700: '#AFB42B',
+    lime800: '#9E9D24',
+    lime900: '#827717',
+
+    pink: '#E91E63',
+    pink50: '#FCE4EC',
+    pink100: '#F8BBD0',
+    pink200: '#F48FB1',
+    pink300: '#F06292',
+    pink400: '#EC407A',
+    pink500: '#E91E63',
+    pink600: '#D81B60',
+    pink700: '#C2185B',
+    pink800: '#AD1457',
+    pink900: '#880E4F',
+
+    lightGreen: '#8BC34A',
+    lightGreen50: '#F1F8E9',
+    lightGreen100: '#DCEDC8',
+    lightGreen200: '#C5E1A5',
+    lightGreen300: '#AED581',
+    lightGreen400: '#9CCC65',
+    lightGreen500: '#8BC34A',
+    lightGreen600: '#7CB342',
+    lightGreen700: '#689F38',
+    lightGreen800: '#558B2F',
+    lightGreen900: '#33691E',
+
+    lightBlue: '#03A9F4',
+    lightBlue50: '#E1F5FE',
+    lightBlue100: '#B3E5FC',
+    lightBlue200: '#81D4FA',
+    lightBlue300: '#4FC3F7',
+    lightBlue400: '#29B6F6',
+    lightBlue500: '#03A9F4',
+    lightBlue600: '#039BE5',
+    lightBlue700: '#0288D1',
+    lightBlue800: '#0277BD',
+    lightBlue900: '#01579B',
 };