Refactor authors dropdown (send get request from frontend to avoid lo…

…ng wait time) (#23890) Right now the authors search dropdown might take a long time to load if amount of authors is huge. Example: (In the video below, there are about 10000 authors, and it takes about 10 seconds to open the author dropdown) https://user-images.githubusercontent.com/17645053/229422229-98aa9656-3439-4f8c-9f4e-83bd8e2a2557.mov Possible improvements can be made, which will take 2 steps (Thanks to @wolfogre for advice): Step 1： Backend: Add a new api, which returns a limit of 30 posters with matched prefix. Frontend: Change the search behavior from frontend search(fomantic search) to backend search(when input is changed, send a request to get authors matching the current search prefix) Step 2： Backend: Optimize the api in step 1 using indexer to support fuzzy search. This PR is implements the first step. The main changes: 1. Added api: `GET /{type:issues|pulls}/posters` , which return a limit of 30 users with matched prefix (prefix sent as query). If `DEFAULT_SHOW_FULL_NAME` in `custom/conf/app.ini` is set to true, will also include fullnames fuzzy search. 2. Added a tooltip saying "Shows a maximum of 30 users" to the author search dropdown 3. Change the search behavior from frontend search to backend search After: https://user-images.githubusercontent.com/17645053/229430960-f88fafd8-fd5d-4f84-9df2-2677539d5d08.mov Fixes: #22586 --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: silverwind <[email protected]>
go-gitea · Apr 7, 2023 · 6eb6783 · 6eb6783
1 parent 08f4a9c
commit 6eb6783
Show file tree

Hide file tree

Showing 18 changed files with 327 additions and 112 deletions.
diff --git a/models/repo/user_repo.go b/models/repo/user_repo.go
@@ -155,14 +155,25 @@ func GetReviewers(ctx context.Context, repo *Repository, doerID, posterID int64)
 	return users, db.GetEngine(ctx).Where(cond).OrderBy(user_model.GetOrderByName()).Find(&users)
 }
 
-// GetIssuePosters returns all users that have authored an issue/pull request for the given repository
-func GetIssuePosters(ctx context.Context, repo *Repository, isPull bool) ([]*user_model.User, error) {
-	users := make([]*user_model.User, 0, 8)
+// GetIssuePostersWithSearch returns users with limit of 30 whose username started with prefix that have authored an issue/pull request for the given repository
+// If isShowFullName is set to true, also include full name prefix search
+func GetIssuePostersWithSearch(ctx context.Context, repo *Repository, isPull bool, search string, isShowFullName bool) ([]*user_model.User, error) {
+	users := make([]*user_model.User, 0, 30)
+	var prefixCond builder.Cond = builder.Like{"name", search + "%"}
+	if isShowFullName {
+		prefixCond = prefixCond.Or(builder.Like{"full_name", "%" + search + "%"})
+	}
+
 	cond := builder.In("`user`.id",
 		builder.Select("poster_id").From("issue").Where(
 			builder.Eq{"repo_id": repo.ID}.
 				And(builder.Eq{"is_pull": isPull}),
-		).GroupBy("poster_id"),
-	)
-	return users, db.GetEngine(ctx).Where(cond).OrderBy(user_model.GetOrderByName()).Find(&users)
+		).GroupBy("poster_id")).And(prefixCond)
+
+	return users, db.GetEngine(ctx).
+		Where(cond).
+		Cols("id", "name", "full_name", "avatar", "avatar_email", "use_custom_avatar").
+		OrderBy("name").
+		Limit(30).
+		Find(&users)
 }
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
@@ -933,6 +933,7 @@ delete_preexisting = Delete pre-existing files
 delete_preexisting_content = Delete files in %s
 delete_preexisting_success = Deleted unadopted files in %s
 blame_prior = View blame prior to this change
+author_search_tooltip = Shows a maximum of 30 users
 
 transfer.accept = Accept Transfer
 transfer.accept_desc =  Transfer to "%s"

diff --git a/routers/web/repo/helper.go b/routers/web/repo/helper.go
@@ -0,0 +1,23 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package repo
+
+import (
+	"sort"
+
+	"code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/context"
+)
+
+func makeSelfOnTop(ctx *context.Context, users []*user.User) []*user.User {
+	if ctx.Doer != nil {
+		sort.Slice(users, func(i, j int) bool {
+			if users[i].ID == users[j].ID {
+				return false
+			}
+			return users[i].ID == ctx.Doer.ID // if users[i] is self, put it before others, so less=true
+		})
+	}
+	return users
+}
diff --git a/routers/web/repo/helper_test.go b/routers/web/repo/helper_test.go
@@ -0,0 +1,27 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package repo
+
+import (
+	"testing"
+
+	"code.gitea.io/gitea/models/user"
+	"code.gitea.io/gitea/modules/context"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestMakeSelfOnTop(t *testing.T) {
+	users := makeSelfOnTop(&context.Context{}, []*user.User{{ID: 2}, {ID: 1}})
+	assert.Len(t, users, 2)
+	assert.EqualValues(t, 2, users[0].ID)
+
+	users = makeSelfOnTop(&context.Context{Doer: &user.User{ID: 1}}, []*user.User{{ID: 2}, {ID: 1}})
+	assert.Len(t, users, 2)
+	assert.EqualValues(t, 1, users[0].ID)
+
+	users = makeSelfOnTop(&context.Context{Doer: &user.User{ID: 2}}, []*user.User{{ID: 2}, {ID: 1}})
+	assert.Len(t, users, 2)
+	assert.EqualValues(t, 2, users[0].ID)
+}
diff --git a/routers/web/repo/issue.go b/routers/web/repo/issue.go
@@ -303,17 +303,12 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
 	ctx.Data["CommitStatuses"] = commitStatuses
 
 	// Get assignees.
-	ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, repo)
+	assigneeUsers, err := repo_model.GetRepoAssignees(ctx, repo)
 	if err != nil {
-		ctx.ServerError("GetAssignees", err)
-		return
-	}
-
-	ctx.Data["Posters"], err = repo_model.GetIssuePosters(ctx, repo, isPullOption.IsTrue())
-	if err != nil {
-		ctx.ServerError("GetIssuePosters", err)
+		ctx.ServerError("GetRepoAssignees", err)
 		return
 	}
+	ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
 
 	handleTeamMentions(ctx)
 	if ctx.Written() {
@@ -479,11 +474,12 @@ func RetrieveRepoMilestonesAndAssignees(ctx *context.Context, repo *repo_model.R
 		return
 	}
 
-	ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, repo)
+	assigneeUsers, err := repo_model.GetRepoAssignees(ctx, repo)
 	if err != nil {
-		ctx.ServerError("GetAssignees", err)
+		ctx.ServerError("GetRepoAssignees", err)
 		return
 	}
+	ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
 
 	handleTeamMentions(ctx)
 }
@@ -3354,3 +3350,46 @@ func handleTeamMentions(ctx *context.Context) {
 	ctx.Data["MentionableTeamsOrg"] = ctx.Repo.Owner.Name
 	ctx.Data["MentionableTeamsOrgAvatar"] = ctx.Repo.Owner.AvatarLink(ctx)
 }
+
+type userSearchInfo struct {
+	UserID     int64  `json:"user_id"`
+	UserName   string `json:"username"`
+	AvatarLink string `json:"avatar_link"`
+	FullName   string `json:"full_name"`
+}
+
+type userSearchResponse struct {
+	Results []*userSearchInfo `json:"results"`
+}
+
+// IssuePosters get posters for current repo's issues/pull requests
+func IssuePosters(ctx *context.Context) {
+	repo := ctx.Repo.Repository
+	isPullList := ctx.Params(":type") == "pulls"
+	search := strings.TrimSpace(ctx.FormString("q"))
+	posters, err := repo_model.GetIssuePostersWithSearch(ctx, repo, isPullList, search, setting.UI.DefaultShowFullName)
+	if err != nil {
+		ctx.JSON(http.StatusInternalServerError, err)
+		return
+	}
+
+	if search == "" && ctx.Doer != nil {
+		// the returned posters slice only contains limited number of users,
+		// to make the current user (doer) can quickly filter their own issues, always add doer to the posters slice
+		if !util.SliceContainsFunc(posters, func(user *user_model.User) bool { return user.ID == ctx.Doer.ID }) {
+			posters = append(posters, ctx.Doer)
+		}
+	}
+
+	posters = makeSelfOnTop(ctx, posters)
+
+	resp := &userSearchResponse{}
+	resp.Results = make([]*userSearchInfo, len(posters))
+	for i, user := range posters {
+		resp.Results[i] = &userSearchInfo{UserID: user.ID, UserName: user.Name, AvatarLink: user.AvatarLink(ctx)}
+		if setting.UI.DefaultShowFullName {
+			resp.Results[i].FullName = user.FullName
+		}
+	}
+	ctx.JSON(http.StatusOK, resp)
+}
diff --git a/routers/web/repo/pull.go b/routers/web/repo/pull.go
@@ -792,10 +792,13 @@ func ViewPullFiles(ctx *context.Context) {
 
 	setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
 
-	if ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository); err != nil {
-		ctx.ServerError("GetAssignees", err)
+	assigneeUsers, err := repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository)
+	if err != nil {
+		ctx.ServerError("GetRepoAssignees", err)
 		return
 	}
+	ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
+
 	handleTeamMentions(ctx)
 	if ctx.Written() {
 		return

diff --git a/routers/web/repo/release.go b/routers/web/repo/release.go
@@ -333,13 +333,12 @@ func NewRelease(ctx *context.Context) {
 		}
 	}
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
-	var err error
-	// Get assignees.
-	ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository)
+	assigneeUsers, err := repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository)
 	if err != nil {
-		ctx.ServerError("GetAssignees", err)
+		ctx.ServerError("GetRepoAssignees", err)
 		return
 	}
+	ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
 
 	upload.AddUploadContext(ctx, "release")
 	ctx.HTML(http.StatusOK, tplReleaseNew)
@@ -496,11 +495,12 @@ func EditRelease(ctx *context.Context) {
 	ctx.Data["attachments"] = rel.Attachments
 
 	// Get assignees.
-	ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, rel.Repo)
+	assigneeUsers, err := repo_model.GetRepoAssignees(ctx, rel.Repo)
 	if err != nil {
-		ctx.ServerError("GetAssignees", err)
+		ctx.ServerError("GetRepoAssignees", err)
 		return
 	}
+	ctx.Data["Assignees"] = makeSelfOnTop(ctx, assigneeUsers)
 
 	ctx.HTML(http.StatusOK, tplReleaseNew)
 }

diff --git a/routers/web/web.go b/routers/web/web.go
@@ -1228,7 +1228,10 @@ func RegisterRoutes(m *web.Route) {
 
 	m.Group("/{username}/{reponame}", func() {
 		m.Group("", func() {
-			m.Get("/{type:issues|pulls}", repo.Issues)
+			m.Group("/{type:issues|pulls}", func() {
+				m.Get("", repo.Issues)
+				m.Get("/posters", repo.IssuePosters)
+			})
 			m.Get("/{type:issues|pulls}/{index}", repo.ViewIssue)
 			m.Group("/{type:issues|pulls}/{index}/content-history", func() {
 				m.Get("/overview", repo.GetContentHistoryOverview)

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository">
+<div role="main" aria-label="{{.Title}}" class="page-content repository issue-list">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div class="ui three column grid issue-list-headers">
@@ -117,7 +117,11 @@
 					</div>
 
 					<!-- Author -->
-					<div class="ui {{if not .Posters}}disabled{{end}} dropdown jump item">
+					<div class="ui dropdown jump item user-remote-search" data-tooltip-content="{{.locale.Tr "repo.author_search_tooltip"}}"
+						data-search-url="{{$.Link}}/posters"
+						data-selected-user-id="{{$.PosterID}}"
+						data-action-jump-url="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={user_id}"
+					>
 						<span class="text">
 							{{.locale.Tr "repo.issues.filter_poster"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -127,12 +131,7 @@
 								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
 							</div>
-							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
-							{{range .Posters}}
-								<a class="{{if eq $.PosterID .ID}}active selected{{end}} item gt-df" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{.ID}}">
-									{{avatar $.Context .}}{{template "repo/search_name" .}}
-								</a>
-							{{end}}
+							<a class="item" data-value="0">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
 						</div>
 					</div>
 
@@ -150,7 +149,7 @@
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
 							{{range .Assignees}}
 								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item gt-df" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{.ID}}&poster={{$.PosterID}}">
-									{{avatar $.Context .}}{{template "repo/search_name" .}}
+									{{avatar $.Context . 20}}{{template "repo/search_name" .}}
 								</a>
 							{{end}}
 						</div>
@@ -299,7 +298,7 @@
 							</div>
 							{{range .Assignees}}
 								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
-									{{avatar $.Context .}} {{.GetDisplayName}}
+									{{avatar $.Context . 20}} {{.GetDisplayName}}
 								</div>
 							{{end}}
 						</div>

diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository">
+<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div class="ui two column stackable grid">
@@ -71,7 +71,11 @@
 					</div>
 
 					<!-- Author -->
-					<div class="ui {{if not .Posters}}disabled{{end}} dropdown jump item">
+					<div class="ui dropdown jump item user-remote-search" data-tooltip-content="{{.locale.Tr "repo.author_search_tooltip"}}"
+						data-search-url="{{$.RepoLink}}/issues/posters"
+						data-selected-user-id="{{$.PosterID}}"
+						data-action-jump-url="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{$.AssigneeID}}&poster={user_id}"
+					>
 						<span class="text">
 							{{.locale.Tr "repo.issues.filter_poster"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -81,12 +85,7 @@
 								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
 							</div>
-							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
-							{{range .Posters}}
-								<a class="{{if eq $.PosterID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{.ID}}">
-									{{avatar $.Context .}}{{template "repo/search_name" .}}
-								</a>
-							{{end}}
+							<a class="item" data-value="0">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
 						</div>
 					</div>
 
@@ -104,7 +103,7 @@
 							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
 							{{range .Assignees}}
 								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&assignee={{.ID}}&poster={{$.PosterID}}">
-									{{avatar $.Context . 28 "gt-mr-2"}}{{template "repo/search_name" .}}
+									{{avatar $.Context . 20}}{{template "repo/search_name" .}}
 								</a>
 							{{end}}
 						</div>
@@ -190,7 +189,7 @@
 							</div>
 							{{range .Assignees}}
 								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
-									{{avatar $.Context . 28 "gt-mr-2"}}
+									{{avatar $.Context . 20}}
 									{{.GetDisplayName}}
 								</div>
 							{{end}}

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
@@ -254,7 +254,7 @@
 						{{end}}
 						<span class="octicon-check {{if not $checked}}invisible{{end}}">{{svg "octicon-check"}}</span>
 						<span class="text">
-							{{avatar $.Context . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
+							{{avatar $.Context . 20 "gt-mr-3"}}{{template "repo/search_name" .}}
 						</span>
 					</a>
 				{{end}}

diff --git a/web_src/css/repository.css b/web_src/css/repository.css
@@ -72,8 +72,8 @@
   max-height: 500px;
 }
 
-.repository .metas .ui.list.assignees .icon {
-  line-height: 2em;
+.repository .metas .ui.list.assignees .item {
+  line-height: 2.5em;
 }
 
 .repository .metas .ui.list.assignees .teamavatar {