Locally import growl function in ES code

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"))
     })
   }
 

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)
           })

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"))
     }
   }
 

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")
   }
 }
 

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")
   }
 
   /**

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)
       })
   })
 }

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(() => {

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")
       })
   }
 

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)
   }
 }

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)
     })

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")
         }
       })
     })

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)
       })

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"
         )