Skip to content

Commit 6f5c3de

Browse files
mabaasitmabaasit
authored
feat(auto-updates): add support to notify users for an update on linux/msi COMPASS-7686 (#5720)
* show toast on restart * show progress toast for all updates * broadcast event * wip * show notification * manage menu state * fix toast onclose * use success toast variant * update toast designs * correct link and text * hide toasts * better click * better name * better update message * remove unused classnames * fix updates test * correct check * check
1 parent 1ad5118 commit 6f5c3de

File tree

8 files changed

+295
-165
lines changed

8 files changed

+295
-165
lines changed

‎packages/compass-components/src/hooks/use-toast.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,9 @@ class GlobalToastState implements ToastActions {
6060
...defaultToastProperties,
6161
...props,
6262
'data-testid': `toast-${id}`,
63-
onClose: () => {
63+
onClose: (e: React.EventHandler<any>) => {
6464
this.closeToast(id);
65+
props.onClose?.(e);
6566
},
6667
};
6768
this.toasts.set(id, toastProps);

‎packages/compass/src/app/components/home.spec.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,6 @@ describe('Home [Component]', function () {
187187
},
188188
dataService
189189
);
190-
screen.logTestingPlaygroundURL();
191190
await waitForConnect();
192191
});
193192

‎packages/compass/src/app/components/update-toasts.tsx‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import {
77
useDarkMode,
88
cx,
99
Link,
10+
openToast,
11+
closeToast,
1012
} from '@mongodb-js/compass-components';
11-
import { openToast } from '@mongodb-js/compass-components';
1213

1314
const containerStyles = css({
1415
display: 'flex',
@@ -34,26 +35,6 @@ const buttonDarkStyles = css({
3435
color: palette.blue.light1,
3536
});
3637

37-
const linkStyles = css({
38-
whiteSpace: 'nowrap',
39-
textDecoration: 'none !important',
40-
span: {
41-
color: palette.blue.base,
42-
},
43-
svg: {
44-
color: palette.blue.base,
45-
},
46-
});
47-
48-
const linkDarkStyles = css({
49-
span: {
50-
color: palette.blue.light1,
51-
},
52-
svg: {
53-
color: palette.blue.light1,
54-
},
55-
});
56-
5738
const RestartCompassToastContent = ({
5839
newVersion,
5940
onUpdateClicked,
@@ -77,28 +58,40 @@ const RestartCompassToastContent = ({
7758
);
7859
};
7960

80-
const UpdateInstalledToastContent = ({
61+
export function onAutoupdateExternally({
62+
currentVersion,
8163
newVersion,
64+
onDismiss,
8265
}: {
66+
currentVersion: string;
8367
newVersion: string;
84-
}) => {
85-
const darkmode = useDarkMode();
86-
return (
87-
<div className={containerStyles}>
88-
<Body className={textStyles}>
89-
Compass {newVersion} is installed successfully
90-
</Body>
91-
<Link
92-
as="a"
93-
className={cx(linkStyles, darkmode && linkDarkStyles)}
94-
href={`https://github.com/mongodb-js/compass/releases/tag/v${newVersion}`}
95-
>
96-
Release notes
97-
</Link>
98-
</div>
99-
);
100-
};
101-
68+
onDismiss: () => void;
69+
}) {
70+
const toastId = 'compass-update-externally';
71+
openToast(toastId, {
72+
variant: 'note',
73+
title: `Compass ${newVersion} is available`,
74+
description: (
75+
<>
76+
<Body>
77+
You are currently using {currentVersion}. Update now for the latest
78+
Compass features.
79+
</Body>
80+
<Link
81+
as="a"
82+
target="_blank"
83+
href={'https://www.mongodb.com/try/download/compass'}
84+
onClick={() => {
85+
closeToast(toastId);
86+
}}
87+
>
88+
Visit download center
89+
</Link>
90+
</>
91+
),
92+
onClose: onDismiss,
93+
});
94+
}
10295
export function onAutoupdateStarted({ newVersion }: { newVersion: string }) {
10396
openToast('compass-update-started', {
10497
variant: 'progress',
@@ -134,9 +127,21 @@ export function onAutoupdateSuccess({
134127
});
135128
}
136129
export function onAutoupdateInstalled({ newVersion }: { newVersion: string }) {
137-
openToast('compass-update-restarted', {
130+
const toastId = 'compass-update-restarted';
131+
openToast(toastId, {
138132
variant: 'success',
139-
title: '',
140-
description: <UpdateInstalledToastContent newVersion={newVersion} />,
133+
title: `Compass ${newVersion} is installed successfully`,
134+
description: (
135+
<Link
136+
as="a"
137+
target="_blank"
138+
href={`https://github.com/mongodb-js/compass/releases/tag/v${newVersion}`}
139+
onClick={() => {
140+
closeToast(toastId);
141+
}}
142+
>
143+
Release Notes
144+
</Link>
145+
),
141146
});
142147
}

‎packages/compass/src/app/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ import { setupIntercom } from '@mongodb-js/compass-intercom';
7171

7272
import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
7373
import {
74+
onAutoupdateExternally,
7475
onAutoupdateFailed,
7576
onAutoupdateInstalled,
7677
onAutoupdateStarted,
@@ -300,6 +301,24 @@ const app = {
300301
globalAppRegistry.emit('open-active-namespace-import');
301302
});
302303
// Autoupdate handlers
304+
ipcRenderer?.on(
305+
'autoupdate:download-update-externally',
306+
(
307+
_,
308+
{
309+
newVersion,
310+
currentVersion,
311+
}: { newVersion: string; currentVersion: string }
312+
) => {
313+
onAutoupdateExternally({
314+
newVersion,
315+
currentVersion,
316+
onDismiss: () => {
317+
void ipcRenderer?.call('autoupdate:download-update-dismissed');
318+
},
319+
});
320+
}
321+
);
303322
ipcRenderer?.on(
304323
'autoupdate:update-download-in-progress',
305324
(_, { newVersion }: { newVersion: string }) => {

0 commit comments

Comments
 (0)