dialog activation moved to statusbar

src/hubcenter/HubCenterDialog.tsx

@@ -30,9 +30,9 @@ const HubcenterDialog: React.FunctionComponent = () => {
     const dispatch = useDispatch();
     const i18n = useI18n();
     // const deviceName = useSelector((s) => s.ble.deviceName);
-    // const deviceType = useSelector((s) => s.ble.deviceType);
-    // const deviceFirmwareVersion = useSelector((s) => s.ble.deviceFirmwareVersion);
-    //const charging = useSelector((s) => s.ble.deviceBatteryCharging);
+    const deviceType = useSelector((s) => s.ble.deviceType);
+    const deviceFirmwareVersion = useSelector((s) => s.ble.deviceFirmwareVersion);
+    // const charging = useSelector((s) => s.ble.deviceBatteryCharging);
     // const lowBatteryWarning = useSelector((s) => s.ble.deviceLowBatteryWarning);
 
     // wire shared context to terminal output
@@ -57,7 +57,14 @@ const HubcenterDialog: React.FunctionComponent = () => {
                         case 'H':
                             {
                                 setHubName(line[1]);
-                                setHubDetails(line[3]);
+                                const details = [
+                                    deviceType,
+                                    deviceFirmwareVersion,
+                                    line[3],
+                                ]
+                                    .filter((e) => !!e)
+                                    .join(', ');
+                                setHubDetails(details);
                             }
                             break;
                         case 'BAT':
@@ -99,7 +106,7 @@ const HubcenterDialog: React.FunctionComponent = () => {
         });
 
         return () => subscription.unsubscribe();
-    }, [hubcenterStream]);
+    }, [deviceFirmwareVersion, deviceType, hubcenterStream]);
 
     return (
         <Dialog

src/status-bar/StatusBar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2024 The Pybricks Authors
 
 import './status-bar.scss';
 import {
@@ -16,8 +16,10 @@ import {
 import { Disable, Error, TickCircle } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
 import { BleConnectionState } from '../ble/reducers';
 import { CompletionEngineStatus } from '../editor/redux/codeCompletion';
+import { hubcenterShowDialog } from '../hubcenter/actions';
 import { useSelector } from '../reducers';
 import { useI18n } from './i18n';
 
@@ -71,43 +73,20 @@ const CompletionEngineIndicator: React.FunctionComponent = () => {
 };
 
 const HubInfoButton: React.FunctionComponent = () => {
+    const dispatch = useDispatch();
     const i18n = useI18n();
     const deviceName = useSelector((s) => s.ble.deviceName);
-    const deviceType = useSelector((s) => s.ble.deviceType);
-    const deviceFirmwareVersion = useSelector((s) => s.ble.deviceFirmwareVersion);
 
     return (
-        <Popover
-            {...commonPopoverProps}
-            content={
-                <table className="no-wrap" style={{ userSelect: 'text' }}>
-                    <tbody>
-                        <tr>
-                            <td>
-                                <strong>{i18n.translate('hubInfo.connectedTo')}</strong>
-                            </td>
-                            <td>{deviceName}</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>{i18n.translate('hubInfo.hubType')}</strong>
-                            </td>
-                            <td>{deviceType}</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>{i18n.translate('hubInfo.firmware')}</strong>
-                            </td>
-                            <td>v{deviceFirmwareVersion}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            }
-        >
-            <Button title={i18n.translate('hubInfo.title')} minimal={true}>
+        <>
+            <Button
+                title={i18n.translate('hubInfo.title')}
+                onClick={() => dispatch(hubcenterShowDialog())}
+                minimal={true}
+            >
                 {deviceName}
             </Button>
-        </Popover>
+        </>
     );
 };
 

src/toolbar/Toolbar.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import { useId } from 'react-aria';
 import { Toolbar as UtilsToolbar } from '../components/toolbar/Toolbar';
 import BluetoothButton from './buttons/bluetooth/BluetoothButton';
-import HubcenterButton from './buttons/hubcenter/HubcenterButton';
 import ReplButton from './buttons/repl/ReplButton';
 import RunButton from './buttons/run/RunButton';
 import SponsorButton from './buttons/sponsor/SponsorButton';
@@ -24,7 +23,6 @@ const Toolbar: React.FunctionComponent = () => {
     const i18n = useI18n();
     const stopButtonId = useId();
     const replButtonId = useId();
-    const hubcenterButtonId = useId();
 
     return (
         <UtilsToolbar
@@ -40,9 +38,6 @@ const Toolbar: React.FunctionComponent = () => {
                 <StopButton id={stopButtonId} />
                 <ReplButton id={replButtonId} />
             </ButtonGroup>
-            <ButtonGroup className="pb-toolbar-group pb-align-left">
-                <HubcenterButton id={hubcenterButtonId} />
-            </ButtonGroup>
             <ButtonGroup className="pb-toolbar-group pb-align-right">
                 <SponsorButton id={sponsorButtonId} />
             </ButtonGroup>