Merge pull request #3532 from AlchemyCMS/longer-dismiss-delay

feat(Alerts): Allow to change auto dismiss delay

Author: tvdeyen

app/javascript/alchemy_admin/components/message.js

@@ -26,7 +26,7 @@ class Message extends HTMLElement {
     if (this.dismissable && this.type !== "error") {
       setTimeout(() => {
         this.dismiss()
-      }, this.delay)
+      }, this.dismissDelay)
     }
   }
 
@@ -43,8 +43,10 @@ class Message extends HTMLElement {
     return this.getAttribute("type") || "notice"
   }
 
-  get delay() {
-    return parseInt(this.getAttribute("delay") || DISMISS_DELAY)
+  get dismissDelay() {
+    return parseInt(
+      this.noticesWrapper?.dataset.autoDismissDelay || DISMISS_DELAY
+    )
   }
 
   get iconName() {
@@ -64,6 +66,10 @@ class Message extends HTMLElement {
         return this.type
     }
   }
+
+  get noticesWrapper() {
+    return this.closest("#flash_notices")
+  }
 }
 
 customElements.define("alchemy-message", Message)

app/views/alchemy/admin/partials/_flash_notices.html.erb

@@ -1,4 +1,4 @@
-<div id="flash_notices">
+<div id="flash_notices" data-auto-dismiss-delay="5000">
 <% flash.keys.each do |flash_type| %>
   <% if flash[flash_type.to_sym].present? %>
     <%= render Alchemy::Admin::Message.new(flash[flash_type.to_sym], type: flash_type, dismissable: true) %>

spec/javascript/alchemy_admin/components/message.spec.js

@@ -20,9 +20,11 @@ describe("alchemy-message", () => {
       it("dismisses after delay", () => {
         return new Promise((resolve) => {
           const html = `
-            <alchemy-message dismissable delay=10>
-              A message
-            </alchemy-message>
+            <div id="flash_notices" data-auto-dismiss-delay="10">
+              <alchemy-message dismissable>
+                A message
+              </alchemy-message>
+            </div>
           `
           const component = renderComponent("alchemy-message", html)
           const spy = vi.spyOn(component, "dismiss")
@@ -36,9 +38,11 @@ describe("alchemy-message", () => {
       it("when type error, does not dismis after delay", () => {
         return new Promise((resolve) => {
           const html = `
-            <alchemy-message dismissable type="error" delay=10>
-              A message
-            </alchemy-message>
+            <div id="flash_notices" data-auto-dismiss-delay="10">
+              <alchemy-message dismissable type="error">
+                A message
+              </alchemy-message>
+            </div>
           `
           const component = renderComponent("alchemy-message", html)
           const spy = vi.spyOn(component, "dismiss")