feat: reduce amount of morphing for milestone (#8350)

- Avoid morphing too much HTML, only morph the currently selected milestone text.
- Changes that the milestone dropdown is not morphed, which contains event listeners and newer versions of the morphing library seem does not preserve event listeners in most cases.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8350
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>

routers/web/repo/issue.go

@@ -2401,10 +2401,6 @@ func UpdateIssueMilestone(ctx *context.Context) {
 	}
 
 	if ctx.FormBool("htmx") {
-		renderMilestones(ctx)
-		if ctx.Written() {
-			return
-		}
 		prepareHiddenCommentType(ctx)
 		if ctx.Written() {
 			return

templates/htmx/milestone_sidebar.tmpl

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

templates/repo/issue/milestone/selected.tmpl

@@ -0,0 +1,11 @@
+<div id="selected-milestone" 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>

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

@@ -1,4 +1,4 @@
-<div id="milestone-section" hx-swap="morph" hx-target="this" hx-indicator="this">
+<div id="milestone-section" hx-swap="morph" hx-target="#selected-milestone" 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>
@@ -10,15 +10,5 @@
 			{{template "repo/issue/milestone/select_menu" .}}
 		</div>
 	</div>
-	<div class="ui select-milestone list">
+	{{template "repo/issue/milestone/selected" .}}
-		<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>

tests/e2e/issue-sidebar.test.e2e.ts

@@ -221,7 +221,7 @@ test('Issue: Milestone', async ({page}, workerInfo) => {
   const response = await page.goto('/user2/repo1/issues/1');
   expect(response?.status()).toBe(200);
 
-  const selectedMilestone = page.locator('.issue-content-right .select-milestone.list');
+  const selectedMilestone = page.locator('.issue-content-right #selected-milestone');
   const milestoneDropdown = page.locator('.issue-content-right .select-milestone.dropdown');
   await expect(selectedMilestone).toContainText('No milestone');