From 2099bd07d34a657593342785f7800f8cabe74d8f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 15:15:28 +0000
Subject: [PATCH 1/3] Remove automatic dismissal of error notifications and
 instead allow only manual dismissal, and also enable pointer events so errors
 can be copied

---
 .../bbui/src/Notification/Notification.svelte | 29 +++++++++++++++++++
 .../Notification/NotificationDisplay.svelte   | 13 ++++++---
 packages/bbui/src/Stores/notifications.js     | 25 ++++++++++------
 3 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/packages/bbui/src/Notification/Notification.svelte b/packages/bbui/src/Notification/Notification.svelte
index cebc859bda..1d21131553 100644
--- a/packages/bbui/src/Notification/Notification.svelte
+++ b/packages/bbui/src/Notification/Notification.svelte
@@ -1,7 +1,12 @@
 <script>
+  import { createEventDispatcher } from "svelte"
+
   export let type = "info"
   export let icon = "Info"
   export let message = ""
+  export let dismissable = false
+
+  const dispatch = createEventDispatcher()
 </script>
 
 <div class="spectrum-Toast spectrum-Toast--{type}">
@@ -17,4 +22,28 @@
   <div class="spectrum-Toast-body">
     <div class="spectrum-Toast-content">{message || ""}</div>
   </div>
+  {#if dismissable}
+    <div class="spectrum-Toast-buttons">
+      <button
+        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM"
+        on:click={() => dispatch("dismiss")}
+      >
+        <div class="spectrum-ClearButton-fill">
+          <svg
+            class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Cross100" />
+          </svg>
+        </div>
+      </button>
+    </div>
+  {/if}
 </div>
+
+<style>
+  .spectrum-Toast {
+    pointer-events: all;
+  }
+</style>
diff --git a/packages/bbui/src/Notification/NotificationDisplay.svelte b/packages/bbui/src/Notification/NotificationDisplay.svelte
index 9d96bf7e70..eb778f3aa0 100644
--- a/packages/bbui/src/Notification/NotificationDisplay.svelte
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@@ -1,7 +1,6 @@
 <script>
   import "@spectrum-css/toast/dist/index-vars.css"
   import Portal from "svelte-portal"
-  import { flip } from "svelte/animate"
   import { notifications } from "../Stores/notifications"
   import Notification from "./Notification.svelte"
   import { fly } from "svelte/transition"
@@ -9,9 +8,15 @@
 
 <Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as { type, icon, message, id } (id)}
-      <div animate:flip transition:fly={{ y: -30 }}>
-        <Notification {type} {icon} {message} />
+    {#each $notifications as { type, icon, message, id, dismissable } (id)}
+      <div transition:fly={{ y: -30 }}>
+        <Notification
+          {type}
+          {icon}
+          {message}
+          {dismissable}
+          on:dismiss={() => notifications.dismiss(id)}
+        />
       </div>
     {/each}
   </div>
diff --git a/packages/bbui/src/Stores/notifications.js b/packages/bbui/src/Stores/notifications.js
index ce0c9921f0..f4e80dc8cc 100644
--- a/packages/bbui/src/Stores/notifications.js
+++ b/packages/bbui/src/Stores/notifications.js
@@ -20,20 +20,26 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default", icon = "") => {
+  const send = (message, type = "default", icon = "", timeout = true) => {
     if (block) {
       return
     }
     let _id = id()
     _notifications.update(state => {
-      return [...state, { id: _id, type, message, icon }]
+      return [...state, { id: _id, type, message, icon, dismissable: !timeout }]
+    })
+    if (timeout) {
+      const timeoutId = setTimeout(() => {
+        dismissNotification(_id)
+      }, NOTIFICATION_TIMEOUT)
+      timeoutIds.add(timeoutId)
+    }
+  }
+
+  const dismissNotification = id => {
+    _notifications.update(state => {
+      return state.filter(n => n.id !== id)
     })
-    const timeoutId = setTimeout(() => {
-      _notifications.update(state => {
-        return state.filter(({ id }) => id !== _id)
-      })
-    }, NOTIFICATION_TIMEOUT)
-    timeoutIds.add(timeoutId)
   }
 
   const { subscribe } = _notifications
@@ -42,10 +48,11 @@ export const createNotificationStore = () => {
     subscribe,
     send,
     info: msg => send(msg, "info", "Info"),
-    error: msg => send(msg, "error", "Alert"),
+    error: msg => send(msg, "error", "Alert", false),
     warning: msg => send(msg, "warning", "Alert"),
     success: msg => send(msg, "success", "CheckmarkCircle"),
     blockNotifications,
+    dismiss: dismissNotification,
   }
 }
 

From 25bcd37b7882a518f848f37983267c73c06398e1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 15:24:46 +0000
Subject: [PATCH 2/3] Update auto dismissal of notifications

---
 packages/bbui/src/Stores/notifications.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Stores/notifications.js b/packages/bbui/src/Stores/notifications.js
index f4e80dc8cc..640f8218c4 100644
--- a/packages/bbui/src/Stores/notifications.js
+++ b/packages/bbui/src/Stores/notifications.js
@@ -20,15 +20,18 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default", icon = "", timeout = true) => {
+  const send = (message, type = "default", icon = "", autoDismiss = true) => {
     if (block) {
       return
     }
     let _id = id()
     _notifications.update(state => {
-      return [...state, { id: _id, type, message, icon, dismissable: !timeout }]
+      return [
+        ...state,
+        { id: _id, type, message, icon, dismissable: !autoDismiss },
+      ]
     })
-    if (timeout) {
+    if (autoDismiss) {
       const timeoutId = setTimeout(() => {
         dismissNotification(_id)
       }, NOTIFICATION_TIMEOUT)

From 9b3c06bb3ab05a324bab06a43c273508d0a9802a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Feb 2022 15:25:03 +0000
Subject: [PATCH 3/3] Prevent notifications in client apps from being
 automatically dismissed

---
 .../overlay/NotificationDisplay.svelte        |  2 ++
 .../overlay/PeekScreenDisplay.svelte          |  4 ++--
 packages/client/src/stores/notification.js    | 20 ++++++++++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/overlay/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte
index 6e8be21647..667f706ff2 100644
--- a/packages/client/src/components/overlay/NotificationDisplay.svelte
+++ b/packages/client/src/components/overlay/NotificationDisplay.svelte
@@ -19,6 +19,8 @@
           type={$notificationStore.type}
           message={$notificationStore.message}
           icon={$notificationStore.icon}
+          dismissable={$notificationStore.dismissable}
+          on:dismiss={notificationStore.actions.dismiss}
         />
       </div>
     {/key}
diff --git a/packages/client/src/components/overlay/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
index 7d3531d236..72ea58c194 100644
--- a/packages/client/src/components/overlay/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
@@ -25,8 +25,8 @@
   }
 
   const proxyNotification = event => {
-    const { message, type, icon } = event.detail
-    notificationStore.actions.send(message, type, icon)
+    const { message, type, icon, autoDismiss } = event.detail
+    notificationStore.actions.send(message, type, icon, autoDismiss)
   }
 
   const proxyStateUpdate = event => {
diff --git a/packages/client/src/stores/notification.js b/packages/client/src/stores/notification.js
index 64178328c0..e12eccf210 100644
--- a/packages/client/src/stores/notification.js
+++ b/packages/client/src/stores/notification.js
@@ -19,7 +19,7 @@ const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "info", icon) => {
+  const send = (message, type = "info", icon, autoDismiss = true) => {
     if (block) {
       return
     }
@@ -32,6 +32,7 @@ const createNotificationStore = () => {
           message,
           type,
           icon,
+          autoDismiss,
         },
       })
       return
@@ -42,12 +43,20 @@ const createNotificationStore = () => {
       type,
       message,
       icon,
+      dismissable: !autoDismiss,
       delay: get(store) != null,
     })
     clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      store.set(null)
-    }, NOTIFICATION_TIMEOUT)
+    if (autoDismiss) {
+      timeout = setTimeout(() => {
+        store.set(null)
+      }, NOTIFICATION_TIMEOUT)
+    }
+  }
+
+  const dismiss = () => {
+    clearTimeout(timeout)
+    store.set(null)
   }
 
   return {
@@ -57,8 +66,9 @@ const createNotificationStore = () => {
       info: msg => send(msg, "info", "Info"),
       success: msg => send(msg, "success", "CheckmarkCircle"),
       warning: msg => send(msg, "warning", "Alert"),
-      error: msg => send(msg, "error", "Alert"),
+      error: msg => send(msg, "error", "Alert", false),
       blockNotifications,
+      dismiss,
     },
   }
 }