From 5cdd6da3ba51d3618b50a30011527d0462fc9b93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Eduardo=20Jer=C3=A9z=20Gir=C3=B3n?=
 <eduardo.devop@gmail.com>
Date: Thu, 29 Aug 2024 13:16:00 -0600
Subject: [PATCH] Enhance webhook form help text: add detailed descriptions for
 event types and improve placeholder help for headers and body fields

---
 .../view/web/dashboard/webhooks/common.go     | 64 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 3 deletions(-)

diff --git a/internal/view/web/dashboard/webhooks/common.go b/internal/view/web/dashboard/webhooks/common.go
index f070aab..dfd3a6c 100644
--- a/internal/view/web/dashboard/webhooks/common.go
+++ b/internal/view/web/dashboard/webhooks/common.go
@@ -172,7 +172,63 @@ func createAndUpdateWebhookForm(
 			Name:     "event_type",
 			Label:    "Event type",
 			Required: true,
-			HelpText: "The event type that will trigger the webhook",
+			HelpButtonChildren: []gomponents.Node{
+				component.H3Text("Event types"),
+				component.PText(`
+					These are the event types that can trigger a webhook.
+				`),
+
+				html.Div(
+					html.Class("space-y-2"),
+
+					component.CardBoxSimple(
+						component.H4Text("Database healthy"),
+						component.PText(`
+							This event will be triggered when a database changes it's
+							health status from unhealthy to healthy.
+						`),
+					),
+
+					component.CardBoxSimple(
+						component.H4Text("Database unhealthy"),
+						component.PText(`
+							This event will be triggered when a database changes it's
+							health status from healthy to unhealthy.
+						`),
+					),
+
+					component.CardBoxSimple(
+						component.H4Text("Destination healthy"),
+						component.PText(`
+							This event will be triggered when a destination changes it's
+							health status from unhealthy to healthy.
+						`),
+					),
+
+					component.CardBoxSimple(
+						component.H4Text("Destination unhealthy"),
+						component.PText(`
+							This event will be triggered when a destination changes it's
+							health status from healthy to unhealthy.
+						`),
+					),
+
+					component.CardBoxSimple(
+						component.H4Text("Execution success"),
+						component.PText(`
+							This event will be triggered when a backup execution is
+							successful.
+						`),
+					),
+
+					component.CardBoxSimple(
+						component.H4Text("Execution failed"),
+						component.PText(`
+							This event will be triggered when a backup execution fails.
+						`),
+					),
+				),
+			},
 			Children: []gomponents.Node{
 				alpine.XModel("eventType"),
 				eventTypeOptions,
@@ -237,7 +293,8 @@ func createAndUpdateWebhookForm(
 		component.TextareaControl(component.TextareaControlParams{
 			Name:        "headers",
 			Label:       "Headers",
-			Placeholder: `{"Authorization": "Bearer my-token"}`,
+			Placeholder: `{ "Authorization": "Bearer my-token" }`,
+			HelpText:    `By default it will send a { "Content-Type": "application/json" } header.`,
 			Children: []gomponents.Node{
 				gomponents.If(
 					shouldPrefill, gomponents.Text(pickedWebhook.Headers.String),
@@ -248,7 +305,8 @@ func createAndUpdateWebhookForm(
 		component.TextareaControl(component.TextareaControlParams{
 			Name:        "body",
 			Label:       "Body",
-			Placeholder: `{"key": "value"}`,
+			Placeholder: `{ "key": "value" }`,
+			HelpText:    `By default it will send an empty json object {}.`,
 			Children: []gomponents.Node{
 				gomponents.If(
 					shouldPrefill, gomponents.Text(pickedWebhook.Body.String),