Skip to content

Commit 356681f

Browse files
mabaasitmabaasit
authored
chore(compass-updates): update toast design COMPASS-7781 (#5687)
toast design
1 parent 77da275 commit 356681f

File tree

5 files changed

+119
-88
lines changed

5 files changed

+119
-88
lines changed

‎packages/compass/src/app/components/restart-compass-toast-content.tsx‎

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

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
import {
3+
css,
4+
spacing,
5+
Body,
6+
palette,
7+
useDarkMode,
8+
cx,
9+
} from '@mongodb-js/compass-components';
10+
import { openToast } from '@mongodb-js/compass-components';
11+
12+
const containerStyles = css({
13+
display: 'flex',
14+
flexDirection: 'row',
15+
div: {
16+
display: 'flex',
17+
flexDirection: 'column',
18+
margin: 'auto',
19+
padding: spacing[1],
20+
},
21+
});
22+
23+
const textStyles = css({
24+
fontWeight: 'bolder',
25+
});
26+
27+
const buttonStyles = css({
28+
background: 'none',
29+
border: 'none',
30+
fontWeight: 'bold',
31+
color: palette.blue.base,
32+
'&:hover': {
33+
cursor: 'pointer',
34+
},
35+
});
36+
37+
const buttonDarkStyles = css({
38+
color: palette.blue.light1,
39+
});
40+
41+
const RestartCompassToastContent = ({
42+
updatedVersion,
43+
onUpdateClicked,
44+
}: {
45+
updatedVersion: string;
46+
onUpdateClicked: () => void;
47+
}) => {
48+
const darkmode = useDarkMode();
49+
return (
50+
<div className={containerStyles}>
51+
<Body className={textStyles}>
52+
Compass update {updatedVersion} has finished downloading
53+
</Body>
54+
<button
55+
className={cx(buttonStyles, darkmode && buttonDarkStyles)}
56+
onClick={onUpdateClicked}
57+
>
58+
Restart
59+
</button>
60+
</div>
61+
);
62+
};
63+
64+
export function onAutoupdateStarted() {
65+
openToast('update-download', {
66+
variant: 'progress',
67+
title: 'Compass update is in progress',
68+
});
69+
}
70+
export function onAutoupdateFailed() {
71+
openToast('update-download', {
72+
variant: 'warning',
73+
title: 'Failed to download Compass update',
74+
description: 'Downloading a newer Compass version failed',
75+
});
76+
}
77+
export function onAutoupdateSuccess({
78+
updatedVersion,
79+
onUpdate,
80+
onDismiss,
81+
}: {
82+
updatedVersion: string;
83+
onUpdate: () => void;
84+
onDismiss: () => void;
85+
}) {
86+
openToast('update-download', {
87+
variant: 'note',
88+
title: '',
89+
description: (
90+
<RestartCompassToastContent
91+
updatedVersion={updatedVersion}
92+
onUpdateClicked={onUpdate}
93+
/>
94+
),
95+
onClose: onDismiss,
96+
});
97+
}

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ import {
7474
onAutoupdateFailed,
7575
onAutoupdateStarted,
7676
onAutoupdateSuccess,
77-
} from './utils/update-handlers';
77+
} from './components/update-toasts';
7878
import { createElectronFileInputBackend } from '@mongodb-js/compass-components';
7979
const { log, mongoLogId, track } = createLoggerAndTelemetry('COMPASS-APP');
8080

@@ -289,20 +289,24 @@ const app = {
289289
onAutoupdateStarted
290290
);
291291
ipcRenderer?.on('autoupdate:update-download-failed', onAutoupdateFailed);
292-
ipcRenderer?.on('autoupdate:update-download-success', () => {
293-
onAutoupdateSuccess({
294-
onUpdate: () => {
295-
void ipcRenderer?.call(
296-
'autoupdate:update-download-restart-confirmed'
297-
);
298-
},
299-
onDismiss: () => {
300-
void ipcRenderer?.call(
301-
'autoupdate:update-download-restart-dismissed'
302-
);
303-
},
304-
});
305-
});
292+
ipcRenderer?.on(
293+
'autoupdate:update-download-success',
294+
(_, { updatedVersion }: { updatedVersion: string }) => {
295+
onAutoupdateSuccess({
296+
updatedVersion,
297+
onUpdate: () => {
298+
void ipcRenderer?.call(
299+
'autoupdate:update-download-restart-confirmed'
300+
);
301+
},
302+
onDismiss: () => {
303+
void ipcRenderer?.call(
304+
'autoupdate:update-download-restart-dismissed'
305+
);
306+
},
307+
});
308+
}
309+
);
306310
// As soon as dom is ready, render and set up the rest.
307311
state.render();
308312
marky.stop('Time to Connect rendered');

‎packages/compass/src/app/utils/update-handlers.ts‎

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

‎packages/compass/src/main/auto-update-manager.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,9 @@ const STATE_UPDATE: Record<
379379

380380
this.maybeInterrupt();
381381

382-
ipcMain?.broadcast('autoupdate:update-download-success');
382+
ipcMain?.broadcast('autoupdate:update-download-success', {
383+
updatedVersion: updateInfo.to,
384+
});
383385
},
384386
},
385387
[AutoUpdateManagerState.ManualDownload]: {

0 commit comments

Comments
 (0)