chore(auto-updates): show toast when app is updated COMPASS-7686 (#5718)

mabaasit · web-flow · commit df5f24a9bb36 · 2024-04-24T15:26:16.000+02:00
* show toast on restart

* show progress toast for all updates

* broadcast event

* use success toast variant

* hide toasts

* better click

* better name
diff --git a/packages/compass-e2e-tests/helpers/commands/hide-visible-toasts.ts b/packages/compass-e2e-tests/helpers/commands/hide-visible-toasts.ts
@@ -0,0 +1,23 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+
+export async function hideAllVisibleToasts(
+  browser: CompassBrowser
+): Promise<void> {
+  const toastContainer = await browser.$(Selectors.LGToastContainer);
+  const isToastContainerVisible = await toastContainer.isDisplayed();
+  if (!isToastContainerVisible) {
+    return;
+  }
+  // LG toasts are stacked in scroll container and we need to close them all.
+  const toasts = await toastContainer.$$('div');
+  for (const toast of toasts) {
+    await browser.hover(Selectors.LGToastContainer);
+    const isToastVisible = await toast.isDisplayed();
+    if (!isToastVisible) {
+      continue;
+    }
+    await browser.clickVisible(toast.$(Selectors.LGToastCloseButton));
+    await toast.waitForExist({ reverse: true });
+  }
+}
diff --git a/packages/compass-e2e-tests/helpers/commands/index.ts b/packages/compass-e2e-tests/helpers/commands/index.ts
@@ -66,3 +66,4 @@ export * from './create-index';
 export * from './drop-index';
 export * from './hide-index';
 export * from './unhide-index';
+export * from './hide-visible-toasts';
diff --git a/packages/compass-e2e-tests/helpers/commands/show-shell.ts b/packages/compass-e2e-tests/helpers/commands/show-shell.ts
@@ -7,6 +7,8 @@ export async function showShell(browser: CompassBrowser): Promise<void> {
   await retryWithBackoff(async function () {
     const shellContentElement = await browser.$(Selectors.ShellContent);
     if (!(await shellContentElement.isDisplayed())) {
+      // The toasts may be covering the shell, so we need to close them.
+      await browser.hideAllVisibleToasts();
       await browser.clickVisible(Selectors.ShellExpandButton);
     }
 
diff --git a/packages/compass-e2e-tests/helpers/selectors.ts b/packages/compass-e2e-tests/helpers/selectors.ts
@@ -11,6 +11,10 @@ export const SettingsInputElement = (settingName: string): string => {
   return `${SettingsModal} [data-testid="${settingName}"]`;
 };
 
+// LG Toasts container (these test ids are used by LG in the toast and are not in the code anywhere).
+export const LGToastContainer = '[data-testid="lg-toast-scroll-container"]';
+export const LGToastCloseButton = '[data-testid="lg-toast-dismiss-button"]';
+
 // Welcome Modal
 export const WelcomeModal = '[data-testid="welcome-modal"]';
 export const CloseWelcomeModalButton =
diff --git a/packages/compass/src/app/components/update-toasts.tsx b/packages/compass/src/app/components/update-toasts.tsx
@@ -6,18 +6,14 @@ import {
   palette,
   useDarkMode,
   cx,
+  Link,
 } from '@mongodb-js/compass-components';
 import { openToast } from '@mongodb-js/compass-components';
 
 const containerStyles = css({
   display: 'flex',
   flexDirection: 'row',
-  div: {
-    display: 'flex',
-    flexDirection: 'column',
-    margin: 'auto',
-    padding: spacing[1],
-  },
+  gap: spacing[100],
 });
 
 const textStyles = css({
@@ -38,18 +34,38 @@ const buttonDarkStyles = css({
   color: palette.blue.light1,
 });
 
+const linkStyles = css({
+  whiteSpace: 'nowrap',
+  textDecoration: 'none !important',
+  span: {
+    color: palette.blue.base,
+  },
+  svg: {
+    color: palette.blue.base,
+  },
+});
+
+const linkDarkStyles = css({
+  span: {
+    color: palette.blue.light1,
+  },
+  svg: {
+    color: palette.blue.light1,
+  },
+});
+
 const RestartCompassToastContent = ({
-  updatedVersion,
+  newVersion,
   onUpdateClicked,
 }: {
-  updatedVersion: string;
+  newVersion: string;
   onUpdateClicked: () => void;
 }) => {
   const darkmode = useDarkMode();
   return (
     <div className={containerStyles}>
       <Body className={textStyles}>
-        Compass update {updatedVersion} has finished downloading
+        Compass update {newVersion} has finished downloading
       </Body>
       <button
         className={cx(buttonStyles, darkmode && buttonDarkStyles)}
@@ -61,37 +77,66 @@ const RestartCompassToastContent = ({
   );
 };
 
-export function onAutoupdateStarted() {
-  openToast('update-download', {
+const UpdateInstalledToastContent = ({
+  newVersion,
+}: {
+  newVersion: string;
+}) => {
+  const darkmode = useDarkMode();
+  return (
+    <div className={containerStyles}>
+      <Body className={textStyles}>
+        Compass {newVersion} is installed successfully
+      </Body>
+      <Link
+        as="a"
+        className={cx(linkStyles, darkmode && linkDarkStyles)}
+        href={`https://github.com/mongodb-js/compass/releases/tag/v${newVersion}`}
+      >
+        Release notes
+      </Link>
+    </div>
+  );
+};
+
+export function onAutoupdateStarted({ newVersion }: { newVersion: string }) {
+  openToast('compass-update-started', {
     variant: 'progress',
-    title: 'Compass update is in progress',
+    title: `Compass ${newVersion} is downloading`,
   });
 }
 export function onAutoupdateFailed() {
-  openToast('update-download', {
+  openToast('compass-update-failed', {
     variant: 'warning',
     title: 'Failed to download Compass update',
     description: 'Downloading a newer Compass version failed',
   });
 }
 export function onAutoupdateSuccess({
-  updatedVersion,
+  newVersion,
   onUpdate,
   onDismiss,
 }: {
-  updatedVersion: string;
+  newVersion: string;
   onUpdate: () => void;
   onDismiss: () => void;
 }) {
-  openToast('update-download', {
-    variant: 'note',
+  openToast('compass-update-succeeded', {
+    variant: 'success',
     title: '',
     description: (
       <RestartCompassToastContent
-        updatedVersion={updatedVersion}
+        newVersion={newVersion}
         onUpdateClicked={onUpdate}
       />
     ),
     onClose: onDismiss,
   });
 }
+export function onAutoupdateInstalled({ newVersion }: { newVersion: string }) {
+  openToast('compass-update-restarted', {
+    variant: 'success',
+    title: '',
+    description: <UpdateInstalledToastContent newVersion={newVersion} />,
+  });
+}
diff --git a/packages/compass/src/app/index.tsx b/packages/compass/src/app/index.tsx
@@ -72,6 +72,7 @@ import { setupIntercom } from '@mongodb-js/compass-intercom';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 import {
   onAutoupdateFailed,
+  onAutoupdateInstalled,
   onAutoupdateStarted,
   onAutoupdateSuccess,
 } from './components/update-toasts';
@@ -301,14 +302,16 @@ const app = {
     // Autoupdate handlers
     ipcRenderer?.on(
       'autoupdate:update-download-in-progress',
-      onAutoupdateStarted
+      (_, { newVersion }: { newVersion: string }) => {
+        onAutoupdateStarted({ newVersion });
+      }
     );
     ipcRenderer?.on('autoupdate:update-download-failed', onAutoupdateFailed);
     ipcRenderer?.on(
       'autoupdate:update-download-success',
-      (_, { updatedVersion }: { updatedVersion: string }) => {
+      (_, { newVersion }: { newVersion: string }) => {
         onAutoupdateSuccess({
-          updatedVersion,
+          newVersion,
           onUpdate: () => {
             void ipcRenderer?.call(
               'autoupdate:update-download-restart-confirmed'
@@ -332,6 +335,15 @@ const app = {
         throw new Error('fake exception');
       });
     }
+
+    if (semver.gt(APP_VERSION, state.previousVersion)) {
+      // Wait a bit before showing the update toast.
+      setTimeout(() => {
+        onAutoupdateInstalled({
+          newVersion: APP_VERSION,
+        });
+      }, 2000);
+    }
   },
 };
 
diff --git a/packages/compass/src/main/auto-update-manager.ts b/packages/compass/src/main/auto-update-manager.ts
@@ -358,9 +358,10 @@ const STATE_UPDATE: Record<
 
       this.maybeInterrupt();
 
-      if (isDownloadForManualCheck) {
-        ipcMain?.broadcast('autoupdate:update-download-in-progress');
-      }
+      ipcMain?.broadcast('autoupdate:update-download-in-progress', {
+        newVersion: updateInfo.to,
+      });
+
       autoUpdater.checkForUpdates();
     },
   },
@@ -380,7 +381,7 @@ const STATE_UPDATE: Record<
       this.maybeInterrupt();
 
       ipcMain?.broadcast('autoupdate:update-download-success', {
-        updatedVersion: updateInfo.to,
+        newVersion: updateInfo.to,
       });
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,8 @@ export async function showShell(browser: CompassBrowser): Promise<void> {`
`7`	`7`	`await retryWithBackoff(async function () {`
`8`	`8`	`const shellContentElement = await browser.$(Selectors.ShellContent);`
`9`	`9`	`if (!(await shellContentElement.isDisplayed())) {`
	`10`	`+ // The toasts may be covering the shell, so we need to close them.`
	`11`	`+ await browser.hideAllVisibleToasts();`
`10`	`12`	`await browser.clickVisible(Selectors.ShellExpandButton);`
`11`	`13`	`}`
`12`	`14`