From c9fb6e35c82d76412c472617b558f46f8b50f958 Mon Sep 17 00:00:00 2001
From: Conor Webb <126772285+ConorWebb96@users.noreply.github.com>
Date: Wed, 5 Jun 2024 12:29:07 +0100
Subject: [PATCH 1/2] Enhancement: add ability to set custom auto-dismissal
 duration for notifications (#13829)

* Enhancement: add ability to set custom auto-dismissal duration for notifications

* Updated based on feedback.

* Enforce max duration for auto-dismiss to 2 minutes
---
 .../actions/ShowNotification.svelte           | 20 ++++++++++++++++
 packages/client/src/stores/notification.js    | 24 ++++++++++---------
 packages/client/src/utils/buttonActions.js    |  4 ++--
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
index d95e13cb5f..ef6232b382 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
@@ -25,6 +25,8 @@
     },
   ]
 
+  const MAX_DURATION = 120000 // Maximum duration in milliseconds (2 minutes)
+
   onMount(() => {
     if (!parameters.type) {
       parameters.type = "success"
@@ -33,6 +35,14 @@
       parameters.autoDismiss = true
     }
   })
+
+  function handleDurationChange(event) {
+    let newDuration = event.detail
+    if (newDuration > MAX_DURATION) {
+      newDuration = MAX_DURATION
+    }
+    parameters.duration = newDuration
+  }
 </script>
 
 <div class="root">
@@ -47,6 +57,16 @@
   />
   <Label />
   <Checkbox text="Auto dismiss" bind:value={parameters.autoDismiss} />
+  {#if parameters.autoDismiss}
+    <Label>Duration (ms)</Label>
+    <DrawerBindableInput
+      title="Duration"
+      {bindings}
+      value={parameters.duration}
+      placeholder="3000"
+      on:change={handleDurationChange}
+    />
+  {/if}
 </div>
 
 <style>
diff --git a/packages/client/src/stores/notification.js b/packages/client/src/stores/notification.js
index 2a9f9749ec..054117aaba 100644
--- a/packages/client/src/stores/notification.js
+++ b/packages/client/src/stores/notification.js
@@ -1,7 +1,7 @@
 import { writable, get } from "svelte/store"
 import { routeStore } from "./routes"
 
-const NOTIFICATION_TIMEOUT = 3000
+const DEFAULT_NOTIFICATION_TIMEOUT = 3000
 
 const createNotificationStore = () => {
   let block = false
@@ -18,13 +18,13 @@ const createNotificationStore = () => {
     type = "info",
     icon,
     autoDismiss = true,
+    duration,
     count = 1
   ) => {
     if (block) {
       return
     }
 
-    // If peeking, pass notifications back to parent window
     if (get(routeStore).queryParams?.peek) {
       window.parent.postMessage({
         type: "notification",
@@ -32,11 +32,13 @@ const createNotificationStore = () => {
           message,
           type,
           icon,
+          duration,
           autoDismiss,
         },
       })
       return
     }
+
     const _id = id()
     store.update(state => {
       const duplicateError = state.find(err => err.message === message)
@@ -60,7 +62,7 @@ const createNotificationStore = () => {
     if (autoDismiss) {
       setTimeout(() => {
         dismiss(_id)
-      }, NOTIFICATION_TIMEOUT)
+      }, duration || DEFAULT_NOTIFICATION_TIMEOUT)
     }
   }
 
@@ -74,14 +76,14 @@ const createNotificationStore = () => {
     subscribe: store.subscribe,
     actions: {
       send,
-      info: (msg, autoDismiss) =>
-        send(msg, "info", "Info", autoDismiss ?? true),
-      success: (msg, autoDismiss) =>
-        send(msg, "success", "CheckmarkCircle", autoDismiss ?? true),
-      warning: (msg, autoDismiss) =>
-        send(msg, "warning", "Alert", autoDismiss ?? true),
-      error: (msg, autoDismiss) =>
-        send(msg, "error", "Alert", autoDismiss ?? false),
+      info: (msg, autoDismiss, duration) =>
+        send(msg, "info", "Info", autoDismiss ?? true, duration),
+      success: (msg, autoDismiss, duration) =>
+        send(msg, "success", "CheckmarkCircle", autoDismiss ?? true, duration),
+      warning: (msg, autoDismiss, duration) =>
+        send(msg, "warning", "Alert", autoDismiss ?? true, duration),
+      error: (msg, autoDismiss, duration) =>
+        send(msg, "error", "Alert", autoDismiss ?? false, duration),
       blockNotifications,
       dismiss,
     },
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 25e0892fc0..482b36cdb8 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -416,11 +416,11 @@ const continueIfHandler = action => {
 }
 
 const showNotificationHandler = action => {
-  const { message, type, autoDismiss } = action.parameters
+  const { message, type, autoDismiss, duration } = action.parameters
   if (!message || !type) {
     return
   }
-  notificationStore.actions[type]?.(message, autoDismiss)
+  notificationStore.actions[type]?.(message, autoDismiss, duration)
 }
 
 const promptUserHandler = () => {}

From c6bf3e445b927fb8d009f7d9cef99f83c4cefd0b Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Wed, 5 Jun 2024 12:14:06 +0000
Subject: [PATCH 2/2] Bump version to 2.28.0

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index d90f7732a2..a43a2b7095 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.27.6",
+  "version": "2.28.0",
   "npmClient": "yarn",
   "packages": [
     "packages/*",