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

package/src/About/ApplicationCard.tsx

@@ -56,28 +56,26 @@ export default () => {
 
     return (
         <Card title="Application">
-            <Section title="Title">{appInfo.displayName}</Section>
-            <Section title="Purpose">{appInfo.description}</Section>
-            <Section title="Version">{appInfo.currentVersion}</Section>
-            <Section title="Source">{appInfo.source || 'local'}</Section>
-            <Section title="Supported engines">
-                nRF Connect {appInfo.engineVersion}
-            </Section>
-            <Section title="Current engine">
-                nRF Connect {appInfo.coreVersion}
-            </Section>
-            <Section>
-                <AboutButton
-                    url={appInfo.repositoryUrl}
-                    label="Get source code"
-                />
-            </Section>
-            <Section>
-                <FactoryResetButton label="Restore defaults..." />
-            </Section>
-            <Section>
-                <ShortcutButton label="Show shortcuts" />
-            </Section>
+            <div className="tw-preflight tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+                <Section title="Title">{appInfo.displayName}</Section>
+                <Section title="Purpose">{appInfo.description}</Section>
+                <Section title="Version">{appInfo.currentVersion}</Section>
+                <Section title="Source">{appInfo.source || 'local'}</Section>
+                <Section title="Supported engines">
+                    nRF Connect {appInfo.engineVersion}
+                </Section>
+                <Section title="Current engine">
+                    nRF Connect {appInfo.coreVersion}
+                </Section>
+                <Section>
+                    <AboutButton
+                        url={appInfo.repositoryUrl}
+                        label="Get source code"
+                    />
+                    <FactoryResetButton label="Restore defaults..." />
+                    <ShortcutButton label="Show shortcuts" />
+                </Section>
+            </div>
         </Card>
     );
 };

package/src/About/DeviceCard.tsx

@@ -41,34 +41,36 @@ export default () => {
 
     return (
         <Card title="Device">
-            <Section title="Name">{name || 'Unknown'}</Section>
-            <Section title="ID">{device.serialNumber}</Section>
-            <Section title="PCA">{pca || 'Unknown'}</Section>
-            <Section title="Cores">{cores || 'Unknown'}</Section>
+            <div className="tw-preflight tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+                <Section title="Name">{name || 'Unknown'}</Section>
+                <Section title="ID">{device.serialNumber}</Section>
+                <Section title="PCA">{pca || 'Unknown'}</Section>
+                <Section title="Cores">{cores || 'Unknown'}</Section>
 
-            {device.hwInfo && (
-                <>
-                    <Section title="RAM">
-                        {memorySize(device.hwInfo.ramSize)}
-                    </Section>
-                    <Section title="Flash">
-                        {memorySize(device.hwInfo.romSize)}
-                    </Section>
-                </>
-            )}
+                {device.hwInfo && (
+                    <>
+                        <Section title="RAM">
+                            {memorySize(device.hwInfo.ramSize)}
+                        </Section>
+                        <Section title="Flash">
+                            {memorySize(device.hwInfo.romSize)}
+                        </Section>
+                    </>
+                )}
 
-            <Section>
-                <AboutButton
-                    url={buyOnlineUrl(device)}
-                    label="Find distributor"
-                />
-            </Section>
-            <Section>
-                <AboutButton
-                    url={productPageUrl(device)}
-                    label="Go to product page"
-                />
-            </Section>
+                <Section>
+                    <AboutButton
+                        url={buyOnlineUrl(device)}
+                        label="Find distributor"
+                    />
+                </Section>
+                <Section>
+                    <AboutButton
+                        url={productPageUrl(device)}
+                        label="Go to product page"
+                    />
+                </Section>
+            </div>
         </Card>
     );
 };

package/src/About/DocumentationCard.tsx

@@ -4,15 +4,18 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React, { ReactNode } from 'react';
 
 import Card from '../Card/Card';
-import { documentationSections } from './documentationSlice';
 
-export default () => {
-    const sections = useSelector(documentationSections);
-    if (sections.length === 0) return null;
-
-    return <Card title="Documentation">{sections}</Card>;
-};
+export default ({
+    documentationSections,
+}: {
+    documentationSections: ReactNode[];
+}) => (
+    <Card title="Documentation">
+        <div className="tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+            {documentationSections}
+        </div>
+    </Card>
+);

package/src/About/Section.tsx

@@ -6,16 +6,16 @@
 
 import React, { ReactNode } from 'react';
 
-import './section.scss';
-
 interface Props {
     title?: string;
     children?: ReactNode;
 }
 
 export default ({ children, title }: Props) => (
-    <div className="about-section">
-        {title != null && <h3 className="about-section-title">{title}</h3>}
-        {children}
+    <div className="tw-preflight tw-w-full">
+        {title != null && <h3 className="tw-pb-1 tw-font-medium">{title}</h3>}
+        <div className="tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+            {children}
+        </div>
     </div>
 );

package/src/About/SupportCard.tsx

@@ -35,63 +35,68 @@ export default () => {
 
     return (
         <Card title="Support">
-            <Section title="DevZone">
-                <p>
-                    All support requests must be sent through our developer
-                    portal DevZone.
-                </p>
-                <AboutButton
-                    url="https://devzone.nordicsemi.com"
-                    label="Go to DevZone"
-                />
-            </Section>
-            <Section title="System report">
-                <p>
-                    In order to get the best support it is helpful for our
-                    employees to know details about your operating system and
-                    related software. Create a system report and add to your
-                    support request.
-                </p>
-                <AboutButton
-                    onClick={() =>
-                        systemReport(
-                            [...devices.values()],
-                            currentSerialNumber as string,
-                            currentDevice
-                        )
-                    }
-                    label="Create system report"
-                />
-            </Section>
-            <Section title="Verbose Logging">
-                <p>
-                    Aid our support team with additional log information. Enable
-                    this only when necessary as the log will grow quickly.
-                </p>
-                <Toggle
-                    id="enableVerboseLoggin"
-                    label="VERBOSE LOGGING"
-                    onToggle={() => {
-                        setVerboseDeviceLibLogging(!verboseLogging);
-                        dispatch(toggleIsLoggingVerbose());
-                    }}
-                    isToggled={verboseLogging}
-                    variant="primary"
-                />
-                <Section>
-                    <Button
-                        variant="secondary"
-                        onClick={() => {
-                            persistIsLoggingVerbose(true);
-                            getCurrentWindow().reload();
-                        }}
-                        title="Restart application with verbose logging turned on to get log messages from initial enumeration"
-                        disabled={!verboseLogging}
-                    >
-                        Restart with verbose logging
-                    </Button>
+            <div className="tw-preflight tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+                <Section title="DevZone">
+                    <p>
+                        All support requests must be sent through our developer
+                        portal DevZone.
+                    </p>
+                    <AboutButton
+                        url="https://devzone.nordicsemi.com"
+                        label="Go to DevZone"
+                    />
                 </Section>
-            </Section>
+                <Section title="System report">
+                    <p>
+                        In order to get the best support it is helpful for our
+                        employees to know details about your operating system
+                        and related software. Create a system report and add to
+                        your support request.
+                    </p>
+                    <AboutButton
+                        onClick={() =>
+                            systemReport(
+                                [...devices.values()],
+                                currentSerialNumber as string,
+                                currentDevice
+                            )
+                        }
+                        label="Create system report"
+                    />
+                </Section>
+                <Section title="Verbose Logging">
+                    <p>
+                        Aid our support team with additional log information.
+                        Enable this only when necessary as the log will grow
+                        quickly.
+                    </p>
+                    <div className="tw-w-full">
+                        <Toggle
+                            id="enableVerboseLoggin"
+                            label="VERBOSE LOGGING"
+                            onToggle={() => {
+                                setVerboseDeviceLibLogging(!verboseLogging);
+                                dispatch(toggleIsLoggingVerbose());
+                            }}
+                            isToggled={verboseLogging}
+                            variant="primary"
+                        />
+                    </div>
+                    <Section>
+                        <Button
+                            variant="secondary"
+                            onClick={() => {
+                                persistIsLoggingVerbose(true);
+                                getCurrentWindow().emit('restart-window');
+                            }}
+                            title="Restart application with verbose logging turned on to get log messages from initial enumeration"
+                            disabled={!verboseLogging}
+                        >
+                            Restart with verbose logging
+                        </Button>
+                    </Section>
+                </Section>
+            </div>
         </Card>
     );
 };

package/src/App/App.tsx

@@ -13,7 +13,6 @@ import { ipcRenderer } from 'electron';
 import { Reducer } from 'redux';
 
 import About from '../About/About';
-import { setDocumentationSections } from '../About/documentationSlice';
 import BrokenDeviceDialog from '../Device/BrokenDeviceDialog/BrokenDeviceDialog';
 import { setAutoReselect } from '../Device/deviceAutoSelectSlice';
 import {
@@ -23,8 +22,10 @@ import {
 } from '../Device/deviceSlice';
 import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
 import ErrorDialog from '../ErrorDialog/ErrorDialog';
+import FlashMessages from '../FlashMessage/FlashMessage';
 import LogViewer from '../Log/LogViewer';
 import NavBar from '../NavBar/NavBar';
+import FeedbackPane, { FeedbackPaneProps } from '../Panes/FeedbackPane';
 import classNames from '../utils/classNames';
 import packageJson from '../utils/packageJson';
 import { getPersistedCurrentPane } from '../utils/persistentStore';
@@ -43,6 +44,7 @@ import VisibilityBar from './VisibilityBar';
 
 import './app.scss';
 import './shared.scss';
+import './tailwind.css';
 
 let usageDataAlreadyInitialised = false;
 const initialiseUsageData = () => {
@@ -74,6 +76,7 @@ interface ConnectedAppProps {
     showLogByDefault?: boolean;
     reportUsageData?: boolean;
     documentation?: ReactNode[];
+    feedback?: boolean | FeedbackPaneProps;
     children?: ReactNode;
     autoReselectByDefault?: boolean;
 }
@@ -85,13 +88,14 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
     showLogByDefault = true,
     reportUsageData = false,
     documentation,
+    feedback,
     children,
     autoReselectByDefault = false,
 }) => {
     usePersistedPane();
     const isLogVisible = useSelector(isLogVisibleSelector);
     const currentPane = useSelector(currentPaneSelector);
-    const allPanes = useAllPanes(panes);
+    const allPanes = useAllPanes(panes, documentation, feedback);
     const dispatch = useDispatch();
 
     useHotKey({
@@ -111,10 +115,6 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
         }
     }, [dispatch, showLogByDefault]);
 
-    useEffect(() => {
-        if (documentation) dispatch(setDocumentationSections(documentation));
-    }, [dispatch, documentation]);
-
     const SidePanelComponent = allPanes[currentPane].SidePanel;
     const currentSidePanel =
         SidePanelComponent != null ? <SidePanelComponent /> : sidePanel;
@@ -166,6 +166,7 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
                         <LogViewer />
                     </div>
                 </div>
+                <FlashMessages />
             </div>
             <VisibilityBar isSidePanelEnabled={sidePanel !== null} />
 
@@ -211,13 +212,37 @@ const usePersistedPane = () => {
     }, [dispatch]);
 };
 
-const useAllPanes = (panes: Pane[]) => {
+const useAllPanes = (
+    panes: Pane[],
+    documentation: ReactNode[] | undefined,
+    feedback: boolean | FeedbackPaneProps | undefined
+) => {
     const dispatch = useDispatch();
 
-    const allPanes = useMemo(
-        () => [...panes, { name: 'About', Main: About }] as Pane[],
-        [panes]
-    );
+    const allPanes = useMemo(() => {
+        const newPanes = [...panes];
+
+        if (feedback) {
+            newPanes.push({
+                name: 'Feedback',
+                Main: props => (
+                    <FeedbackPane
+                        {...(typeof feedback === 'object'
+                            ? feedback
+                            : undefined)}
+                        {...props}
+                    />
+                ),
+            });
+        }
+
+        newPanes.push({
+            name: 'About',
+            Main: props => <About documentation={documentation} {...props} />,
+        });
+
+        return newPanes;
+    }, [panes, documentation, feedback]);
 
     useEffect(() => {
         dispatch(setPanes(allPanes));

package/src/App/appLayout.ts

@@ -34,7 +34,6 @@ const setCurrentPaneInState = (newPane: number, state: AppLayout) => {
 
 interface PaneSpec {
     name: string;
-    Main: unknown;
 }
 
 const slice = createSlice({