From 621296823f6d930f35cfce6f1cb5736300ef5312 Mon Sep 17 00:00:00 2001
From: RTLS <carter.e.pedersen@gmail.com>
Date: Tue, 10 Dec 2024 13:27:22 -0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20banner=20if=20http=20endpoint?=
 =?UTF-8?q?s=20are=20unused?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/svelte/http_endpoints/Index.svelte   | 22 +++++++++++++++++++
 assets/svelte/http_endpoints/Show.svelte    | 24 +++++++++++++++++++++
 lib/sequin_web/live/http_endpoints/index.ex |  7 +++++-
 lib/sequin_web/live/http_endpoints/show.ex  | 10 ++++++++-
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/assets/svelte/http_endpoints/Index.svelte b/assets/svelte/http_endpoints/Index.svelte
index 1a2b8cacb..162902e84 100644
--- a/assets/svelte/http_endpoints/Index.svelte
+++ b/assets/svelte/http_endpoints/Index.svelte
@@ -16,6 +16,7 @@
     };
   }>;
   export let live: any;
+  export let sinkConsumerCount: number;
 
   function handleHttpEndpointClick(id: string) {
     live.pushEvent("http_endpoint_clicked", { id });
@@ -23,6 +24,27 @@
 </script>
 
 <div class="container mx-auto py-10">
+  {#if httpEndpoints.length > 0 && sinkConsumerCount === 0}
+    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="font-semibold">Create a Webhook sink</h3>
+          <p class="">
+            Create a webhook sink to push records or changes to your HTTP
+            Endpoint
+          </p>
+        </div>
+        <a
+          href="/sinks/new?kind=http_push"
+          data-phx-link="redirect"
+          data-phx-link-state="push"
+        >
+          <Button variant="outline">Create Webhook Sink</Button>
+        </a>
+      </div>
+    </div>
+  {/if}
+
   <div class="flex justify-between items-center mb-4">
     <div class="flex items-center">
       <ChevronsLeftRightEllipsis class="h-6 w-6 mr-2" />
diff --git a/assets/svelte/http_endpoints/Show.svelte b/assets/svelte/http_endpoints/Show.svelte
index e83618849..7f1d2d665 100644
--- a/assets/svelte/http_endpoints/Show.svelte
+++ b/assets/svelte/http_endpoints/Show.svelte
@@ -29,6 +29,7 @@
   export let metrics;
   export let live;
   export let parent_id;
+  export let sink_consumer_count: number;
 
   let showDeleteConfirmDialog = false;
   let deleteConfirmDialogLoading = false;
@@ -73,6 +74,29 @@
 </script>
 
 <div class="min-h-screen font-sans bg-white">
+  {#if sink_consumer_count === 0}
+    <div class="container mx-auto px-4 pt-4">
+      <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="font-semibold">Create a Webhook sink</h3>
+            <p>
+              Create a webhook sink to push records or changes to your HTTP
+              Endpoint
+            </p>
+          </div>
+          <a
+            href="/sinks/new?kind=http_push"
+            data-phx-link="redirect"
+            data-phx-link-state="push"
+          >
+            <Button variant="outline">Create Webhook Sink</Button>
+          </a>
+        </div>
+      </div>
+    </div>
+  {/if}
+
   <header class="bg-white border-b sticky top-0 z-10">
     <div class="container mx-auto px-4 py-4">
       <div class="flex items-center justify-between">
diff --git a/lib/sequin_web/live/http_endpoints/index.ex b/lib/sequin_web/live/http_endpoints/index.ex
index 396dbd20f..203de5cda 100644
--- a/lib/sequin_web/live/http_endpoints/index.ex
+++ b/lib/sequin_web/live/http_endpoints/index.ex
@@ -16,6 +16,7 @@ defmodule SequinWeb.HttpEndpointsLive.Index do
       |> Enum.map(&HttpEndpoint.preload_sink_consumers/1)
 
     http_endpoints = load_http_endpoint_health(http_endpoints)
+    sink_consumer_count = account_id |> Consumers.list_sink_consumers_for_account() |> length()
 
     if connected?(socket) do
       Process.send_after(self(), :update_health, 1000)
@@ -25,6 +26,8 @@ defmodule SequinWeb.HttpEndpointsLive.Index do
       socket
       |> assign(:http_endpoints, http_endpoints)
       |> assign(:form_errors, %{})
+      |> assign(:sink_consumer_count, sink_consumer_count)
+      |> assign(:api_base_url, Application.fetch_env!(:sequin, :api_base_url))
 
     {:ok, socket}
   end
@@ -40,7 +43,9 @@ defmodule SequinWeb.HttpEndpointsLive.Index do
         props={
           %{
             httpEndpoints: @encoded_http_endpoints,
-            formErrors: @form_errors
+            formErrors: @form_errors,
+            sinkConsumerCount: @sink_consumer_count,
+            apiBaseUrl: @api_base_url
           }
         }
         socket={@socket}
diff --git a/lib/sequin_web/live/http_endpoints/show.ex b/lib/sequin_web/live/http_endpoints/show.ex
index 2aab7970d..240184ac2 100644
--- a/lib/sequin_web/live/http_endpoints/show.ex
+++ b/lib/sequin_web/live/http_endpoints/show.ex
@@ -40,6 +40,13 @@ defmodule SequinWeb.HttpEndpointsLive.Show do
   @impl Phoenix.LiveView
   def render(assigns) do
     assigns = assign(assigns, :parent_id, "http-endpoint-show")
+    # Get the count of sink consumers for this endpoint
+    sink_consumer_count =
+      assigns.http_endpoint.id
+      |> Consumers.list_sink_consumers_for_http_endpoint()
+      |> length()
+
+    assigns = assign(assigns, :sink_consumer_count, sink_consumer_count)
 
     ~H"""
     <div id={@parent_id}>
@@ -49,7 +56,8 @@ defmodule SequinWeb.HttpEndpointsLive.Show do
           %{
             http_endpoint: encode_http_endpoint(@http_endpoint),
             parent_id: @parent_id,
-            metrics: @metrics
+            metrics: @metrics,
+            sink_consumer_count: @sink_consumer_count
           }
         }
       />