Merge pull request '[UI] Convert milestone to HTMX' (#4542) from gusted/htmx-milestone into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4542
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>

release-notes/4547.md

@@ -0,0 +1 @@
+The milestone section in the sidebar on the issue and pull request page now uses HTMX. If you update the milestone of a issue or pull request it will no longer reload the whole page and instead update the current page with the new information about the milestone update. This should provide a smoother user experience.

routers/web/repo/issue.go

@@ -1370,6 +1370,22 @@ func getBranchData(ctx *context.Context, issue *issues_model.Issue) {
 	}
 }
 
+func prepareHiddenCommentType(ctx *context.Context) {
+	var hiddenCommentTypes *big.Int
+	if ctx.IsSigned {
+		val, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyHiddenCommentTypes)
+		if err != nil {
+			ctx.ServerError("GetUserSetting", err)
+			return
+		}
+		hiddenCommentTypes, _ = new(big.Int).SetString(val, 10) // we can safely ignore the failed conversion here
+	}
+
+	ctx.Data["ShouldShowCommentType"] = func(commentType issues_model.CommentType) bool {
+		return hiddenCommentTypes == nil || hiddenCommentTypes.Bit(int(commentType)) == 0
+	}
+}
+
 // ViewIssue render issue view page
 func ViewIssue(ctx *context.Context) {
 	if ctx.Params(":type") == "issues" {
@@ -2019,21 +2035,13 @@ func ViewIssue(ctx *context.Context) {
 	ctx.Data["NewPinAllowed"] = pinAllowed
 	ctx.Data["PinEnabled"] = setting.Repository.Issue.MaxPinned != 0
 
-	var hiddenCommentTypes *big.Int
-	if ctx.IsSigned {
-		val, err := user_model.GetUserSetting(ctx, ctx.Doer.ID, user_model.SettingsKeyHiddenCommentTypes)
-		if err != nil {
-			ctx.ServerError("GetUserSetting", err)
-			return
-		}
-		hiddenCommentTypes, _ = new(big.Int).SetString(val, 10) // we can safely ignore the failed conversion here
-	}
-	ctx.Data["ShouldShowCommentType"] = func(commentType issues_model.CommentType) bool {
-		return hiddenCommentTypes == nil || hiddenCommentTypes.Bit(int(commentType)) == 0
+	prepareHiddenCommentType(ctx)
+	if ctx.Written() {
+		return
 	}
+
 	// For sidebar
 	PrepareBranchList(ctx)
-
 	if ctx.Written() {
 		return
 	}
@@ -2342,7 +2350,49 @@ func UpdateIssueMilestone(ctx *context.Context) {
 		}
 	}
 
-	ctx.JSONOK()
+	if ctx.FormBool("htmx") {
+		renderMilestones(ctx)
+		if ctx.Written() {
+			return
+		}
+		prepareHiddenCommentType(ctx)
+		if ctx.Written() {
+			return
+		}
+
+		issue := issues[0]
+		var err error
+		if issue.MilestoneID > 0 {
+			issue.Milestone, err = issues_model.GetMilestoneByRepoID(ctx, ctx.Repo.Repository.ID, issue.MilestoneID)
+			if err != nil {
+				ctx.ServerError("GetMilestoneByRepoID", err)
+				return
+			}
+		} else {
+			issue.Milestone = nil
+		}
+
+		comment := &issues_model.Comment{}
+		has, err := db.GetEngine(ctx).Where("issue_id = ? AND type = ?", issue.ID, issues_model.CommentTypeMilestone).OrderBy("id DESC").Limit(1).Get(comment)
+		if !has || err != nil {
+			ctx.ServerError("GetLatestMilestoneComment", err)
+		}
+		if err := comment.LoadMilestone(ctx); err != nil {
+			ctx.ServerError("LoadMilestone", err)
+			return
+		}
+		if err := comment.LoadPoster(ctx); err != nil {
+			ctx.ServerError("LoadPoster", err)
+			return
+		}
+		issue.Comments = issues_model.CommentList{comment}
+
+		ctx.Data["Issue"] = issue
+		ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)
+		ctx.HTML(http.StatusOK, "htmx/milestone_sidebar")
+	} else {
+		ctx.JSONOK()
+	}
 }
 
 // UpdateIssueAssignee change issue's or pull's assignee

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>

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

@@ -84,3 +84,27 @@ test('Issue: Labels', async ({browser}, workerInfo) => {
   await expect(labelList.filter({hasText: 'label2'})).not.toBeVisible();
   await expect(labelList.filter({hasText: 'label1'})).toBeVisible();
 });
+
+test('Issue: Milestone', async ({browser}, workerInfo) => {
+  test.skip(workerInfo.project.name === 'Mobile Safari', 'Unable to get tests working on Safari Mobile, see https://codeberg.org/forgejo/forgejo/pulls/3445#issuecomment-1789636');
+  const page = await login({browser}, workerInfo);
+
+  const response = await page.goto('/user2/repo1/issues/1');
+  await expect(response?.status()).toBe(200);
+
+  const selectedMilestone = page.locator('.issue-content-right .select-milestone.list');
+  const milestoneDropdown = page.locator('.issue-content-right .select-milestone.dropdown');
+  await expect(selectedMilestone).toContainText('No milestone');
+
+  // Add milestone.
+  await milestoneDropdown.click();
+  await page.getByRole('option', {name: 'milestone1'}).click();
+  await expect(selectedMilestone).toContainText('milestone1');
+  await expect(page.locator('.timeline-item.event').last()).toContainText('user2 added this to the milestone1 milestone');
+
+  // Clear milestone.
+  await milestoneDropdown.click();
+  await page.getByText('Clear milestone', {exact: true}).click();
+  await expect(selectedMilestone).toContainText('No milestone');
+  await expect(page.locator('.timeline-item.event').last()).toContainText('user2 removed this from the milestone1 milestone');
+});

web_src/js/features/repo-legacy.js

@@ -270,9 +270,7 @@ export function initRepoCommentForm() {
       }
 
       let icon = '';
-      if (input_id === '#milestone_id') {
-        icon = svg('octicon-milestone', 18, 'tw-mr-2');
-      } else if (input_id === '#project_id') {
+      if (input_id === '#project_id') {
         icon = svg('octicon-project', 18, 'tw-mr-2');
       } else if (input_id === '#assignee_id') {
         icon = `<img class="ui avatar image tw-mr-2" alt="avatar" src=${$(this).data('avatar')}>`;
@@ -313,7 +311,6 @@ export function initRepoCommentForm() {
 
   // Milestone, Assignee, Project
   selectItem('.select-project', '#project_id');
-  selectItem('.select-milestone', '#milestone_id');
   selectItem('.select-assignee', '#assignee_id');
 }