tour: move button to settings

Since we have the Pybricks logo elsewhere now, we don't need to have
this button on the toolbar. Instead, put it in the settings where it
is out of the way, but can still be used to watch the tour again if
desired.

Some steps are reordered so we don't jump back and forth between
activities since we are starting from the settings tab now.

Also fix changing the selected activities tab when closing the tour.

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ### Changed
 - Firmware restore for hubs with USB is now done in-app ([pybricks-code#1104]).
+- Moved *Tour* button from toolbar to settings.
 
 [pybricks-code#1104]: https://github.com/pybricks/pybricks-code/issues/1104
 

src/settings/Settings.tsx

@@ -27,6 +27,7 @@ import { firmwareInstallPybricks } from '../firmware/actions';
 import { firmwareRestoreOfficialDialogShow } from '../firmware/restoreOfficialDialog/actions';
 import { pseudolocalize } from '../i18n';
 import { useSelector } from '../reducers';
+import { tourStart } from '../tour/actions';
 import { isMacOS } from '../utils/os';
 import { useSettingIsShowDocsEnabled } from './hooks';
 import { useI18n } from './i18n';
@@ -183,6 +184,15 @@ const Settings: React.VoidFunctionComponent = () => {
                             return true;
                         }}
                     />
+                    <Button
+                        id="pb-settings-tour-button"
+                        label={i18n.translate('app.tour.label')}
+                        icon="info-sign"
+                        onPress={() => {
+                            dispatch(tourStart());
+                            return true;
+                        }}
+                    />
                 </ButtonGroup>
             </FormGroup>
             {process.env.NODE_ENV === 'development' && (

src/settings/translations/en.json

@@ -52,6 +52,9 @@
         },
         "about": {
             "label": "About"
+        },
+        "tour": {
+            "label": "Welcome Tour"
         }
     }
 }

src/toolbar/Toolbar.tsx

@@ -10,7 +10,6 @@ import ReplButton from './buttons/repl/ReplButton';
 import RunButton from './buttons/run/RunButton';
 import SponsorButton from './buttons/sponsor/SponsorButton';
 import StopButton from './buttons/stop/StopButton';
-import TourButton from './buttons/tour/TourButton';
 
 import './toolbar.scss';
 
@@ -18,7 +17,6 @@ import './toolbar.scss';
 const bluetoothButtonId = 'pb-toolbar-bluetooth-button';
 const runButtonId = 'pb-toolbar-run-button';
 const sponsorButtonId = 'pb-toolbar-sponsor-button';
-const tourButtonId = 'pb-toolbar-tour-button';
 
 const Toolbar: React.VFC = () => {
     const flashButtonId = useId();
@@ -37,7 +35,6 @@ const Toolbar: React.VFC = () => {
             </ButtonGroup>
             <ButtonGroup className="pb-toolbar-group pb-align-right">
                 <SponsorButton id={sponsorButtonId} />
-                <TourButton id={tourButtonId} />
             </ButtonGroup>
         </UtilsToolbar>
     );

src/toolbar/buttons/tour/TourButton.test.tsx

@@ -1,24 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { cleanup } from '@testing-library/react';
-import React from 'react';
-import { testRender } from '../../../../test';
-import { appName } from '../../../app/constants';
-import { HubRuntimeState } from '../../../hub/reducers';
-import { tourStart } from '../../../tour/actions';
-import TourButton from './TourButton';
-
-afterEach(() => {
-    cleanup();
-});
-
-it('should dispatch action when clicked', async () => {
-    const [user, button, dispatch] = testRender(<TourButton id="test-tour-button" />, {
-        hub: { runtime: HubRuntimeState.Running },
-    });
-
-    await user.click(button.getByRole('button', { name: `Tour ${appName}` }));
-
-    expect(dispatch).toHaveBeenCalledWith(tourStart());
-});

src/toolbar/buttons/tour/TourButton.tsx

@@ -1,29 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
-
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import { appName } from '../../../app/constants';
-import { tourStart } from '../../../tour/actions';
-import ActionButton, { ActionButtonProps } from '../../ActionButton';
-import { useI18n } from './i18n';
-import icon from './icon.svg';
-
-type TourButtonProps = Pick<ActionButtonProps, 'id'>;
-
-const TourButton: React.VoidFunctionComponent<TourButtonProps> = ({ id }) => {
-    const i18n = useI18n();
-    const dispatch = useDispatch();
-
-    return (
-        <ActionButton
-            id={id}
-            label={i18n.translate('label', { appName })}
-            tooltip={i18n.translate('tooltip', { appName })}
-            icon={icon}
-            onAction={() => dispatch(tourStart())}
-        />
-    );
-};
-
-export default TourButton;

src/toolbar/buttons/tour/i18n.ts

@@ -1,12 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
-import type { TypedI18n } from '../../../i18n';
-import type translations from './translations/en.json';
-
-export function useI18n(): TypedI18n<typeof translations> {
-    // istanbul ignore next: babel-loader rewrites this line
-    const [i18n] = useShopifyI18n();
-    return i18n;
-}

src/toolbar/buttons/tour/icon.svg

@@ -1 +0,0 @@
-<svg width="50" height="50" version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -270.54)"><path d="m1.9234 276.13c-1.0655 0-1.9234 0.85655-1.9234 1.9213v10.588c0 1.0648 0.85787 1.9213 1.9234 1.9213h3.3755c1.0655 0 1.9234-0.85653 1.9234-1.9213v-0.47646h12.014v0.47646c0 1.0648 0.85787 1.9213 1.9234 1.9213h3.3755c1.0655 0 1.9234-0.85653 1.9234-1.9213v-10.588c0-1.0648-0.85786-1.9213-1.9234-1.9213h-3.3755c-5.4826 0.0358-11.132 0.0125-15.861 0zm0.49609 2.4123h21.644v9.617h-2.3978v-2.3916h-2.0691v-0.89193h-0.74311v0.89193h-1.664v-0.89193h-0.74001v0.89193h-1.664v-0.89193h-0.74001v0.89193h-1.664v-0.89193h-0.74311v0.89193h-1.664v-0.89193h-0.74104v0.89193h-1.664v-0.89193h-0.68316v0.89193h-2.0691v2.3916h-2.3978v-3.2835z" fill="#fcfcfc"/><ellipse cx="8.4499" cy="281.03" rx="1.7076" ry="1.7064" fill="#fff"/><ellipse cx="18.033" cy="281.03" rx="1.7076" ry="1.7064" fill="#fff"/></g></svg>

src/toolbar/buttons/tour/translations/en.json

@@ -1,4 +0,0 @@
-{
-    "label": "Tour {appName}",
-    "tooltip": "Take a quick tour of {appName}"
-}

src/tour/Tour.tsx

@@ -119,25 +119,12 @@ const Tour: React.VoidFunctionComponent = () => {
     const steps = useMemo<Step[]>(
         () => [
             {
-                target: '#pb-toolbar-tour-button',
+                target:
+                    selectedActivity === Activity.Settings
+                        ? '#pb-settings-tour-button'
+                        : '[itemId=pb-activities-settings-tab]',
                 content: <WelcomeStep />,
-                disableBeacon: true,
-            },
-            {
-                target:
-                    selectedActivity === Activity.Explorer
-                        ? '#pb-explorer-add-button'
-                        : '[itemId=pb-activities-explorer-tab]',
-                content: <AddFileStep />,
-                disableBeacon: selectedActivity === Activity.Explorer,
-            },
-            {
-                target:
-                    selectedActivity === Activity.Explorer
-                        ? '#pb-explorer-archive-button'
-                        : '[itemId=pb-activities-explorer-tab]',
-                content: <BackupFilesStep />,
-                disableBeacon: selectedActivity === Activity.Explorer,
+                disableBeacon: selectedActivity === Activity.Settings,
             },
             {
                 target:
@@ -155,6 +142,22 @@ const Tour: React.VoidFunctionComponent = () => {
                 content: <RestoreOfficialFirmwareStep />,
                 disableBeacon: selectedActivity === Activity.Settings,
             },
+            {
+                target:
+                    selectedActivity === Activity.Explorer
+                        ? '#pb-explorer-add-button'
+                        : '[itemId=pb-activities-explorer-tab]',
+                content: <AddFileStep />,
+                disableBeacon: selectedActivity === Activity.Explorer,
+            },
+            {
+                target:
+                    selectedActivity === Activity.Explorer
+                        ? '#pb-explorer-archive-button'
+                        : '[itemId=pb-activities-explorer-tab]',
+                content: <BackupFilesStep />,
+                disableBeacon: selectedActivity === Activity.Explorer,
+            },
             {
                 target: '#pb-toolbar-bluetooth-button',
                 content: <ConnectToHubStep />,
@@ -202,6 +205,7 @@ const Tour: React.VoidFunctionComponent = () => {
             if (event.action === ACTIONS.CLOSE || event.status === STATUS.FINISHED) {
                 dispatch(tourStop());
                 setStepIndex(0);
+                return;
             }
 
             if (event.type === EVENTS.STEP_AFTER) {