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

trezor · Feb 14, 2025 · aa4dc57 · aa4dc57
1 parent 2ed5096
commit aa4dc57
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 170 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 verifySuiteIsLoaded() {
-        await expect(this.welcomeTitle, 'expect Suite to load in under 30s').toBeVisible({
+        await expect(this.welcomeBody, 'expect Suite to load in under 30s').toBeVisible({
             timeout: 30_000,
         });
     }

diff --git a/packages/suite-desktop-core/e2e/support/pageActions/settings/settingsActions.ts b/packages/suite-desktop-core/e2e/support/pageActions/settings/settingsActions.ts
@@ -88,7 +88,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/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';
@@ -10,7 +10,6 @@ import { LayoutContext, LayoutContextPayload } from 'src/support/suite/LayoutCon
 import { ModalContextProvider } from 'src/support/suite/ModalContext';
 
 import { Metadata } from '../Metadata';
-import { TrafficLightOffset } from '../TrafficLightOffset';
 import {
     AppWrapper,
     Body,
@@ -19,6 +18,7 @@ import {
     PageWrapper,
     Wrapper,
 } from './SuiteLayout/SuiteLayout';
+import { LoggedOutSidebar } from './WelcomeLayout/WelcomeLayout';
 import { ModalSwitcher } from '../modals/ModalSwitcher/ModalSwitcher';
 
 interface LoggedOutLayout {
@@ -36,38 +36,39 @@ export const LoggedOutLayout = ({ children }: LoggedOutLayout) => {
 
     return (
         <ElevationContext baseElevation={-1}>
-            <TrafficLightOffset>
-                <Wrapper ref={wrapperRef} data-testid="@logged-out-layout">
-                    <PageWrapper>
-                        <NewModal.Provider>
-                            <ModalContextProvider>
-                                <Metadata title={title} />
-                                <ModalSwitcher />
+            <Wrapper ref={wrapperRef} data-testid="@logged-out-layout">
+                <PageWrapper>
+                    <NewModal.Provider>
+                        <ModalContextProvider>
+                            <Metadata title={title} />
+                            <ModalSwitcher />
 
-                                <LayoutContext.Provider value={setLayoutPayload}>
-                                    <Body data-testid="@suite-layout/body">
-                                        <Columns>
-                                            <AppWrapper
-                                                data-testid="@app"
-                                                ref={scrollRef}
-                                                id="layout-scroll"
-                                            >
-                                                {layoutHeader}
-                                                <ElevationUp>
-                                                    <ContentWrapper>{children}</ContentWrapper>
-                                                </ElevationUp>
-                                            </AppWrapper>
-                                        </Columns>
-                                    </Body>
-                                </LayoutContext.Provider>
+                            <LayoutContext.Provider value={setLayoutPayload}>
+                                <Body data-testid="@suite-layout/body">
+                                    <Columns>
+                                        <ElevationDown>
+                                            <LoggedOutSidebar />
+                                        </ElevationDown>
+                                        <AppWrapper
+                                            data-testid="@app"
+                                            ref={scrollRef}
+                                            id="layout-scroll"
+                                        >
+                                            {layoutHeader}
+                                            <ElevationUp>
+                                                <ContentWrapper>{children}</ContentWrapper>
+                                            </ElevationUp>
+                                        </AppWrapper>
+                                    </Columns>
+                                </Body>
+                            </LayoutContext.Provider>
 
-                                {!isMobileLayout && <GuideButton />}
-                            </ModalContextProvider>
-                        </NewModal.Provider>
-                    </PageWrapper>
-                    <GuideRouter />
-                </Wrapper>
-            </TrafficLightOffset>
+                            {!isMobileLayout && <GuideButton />}
+                        </ModalContextProvider>
+                    </NewModal.Provider>
+                </PageWrapper>
+                <GuideRouter />
+            </Wrapper>
         </ElevationContext>
     );
 };
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>