From 25eec485cd33039b5decc8f70a7446abbfe746c4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 26 Jul 2022 22:47:48 +0800
Subject: [PATCH] feat(gui-v2): add sample payload part

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 1af6f9e539..683b5a3fc4 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -17,7 +17,7 @@ const formState = reactive({
   },
   method: 'GET',
 })
-
+const filters = []
 const formInput = ref({
   'Email': [
     {
@@ -258,7 +258,35 @@ onMounted(() => {
         </a-col>
       </a-row>
       <!--  TODO: handle column filter -->
-      <!--  TODO: sample payload -->
+      <div>
+        <span class="caption grey--text">
+          <em>Available context variables are <strong>data and user</strong></em>
+          <v-tooltip top>
+            <template #activator="{ on }">
+              <v-icon small color="grey" class="ml-2" v-on="on">mdi-information</v-icon>
+            </template>
+            <span class="caption">
+              <strong>data</strong> : Row data <br />
+              <strong>user</strong> : User information<br />
+            </span>
+          </v-tooltip>
+          <br />
+          <a href="https://docs.nocodb.com/developer-resources/webhooks/" target="_blank">
+            <!-- Document Reference -->
+            {{ $t('labels.docReference') }}
+          </a>
+        </span>
+        <WebhookTest
+          :hook="{
+            ...formState,
+            filters,
+            notification: {
+              ...formState.notification,
+              payload: notification,
+            },
+          }"
+        />
+      </div>
     </a-form-item>
   </a-form>
 </template>