Merge pull request #4372 from Budibase/dont-dismiss-error-notifications

Remove automatic dismissal of error notifications

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>

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)}
+    {#each $notifications as { type, icon, message, id, dismissable } (id)}
-      <div animate:flip transition:fly={{ y: -30 }}>
+      <div transition:fly={{ y: -30 }}>
-        <Notification {type} {icon} {message} />
+        <Notification
+          {type}
+          {icon}
+          {message}
+          {dismissable}
+          on:dismiss={() => notifications.dismiss(id)}
+        />
       </div>
     {/each}
   </div>

packages/bbui/src/Stores/notifications.js

@@ -20,21 +20,30 @@ export const createNotificationStore = () => {
     setTimeout(() => (block = false), timeout)
   }
 
-  const send = (message, type = "default", icon = "") => {
+  const send = (message, type = "default", icon = "", autoDismiss = 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: !autoDismiss },
+      ]
     })
+    if (autoDismiss) {
       const timeoutId = setTimeout(() => {
-      _notifications.update(state => {
+        dismissNotification(_id)
-        return state.filter(({ id }) => id !== _id)
-      })
       }, NOTIFICATION_TIMEOUT)
       timeoutIds.add(timeoutId)
     }
+  }
+
+  const dismissNotification = id => {
+    _notifications.update(state => {
+      return state.filter(n => n.id !== id)
+    })
+  }
 
   const { subscribe } = _notifications
 
@@ -42,10 +51,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,
   }
 }
 

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}

packages/client/src/components/overlay/PeekScreenDisplay.svelte

@@ -25,8 +25,8 @@
   }
 
   const proxyNotification = event => {
-    const { message, type, icon } = event.detail
+    const { message, type, icon, autoDismiss } = event.detail
-    notificationStore.actions.send(message, type, icon)
+    notificationStore.actions.send(message, type, icon, autoDismiss)
   }
 
   const proxyStateUpdate = event => {

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,13 +43,21 @@ const createNotificationStore = () => {
       type,
       message,
       icon,
+      dismissable: !autoDismiss,
       delay: get(store) != null,
     })
     clearTimeout(timeout)
+    if (autoDismiss) {
       timeout = setTimeout(() => {
         store.set(null)
       }, NOTIFICATION_TIMEOUT)
     }
+  }
+
+  const dismiss = () => {
+    clearTimeout(timeout)
+    store.set(null)
+  }
 
   return {
     subscribe: store.subscribe,
@@ -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,
     },
   }
 }