From e4145c4401b30ee86556d4a8c5f202f0af32ab44 Mon Sep 17 00:00:00 2001
From: yomybaby <621215+yomybaby@users.noreply.github.com>
Date: Wed, 3 Jul 2024 10:48:48 +0000
Subject: [PATCH] feature: prevent stacking of duplicate notifications (#2502)

### TL;DR

Removed unnecessary console log statements and improved notification handling by adding a unique key parameter to avoid duplicate notifications.

### What changed?

- Removed `console.log` statements in `backend-ai-session-list.ts` and `lablup-notification.ts` files.
- Enhanced the `show` method in `LablupNotification` component to include a `key` parameter for uniquely identifying notifications.
- Added logic to prevent dispatching duplicate notifications and handled the 'Network disconnected' message specifically.

### How to test?

1. Trigger an error in the application and verify that console log statements no longer appear.
2. Check that notifications are correctly displayed without duplication.
3. Ensure the 'Network disconnected' message is handled by the `NetworkStatusBanner` component.

### Why make this change?

To clean up the console output and improve the notification system by preventing duplicate messages and enhancing user experience.

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
---
 src/components/backend-ai-session-list.ts |  1 -
 src/components/lablup-notification.ts     | 39 ++++++++++++++++-------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/backend-ai-session-list.ts b/src/components/backend-ai-session-list.ts
index e49c12979b..d4afa77b32 100644
--- a/src/components/backend-ai-session-list.ts
+++ b/src/components/backend-ai-session-list.ts
@@ -1271,7 +1271,6 @@ export default class BackendAISessionList extends BackendAIPage {
           }, refreshTime);
         }
         this._listStatus?.hide();
-        console.log(err);
         if (err && err.message) {
           this.notification.text = PainKiller.relieve(err.title);
           this.notification.detail = err.message;
diff --git a/src/components/lablup-notification.ts b/src/components/lablup-notification.ts
index cf4e4b7197..d8c50fcba8 100644
--- a/src/components/lablup-notification.ts
+++ b/src/components/lablup-notification.ts
@@ -177,30 +177,46 @@ export default class LablupNotification extends LitElement {
    *
    * @param {boolean} persistent - if persistent is false, the snackbar is hidden automatically after 3000ms
    * @param {object} log - Log object that contains detail information
+   * @param {string} key - notification key. If it already exists, the notification will be updated.
    * */
-  show(persistent = false, log: Record<string, unknown> = Object()) {
+  show(
+    persistent = false,
+    log: Record<string, unknown> = Object(),
+    key: string,
+  ) {
     if (this.text === '_DISCONNECTED') {
       return;
     }
     const shouldSaveLog = Object.keys(log).length !== 0;
     if (shouldSaveLog) {
-      console.log(log);
       this._saveToLocalStorage('backendaiwebui.logs', log);
     }
 
+    const messageDetail = {
+      open: true,
+      type: shouldSaveLog ? 'error' : null,
+      message: this.text,
+      description: this.text ? undefined : this.detail,
+      to: shouldSaveLog ? '/usersettings?tab=logs' : this.url,
+      duration: persistent ? 0 : undefined,
+      // closeIcon: persistent,
+    };
+
     const event: CustomEvent = new CustomEvent('add-bai-notification', {
       detail: {
-        open: true,
-        type: shouldSaveLog ? 'error' : null,
-        message: this.text,
-        description: this.text ? undefined : this.detail,
-        to: shouldSaveLog ? '/usersettings?tab=logs' : this.url,
-        duration: persistent ? 0 : undefined,
-        // closeIcon: persistent,
+        key:
+          typeof key === 'undefined' && messageDetail.type === 'error'
+            ? `_no_key_from_lablup_notification:${JSON.stringify(messageDetail)}`
+            : key,
+        ...messageDetail,
       },
     });
-    document.dispatchEvent(event);
-    this._spawnDesktopNotification('Backend.AI', this.text, '');
+
+    // Ignore the event if the message is 'Network disconnected because it is handled by `NetworkStatusBanner` component.
+    if (messageDetail.message !== 'Network disconnected.') {
+      document.dispatchEvent(event);
+      this._spawnDesktopNotification('Backend.AI', this.text, '');
+    }
   }
 
   // /**
@@ -325,7 +341,6 @@ export default class LablupNotification extends LitElement {
    * @param {string} logMessages - Message to save
    * */
   _saveToLocalStorage(key, logMessages) {
-    console.log(logMessages);
     const previous_log = JSON.parse(localStorage.getItem(key) || '{}');
     let current_log: Array<any> = [];