refactor indicator, list, message

pass destroyed up from message

let list close itself, not message

update indicator on message destroy

src/plugins/notificationIndicator/components/NotificationIndicator.vue

@@ -43,6 +43,7 @@
       :notifications="notifications"
       @close="toggleNotificationsList"
       @clear-all="dismissAllNotifications"
+      @dismissed="updateNotifications"
     />
   </div>
 </template>
@@ -72,8 +73,8 @@ export default {
     this.openmct.notifications.on('dismiss-all', this.updateNotifications);
   },
   unmounted() {
-    this.openmct.notifications.of('notification', this.updateNotifications);
-    this.openmct.notifications.of('dismiss-all', this.updateNotifications);
+    this.openmct.notifications.off('notification', this.updateNotifications);
+    this.openmct.notifications.off('dismiss-all', this.updateNotifications);
   },
   methods: {
     dismissAllNotifications() {

src/plugins/notificationIndicator/components/NotificationMessage.vue

@@ -72,16 +72,9 @@ export default {
     notification: {
       type: Object,
       required: true
-    },
-    closeOverlay: {
-      type: Function,
-      required: true
-    },
-    notificationsCount: {
-      type: Number,
-      required: true
     }
   },
+  emits: ['dismissed'],
   data() {
     return {
       isProgressNotification: false,
@@ -98,6 +91,8 @@ export default {
     }
   },
   mounted() {
+    this.notification.once('destroy', this.dismissNotification);
+
     if (this.notification.model.progressPerc) {
       this.isProgressNotification = true;
       this.notification.on('progress', this.updateProgressBar);
@@ -110,9 +105,13 @@ export default {
     },
     dismiss() {
       this.notification.dismiss();
-      if (this.notificationsCount === 1) {
-        this.closeOverlay();
+    },
+    dismissNotification() {
+      if (this.isProgressNotification) {
+        this.notification.off('progress', this.updateProgressBar);
       }
+
+      this.$emit('dismissed');
     }
   }
 };

src/plugins/notificationIndicator/components/NotificationsList.vue

@@ -31,9 +31,8 @@
       <notification-message
         v-for="(notification, notificationIndex) in notifications"
         :key="notificationIndex"
-        :close-overlay="closeOverlay"
         :notification="notification"
-        :notifications-count="notifications.length"
+        @dismissed="notificationDismissed"
       />
     </div>
   </div>
@@ -53,12 +52,15 @@ export default {
       required: true
     }
   },
-  emits: ['clear-all', 'close'],
+  emits: ['clear-all', 'close', 'dismissed'],
   computed: {
+    notificationsCount() {
+      return this.notifications.length;
+    },
     notificationsCountDisplayMessage() {
-      return this.notifications.length > 1 || this.notifications.length === 0
-        ? `Displaying ${this.notifications.length} notifications`
-        : `Displaying ${this.notifications.length} notification`;
+      return this.notificationsCount > 1 || this.notificationsCount === 0
+        ? `Displaying ${this.notificationsCount} notifications`
+        : `Displaying ${this.notificationsCount} notification`;
     }
   },
   mounted() {
@@ -85,8 +87,12 @@ export default {
         }
       });
     },
-    closeOverlay() {
-      this.overlay.dismiss();
+    notificationDismissed() {
+      if (this.notificationsCount === 1) {
+        this.overlay.dismiss();
+      }
+
+      this.$emit('dismissed');
     }
   }
 };