Added 'mandatory' tag as a visual indicator for webhook events being … (#21075)

* Added 'mandatory' tag as a visual indicator for webhook events being mandatory.

* Map the webhook validation for no events specified to a specific API response problem details message.

---------

Co-authored-by: Andy Butland <abutland73@gmail.com>

src/Umbraco.Cms.Api.Management/Controllers/Webhook/WebhookControllerBase.cs

@@ -21,6 +21,10 @@ public abstract class WebhookControllerBase : ManagementApiControllerBase
                 .WithTitle("Cancelled by notification")
                 .WithDetail("A notification handler prevented the webhook operation.")
                 .Build()),
+            WebhookOperationStatus.NoEvents => BadRequest(new ProblemDetailsBuilder()
+                .WithTitle("No events specified")
+                .WithDetail("The webhook must be configured to listen to at least one event.")
+                .Build()),
             _ => StatusCode(StatusCodes.Status500InternalServerError, new ProblemDetailsBuilder()
                 .WithTitle("Unknown webhook operation status.")
                 .Build()),

src/Umbraco.Web.UI.Client/src/packages/webhook/webhook/workspace/views/webhook-details-workspace-view.element.ts

@@ -107,9 +107,13 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 					mandatory
 					label=${this.localize.term('webhooks_url')}
 					description=${this.localize.term('webhooks_urlDescription')}>
-					<uui-input @input=${this.#onUrlChange} .value=${this._webhook.url} slot="editor" required="true"></uui-input>
+					<uui-input
+						@input=${this.#onUrlChange}
+						.value=${this._webhook.url}
+						slot="editor" required="true"></uui-input>
 				</umb-property-layout>
 				<umb-property-layout
+					mandatory
 					label=${this.localize.term('webhooks_events')}
 					description=${this.localize.term('webhooks_eventDescription')}>
 					<umb-input-webhook-events