static: fix messages update only working once

passbook/admin/api/tasks.py

@@ -53,7 +53,7 @@ class TaskViewSet(ViewSet):
         task_module = import_module(task.task_call_module)
         task_func = getattr(task_module, task.task_call_func)
         task_func.delay(*task.task_call_args, **task.task_call_kwargs)
-        messages.success(self.request, _("Successfully re-scheduled Task!"))
+        messages.success(self.request, _("Successfully re-scheduled Task %(name)s!" % {'name': task.task_name}))
         return Response(
             {
                 "successful": True,

passbook/static/static/src/ActionButton.js

@@ -32,8 +32,9 @@ class ActionButton extends HTMLButtonElement {
         this.classList.remove(...PROGRESS_CLASSES);
         this.innerText = this.oldBody;
         this.classList.replace(PRIMARY_CLASS, statusClass);
+        // Trigger messages to update
+        document.querySelector("pb-messages").setAttribute("touch", Date.now());
         setTimeout(() => {
-            console.log('test');
             this.classList.replace(statusClass, PRIMARY_CLASS);
         }, 1000);
     }

passbook/static/static/src/Messages.js

@@ -7,8 +7,8 @@ const LEVEL_ICON_MAP = {
     "info": "fas fa-info",
 };
 
-let ID = function () {
+let ID = function (prefix) {
-    return '_' + Math.random().toString(36).substr(2, 9);
+    return prefix + Math.random().toString(36).substr(2, 9);
 };
 
 class Messages extends LitElement {
@@ -17,23 +17,29 @@ class Messages extends LitElement {
         return {
             url: { type: String },
             messages: { type: Array },
+            touch: { type: Object },
         };
     }
 
+    set touch(value) {
+        this.firstUpdated();
+    }
+
     createRenderRoot() {
         return this;
     }
 
     firstUpdated() {
-        fetch(this.url).then(r => r.json()).then(r => this.messages = r);
+        return fetch(this.url).then(r => r.json()).then(r => this.messages = r);
     }
 
     renderMessage(message) {
-        const id = `pb-message-${ID()}`;
+        const id = ID("pb-message");
-        const item = html`<li id=${id} class="pf-c-alert-group__item">
+        const el = document.createElement("template");
+        el.innerHTML = `<li id=${id} class="pf-c-alert-group__item">
             <div class="pf-c-alert pf-m-${message.level_tag} ${message.level_tag === 'error' ? 'pf-m-danger': ''}">
                 <div class="pf-c-alert__icon">
-                    <i class="${LEVEL_ICON_MAP[message.level_tag]}">
+                    <i class="${LEVEL_ICON_MAP[message.level_tag]}"></i>
                 </div>
                 <p class="pf-c-alert__title">
                     ${message.message}
@@ -43,7 +49,7 @@ class Messages extends LitElement {
         setTimeout(() => {
             this.querySelector(`#${id}`).remove();
         }, 1500);
-        return item;
+        return el.content.firstChild;
     }
 
     render() {