From f0a649f489a4745f56264753ae780a36ca9b2431 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Wed, 3 Apr 2024 18:53:48 +0200
Subject: [PATCH] Locally import growl function

In our ES code we can locally import the growl function
instead of using the global Alchemy object.
---
 .../components/clipboard_button.js            |  3 +-
 .../components/element_editor.js              |  9 +++---
 .../element_editor/publish_element_button.js  |  3 +-
 .../alchemy_admin/components/growl.js         |  7 ++--
 .../components/uploader/file_upload.js        |  5 +--
 app/javascript/alchemy_admin/node_tree.js     |  7 ++--
 app/javascript/alchemy_admin/page_sorter.js   |  5 +--
 .../alchemy_admin/picture_editors.js          |  3 +-
 app/javascript/alchemy_admin/sitemap.js       |  3 +-
 .../alchemy_admin/sortable_elements.js        |  3 +-
 .../components/element_editor.spec.js         | 26 +++++++--------
 .../publish_element_button.spec.js            | 14 +++++---
 .../alchemy_admin/components/uploader.spec.js |  9 +++++-
 .../components/uploader/file_upload.spec.js   | 32 +++++++++++--------
 .../components/uploader/progress.spec.js      |  7 +++-
 15 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/app/javascript/alchemy_admin/components/clipboard_button.js b/app/javascript/alchemy_admin/components/clipboard_button.js
index 384e7fc93f..675e6233d9 100644
--- a/app/javascript/alchemy_admin/components/clipboard_button.js
+++ b/app/javascript/alchemy_admin/components/clipboard_button.js
@@ -1,4 +1,5 @@
 import "clipboard"
+import { growl } from "alchemy_admin/growler"
 
 class ClipboardButton extends HTMLElement {
   constructor() {
@@ -15,7 +16,7 @@ class ClipboardButton extends HTMLElement {
     })
 
     this.clipboard.on("success", () => {
-      Alchemy.growl(this.getAttribute("success-text"))
+      growl(this.getAttribute("success-text"))
     })
   }
 
diff --git a/app/javascript/alchemy_admin/components/element_editor.js b/app/javascript/alchemy_admin/components/element_editor.js
index e53713e15b..dca24f4c80 100644
--- a/app/javascript/alchemy_admin/components/element_editor.js
+++ b/app/javascript/alchemy_admin/components/element_editor.js
@@ -4,6 +4,7 @@ import pictureEditors from "alchemy_admin/picture_editors"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { post } from "alchemy_admin/utils/ajax"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
+import { growl } from "alchemy_admin/growler"
 
 import "alchemy_admin/components/element_editor/publish_element_button"
 
@@ -137,10 +138,10 @@ export class ElementEditor extends HTMLElement {
         )
       })
       // Show message
-      Alchemy.growl(warning, "warn")
+      growl(warning, "warn")
       this.elementErrors.classList.remove("hidden")
     } else {
-      Alchemy.growl(data.notice)
+      growl(data.notice)
       this.previewWindow?.refresh().then(() => {
         this.focusElementPreview()
       })
@@ -273,7 +274,7 @@ export class ElementEditor extends HTMLElement {
         }
       })
       .catch((error) => {
-        Alchemy.growl(error.message, "error")
+        growl(error.message, "error")
         console.error(error)
       })
       .finally(() => {
@@ -320,7 +321,7 @@ export class ElementEditor extends HTMLElement {
             resolve()
           })
           .catch((error) => {
-            Alchemy.growl(error.message, "error")
+            growl(error.message, "error")
             console.error(error)
             reject(error)
           })
diff --git a/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js b/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js
index 705c293629..5008a1e5a3 100644
--- a/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js
+++ b/app/javascript/alchemy_admin/components/element_editor/publish_element_button.js
@@ -1,5 +1,6 @@
 import { patch } from "alchemy_admin/utils/ajax"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
+import { growl } from "alchemy_admin/growler"
 
 export class PublishElementButton extends HTMLElement {
   constructor() {
@@ -17,7 +18,7 @@ export class PublishElementButton extends HTMLElement {
           this.tooltip.setAttribute("content", response.data.label)
           reloadPreview()
         })
-        .catch((error) => Alchemy.growl(error.message, "error"))
+        .catch((error) => growl(error.message, "error"))
     }
   }
 
diff --git a/app/javascript/alchemy_admin/components/growl.js b/app/javascript/alchemy_admin/components/growl.js
index 9959dd2422..38d3d18ff6 100644
--- a/app/javascript/alchemy_admin/components/growl.js
+++ b/app/javascript/alchemy_admin/components/growl.js
@@ -1,9 +1,8 @@
+import { growl } from "alchemy_admin/growler"
+
 class Growl extends HTMLElement {
   connectedCallback() {
-    Alchemy.growl(
-      this.getAttribute("message"),
-      this.getAttribute("type") || "notice"
-    )
+    growl(this.getAttribute("message"), this.getAttribute("type") || "notice")
   }
 }
 
diff --git a/app/javascript/alchemy_admin/components/uploader/file_upload.js b/app/javascript/alchemy_admin/components/uploader/file_upload.js
index 636c74a378..1fb808b9a4 100644
--- a/app/javascript/alchemy_admin/components/uploader/file_upload.js
+++ b/app/javascript/alchemy_admin/components/uploader/file_upload.js
@@ -1,6 +1,7 @@
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { formatFileSize } from "alchemy_admin/utils/format"
 import { translate } from "alchemy_admin/i18n"
+import { growl } from "alchemy_admin/growler"
 
 export class FileUpload extends AlchemyHTMLElement {
   /**
@@ -116,7 +117,7 @@ export class FileUpload extends AlchemyHTMLElement {
     this.request.onload = () => {
       if (this.request.status < 400) {
         this.status = "successful"
-        Alchemy.growl(this.responseMessage)
+        growl(this.responseMessage)
       } else {
         this.status = "failed"
         this.errorMessage = this.responseMessage
@@ -153,7 +154,7 @@ export class FileUpload extends AlchemyHTMLElement {
     if (errorMessageContainer) {
       errorMessageContainer.textContent = message
     }
-    Alchemy.growl(message, "error")
+    growl(message, "error")
   }
 
   /**
diff --git a/app/javascript/alchemy_admin/node_tree.js b/app/javascript/alchemy_admin/node_tree.js
index ef0352bd58..15850b5a10 100644
--- a/app/javascript/alchemy_admin/node_tree.js
+++ b/app/javascript/alchemy_admin/node_tree.js
@@ -1,6 +1,7 @@
 import Sortable from "sortablejs"
 import { patch } from "alchemy_admin/utils/ajax"
 import { on } from "alchemy_admin/utils/events"
+import { growl } from "alchemy_admin/growler"
 
 function displayNodeFolders() {
   document.querySelectorAll("li.menu-item").forEach((el) => {
@@ -32,11 +33,11 @@ function onFinishDragging(evt) {
   patch(url, data)
     .then(() => {
       const message = Alchemy.t("Successfully moved menu item")
-      Alchemy.growl(message)
+      growl(message)
       displayNodeFolders()
     })
     .catch((error) => {
-      Alchemy.growl(error.message || error, "error")
+      growl(error.message || error, "error")
     })
 }
 
@@ -56,7 +57,7 @@ function handleNodeFolders() {
         displayNodeFolders()
       })
       .catch((error) => {
-        Alchemy.growl(error.message || error)
+        growl(error.message || error)
       })
   })
 }
diff --git a/app/javascript/alchemy_admin/page_sorter.js b/app/javascript/alchemy_admin/page_sorter.js
index 9d4cd26327..824a4d7977 100644
--- a/app/javascript/alchemy_admin/page_sorter.js
+++ b/app/javascript/alchemy_admin/page_sorter.js
@@ -1,4 +1,5 @@
 import Sortable from "sortablejs"
+import { growl } from "alchemy_admin/growler"
 import { patch } from "alchemy_admin/utils/ajax"
 import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 
@@ -18,12 +19,12 @@ function onSort(evt) {
         const pageEl = document.getElementById(`page_${pageId}`)
         const urlPathEl = pageEl.querySelector(".sitemap_url")
 
-        Alchemy.growl(Alchemy.t("Successfully moved page"))
+        growl(Alchemy.t("Successfully moved page"))
         urlPathEl.textContent = pageData.url_path
         displayPageFolders()
       })
       .catch((error) => {
-        Alchemy.growl(error.message || error, "error")
+        growl(error.message || error, "error")
         Alchemy.currentSitemap.reload()
       })
       .finally(() => {
diff --git a/app/javascript/alchemy_admin/picture_editors.js b/app/javascript/alchemy_admin/picture_editors.js
index 86fbc13375..f2d11d62f3 100644
--- a/app/javascript/alchemy_admin/picture_editors.js
+++ b/app/javascript/alchemy_admin/picture_editors.js
@@ -1,6 +1,7 @@
 import debounce from "alchemy_admin/utils/debounce"
 import max from "alchemy_admin/utils/max"
 import { get } from "alchemy_admin/utils/ajax"
+import { growl } from "alchemy_admin/growler"
 import ImageLoader from "alchemy_admin/image_loader"
 
 const UPDATE_DELAY = 125
@@ -77,7 +78,7 @@ class PictureEditor {
       })
       .catch((error) => {
         console.error(error.message || error)
-        Alchemy.growl(error.message || error, "error")
+        growl(error.message || error, "error")
       })
   }
 
diff --git a/app/javascript/alchemy_admin/sitemap.js b/app/javascript/alchemy_admin/sitemap.js
index aac3f0fb6e..f5671cf3e6 100644
--- a/app/javascript/alchemy_admin/sitemap.js
+++ b/app/javascript/alchemy_admin/sitemap.js
@@ -2,6 +2,7 @@
 import PageSorter from "alchemy_admin/page_sorter"
 import { on } from "alchemy_admin/utils/events"
 import { get, patch } from "alchemy_admin/utils/ajax"
+import { growl } from "alchemy_admin/growler"
 import { createSortables, displayPageFolders } from "alchemy_admin/page_sorter"
 
 export default class Sitemap {
@@ -147,7 +148,7 @@ export default class Sitemap {
   }
 
   errorHandler(error) {
-    Alchemy.growl(error.message || error, "error")
+    growl(error.message || error, "error")
     console.error(error)
   }
 }
diff --git a/app/javascript/alchemy_admin/sortable_elements.js b/app/javascript/alchemy_admin/sortable_elements.js
index b5314cc43e..c789844b16 100644
--- a/app/javascript/alchemy_admin/sortable_elements.js
+++ b/app/javascript/alchemy_admin/sortable_elements.js
@@ -1,4 +1,5 @@
 import Sortable from "sortablejs"
+import { growl } from "alchemy_admin/growler"
 import { post } from "alchemy_admin/utils/ajax"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
 
@@ -36,7 +37,7 @@ function onSort(event) {
   if (event.target === event.to) {
     post(Alchemy.routes.order_admin_elements_path, params).then((response) => {
       const data = response.data
-      Alchemy.growl(data.message)
+      growl(data.message)
       reloadPreview()
       item.updateTitle(data.preview_text)
     })
diff --git a/spec/javascript/alchemy_admin/components/element_editor.spec.js b/spec/javascript/alchemy_admin/components/element_editor.spec.js
index f19ad54168..b413678d99 100644
--- a/spec/javascript/alchemy_admin/components/element_editor.spec.js
+++ b/spec/javascript/alchemy_admin/components/element_editor.spec.js
@@ -4,6 +4,13 @@ import pictureEditors from "alchemy_admin/picture_editors"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { ElementEditor } from "alchemy_admin/components/element_editor"
 import { renderComponent } from "./component.helper"
+import { growl } from "alchemy_admin/growler"
+
+jest.mock("alchemy_admin/growler", () => {
+  return {
+    growl: jest.fn()
+  }
+})
 
 jest.mock("alchemy_admin/image_loader", () => {
   return {
@@ -128,7 +135,7 @@ describe("alchemy-element-editor", () => {
     }
     Alchemy.PreviewWindow.postMessage.mockClear()
     Alchemy.PreviewWindow.refresh.mockClear()
-    Alchemy.growl.mockClear()
+    growl.mockClear()
   })
 
   describe("connectedCallback", () => {
@@ -433,7 +440,7 @@ describe("alchemy-element-editor", () => {
       })
 
       it("growls success", () => {
-        expect(Alchemy.growl).toHaveBeenCalledWith("Element saved")
+        expect(growl).toHaveBeenCalledWith("Element saved")
       })
     })
 
@@ -476,10 +483,7 @@ describe("alchemy-element-editor", () => {
       })
 
       it("growls a warning", () => {
-        expect(Alchemy.growl).toHaveBeenCalledWith(
-          "Something is not right",
-          "warn"
-        )
+        expect(growl).toHaveBeenCalledWith("Something is not right", "warn")
       })
     })
   })
@@ -715,10 +719,7 @@ describe("alchemy-element-editor", () => {
           error: jest.fn()
         }
         await editor.collapse()
-        expect(Alchemy.growl).toHaveBeenCalledWith(
-          "Something went wrong!",
-          "error"
-        )
+        expect(growl).toHaveBeenCalledWith("Something went wrong!", "error")
       })
     })
   })
@@ -787,10 +788,7 @@ describe("alchemy-element-editor", () => {
         try {
           await editor.expand()
         } catch {
-          expect(Alchemy.growl).toHaveBeenCalledWith(
-            "Something went wrong!",
-            "error"
-          )
+          expect(growl).toHaveBeenCalledWith("Something went wrong!", "error")
         }
       })
     })
diff --git a/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js b/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js
index d8d42a962f..df4299c4be 100644
--- a/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js
+++ b/spec/javascript/alchemy_admin/components/element_editor/publish_element_button.spec.js
@@ -1,5 +1,6 @@
 import "alchemy_admin/components/element_editor/publish_element_button"
 import { renderComponent } from "../component.helper"
+import { growl } from "alchemy_admin/growler"
 
 const mockReloadPreview = jest.fn()
 
@@ -11,6 +12,12 @@ jest.mock("alchemy_admin/components/preview_window", () => {
   }
 })
 
+jest.mock("alchemy_admin/growler", () => {
+  return {
+    growl: jest.fn()
+  }
+})
+
 jest.mock("alchemy_admin/utils/ajax", () => {
   return {
     __esModule: true,
@@ -56,12 +63,11 @@ describe("alchemy-publish-element-button", () => {
           return `/admin/elements/${id}/publish`
         }
       },
-      reloadPreview: jest.fn(),
-      growl: jest.fn()
+      reloadPreview: jest.fn()
     }
 
     Alchemy.reloadPreview.mockClear()
-    Alchemy.growl.mockClear()
+    growl.mockClear()
   })
 
   describe("on change", () => {
@@ -88,7 +94,7 @@ describe("alchemy-publish-element-button", () => {
 
       return new Promise((resolve) => {
         setTimeout(() => {
-          expect(Alchemy.growl).toHaveBeenCalled()
+          expect(growl).toHaveBeenCalled()
           resolve()
         }, 1)
       })
diff --git a/spec/javascript/alchemy_admin/components/uploader.spec.js b/spec/javascript/alchemy_admin/components/uploader.spec.js
index a421666950..412eb83457 100644
--- a/spec/javascript/alchemy_admin/components/uploader.spec.js
+++ b/spec/javascript/alchemy_admin/components/uploader.spec.js
@@ -1,3 +1,4 @@
+import { growl } from "alchemy_admin/growler"
 import { Uploader } from "alchemy_admin/components/uploader"
 
 jest.mock("alchemy_admin/utils/ajax", () => {
@@ -7,6 +8,12 @@ jest.mock("alchemy_admin/utils/ajax", () => {
   }
 })
 
+jest.mock("alchemy_admin/growler", () => {
+  return {
+    growl: jest.fn()
+  }
+})
+
 describe("alchemy-uploader", () => {
   /**
    * @type {Uploader}
@@ -187,7 +194,7 @@ describe("alchemy-uploader", () => {
       })
 
       it("should call the growl method", () => {
-        expect(Alchemy.growl).toHaveBeenCalledWith(
+        expect(growl).toHaveBeenCalledWith(
           "Maximum number of files exceeded",
           "error"
         )
diff --git a/spec/javascript/alchemy_admin/components/uploader/file_upload.spec.js b/spec/javascript/alchemy_admin/components/uploader/file_upload.spec.js
index eafa1561d2..8d76c14da3 100644
--- a/spec/javascript/alchemy_admin/components/uploader/file_upload.spec.js
+++ b/spec/javascript/alchemy_admin/components/uploader/file_upload.spec.js
@@ -1,5 +1,12 @@
 import { FileUpload } from "alchemy_admin/components/uploader/file_upload"
 import mock from "xhr-mock"
+import { growl } from "alchemy_admin/growler"
+
+jest.mock("alchemy_admin/growler", () => {
+  return {
+    growl: jest.fn()
+  }
+})
 
 describe("alchemy-file-upload", () => {
   /**
@@ -57,7 +64,6 @@ describe("alchemy-file-upload", () => {
 
   beforeEach(() => {
     Alchemy = {
-      growl: jest.fn(),
       uploader_defaults: {
         file_size_limit: 100,
         upload_limit: 50,
@@ -65,6 +71,7 @@ describe("alchemy-file-upload", () => {
         allowed_filetype_attachments: "*"
       }
     }
+    growl.mockClear()
     renderComponent()
   })
 
@@ -182,8 +189,8 @@ describe("alchemy-file-upload", () => {
         })
 
         it("should call the growl method", () => {
-          expect(Alchemy.growl).toHaveBeenCalledWith("Foo Bar")
-          expect(Alchemy.growl).toHaveBeenCalledTimes(1)
+          expect(growl).toHaveBeenCalledWith("Foo Bar")
+          expect(growl).toHaveBeenCalledTimes(1)
         })
 
         it("should mark as successful", () => {
@@ -206,8 +213,8 @@ describe("alchemy-file-upload", () => {
         })
 
         it("should call the growl method", () => {
-          expect(Alchemy.growl).toHaveBeenCalledWith("Error: Foo Bar", "error")
-          expect(Alchemy.growl).toHaveBeenCalledTimes(1)
+          expect(growl).toHaveBeenCalledWith("Error: Foo Bar", "error")
+          expect(growl).toHaveBeenCalledTimes(1)
         })
 
         it("should mark as failed", () => {
@@ -224,11 +231,11 @@ describe("alchemy-file-upload", () => {
       it("should call the growl method", () => {
         component.request.onerror()
 
-        expect(Alchemy.growl).toHaveBeenCalledWith(
+        expect(growl).toHaveBeenCalledWith(
           "An error occurred during the transaction",
           "error"
         )
-        expect(Alchemy.growl).toHaveBeenCalledTimes(1)
+        expect(growl).toHaveBeenCalledTimes(1)
       })
     })
   })
@@ -354,11 +361,11 @@ describe("alchemy-file-upload", () => {
         })
 
         it("should call the growl method", () => {
-          expect(Alchemy.growl).toHaveBeenCalledWith(
+          expect(growl).toHaveBeenCalledWith(
             "Uploaded bytes exceed file size",
             "error"
           )
-          expect(Alchemy.growl).toHaveBeenCalledTimes(1)
+          expect(growl).toHaveBeenCalledTimes(1)
         })
 
         it("should be invalid", () => {
@@ -448,11 +455,8 @@ describe("alchemy-file-upload", () => {
           })
 
           it("should call the growl method", () => {
-            expect(Alchemy.growl).toHaveBeenCalledWith(
-              "File type not allowed",
-              "error"
-            )
-            expect(Alchemy.growl).toHaveBeenCalledTimes(1)
+            expect(growl).toHaveBeenCalledWith("File type not allowed", "error")
+            expect(growl).toHaveBeenCalledTimes(1)
           })
 
           it("should have an error message", () => {
diff --git a/spec/javascript/alchemy_admin/components/uploader/progress.spec.js b/spec/javascript/alchemy_admin/components/uploader/progress.spec.js
index 88cffc4919..eedcc3a233 100644
--- a/spec/javascript/alchemy_admin/components/uploader/progress.spec.js
+++ b/spec/javascript/alchemy_admin/components/uploader/progress.spec.js
@@ -3,6 +3,12 @@ import mock from "xhr-mock"
 import { Progress } from "alchemy_admin/components/uploader/progress"
 import { FileUpload } from "alchemy_admin/components/uploader/file_upload"
 
+jest.mock("alchemy_admin/growler", () => {
+  return {
+    growl: jest.fn()
+  }
+})
+
 describe("alchemy-upload-progress", () => {
   /**
    * @type {Progress}
@@ -75,7 +81,6 @@ describe("alchemy-upload-progress", () => {
     }
 
     Alchemy = {
-      growl: jest.fn(),
       uploader_defaults: {
         file_size_limit: 100,
         upload_limit: 50,