Merge pull request #1301 from FlowFuse/747_fix-ws-reactivity-caused-b…

…y-incorrect-component-lifecycle-mount-order Alter alert subscription causing the vue application to silently crash
FlowFuse · Sep 17, 2024 · 7ed2420 · 7ed2420
2 parents 40d360a + 9bcbfdd
commit 7ed2420
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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