From 76068c3b51d8e2551bbea1782a977d2b037424ba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Apr 2024 11:06:26 +0000
Subject: [PATCH 1/2] refactor: enable webhook body

---
 packages/nc-gui/components/webhook/Editor.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 27b7c2dc8a..978bc46a85 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -76,7 +76,6 @@ let hookRef = reactive<
   version: 'v2',
 })
 
-const isBodyShownEasterEgg = ref(false)
 const isBodyShown = ref(hookRef.version === 'v1' || isEeUI)
 
 const urlTabKey = ref<'params' | 'headers' | 'body'>('params')
@@ -478,13 +477,6 @@ const getDefaultHookName = (hooks: HookType[]) => {
   return extractNextDefaultName([...hooks.map((el) => el?.title || '')], defaultHookName)
 }
 
-const handleToggleEasterEgg = () => {
-  isBodyShownEasterEgg.value = !isBodyShownEasterEgg.value
-  if (!(isBodyShown.value && isBodyShownEasterEgg.value) && urlTabKey.value === 'body') {
-    urlTabKey.value = 'params'
-  }
-}
-
 watch(
   () => hookRef.eventOperation,
   () => {
@@ -662,7 +654,6 @@ onMounted(async () => {
                 size="large"
                 class="nc-select-hook-url-method"
                 dropdown-class-name="nc-dropdown-hook-notification-url-method"
-                @dblclick="handleToggleEasterEgg"
               >
                 <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
                   <div class="flex items-center gap-2 justify-between">
@@ -700,7 +691,7 @@ onMounted(async () => {
                   <LazyApiClientHeaders v-model="hookRef.notification.payload.headers" class="!p-4" />
                 </a-tab-pane>
 
-                <a-tab-pane v-if="isBodyShown && isBodyShownEasterEgg" key="body" tab="Body">
+                <a-tab-pane v-if="isBodyShown" key="body" tab="Body">
                   <LazyMonacoEditor
                     v-model="hookRef.notification.payload.body"
                     disable-deep-compare
@@ -812,7 +803,7 @@ onMounted(async () => {
 
           <a-row>
             <a-col :span="24">
-              <div v-if="isBodyShown && isBodyShownEasterEgg" class="text-gray-600">
+              <div v-if="isBodyShown" class="text-gray-600">
                 <div class="flex items-center">
                   <em
                     >{{ $t('msg.webhookBodyMsg1') }} <strong>{{ $t('msg.webhookBodyMsg2') }}</strong>

From 31621732c06c5aedaefb5e58972c090cf4f2a457 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:06:26 +0000
Subject: [PATCH 2/2] docs: webhook body usage

---
 .../020.webhook/020.create-webhook.md         | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/noco-docs/docs/130.automation/020.webhook/020.create-webhook.md b/packages/noco-docs/docs/130.automation/020.webhook/020.create-webhook.md
index 00eea65d61..794bfaa2b6 100644
--- a/packages/noco-docs/docs/130.automation/020.webhook/020.create-webhook.md
+++ b/packages/noco-docs/docs/130.automation/020.webhook/020.create-webhook.md
@@ -45,7 +45,7 @@ Webhook will be triggered only when the configured condition wasn't met before t
 
 In summary, webhook will be triggered only when `Condition(old-record) = false` and `Condition(new-record) = true`.
 
-### Webhook Response Sample
+### Webhook response sample
 
 <Tabs>
 <TabItem value="After Insert" label="After Insert">
@@ -268,6 +268,65 @@ In summary, webhook will be triggered only when `Condition(old-record) = false`
 [//]: # ()
 [//]: # (![image]&#40;https://user-images.githubusercontent.com/35857179/228790148-1e3f21c7-9385-413a-843f-b93073ca6bea.png&#41;)
 
+### Webhook with custom payload ☁
+In the enterprise edition, you can set up a personalized payload for your webhook. Just head to the `Body` tab to make the necessary configurations. Users can utilize [handlebar syntax](https://handlebarsjs.com/guide/#simple-expressions), which allows them to access and manipulate the data easily.
+
+Use `{{ json event }}` to access the event data. Sample response is as follows
+```json
+{
+  "type": "records.after.insert",
+  "id": "0698517a-d83a-4e72-bf7a-75f46b704ad1",
+  "data": {
+    "table_id": "m969t01blwprpef",
+    "table_name": "Table-2",
+    "view_id": "vwib3bvfxdqgymun",
+    "view_name": "Table-2",
+    "rows": [
+      {
+        "Id": 1,
+        "Tags": "Sample Text",
+        "CreatedAt": "2024-04-11T10:40:20.998Z",
+        "UpdatedAt": "2024-04-11T10:40:20.998Z"
+      }
+    ]
+  }
+}
+```
+
+:::info
+**Note:** The custom payload feature is only available in the enterprise edition.
+:::
+
+
+#### Discord Webhook
+Discord webhook can be configured to send messages to a Discord channel. Discord request body should contain content, embeds or attachments, otherwise request will fail. Below is an example of Discord webhook payload. More details can be found [here](https://birdie0.github.io/discord-webhooks-guide/discord_webhook.html)
+
+```json
+{
+  "content": "Hello, this is a webhook message",
+  "embeds": [
+    {
+      "title": "Webhook",
+      "description": "This is a webhook message",
+      "color": 16711680
+    }
+  ]
+}
+``` 
+
+To send complete event data to Discord, use below payload
+```
+{
+  "content" : {{ json ( json event ) }}
+}
+```
+
+One can also customize the payload as per the requirement. For example, to send only the `Title` field to Discord, use below payload. Note that, the value of `content` is what that will get displayed in the Discord channel.
+```
+{
+   "content": "{{ event.data.rows.[0].Title }}"
+}
+```
 
 ## Environment Variables
 In self-hosted version, you can configure the following environment variables to customize the webhook behavior.