Skip to content

Commit b46e67d

Browse files
olmohtobias-jarvelov
authored andcommitted
FIXME Make update available notification link to download update view
1 parent 924ece5 commit b46e67d

File tree

3 files changed

+40
-21
lines changed

3 files changed

+40
-21
lines changed

desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx

+35-20
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function NotificationArea(props: IProps) {
6262

6363
const { hideNewDeviceBanner } = useActions(accountActions);
6464

65-
const { setDisplayedChangelog } = useAppContext();
65+
const { setDisplayedChangelog, setDismissedUpgrade } = useAppContext();
6666

6767
const currentVersion = useSelector((state) => state.version.current);
6868
const displayedForVersion = useSelector(
@@ -73,7 +73,7 @@ export default function NotificationArea(props: IProps) {
7373
);
7474
const changelog = useSelector((state) => state.userInterface.changelog);
7575

76-
const close = useCallback(() => {
76+
const displayedChangelog = useCallback(() => {
7777
setDisplayedChangelog();
7878
}, [setDisplayedChangelog]);
7979

@@ -120,10 +120,12 @@ export default function NotificationArea(props: IProps) {
120120
currentVersion,
121121
displayedForVersion,
122122
changelog,
123-
close,
123+
close: displayedChangelog,
124124
}),
125125
new UpdateAvailableNotificationProvider({
126-
...version,
126+
suggestedIsBeta: version.suggestedIsBeta,
127+
suggestedUpgrade: version.suggestedUpgrade,
128+
close: setDismissedUpgrade,
127129
updateDismissedForVersion,
128130
}),
129131
);
@@ -147,16 +149,27 @@ export default function NotificationArea(props: IProps) {
147149
{notification.title}
148150
</NotificationTitle>
149151
<NotificationSubtitle data-testid="notificationSubTitle">
150-
{notification.subtitleAction?.type === 'navigate-internal' ? (
151-
<InternalLink
152-
variant="labelTiny"
153-
color={Colors.white60}
154-
{...notification.subtitleAction.link}>
155-
{formatHtml(notification.subtitle ?? '')}
156-
</InternalLink>
157-
) : (
158-
formatHtml(notification.subtitle ?? '')
159-
)}
152+
{Array.isArray(notification.subtitle)
153+
? notification.subtitle.map((subtitle, index, arr) => {
154+
const content =
155+
subtitle.action && subtitle.action.type === 'navigate-internal' ? (
156+
<InternalLink
157+
variant="labelTiny"
158+
color={Colors.white60}
159+
{...subtitle.action.link}>
160+
{formatHtml(subtitle.content)}
161+
</InternalLink>
162+
) : (
163+
formatHtml(subtitle.content)
164+
);
165+
return (
166+
<span key={index}>
167+
{content}
168+
{index !== arr.length - 1 && ' '}
169+
</span>
170+
);
171+
})
172+
: formatHtml(notification.subtitle ?? '')}
160173
</NotificationSubtitle>
161174
</NotificationContent>
162175
{notification.action && (
@@ -192,7 +205,7 @@ function NotificationActionWrapper({
192205
const { push } = useHistory();
193206
const { openUrlWithAuth, openUrl } = useAppContext();
194207

195-
const closeTroubleshootModal = useCallback(() => setIsModalOpen(false), [setIsModalOpen]);
208+
const closeModal = useCallback(() => setIsModalOpen(false), [setIsModalOpen]);
196209

197210
const handleClick = useCallback(() => {
198211
if (action) {
@@ -207,7 +220,9 @@ function NotificationActionWrapper({
207220
setIsModalOpen(true);
208221
break;
209222
case 'close':
210-
action.close();
223+
if (action.close) {
224+
action.close();
225+
}
211226
break;
212227
}
213228
}
@@ -216,9 +231,9 @@ function NotificationActionWrapper({
216231
}, [action, setIsModalOpen, openUrlWithAuth, openUrl]);
217232

218233
const goToProblemReport = useCallback(() => {
219-
closeTroubleshootModal();
234+
closeModal();
220235
push(RoutePath.problemReport, { transition: transitions.show });
221-
}, [closeTroubleshootModal, push]);
236+
}, [closeModal, push]);
222237

223238
let actionComponent: React.ReactElement | undefined;
224239
if (action) {
@@ -254,7 +269,7 @@ function NotificationActionWrapper({
254269

255270
let buttons = [
256271
problemReportButton,
257-
<AppButton.BlueButton key="back" onClick={closeTroubleshootModal}>
272+
<AppButton.BlueButton key="back" onClick={closeModal}>
258273
{messages.gettext('Back')}
259274
</AppButton.BlueButton>,
260275
];
@@ -291,7 +306,7 @@ function NotificationActionWrapper({
291306
isOpen={isModalOpen}
292307
type={ModalAlertType.info}
293308
buttons={buttons}
294-
close={closeTroubleshootModal}>
309+
close={closeModal}>
295310
<ModalMessage>{action.troubleshoot?.details}</ModalMessage>
296311
<ModalMessage>
297312
<ModalMessageList>

desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export type InAppNotificationAction =
2828
}
2929
| {
3030
type: 'close';
31-
close: () => void;
31+
close?: () => void;
3232
}
3333
| {
3434
type: 'navigate-internal';

desktop/packages/mullvad-vpn/src/shared/notifications/update-available.ts

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface UpdateAvailableNotificationContext {
1717
suggestedUpgrade?: AppVersionInfoSuggestedUpgrade;
1818
suggestedIsBeta?: boolean;
1919
updateDismissedForVersion?: string;
20+
close?: () => void;
2021
}
2122

2223
export class UpdateAvailableNotificationProvider
@@ -64,6 +65,9 @@ export class UpdateAvailableNotificationProvider
6465
},
6566
},
6667
],
68+
action: this.context.suggestedIsBeta
69+
? { type: 'close', close: this.context.close }
70+
: undefined,
6771
};
6872
}
6973

0 commit comments

Comments
 (0)