Merge branch 'main' into F/ci/webext-alert

pixiebrix · Jan 22, 2024 · 155223e · 155223e
2 parents 0ceeb4e + 4716134
commit 155223e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/src/bricks/effects/alert.ts b/src/bricks/effects/alert.ts
@@ -73,13 +73,13 @@ export class AlertEffect extends EffectABC {
     const messageString = String(message);
 
     if (type === "window") {
-      // eslint-disable-next-line no-alert
+      // eslint-disable-next-line no-alert -- User requested
       window.alert(messageString);
     } else {
       showNotification({
         message: messageString,
         type,
-        duration,
+        autoDismissTimeMs: duration,
         reportError: false,
       });
     }

diff --git a/src/errors/contextInvalidated.ts b/src/errors/contextInvalidated.ts
@@ -21,27 +21,29 @@ import { getErrorMessage, getRootCause } from "./errorHelpers";
 import { CONTEXT_INVALIDATED_ERROR } from "@/errors/knownErrorMessages";
 
 /**
- * Notification id to avoid displaying the same notification multiple times.
+ * Notification id to avoid displaying multiple notifications at once.
  */
-const CONNECT_LOST_NOTIFICATION_ID = "connection-lost";
+const CONTEXT_INVALIDATED_NOTIFICATION_ID = "context-invalidated";
+
+const CONTEXT_INVALIDATED_NOTIFICATION_DURATION_MS = 20_000;
 
 /**
  * Display a notification when the background page unloads/reloads because at this point
  * all communication becomes impossible.
  */
 export async function notifyContextInvalidated(): Promise<void> {
-  // `import()` is needed to avoid execution of its dependencies (telemetry)
-  // Also, lazily import to avoid importing React unnecessarily
+  // Lazily import React component. Also avoids a `webext-messenger` transitive dependency.
+  // https://github.com/pixiebrix/pixiebrix-extension/pull/6234
   // https://github.com/pixiebrix/pixiebrix-extension/issues/4058#issuecomment-1217391772
-  // eslint-disable-next-line import/dynamic-import-chunkname
   const { default: notify } = await import(
-    /* webpackMode: "lazy" */ "@/utils/notify"
+    /* webpackChunkName: "notify" */ "@/utils/notify"
   );
+
   notify.error({
-    id: CONNECT_LOST_NOTIFICATION_ID,
+    id: CONTEXT_INVALIDATED_NOTIFICATION_ID,
     message: "PixieBrix was updated or restarted. Reload the page to continue",
     reportError: false, // It cannot report it because its background page no longer exists
-    duration: Number.POSITIVE_INFINITY,
+    autoDismissTimeMs: CONTEXT_INVALIDATED_NOTIFICATION_DURATION_MS,
   });
 }
 

diff --git a/src/extensionConsole/pages/settings/AdvancedSettings.tsx b/src/extensionConsole/pages/settings/AdvancedSettings.tsx
@@ -137,7 +137,7 @@ const AdvancedSettings: React.FunctionComponent = () => {
         id: SAVING_URL_NOTIFICATION_ID,
         message: "Service URL updated. The extension must be reloaded",
         dismissable: false,
-        duration: Number.POSITIVE_INFINITY,
+        autoDismissTimeMs: Number.POSITIVE_INFINITY,
       });
     },
     [serviceURL, setServiceURL],

diff --git a/src/utils/clipboardUtils.ts b/src/utils/clipboardUtils.ts
@@ -61,7 +61,7 @@ async function interactiveWriteToClipboard(
 
       const notificationId = notify.info({
         message: `Click anywhere to copy ${type} to clipboard`,
-        duration: Number.POSITIVE_INFINITY,
+        autoDismissTimeMs: Number.POSITIVE_INFINITY,
         dismissable: false,
       });
 

diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
@@ -38,7 +38,7 @@ import { SIDEBAR_WIDTH_CSS_PROPERTY } from "@/contentScript/sidebarDomController
 import ErrorIcon from "@/icons/error.svg?loadAsComponent";
 import WarningIcon from "@/icons/warning.svg?loadAsComponent";
 
-const MINIMUM_NOTIFICATION_DURATION = 2000;
+const MINIMUM_NOTIFICATION_DURATION_MS = 2000;
 
 export type NotificationType =
   | "info"
@@ -51,7 +51,7 @@ type Notification = RequireAtLeastOne<
     message: string;
     type?: NotificationType;
     id?: string;
-    duration?: number;
+    autoDismissTimeMs?: number;
     error: unknown;
     dismissable?: boolean;
     reportError?: boolean;
@@ -114,10 +114,10 @@ const toastStyle: ToastStyle = {
   },
 };
 
-function getMessageDisplayTime(message: string): number {
+function getMessageDisplayTimeMs(message: string): number {
   const wpm = 100; // 180 is the average words read per minute, make it slower
   return Math.max(
-    MINIMUM_NOTIFICATION_DURATION,
+    MINIMUM_NOTIFICATION_DURATION_MS,
     (message.split(" ").length / wpm) * 60_000,
   );
 }
@@ -149,7 +149,7 @@ export function showNotification({
   message,
   type = error ? "error" : undefined,
   id = uuidv4(),
-  duration,
+  autoDismissTimeMs: duration,
   dismissable = true,
 
   /** Only errors are reported by default */
@@ -166,7 +166,7 @@ export function showNotification({
   // Avoid excessively-long notification messages
   message = truncate(message, { length: 400 });
 
-  duration ??= getMessageDisplayTime(message);
+  duration ??= getMessageDisplayTimeMs(message);
 
   const options: ToastOptions = {
     id,