enhance(webhook): add select all and deselect all buttons for custom events (#35980)

Adds `Select All` and `Deselect All` buttons to the custom events
section of the webhook form. This is useful when you need all events but
one.

- The buttons toggle every event checkbox and keep the unsaved-changes
prompt working
- Fix the "Trigger On" radio spacing by removing a leftover Fomantic
checkbox margin

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/repo/settings/webhook/history.tmpl

@@ -2,7 +2,7 @@
 	<h4 class="ui top attached header flex-left-right">
 		<span>{{ctx.Locale.Tr "repo.settings.recent_deliveries"}}</span>
 		{{if .Permission.IsAdmin}}
-			<button type="button" class="ui tiny button" id="test-delivery" data-link="{{.Link}}/test"
+			<button type="button" class="ui tiny button" data-link="{{.Link}}/test" data-global-click="onWebhookTestDeliveryClick"
 				data-tooltip-content="{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc"}}"
 			>
 				{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}
@@ -22,18 +22,18 @@
 							{{else}}
 								<span class="tw-text-red">{{svg "octicon-alert"}}</span>
 							{{end}}
-							<button type="button" class="btn interact-bg tw-p-2 toggle show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</button>
+							<button type="button" class="btn interact-bg tw-p-2 toggle show-panel" data-panel="#webhook-history-info-{{.ID}}">{{.UUID}}</button>
 						</div>
 						<span class="tw-text-text-light">
 							{{DateUtils.TimeSince .Delivered}}
 						</span>
 					</div>
-					<div class="info tw-hidden tw-mt-2" id="info-{{.ID}}">
+					<div class="info tw-hidden tw-mt-2" id="webhook-history-info-{{.ID}}">
 						<div class="ui top attached tabular menu" data-global-init="initTabSwitcher">
-							<a class="item active" data-tab="request-{{.ID}}">
+							<a class="item active" data-tab="webhook-history-request-{{.ID}}">
 								{{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.request")}}
 							</a>
-							<a class="item" data-tab="response-{{.ID}}">
+							<a class="item" data-tab="webhook-history-response-{{.ID}}">
 								{{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.response")}}
 								{{if .ResponseInfo}}
 									{{if .IsSucceed}}
@@ -55,7 +55,7 @@
 							</div>
 							{{end}}
 						</div>
-						<div class="ui bottom attached tab segment active" data-tab="request-{{.ID}}">
+						<div class="ui bottom attached tab segment active" data-tab="webhook-history-request-{{.ID}}">
 							{{if .RequestInfo}}
 								<h5>{{ctx.Locale.Tr "repo.settings.webhook.headers"}}</h5>
 								<pre class="webhook-info"><strong>Request URL:</strong> {{.RequestInfo.URL}}
@@ -68,13 +68,13 @@
 								-
 							{{end}}
 						</div>
-						<div class="ui bottom attached tab segment" data-tab="response-{{.ID}}">
+						<div class="ui bottom attached tab segment" data-tab="webhook-history-response-{{.ID}}">
 							{{if .ResponseInfo}}
 								<h5>{{ctx.Locale.Tr "repo.settings.webhook.headers"}}</h5>
 								<pre class="webhook-info">{{range $key, $val := .ResponseInfo.Headers}}<strong>{{$key}}:</strong> {{$val}}
-{{end}}</pre>
+{{else}}(no response header){{end}}</pre>
 								<h5>{{ctx.Locale.Tr "repo.settings.webhook.body"}}</h5>
-								<pre class="webhook-info">{{.ResponseInfo.Body}}</pre>
+								<pre class="webhook-info">{{or .ResponseInfo.Body "(no response body)"}}</pre>
 							{{else}}
 								-
 							{{end}}

templates/repo/settings/webhook/settings.tmpl

@@ -66,26 +66,30 @@
 	<h4>{{ctx.Locale.Tr "repo.settings.event_desc"}}</h4>
 	<div class="grouped event type fields">
 		<div class="field">
-			<div class="ui radio non-events checkbox">
+			<div class="ui radio checkbox">
 				<input name="events" type="radio" value="push_only" {{if or $isNew .Webhook.PushOnly}}checked{{end}}>
 				<label>{{ctx.Locale.Tr "repo.settings.event_push_only"}}</label>
 			</div>
 		</div>
 		<div class="field">
-			<div class="ui radio non-events checkbox">
+			<div class="ui radio checkbox">
 				<input name="events" type="radio" value="send_everything" {{if .Webhook.SendEverything}}checked{{end}}>
 				<label>{{ctx.Locale.Tr "repo.settings.event_send_everything"}}</label>
 			</div>
 		</div>
 		<div class="field">
-			<div class="ui radio events checkbox">
+			<div class="ui radio checkbox">
 				<input name="events" type="radio" value="choose_events" {{if .Webhook.ChooseEvents}}checked{{end}}>
 				<label>{{ctx.Locale.Tr "repo.settings.event_choose"}}</label>
 			</div>
 		</div>
 	</div>
 
-	<div class="events fields ui grid {{if not .Webhook.ChooseEvents}}tw-hidden{{end}}">
+	<div class="fields ui grid {{if not .Webhook.ChooseEvents}}tw-hidden{{end}} js-webhook-custom-events">
+		<div class="fourteen wide column">
+			<button type="button" class="ui tiny button" data-events-select-all="true">{{ctx.Locale.Tr "admin.notices.select_all"}}</button>
+			<button type="button" class="ui tiny button" data-events-select-all="false">{{ctx.Locale.Tr "admin.notices.deselect_all"}}</button>
+		</div>
 		<!-- Repository Events -->
 		<div class="fourteen wide column">
 			<label>{{ctx.Locale.Tr "repo.settings.event_header_repository"}}</label>

templates/webhook/new.tmpl

@@ -9,7 +9,7 @@
 		{{template "repo/settings/webhook/link_menu" ctx.RootData}}
 	</div>
 </h4>
-<div class="ui attached segment">
+<div class="ui attached segment" data-global-init="initCompWebHookEditorForm">
 	{{template "repo/settings/webhook/gitea" ctx.RootData}}
 	{{template "repo/settings/webhook/gogs" ctx.RootData}}
 	{{template "repo/settings/webhook/slack" ctx.RootData}}