feat(suite): display the left menu sidebar in welcome state

trezor · Feb 11, 2025 · 84c853c · 84c853c
1 parent 9b8f7ab
commit 84c853c
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 125 deletions.
diff --git a/packages/suite-desktop-core/e2e/support/bridge.ts b/packages/suite-desktop-core/e2e/support/bridge.ts
@@ -14,12 +14,12 @@ export const expectBridgeToBeStopped = async (request: APIRequestContext) => {
     }).rejects.toThrow('ECONNREFUSED');
 };
 
-// We wait for `@welcome/title` or `@dashboard/graph` since
+// We wait for `@welcome-layout/body` or `@dashboard/graph` since
 // one or the other will be display depending on the state of the app
 // due to previously run tests. And both means the same for the porpoise of this test.
 // Bridge should be ready to check `/status` endpoint.
 export const waitForAppToBeInitialized = async (suite: any) =>
     await Promise.race([
-        expect(suite.window.getByTestId('@welcome/title')).toBeVisible(),
+        expect(suite.window.getByTestId('@welcome-layout/body')).toBeVisible(),
         expect(suite.window.getByTestId('@dashboard/graph')).toBeVisible(),
     ]);
diff --git a/packages/suite-desktop-core/e2e/support/pageActions/onboarding/onboardingActions.ts b/packages/suite-desktop-core/e2e/support/pageActions/onboarding/onboardingActions.ts
@@ -18,7 +18,7 @@ export class OnboardingActions {
     readonly pin: PinActions;
     readonly tutorial: TutorialActions;
 
-    readonly welcomeTitle: Locator;
+    readonly welcomeBody: Locator;
     readonly onboardingContinueButton: Locator;
     readonly onboardingViewOnlySkipButton: Locator;
     readonly onboardingViewOnlyEnableButton: Locator;
@@ -52,7 +52,7 @@ export class OnboardingActions {
         this.tutorial = new TutorialActions(page);
         this.pin = new PinActions(page);
 
-        this.welcomeTitle = this.page.getByTestId('@welcome/title');
+        this.welcomeBody = this.page.getByTestId('@welcome-layout/body');
         this.onboardingContinueButton = this.page.getByTestId('@onboarding/exit-app-button');
         this.onboardingViewOnlySkipButton = this.page.getByTestId('@onboarding/viewOnly/skip');
         this.onboardingViewOnlyEnableButton = this.page.getByTestId('@onboarding/viewOnly/enable');
@@ -83,7 +83,7 @@ export class OnboardingActions {
 
     @step()
     async optionallyDismissFwHashCheckError() {
-        await expect(this.welcomeTitle).toBeVisible({ timeout: 10000 });
+        await expect(this.welcomeBody).toBeVisible({ timeout: 10000 });
         // dismisses the error modal only if it appears (handle it async in parallel, not necessary to block the rest of the flow)
         this.page
             .$('[data-testid="@device-compromised/back-button"]')
@@ -114,7 +114,7 @@ export class OnboardingActions {
             return;
         }
 
-        await expect(this.welcomeTitle).toBeVisible({ timeout: 10000 });
+        await expect(this.welcomeBody).toBeVisible({ timeout: 10000 });
         // eslint-disable-next-line @typescript-eslint/no-shadow
         await this.page.evaluate(SuiteActions => {
             window.store.dispatch({

diff --git a/packages/suite-desktop-core/e2e/support/pageActions/settings/settingsActions.ts b/packages/suite-desktop-core/e2e/support/pageActions/settings/settingsActions.ts
@@ -87,7 +87,7 @@ export class SettingsActions {
             '@settings/early-access-confirm-button',
         );
         this.earlyAccessSkipButton = this.page.getByTestId('@settings/early-access-skip-button');
-        this.settingsCloseButton = this.page.getByTestId('@settings/menu/close');
+        this.settingsCloseButton = this.page.getByTestId('@suite/menu/suite-start');
         this.modal = this.page.getByTestId('@modal');
         this.modalCloseButton = this.page.getByTestId('@modal/close-button');
         this.deviceLabelInput = this.page.getByTestId('@settings/device/label-input');

diff --git a/packages/suite-desktop-core/e2e/tests/bridge-tor/spawn-tor.test.ts b/packages/suite-desktop-core/e2e/tests/bridge-tor/spawn-tor.test.ts
@@ -55,7 +55,7 @@ test.describe.skip('Tor loading screen', { tag: ['@group=suite', '@desktopOnly']
             state: 'visible',
         });
 
-        await suite.window.waitForSelector('[data-testid="@welcome/title"]', { timeout });
+        await suite.window.waitForSelector('[data-testid="@welcome-layout/body"]', { timeout });
 
         suite.electronApp.close();
     });
@@ -83,7 +83,7 @@ test.describe.skip('Tor loading screen', { tag: ['@group=suite', '@desktopOnly']
             state: 'visible',
         });
 
-        await suite.window.waitForSelector('[data-testid="@welcome/title"]', { timeout });
+        await suite.window.waitForSelector('[data-testid="@welcome-layout/body"]', { timeout });
         networkAnalyzer.stop();
         const requests = networkAnalyzer.getRequests();
         requests.forEach(request => {

diff --git a/packages/suite-desktop-core/e2e/tests/browser/firefox.test.ts b/packages/suite-desktop-core/e2e/tests/browser/firefox.test.ts
@@ -5,7 +5,7 @@ import { expect, test } from '../../support/fixtures';
 test.use({ startEmulator: false, ...devices['Desktop Firefox'], channel: 'firefox' });
 test.describe('Firefox', { tag: ['@group=other', '@webOnly'] }, () => {
     test('Suite does support Firefox', async ({ page, onboardingPage }) => {
-        await expect(onboardingPage.welcomeTitle).toBeVisible({ timeout: 20_000 });
+        await expect(onboardingPage.welcomeBody).toBeVisible({ timeout: 20_000 });
         await expect(page.getByText('Continue at my own risk')).not.toBeVisible();
     });
 });
diff --git a/packages/suite-desktop-core/e2e/tests/browser/safari.test.ts b/packages/suite-desktop-core/e2e/tests/browser/safari.test.ts
@@ -29,6 +29,6 @@ test.describe('Safari', { tag: ['@group=other', '@webOnly', '@snapshot'] }, () =
             'Continue at my own risk',
         );
         await onboardingPage.continueAtYourOwnRiskButton.click({ force: true });
-        await expect(onboardingPage.welcomeTitle).toBeVisible({ timeout: 20_000 });
+        await expect(onboardingPage.welcomeBody).toBeVisible({ timeout: 20_000 });
     });
 });
diff --git a/packages/suite/src/components/suite/Preloader/__tests__/Preloader.test.tsx b/packages/suite/src/components/suite/Preloader/__tests__/Preloader.test.tsx
@@ -1,6 +1,7 @@
 import * as envUtils from '@trezor/env-utils';
 import { DeepPartial } from '@trezor/type-utils';
 
+import { desktopUpdateInitialState } from 'src/reducers/suite/desktopUpdateReducer';
 import { configureStore } from 'src/support/tests/configureStore';
 import { findByTestId, renderWithProviders } from 'src/support/tests/hooksHelper';
 
@@ -85,7 +86,9 @@ const getInitialState = ({ suite, router, device }: any = {}) => ({
         discovery: [],
         accountSearch: {},
         settings: {},
+        blockchain: {},
     },
+    desktopUpdate: desktopUpdateInitialState,
     router: {
         app: 'suite-index',
         loaded: true,

diff --git a/packages/suite/src/components/suite/layouts/LoggedOutLayout.tsx b/packages/suite/src/components/suite/layouts/LoggedOutLayout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useRef, useState } from 'react';
 
-import { ElevationContext, ElevationUp, NewModal } from '@trezor/components';
+import { ElevationContext, ElevationDown, ElevationUp, NewModal } from '@trezor/components';
 
 import { GuideButton, GuideRouter } from 'src/components/guide';
 import { useLayoutSize } from 'src/hooks/suite';
@@ -19,6 +19,7 @@ import {
     PageWrapper,
     Wrapper,
 } from './SuiteLayout/SuiteLayout';
+import { LoggedOutSidebar } from './WelcomeLayout/WelcomeLayout';
 import { ModalSwitcher } from '../modals/ModalSwitcher/ModalSwitcher';
 
 interface LoggedOutLayout {
@@ -47,6 +48,9 @@ export const LoggedOutLayout = ({ children }: LoggedOutLayout) => {
                                 <LayoutContext.Provider value={setLayoutPayload}>
                                     <Body data-testid="@suite-layout/body">
                                         <Columns>
+                                            <ElevationDown>
+                                                <LoggedOutSidebar />
+                                            </ElevationDown>
                                             <AppWrapper
                                                 data-testid="@app"
                                                 ref={scrollRef}

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Navigation.tsx
@@ -2,13 +2,14 @@ import { FC } from 'react';
 
 import styled from 'styled-components';
 
+import { Route } from '@suite-common/suite-types';
 import { spacingsPx } from '@trezor/theme';
 
 import { NavigationItem, NavigationItemProps } from './NavigationItem';
 import { NotificationDropdown } from './NotificationDropdown';
 import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
 
-const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
+export const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
     display: flex;
     flex-direction: column;
     gap: ${spacingsPx.xxs};
@@ -18,6 +19,13 @@ const Nav = styled.nav<{ $isSidebarCollapsed: boolean }>`
     ${({ $isSidebarCollapsed }) => $isSidebarCollapsed && `align-items: center;`}
 `;
 
+export const SETTINGS_ROUTES: Route['name'][] = [
+    'settings-index',
+    'settings-device',
+    'settings-coins',
+    'settings-debug',
+] as const;
+
 const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationItemProps> }> = [
     {
         nameId: 'TR_DASHBOARD',
@@ -34,7 +42,7 @@ const navItems: Array<NavigationItemProps & { CustomComponent?: FC<NavigationIte
         nameId: 'TR_SETTINGS',
         icon: 'gearSix',
         goToRoute: 'settings-index',
-        routes: ['settings-index', 'settings-device', 'settings-coins', 'settings-debug'],
+        routes: SETTINGS_ROUTES,
         'data-testid': '@suite/menu/settings',
     },
 ];

diff --git a/...ages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx b/...ages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx
@@ -7,7 +7,6 @@ import { DebugAndExperimental } from './DebugAndExperimental';
 import { HideBalances } from './HideBalances';
 import { Tor } from './Tor';
 import { UpdateStatusActionBarIcon } from './Update/UpdateStatusActionBarIcon';
-import { useResponsiveContext } from '../../../../../../support/suite/ResponsiveContext';
 
 const ActionsContainer = styled.div<{ $isSidebarCollapsed: boolean }>`
     display: flex;
@@ -25,21 +24,21 @@ const ActionsContainer = styled.div<{ $isSidebarCollapsed: boolean }>`
 `;
 
 type QuickActionsProps = {
-    showUpdateBannerNotification: boolean;
+    isSidebarCollapsed: boolean;
+    showUpdateBannerNotification?: boolean;
 };
 
-export const QuickActions = ({ showUpdateBannerNotification }: QuickActionsProps) => {
-    const { isSidebarCollapsed } = useResponsiveContext();
-
-    return (
-        <ActionsContainer $isSidebarCollapsed={isSidebarCollapsed}>
-            <UpdateStatusActionBarIcon
-                showUpdateBannerNotification={showUpdateBannerNotification}
-            />
-            <DebugAndExperimental />
-            <CustomBackend />
-            <Tor />
-            <HideBalances />
-        </ActionsContainer>
-    );
-};
+export const QuickActions = ({
+    isSidebarCollapsed,
+    showUpdateBannerNotification,
+}: QuickActionsProps) => (
+    <ActionsContainer $isSidebarCollapsed={isSidebarCollapsed}>
+        <UpdateStatusActionBarIcon
+            showUpdateBannerNotification={Boolean(showUpdateBannerNotification)}
+        />
+        <DebugAndExperimental />
+        <CustomBackend />
+        <Tor />
+        <HideBalances />
+    </ActionsContainer>
+);
diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx
@@ -37,6 +37,8 @@ const Content = styled.div`
     flex-direction: column;
 `;
 
+export const SIDEBAR_MIN_WIDTH = 84;
+
 export const Sidebar = () => {
     const [closedNotificationDevice, setClosedNotificationDevice] = useState(false);
     const [closedNotificationSuite, setClosedNotificationSuite] = useState(false);
@@ -75,7 +77,7 @@ export const Sidebar = () => {
             <ResizableBox
                 directions={['right']}
                 width={sidebarWidth}
-                minWidth={84}
+                minWidth={SIDEBAR_MIN_WIDTH}
                 maxWidth={600}
                 zIndex={zIndices.draggableComponent}
                 updateHeightOnWindowResize
@@ -100,6 +102,7 @@ export const Sidebar = () => {
                                 )}
 
                                 <QuickActions
+                                    isSidebarCollapsed={isSidebarCollapsed}
                                     showUpdateBannerNotification={showUpdateBannerNotification}
                                 />
                             </Content>