|
| 1 | +import { ReactNode } from 'react'; |
| 2 | + |
1 | 3 | import styled from 'styled-components'; |
2 | 4 |
|
3 | | -import { Button, H2, Link, Markdown } from '@trezor/components'; |
| 5 | +import { |
| 6 | + Card, |
| 7 | + Checkbox, |
| 8 | + Column, |
| 9 | + ElevationUp, |
| 10 | + Icon, |
| 11 | + Link, |
| 12 | + Markdown, |
| 13 | + NewModal, |
| 14 | + Paragraph, |
| 15 | + Row, |
| 16 | + Text, |
| 17 | + useElevation, |
| 18 | +} from '@trezor/components'; |
4 | 19 | import { desktopApi, UpdateInfo } from '@trezor/suite-desktop-api'; |
5 | | -import { borders } from '@trezor/theme'; |
| 20 | +import { borders, Elevation, mapElevationToBackground, spacings, spacingsPx } from '@trezor/theme'; |
6 | 21 |
|
7 | | -import { Translation, Modal } from 'src/components/suite'; |
| 22 | +import { Translation } from 'src/components/suite'; |
8 | 23 | import { useDispatch } from 'src/hooks/suite'; |
9 | 24 | import { getReleaseUrl } from 'src/services/github'; |
10 | 25 | import { download } from 'src/actions/suite/desktopUpdateActions'; |
11 | 26 |
|
12 | | -// eslint-disable-next-line local-rules/no-override-ds-component |
13 | | -const GreenH2 = styled(H2)` |
14 | | - text-align: left; |
15 | | - color: ${({ theme }) => theme.legacy.TYPE_GREEN}; |
16 | | -`; |
17 | | - |
18 | | -const ChangelogWrapper = styled.div` |
19 | | - margin: 20px 0; |
20 | | - background: ${({ theme }) => theme.legacy.BG_GREY}; |
21 | | - border-radius: ${borders.radii.xs}; |
| 27 | +const ChangelogWrapper = styled.div<{ $elevation: Elevation }>` |
| 28 | + background-color: ${({ theme, $elevation }) => mapElevationToBackground({ theme, $elevation })}; |
| 29 | + border-radius: ${borders.radii.md}; |
22 | 30 | max-height: 400px; |
23 | 31 | overflow-y: auto; |
24 | | - padding: 16px 20px; |
| 32 | + padding: ${spacingsPx.md} ${spacingsPx.xl}; |
25 | 33 | `; |
26 | 34 |
|
27 | | -// eslint-disable-next-line local-rules/no-override-ds-component |
28 | | -const StyledLink = styled(Link)` |
29 | | - align-self: start; |
| 35 | +const GrayTag = styled.div` |
| 36 | + border-radius: ${borders.radii.full}; |
| 37 | + background-color: ${({ theme }) => theme.backgroundNeutralSubtleOnElevation0}; |
| 38 | + padding: ${spacingsPx.xxxs} ${spacingsPx.xs}; |
| 39 | + color: ${({ theme }) => theme.textSubdued}; |
30 | 40 | `; |
31 | 41 |
|
32 | | -const StyledModal = styled(Modal)` |
33 | | - ${Modal.BottomBar} { |
34 | | - > * { |
35 | | - flex: 1; |
36 | | - } |
37 | | - } |
| 42 | +const GreenTag = styled.div` |
| 43 | + display: flex; |
| 44 | + align-items: center; |
| 45 | + gap: ${spacingsPx.xxs}; |
| 46 | + border-radius: ${borders.radii.full}; |
| 47 | + background-color: ${({ theme }) => theme.backgroundPrimarySubtleOnElevation0}; |
| 48 | + padding: ${spacingsPx.xxxs} ${spacingsPx.xs}; |
38 | 49 | `; |
39 | 50 |
|
| 51 | +const NewTag = () => ( |
| 52 | + <GreenTag> |
| 53 | + <Icon name="sparkleFilled" variant="primary" size="small" /> |
| 54 | + <Text variant="primary"> |
| 55 | + <Translation id="TR_UPDATE_MODAL_ENABLE_AUTO_UPDATES_NEW_TAG" /> |
| 56 | + </Text> |
| 57 | + </GreenTag> |
| 58 | +); |
| 59 | + |
| 60 | +const Changelog = ({ children }: { children: ReactNode }) => { |
| 61 | + const { elevation } = useElevation(); |
| 62 | + |
| 63 | + return <ChangelogWrapper $elevation={elevation}>{children}</ChangelogWrapper>; |
| 64 | +}; |
| 65 | + |
40 | 66 | interface VersionNameProps { |
41 | 67 | latestVersion?: string; |
42 | 68 | prerelease: boolean; |
43 | 69 | } |
44 | 70 |
|
45 | 71 | const getVersionName = ({ latestVersion, prerelease }: VersionNameProps): string => { |
46 | | - if (!latestVersion) { |
47 | | - // fallback for undefined version |
| 72 | + if (latestVersion === undefined) { |
48 | 73 | return ''; |
49 | 74 | } |
50 | | - if (!prerelease) { |
51 | | - // regular case |
| 75 | + |
| 76 | + if (prerelease !== undefined) { |
52 | 77 | return latestVersion; |
53 | 78 | } |
| 79 | + |
54 | 80 | if (!latestVersion.includes('-')) { |
55 | | - // add beta label for pre-releases, but prevent versions like '21.10.1-alpha-beta' |
56 | 81 | return `${latestVersion}-beta`; |
57 | 82 | } |
58 | 83 |
|
59 | | - // fallback for pre-release versions already including some pre-release components |
60 | 84 | return latestVersion; |
61 | 85 | }; |
62 | 86 |
|
63 | 87 | interface AvailableProps { |
64 | | - hideWindow: () => void; |
65 | | - isCancelable: boolean; |
66 | | - latest?: UpdateInfo; |
| 88 | + onCancel: () => void; |
| 89 | + latest: UpdateInfo | undefined; |
| 90 | + isAutomaticUpdateEnabled: boolean; |
67 | 91 | } |
68 | 92 |
|
69 | | -export const Available = ({ hideWindow, isCancelable, latest }: AvailableProps) => { |
| 93 | +export const Available = ({ onCancel, latest, isAutomaticUpdateEnabled }: AvailableProps) => { |
70 | 94 | const dispatch = useDispatch(); |
71 | 95 |
|
72 | 96 | const downloadUpdate = () => { |
73 | 97 | dispatch(download()); |
74 | 98 | desktopApi.downloadUpdate(); |
75 | 99 | }; |
76 | 100 |
|
| 101 | + const suiteCurrentVersion = process.env.VERSION || ''; |
| 102 | + const suiteNewVersion = getVersionName({ |
| 103 | + latestVersion: latest?.version, |
| 104 | + prerelease: !!latest?.prerelease, |
| 105 | + }); |
| 106 | + |
| 107 | + const handleToggleAutoUpdateClick = () => |
| 108 | + desktopApi.setAutomaticUpdateEnabled(!isAutomaticUpdateEnabled); |
| 109 | + |
77 | 110 | return ( |
78 | | - <StyledModal |
| 111 | + <NewModal |
79 | 112 | heading={<Translation id="TR_UPDATE_MODAL_AVAILABLE_HEADING" />} |
80 | | - isCancelable={isCancelable} |
81 | | - onCancel={hideWindow} |
82 | | - bottomBarComponents={ |
| 113 | + description={ |
| 114 | + <Translation |
| 115 | + id="TR_UPDATE_MODAL_YOUR_VERSION" |
| 116 | + values={{ version: suiteCurrentVersion }} |
| 117 | + /> |
| 118 | + } |
| 119 | + onCancel={onCancel} |
| 120 | + bottomContent={ |
83 | 121 | <> |
84 | | - <Button onClick={hideWindow} variant="tertiary"> |
85 | | - <Translation id="TR_UPDATE_MODAL_NOT_NOW" /> |
86 | | - </Button> |
87 | | - <Button onClick={downloadUpdate} variant="primary"> |
| 122 | + <NewModal.Button onClick={downloadUpdate} variant="primary"> |
88 | 123 | <Translation id="TR_UPDATE_MODAL_START_DOWNLOAD" /> |
89 | | - </Button> |
| 124 | + </NewModal.Button> |
| 125 | + <NewModal.Button onClick={onCancel} variant="tertiary"> |
| 126 | + <Translation id="TR_UPDATE_MODAL_NOT_NOW" /> |
| 127 | + </NewModal.Button> |
90 | 128 | </> |
91 | 129 | } |
92 | 130 | > |
93 | | - <GreenH2> |
94 | | - <Translation |
95 | | - id="TR_VERSION_HAS_BEEN_RELEASED" |
96 | | - values={{ |
97 | | - version: getVersionName({ |
98 | | - latestVersion: latest?.version, |
99 | | - prerelease: !!latest?.prerelease, |
100 | | - }), |
101 | | - }} |
102 | | - /> |
103 | | - </GreenH2> |
104 | | - |
105 | | - <ChangelogWrapper> |
106 | | - {latest?.changelog ? ( |
107 | | - <Markdown>{latest?.changelog}</Markdown> |
108 | | - ) : ( |
109 | | - <Translation id="TR_COULD_NOT_RETRIEVE_CHANGELOG" /> |
110 | | - )} |
111 | | - </ChangelogWrapper> |
112 | | - <StyledLink variant="nostyle" href={getReleaseUrl(latest?.version ?? '')}> |
113 | | - <Button variant="tertiary" icon="github"> |
114 | | - <Translation id="TR_CHANGELOG_ON_GITHUB" /> |
115 | | - </Button> |
116 | | - </StyledLink> |
117 | | - </StyledModal> |
| 131 | + <Column gap={spacings.xs} alignItems="start"> |
| 132 | + <div> |
| 133 | + <Paragraph typographyStyle="highlight" variant="primary"> |
| 134 | + <Translation |
| 135 | + id="TR_VERSION_HAS_RELEASED" |
| 136 | + values={{ version: suiteNewVersion }} |
| 137 | + /> |
| 138 | + </Paragraph> |
| 139 | + <Paragraph typographyStyle="hint" variant="tertiary"> |
| 140 | + <Translation id="TR_WERE_CONSTANTLY_WORKING_TO_IMPROVE" /> |
| 141 | + </Paragraph> |
| 142 | + </div> |
| 143 | + |
| 144 | + <ElevationUp> |
| 145 | + <Changelog> |
| 146 | + {latest?.changelog ? ( |
| 147 | + <Markdown>{latest?.changelog}</Markdown> |
| 148 | + ) : ( |
| 149 | + <Translation id="TR_COULD_NOT_RETRIEVE_CHANGELOG" /> |
| 150 | + )} |
| 151 | + </Changelog> |
| 152 | + </ElevationUp> |
| 153 | + |
| 154 | + <Row justifyContent="space-between" width="100%"> |
| 155 | + <Link variant="nostyle" href={getReleaseUrl(latest?.version ?? '')}> |
| 156 | + <GrayTag> |
| 157 | + <Translation id="TR_READ_ALL_ON_GITHUB" /> |
| 158 | + </GrayTag> |
| 159 | + </Link> |
| 160 | + |
| 161 | + {latest?.releaseDate && <Text variant="tertiary">{latest?.releaseDate}</Text>} |
| 162 | + </Row> |
| 163 | + |
| 164 | + <ElevationUp> |
| 165 | + <Card> |
| 166 | + <Row justifyContent="start" gap={spacings.xs}> |
| 167 | + <Checkbox onClick={handleToggleAutoUpdateClick}> |
| 168 | + <Translation id="TR_UPDATE_MODAL_ENABLE_AUTO_UPDATES" /> |
| 169 | + </Checkbox> |
| 170 | + <NewTag /> |
| 171 | + </Row> |
| 172 | + </Card> |
| 173 | + </ElevationUp> |
| 174 | + </Column> |
| 175 | + </NewModal> |
118 | 176 | ); |
119 | 177 | }; |
0 commit comments