Replace content script notifications

package.json

@@ -104,6 +104,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.1.1",
     "react-hotkeys": "^2.0.0",
     "react-json-tree": "^0.15.0",
     "react-outside-click-handler": "^1.3.0",

src/background/contextMenus.ts

@@ -94,20 +94,19 @@ async function dispatchMenu(
     });
     void showNotification(target, {
       message: "Ran content menu item action",
-      className: "success",
+      type: "success",
     });
   } catch (error) {
     if (hasCancelRootCause(error)) {
       void showNotification(target, {
         message: "The action was cancelled",
-        className: "info",
       });
     } else {
       const message = `Error handling context menu action: ${getErrorMessage(
         error
       )}`;
       reportError(new Error(message));
-      void showNotification(target, { message, className: "error" });
+      void showNotification(target, { message, type: "error" });
     }
   }
 }

src/contentScript.ts

@@ -27,7 +27,6 @@ import registerBuiltinBlocks from "@/blocks/registerBuiltinBlocks";
 import registerContribBlocks from "@/contrib/registerContribBlocks";
 import { handleNavigate } from "@/contentScript/lifecycle";
 import "@/messaging/external";
-import "@/vendors/notify";
 import { markReady, updateTabInfo } from "@/contentScript/context";
 import { initTelemetry } from "@/telemetry/events";
 import { markTabAsReady, whoAmI } from "@/background/messenger/api";

src/contentScript/connection.ts

@@ -15,37 +15,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { NotificationCallbacks } from "@/contentScript/notify";
+import { hideNotification, showNotification } from "@/contentScript/notify";
 
-let _hooks: NotificationCallbacks = null;
+const id = "connection-lost";
 
 export function showConnectionLost(): void {
-  if (_hooks) {
-    // Don't show connection notification if it's already being displayed
-    return null;
-  }
-
-  const element = $.notify(
-    "Connection to PixieBrix lost. Please reload the page",
-    {
-      autoHide: false,
-      clickToHide: false,
-      className: "error",
-    }
-  );
-
-  const $element = $(element);
-
-  _hooks = {
-    hide: () => {
-      $element.trigger("notify-hide");
-    },
-  };
+  showNotification({
+    id,
+    message: "Connection to PixieBrix lost. Please reload the page",
+    type: "error",
+    duration: Number.POSITIVE_INFINITY,
+  });
 }
 
 export function hideConnectionLost(): void {
-  if (_hooks) {
-    _hooks.hide();
-    _hooks = null;
-  }
+  hideNotification(id);
 }

src/contentScript/notify.ts → src/contentScript/notify.tsx

@@ -15,18 +15,60 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import React from "react";
 import { merge } from "lodash";
+import { render } from "react-dom";
+import { toast, Toaster } from "react-hot-toast";
+import { uuidv4 } from "@/types/helpers";
 
+type NotificationType = "info" | "success" | "error" | "loading";
 interface Notification {
   message: string;
-  className: "error" | "info" | "success";
+  type?: NotificationType;
+  id?: string;
+  duration?: number;
 }
-export async function showNotification(
-  notification: Notification
-): Promise<void> {
-  $.notify(notification.message, {
-    className: notification.className,
-  });
+
+let root: Element | null;
+function initToaster(): void {
+  if (!root) {
+    root = document.createElement("div");
+    root.setAttribute("style", "all: initial; font-family: sans-serif;");
+  }
+
+  if (root.isConnected) {
+    return;
+  }
+
+  document.body.append(root);
+  render(<Toaster />, root);
+}
+
+export function showNotification({
+  message,
+  type,
+  id = uuidv4(),
+  duration,
+}: Notification): string {
+  initToaster();
+  const options = { id, duration };
+  switch (type) {
+    case "error":
+    case "success":
+    case "loading":
+      // eslint-disable-next-line security/detect-object-injection -- Filtered
+      toast[type](message, options);
+      break;
+
+    default:
+      toast(message, options);
+  }
+
+  return id;
+}
+
+export function hideNotification(id: string): void {
+  toast.remove(id);
 }
 
 export const DEFAULT_ACTION_RESULTS = {
@@ -72,29 +114,12 @@ export interface NotificationCallbacks {
 }
 
 export function notifyError(message: string): void {
-  // Call getErrorMessage on err and include in the details
-  $.notify(message, {
-    className: "error",
-  });
+  showNotification({ message, type: "error" });
 }
 
-export function notifyResult(extensionId: string, config: MessageConfig): void {
-  $.notify(config.message, config.config);
-}
-
-export function notifyProgress(
+export function notifyResult(
   extensionId: string,
-  message: string
-): NotificationCallbacks {
-  const element = $.notify(message, {
-    autoHide: false,
-    clickToHide: false,
-    className: "info",
-  });
-
-  return {
-    hide: () => {
-      $(element).trigger("notify-hide");
-    },
-  };
+  { message, config: { className } }: MessageConfig
+): void {
+  showNotification({ message, type: className as NotificationType });
 }

src/contrib/pipedrive/create.ts

@@ -19,6 +19,7 @@ import { Effect } from "@/types";
 import { proxyService } from "@/background/messenger/api";
 import { propertiesToSchema } from "@/validators/generic";
 import { BlockArg } from "@/core";
+import { showNotification } from "@/contentScript/notify";
 
 export class AddOrganization extends Effect {
   // https://developers.pipedrive.com/docs/api/v1/#!/Organizations/post_organizations
@@ -61,7 +62,7 @@ export class AddOrganization extends Effect {
     });
 
     if (data.items.length > 0) {
-      $.notify(`Organization already exists for ${name}`, "info");
+      showNotification({ message: `Organization already exists for ${name}` });
       return;
     }
 
@@ -71,9 +72,15 @@ export class AddOrganization extends Effect {
         method: "post",
         data: { name, owner_id },
       });
-      $.notify(`Added ${name} to Pipedrive`, "success");
+      showNotification({
+        message: `Added ${name} to Pipedrive`,
+        type: "success",
+      });
     } catch {
-      $.notify(`Error adding ${name} to Pipedrive`, "error");
+      showNotification({
+        message: `Error adding ${name} to Pipedrive`,
+        type: "error",
+      });
     }
   }
 }
@@ -133,7 +140,7 @@ export class AddPerson extends Effect {
     });
 
     if (data.items.length > 0) {
-      $.notify(`Person record already exists for ${name}`, "info");
+      showNotification({ message: `Person record already exists for ${name}` });
       return;
     }
 
@@ -148,9 +155,15 @@ export class AddPerson extends Effect {
           phone: phone ? [phone] : undefined,
         },
       });
-      $.notify(`Added ${name} to Pipedrive`, "success");
+      showNotification({
+        message: `Added ${name} to Pipedrive`,
+        type: "success",
+      });
     } catch {
-      $.notify(`Error adding ${name} to Pipedrive`, "error");
+      showNotification({
+        message: `Error adding ${name} to Pipedrive`,
+        type: "error",
+      });
     }
   }
 }

src/runtime/reducePipeline.ts

@@ -29,7 +29,7 @@ import { castArray, isPlainObject } from "lodash";
 import { BusinessError, ContextError } from "@/errors";
 import { requestRun } from "@/background/messenger/api";
 import { getLoggingConfig } from "@/background/logging";
-import { NotificationCallbacks, notifyProgress } from "@/contentScript/notify";
+import { hideNotification, showNotification } from "@/contentScript/notify";
 import { sendDeploymentAlert } from "@/background/telemetry";
 import { serializeError } from "serialize-error";
 import { HeadlessModeError } from "@/blocks/errors";
@@ -362,13 +362,13 @@ export async function runBlock(
     await throwIfInvalidInput(block, props.args);
   }
 
-  let progressCallbacks: NotificationCallbacks;
+  let notification: string;
 
   if (stage.notifyProgress) {
-    progressCallbacks = notifyProgress(
-      logger.context.extensionId,
-      stage.label ?? block.name
-    );
+    notification = showNotification({
+      message: stage.label ?? block.name,
+      type: "loading",
+    });
   }
 
   if (type === "renderer" && headless) {
@@ -385,9 +385,7 @@ export async function runBlock(
     const validatedProps = (props as unknown) as BlockProps<BlockArg>;
     return await execute(resolvedConfig, validatedProps, options);
   } finally {
-    if (progressCallbacks) {
-      progressCallbacks.hide();
-    }
+    hideNotification(notification);
   }
 }