From ab0d6bd6ed1a902cb4a7181387453d2a5b7f1543 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Aug 2022 11:00:51 +0100
Subject: [PATCH] Add action for showing a custom notification

---
 .../src/builderStore/store/frontend.js        |  1 +
 .../actions/ShowNotification.svelte           | 54 +++++++++++++++++++
 .../ButtonActionEditor/actions/index.js       |  1 +
 .../controls/ButtonActionEditor/manifest.json |  6 +++
 packages/client/manifest.json                 |  3 +-
 packages/client/src/utils/buttonActions.js    |  9 ++++
 6 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index c7795d4b54..4d0653208c 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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,
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
new file mode 100644
index 0000000000..ed4ecc2738
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ShowNotification.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+
+  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"
+    }
+  })
+</script>
+
+<div class="root">
+  <Label small>Type</Label>
+  <Select bind:value={parameters.type} options={types} placeholder={null} />
+  <Label small>Message</Label>
+  <DrawerBindableInput
+    value={parameters.message}
+    on:change={e => (parameters.message = e.detail)}
+  />
+</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>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
index 8f0baf08be..1ecd8f474a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
+++ b/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"
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
index c00b8dddec..5d11a27636 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
+++ b/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"
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index bbfd613835..87cc8b2567 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -8,7 +8,8 @@
     "devicePreview": true,
     "messagePassing": true,
     "rowSelection": true,
-    "continueIfAction": true
+    "continueIfAction": true,
+    "showNotificationAction": true
   },
   "layout": {
     "name": "Layout",
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 558cab8f21..7cc0679a2d 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -300,6 +300,14 @@ const continueIfHandler = action => {
   }
 }
 
+const showNotificationHandler = action => {
+  const { message, type } = action.parameters
+  if (!message || !type) {
+    return
+  }
+  notificationStore.actions[type]?.(message)
+}
+
 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 = {