[UI] Convert milestone to HTMX

- Currently if you want to update the milestone of an issue or pull
request, your whole page will be reloaded to reflect the newly set
milestone. This is quite unecessary, as only the milestone text is
updated and a new timeline event is added.
- This patch converts the milestone section in the issue/pull request
sidebar to use HTMX, so it becomes a progressive element and avoids
reloading the whole page to update the milestone.
- The update of the milestone section itself is quite straightforward
and nothing special is happening. To support adding new timeline events,
a new element `#insert-timeline` is conviently placed after the last
timeline event, which can be used with
[`hx-swap-oob`](https://htmx.org/attributes/hx-swap-oob/) to position
new timeline events before that element.
- Adds E2E test.

templates/htmx/milestone_sidebar.tmpl

@@ -0,0 +1,4 @@
+<div id="insert-timeline" hx-swap-oob="beforebegin">
+		 {{template "repo/issue/view_content/comments" .}}
+</div>
+{{template "repo/issue/view_content/sidebar/milestones" .}}

templates/repo/issue/milestone/select_menu.tmpl

@@ -5,7 +5,7 @@
 	</div>
 	<div class="divider"></div>
 {{end}}
-<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
+<div class="no-select item" hx-post="{{$.RepoLink}}/issues/milestone?issue_ids={{$.Issue.ID}}&htmx=true">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
 {{if and (not .OpenMilestones) (not .ClosedMilestones)}}
 	<div class="disabled item">
 		{{ctx.Locale.Tr "repo.issues.new.no_items"}}
@@ -17,7 +17,7 @@
 			{{ctx.Locale.Tr "repo.issues.new.open_milestone"}}
 		</div>
 		{{range .OpenMilestones}}
-			<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+			<a class="item" hx-post="{{$.RepoLink}}/issues/milestone?id={{.ID}}&issue_ids={{$.Issue.ID}}&htmx=true">
 				{{svg "octicon-milestone" 16 "tw-mr-1"}}
 				{{.Name}}
 			</a>
@@ -29,7 +29,7 @@
 			{{ctx.Locale.Tr "repo.issues.new.closed_milestone"}}
 		</div>
 		{{range .ClosedMilestones}}
-			<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+			<a class="item" hx-post="{{$.RepoLink}}/issues/milestone?id={{.ID}}&issue_ids={{$.Issue.ID}}&htmx=true">
 				{{svg "octicon-milestone" 16 "tw-mr-1"}}
 				{{.Name}}
 			</a>

templates/repo/issue/view_content.tmpl

@@ -72,7 +72,8 @@
 				</div>
 			</div>
 
-			{{template "repo/issue/view_content/comments" .}}
+		    {{template "repo/issue/view_content/comments" .}}
+			<div id="insert-timeline"></div>
 
 			{{if and .Issue.IsPull (not $.Repository.IsArchived)}}
 				{{template "repo/issue/view_content/pull".}}

templates/repo/issue/view_content/sidebar/milestones.tmpl

@@ -1,22 +1,24 @@
-<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
-	<a class="text muted flex-text-block">
-		<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong>
-		{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-			{{svg "octicon-gear" 16 "tw-ml-1"}}
-		{{end}}
-	</a>
-	<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
-		{{template "repo/issue/milestone/select_menu" .}}
-	</div>
-</div>
-<div class="ui select-milestone list">
-	<span class="no-select item {{if .Issue.Milestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
-	<div class="selected">
-		{{if .Issue.Milestone}}
-			<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
-				{{svg "octicon-milestone" 18 "tw-mr-2"}}
-				{{.Issue.Milestone.Name}}
-			</a>
-		{{end}}
+<div id="milestone-section" hx-swap="morph" hx-target="this" hx-indicator="this">
+	<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
+		<a class="text muted flex-text-block">
+			<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong>
+			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
+				{{svg "octicon-gear" 16 "tw-ml-1"}}
+			{{end}}
+		</a>
+		<div class="menu">
+			{{template "repo/issue/milestone/select_menu" .}}
+		</div>
+	</div>
+	<div class="ui select-milestone list">
+		<span class="no-select item {{if .Issue.Milestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
+		<div class="selected">
+			{{if .Issue.Milestone}}
+				<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
+					{{svg "octicon-milestone" 18 "tw-mr-2"}}
+					{{.Issue.Milestone.Name}}
+				</a>
+			{{end}}
+		</div>
 	</div>
 </div>