Adding a way to see the deployed webhook URLs to the deployment page.

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", {

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() {

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>

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 {