From 9bcbfdd34aa87671878d5123d825dfc741b9c02c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 17 Sep 2024 14:15:52 +0300
Subject: [PATCH] Alter alert subscription from baseline.vue mounted lifecycle
 to subscribe when the child component mounts

---
 ui/src/layouts/Baseline.vue                   | 23 +++++++++++--------
 ui/src/main.mjs                               |  2 +-
 .../ui-notification/UINotification.vue        |  4 ++++
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index 396a53ba9..dc2624f9b 100644
--- a/ui/src/layouts/Baseline.vue
+++ b/ui/src/layouts/Baseline.vue
@@ -55,6 +55,7 @@
                 <ui-notification
                     id="ui-inline-alert" ref="alert"
                     :props="{position: 'top right', showCountdown: alert.showCountdown, displayTime: alert.displayTime, raw: true, allowDismiss: alert.allowDismiss}"
+                    @mounted="subscribeAlerts"
                 />
             </div>
         </v-main>
@@ -187,18 +188,20 @@ export default {
     },
     mounted () {
         this.updateTheme()
-        Alerts.subscribe((title, description, color, alertOptions) => {
-            this.$refs.alert.close()
-            this.alert = alertOptions
-            this.$nextTick(() => {
-                this.$refs.alert.onMsgInput({
-                    payload: `<h3>${title}</h3><p>${description}</p>`,
-                    color
-                })
-            })
-        })
     },
     methods: {
+        subscribeAlerts (context) {
+            Alerts.subscribe((title, description, color, alertOptions) => {
+                context.close()
+                this.alert = alertOptions
+                this.$nextTick(() => {
+                    context.onMsgInput({
+                        payload: `<h3>${title}</h3><p>${description}</p>`,
+                        color
+                    })
+                })
+            })
+        },
         go: function (name) {
             this.$router.push({
                 name
diff --git a/ui/src/main.mjs b/ui/src/main.mjs
index ba59146a8..5ea62b7fa 100644
--- a/ui/src/main.mjs
+++ b/ui/src/main.mjs
@@ -136,7 +136,7 @@ fetch('_setup')
             }
             // tell the user we're trying to connect
             Alerts.emit('Connection Lost', 'Attempting to reconnect to server...', 'red', {
-                displayTime: 0,
+                displayTime: 0, // displayTime 0 persists notifications until another notification closes it
                 allowDismiss: false,
                 showCountdown: false
             })
diff --git a/ui/src/widgets/ui-notification/UINotification.vue b/ui/src/widgets/ui-notification/UINotification.vue
index a5e4c0e58..d68c90c60 100644
--- a/ui/src/widgets/ui-notification/UINotification.vue
+++ b/ui/src/widgets/ui-notification/UINotification.vue
@@ -44,6 +44,7 @@ export default {
         props: { type: Object, default: () => ({}) },
         state: { type: Object, default: () => ({}) }
     },
+    emits: ['mounted'],
     data () {
         return {
             show: false,
@@ -100,6 +101,9 @@ export default {
         // can't do this in setup as we have custom onInput function
         this.$dataTracker(this.id, this.onMsgInput, null, this.onDynamicProperties)
     },
+    mounted () {
+        this.$emit('mounted', this)
+    },
     methods: {
         onDynamicProperties (msg) {
             const updates = msg.ui_update