From 41fd10dbbe991457a780492a5c23070952259f1e Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 26 Oct 2020 17:46:20 +0000
Subject: [PATCH] Adding a way to see the deployed webhook URLs to the
 deployment page.

---
 .../BlockList/AutomationBlock.svelte          |  3 +-
 .../automation/Shared/WebhookDisplay.svelte   | 10 ++-
 .../CreateWebhookDeploymentModal.svelte       | 73 +++++++++++++++++++
 .../deploy/DeploymentHistory.svelte           | 25 ++++++-
 4 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte

diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
index 54e6b2dbbf..9d48acb6e7 100644
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
@@ -10,7 +10,6 @@
 
   let modal
 
-  $: blockDefinitions = $automationStore.blockDefinitions
   $: instanceId = $backendUiStore.selectedDatabase._id
   $: automation = $automationStore.selectedAutomation?.automation
 
@@ -21,7 +20,7 @@
       stepId,
       type: blockType,
     })
-    if (stepId === blockDefinitions.TRIGGER["WEBHOOK"].stepId) {
+    if (stepId === "WEBHOOK") {
       modal.show()
     }
     analytics.captureEvent("Added Automation Block", {
diff --git a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
index e0e369035d..cac9a58397 100644
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
@@ -1,11 +1,19 @@
 <script>
   import { notifier } from "builderStore/store/notifications"
   import { Input } from "@budibase/bbui"
+  import { store } from "../../../builderStore"
 
   export let value
+  export let production = false
+
+  $: appId = $store.appId
 
   function fullWebhookURL(uri) {
-    return `http://localhost:4001/${uri}`
+    if (production) {
+      return `https://${appId}.app.budi.live/${uri}`
+    } else {
+      return `http://localhost:4001/${uri}`
+    }
   }
 
   function copyToClipboard() {
diff --git a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
new file mode 100644
index 0000000000..05ea6c9754
--- /dev/null
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@@ -0,0 +1,73 @@
+<script>
+  import { automationStore } from "builderStore"
+  import { ModalContent } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import WebhookDisplay from "../automation/Shared/WebhookDisplay.svelte"
+  import analytics from "analytics"
+
+  let webhookUrls = []
+
+  $: automations = $automationStore.automations
+
+  onMount(() => {
+    webhookUrls = automations.map(automation => {
+      const trigger = automation.definition.trigger
+      if (trigger?.stepId === "WEBHOOK" && trigger.inputs) {
+        return {type: "Automation", name: automation.name, url: trigger.inputs.triggerUrl}
+      }
+    })
+  })
+</script>
+
+<ModalContent
+  title="Webhook Endpoints"
+  confirmText="Done">
+  <p>
+    See below the list of deployed webhook URLs.
+  </p>
+  {#each webhookUrls as webhookUrl}
+    <div>
+      <h5>{webhookUrl.type} - {webhookUrl.name}</h5>
+      <WebhookDisplay value={webhookUrl.url} production={true} />
+    </div>
+  {/each}
+  <div slot="footer">
+    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
+      <i class="ri-information-line" />
+      <span>Learn about webhooks</span>
+    </a>
+  </div>
+</ModalContent>
+
+<style>
+  a {
+    color: var(--ink);
+    font-size: 14px;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+
+  a span {
+    text-decoration: underline;
+  }
+
+  i {
+    font-size: 20px;
+    margin-right: var(--spacing-m);
+    text-decoration: none;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    text-align: justify;
+  }
+
+  h5 {
+    margin-top: 0;
+    padding-top: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index 4450faf4d2..de38947985 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -2,9 +2,10 @@
   import { onMount, onDestroy } from "svelte"
   import Spinner from "components/common/Spinner.svelte"
   import { slide } from "svelte/transition"
-  import { Heading, Body } from "@budibase/bbui"
+  import { Heading, Body, Button, Modal } from "@budibase/bbui"
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
+  import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
 
   const DATE_OPTIONS = {
     fullDate: {
@@ -23,6 +24,7 @@
 
   export let appId
 
+  let modal
   let poll
   let deployments = []
   let deploymentUrl = `https://${appId}.app.budi.live/${appId}`
@@ -52,9 +54,14 @@
   <section class="deployment-history" in:slide>
     <header>
       <h4>Deployment History</h4>
-      <a target="_blank" href={`https://${appId}.app.budi.live/${appId}`}>
-        View Your Deployed App →
-      </a>
+      <div class="deploy-div">
+        <a target="_blank" href={`https://${appId}.app.budi.live/${appId}`}>
+          View Your Deployed App →
+        </a>
+        <Button primary on:click={() => modal.show()}>
+          View webhooks
+        </Button>
+      </div>
     </header>
     <div class="deployment-list">
       {#each deployments as deployment}
@@ -80,6 +87,9 @@
     </div>
   </section>
 {/if}
+<Modal bind:this={modal} width="30%">
+  <CreateWebhookDeploymentModal />
+</Modal>
 
 <style>
   .deployment:nth-child(odd) {
@@ -99,6 +109,13 @@
   header {
     margin-left: var(--spacing-l);
     margin-bottom: var(--spacing-xl);
+    margin-right: var(--spacing-l);
+  }
+
+  .deploy-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .deployment-history {