Skip to content

Commit 222034a

Browse files
jvaclavikjvaclavik
committed
feat(suite): Redesign Troubleshooting tips
1 parent db30407 commit 222034a

File tree

4 files changed

+60
-67
lines changed

4 files changed

+60
-67
lines changed

‎packages/suite/src/components/suite/Preloader/__tests__/Preloader.test.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ import { findByTestId, renderWithProviders } from 'src/support/tests/hooksHelper
1818
import { Preloader } from '../Preloader';
1919
import * as selectShouldDisplayDeviceCompromisedModule from '../selectShouldDisplayDeviceCompromisedOnRoute';
2020

21+
class ResizeObserverMock {
22+
observe = jest.fn();
23+
unobserve = jest.fn();
24+
disconnect = jest.fn();
25+
}
26+
27+
window.ResizeObserver = ResizeObserverMock;
28+
2129
// render only Translation.id in data-test attribute
2230
jest.mock('src/components/suite/Translation', () => ({
2331
Translation: ({ id }: any) => <span data-testid={id}>{id}</span>,
@@ -218,7 +226,7 @@ describe(`${Preloader.name} component`, () => {
218226
const { unmount } = renderWithProviders(store, <Index app={store.getState().router.app} />);
219227

220228
expect(findByTestId('@connect-device-prompt')).not.toBeNull();
221-
fireEvent.click(findByTestId('@onboarding/expand-troubleshooting-tips/toggle'));
229+
fireEvent.click(findByTestId('@onboarding/troubleshooting-tips/button'));
222230
expect(screen.getAllByText('TR_ACQUIRE_DEVICE_TITLE').length).toBe(2);
223231

224232
unmount();
@@ -270,7 +278,7 @@ describe(`${Preloader.name} component`, () => {
270278
const { unmount } = renderWithProviders(store, <Index app={store.getState().router.app} />);
271279

272280
expect(findByTestId('@connect-device-prompt')).not.toBeNull();
273-
fireEvent.click(findByTestId('@onboarding/expand-troubleshooting-tips/toggle'));
281+
fireEvent.click(findByTestId('@onboarding/troubleshooting-tips/button'));
274282
expect(findByTestId('@connect-device-prompt/unreadable-udev')).not.toBeNull();
275283

276284
unmount();
@@ -345,7 +353,7 @@ describe(`${Preloader.name} component`, () => {
345353
const { unmount } = renderWithProviders(store, <Index app={store.getState().router.app} />);
346354

347355
expect(findByTestId('@connect-device-prompt')).not.toBeNull();
348-
fireEvent.click(findByTestId('@onboarding/expand-troubleshooting-tips/toggle'));
356+
fireEvent.click(findByTestId('@onboarding/troubleshooting-tips/button'));
349357
expect(findByTestId(/TR_UNKNOWN_DEVICE/)).not.toBeNull();
350358

351359
unmount();
@@ -371,7 +379,7 @@ describe(`${Preloader.name} component`, () => {
371379
const { unmount } = renderWithProviders(store, <Index app={store.getState().router.app} />);
372380

373381
expect(findByTestId('@connect-device-prompt')).not.toBeNull();
374-
fireEvent.click(findByTestId('@onboarding/expand-troubleshooting-tips/toggle'));
382+
fireEvent.click(findByTestId('@onboarding/troubleshooting-tips/button'));
375383
expect(findByTestId(/TR_YOUR_DEVICE_IS_SEEDLESS/)).not.toBeNull();
376384
expect(findByTestId('TR_SEEDLESS_SETUP_IS_NOT_SUPPORTED_TITLE')).not.toBeNull();
377385

@@ -449,7 +457,8 @@ describe(`${Preloader.name} component`, () => {
449457
const { unmount } = renderWithProviders(store, <Index app={store.getState().router.app} />);
450458

451459
expect(findByTestId('@connect-device-prompt')).not.toBeNull();
452-
expect(findByTestId(/TR_DEVICE_IN_BOOTLOADER/)).not.toBeNull();
460+
expect(findByTestId('TR_DEVICE_CONNECTED_BOOTLOADER')).not.toBeNull();
461+
fireEvent.click(findByTestId('@onboarding/troubleshooting-tips/button'));
453462
expect(findByTestId('TR_DEVICE_CONNECTED_BOOTLOADER_RECONNECT')).not.toBeNull();
454463

455464
unmount();

‎packages/suite/src/components/suite/troubleshooting/TroubleshootingTips.tsx‎

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,21 @@ import {
44
Banner,
55
BannerVariant,
66
Box,
7+
Button,
78
Card,
8-
Collapsible,
99
Column,
10-
ElevationContext,
11-
ElevationDown,
12-
ElevationUp,
1310
IconName,
11+
Modal,
1412
Row,
1513
SelectBar,
1614
Text,
1715
} from '@trezor/components';
1816
import { spacings } from '@trezor/theme';
1917

20-
import { TroubleshootingTipsFooter } from './TroubleshootingTipsFooter';
2118
import { TroubleshootingTipsList } from './TroubleshootingTipsList';
22-
import { TroubleshootingTipsToggle } from './TroubleshootingTipsToggle';
2319
import { useLayoutSize } from '../../../hooks/suite';
20+
import { Translation } from '../Translation';
21+
import { TroubleshootingTipsFooter } from './TroubleshootingTipsFooter';
2422

2523
export type TroubleshootingTipsItem = {
2624
key: string;
@@ -106,47 +104,55 @@ export const TroubleshootingTipsWithSections = <K extends string, T extends K>({
106104
);
107105
};
108106

109-
const CollapsibleTroubleshooting = () => (
110-
<Collapsible
111-
defaultIsOpen={initiallyIsOpen === true}
112-
data-testid={dataTest || '@onboarding/expand-troubleshooting-tips'}
113-
>
114-
<Column gap={20} alignItems="center">
115-
<Collapsible.Toggle>
116-
<TroubleshootingTipsToggle>{toggleText}</TroubleshootingTipsToggle>
117-
</Collapsible.Toggle>
118-
<Collapsible.Content>
119-
<ElevationContext baseElevation={-1}>
120-
<ElevationDown>
121-
<Card paddingType="small" maxWidth="656px">
122-
<Column gap={spacings.sm}>
123-
{labelRow}
124-
{/* Custom design, where upper card is -1, and this card is 1 */}
125-
<ElevationUp>
126-
<Card>
127-
<TroubleshootingTipsList
128-
items={items[selectedSection].items}
129-
/>
130-
</Card>
131-
</ElevationUp>
132-
<TroubleshootingTipsFooter />
133-
</Column>
134-
</Card>
135-
</ElevationDown>
136-
</ElevationContext>
137-
</Collapsible.Content>
107+
const TroubleshootingButton = () => {
108+
const [isTroubleshootingModalVisible, setIsTroubleshootingModalVisible] = useState(false);
109+
const onOpen = () => {
110+
setIsTroubleshootingModalVisible(true);
111+
};
112+
const onCancel = () => {
113+
setIsTroubleshootingModalVisible(false);
114+
};
115+
116+
return (
117+
<Column
118+
alignItems="center"
119+
data-testid={dataTest || '@onboarding/troubleshooting-tips'}
120+
>
121+
<Button
122+
onClick={onOpen}
123+
variant="info"
124+
size="small"
125+
isSubtle={!initiallyIsOpen}
126+
icon="question"
127+
data-testid="@onboarding/troubleshooting-tips/button"
128+
>
129+
{toggleText ?? <Translation id="TR_TROUBLE_SHOOTING_TIPS" />}
130+
</Button>
131+
{isTroubleshootingModalVisible && (
132+
<Modal
133+
heading={toggleText ?? <Translation id="TR_TROUBLE_SHOOTING_TIPS" />}
134+
onCancel={onCancel}
135+
variant="info"
136+
bottomContent={<TroubleshootingTipsFooter />}
137+
data-testid="@onboarding/troubleshooting-tips/modal"
138+
>
139+
<Card header={labelRow}>
140+
<TroubleshootingTipsList items={items[selectedSection].items} />
141+
</Card>
142+
</Modal>
143+
)}
138144
</Column>
139-
</Collapsible>
140-
);
145+
);
146+
};
141147

142148
return cta ? (
143149
<Column gap={80} alignItems="center">
144150
<ActionBanner />
145-
<CollapsibleTroubleshooting />
151+
<TroubleshootingButton />
146152
</Column>
147153
) : (
148154
<Box margin={{ top: 80 }}>
149-
<CollapsibleTroubleshooting />
155+
<TroubleshootingButton />
150156
</Box>
151157
);
152158
};

‎packages/suite/src/components/suite/troubleshooting/TroubleshootingTipsFooter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const TroubleshootingTipsFooter = () => {
1515
justifyContent="space-between"
1616
gap={spacings.xs}
1717
alignItems="center"
18+
width="100%"
1819
>
1920
<Text typographyStyle="hint">
2021
<Translation id="TR_ONBOARDING_TROUBLESHOOTING_FAILED" />

‎packages/suite/src/components/suite/troubleshooting/TroubleshootingTipsToggle.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)