Merge pull request #7396 from Budibase/notification-action

Notification action

packages/builder/src/builderStore/store/frontend.js

@@ -40,6 +40,7 @@ const INITIAL_FRONTEND_STATE = {
     devicePreview: false,
     messagePassing: false,
     continueIfAction: false,
+    showNotificationAction: false,
   },
   errors: [],
   hasAppPackage: false,

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte

@@ -0,0 +1,61 @@
+<script>
+  import { Select, Label, Checkbox } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+  export let bindings = []
+
+  const types = [
+    {
+      label: "Success",
+      value: "success",
+    },
+    {
+      label: "Warning",
+      value: "warning",
+    },
+    {
+      label: "Error",
+      value: "error",
+    },
+    {
+      label: "Info",
+      value: "info",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "success"
+    }
+    if (parameters.autoDismiss == null) {
+      parameters.autoDismiss = true
+    }
+  })
+</script>
+
+<div class="root">
+  <Label>Type</Label>
+  <Select bind:value={parameters.type} options={types} placeholder={null} />
+  <Label>Message</Label>
+  <DrawerBindableInput
+    {bindings}
+    value={parameters.message}
+    on:change={e => (parameters.message = e.detail)}
+  />
+  <Label />
+  <Checkbox text="Auto dismiss" bind:value={parameters.autoDismiss} />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -15,3 +15,4 @@ export { default as S3Upload } from "./S3Upload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
 export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
+export { default as ShowNotification } from "./ShowNotification.svelte"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -110,6 +110,12 @@
       "type": "logic",
       "component": "ContinueIf",
       "dependsOnFeature": "continueIfAction"
+    },
+    {
+      "name": "Show Notification",
+      "type": "application",
+      "component": "ShowNotification",
+      "dependsOnFeature": "showNotificationAction"
     }
   ]
 }

packages/client/manifest.json

@@ -8,7 +8,8 @@
     "devicePreview": true,
     "messagePassing": true,
     "rowSelection": true,
-    "continueIfAction": true
+    "continueIfAction": true,
+    "showNotificationAction": true
   },
   "layout": {
     "name": "Layout",

packages/client/src/stores/notification.js

@@ -62,10 +62,14 @@ const createNotificationStore = () => {
     subscribe: store.subscribe,
     actions: {
       send,
-      info: msg => send(msg, "info", "Info"),
-      success: msg => send(msg, "success", "CheckmarkCircle"),
-      warning: msg => send(msg, "warning", "Alert"),
-      error: msg => send(msg, "error", "Alert", false),
+      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),
       blockNotifications,
       dismiss,
     },

packages/client/src/utils/buttonActions.js

@@ -300,6 +300,14 @@ const continueIfHandler = action => {
   }
 }
 
+const showNotificationHandler = action => {
+  const { message, type, autoDismiss } = action.parameters
+  if (!message || !type) {
+    return
+  }
+  notificationStore.actions[type]?.(message, autoDismiss)
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Duplicate Row"]: duplicateRowHandler,
@@ -318,6 +326,7 @@ const handlerMap = {
   ["Upload File to S3"]: s3UploadHandler,
   ["Export Data"]: exportDataHandler,
   ["Continue if / Stop if"]: continueIfHandler,
+  ["Show Notification"]: showNotificationHandler,
 }
 
 const confirmTextMap = {