Add reviewers selection to new pull request (#32403)

Users could add reviewers when creating new PRs.

---------

Co-authored-by: splitt3r <splitt3r@users.noreply.github.com>
Co-authored-by: Sebastian Sauer <sauer.sebastian@gmail.com>
Co-authored-by: bb-ben <70356237+bboerben@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

4 files changed, 99 insertions, 85 deletions

diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 6f1bebc032..190d52cf47 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -47,7 +47,11 @@
 	</div>
 
 	<div class="issue-content-right ui segment">
-		{{template "repo/issue/branch_selector_field" .}}
+		{{template "repo/issue/branch_selector_field" $}}
+		{{if .PageIsComparePull}}
+			{{template "repo/issue/sidebar/reviewer_list" dict "IssueSidebarReviewersData" $.IssueSidebarReviewersData}}
+			<div class="divider"></div>
+		{{end}}
 
 		<input id="label_ids" name="label_ids" type="hidden" value="{{.label_ids}}">
 		{{template "repo/issue/labels/labels_selector_field" .}}
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index cf4d067c0f..2d3218e927 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -1,95 +1,79 @@
-<input id="reviewer_id" name="reviewer_id" type="hidden" value="{{.reviewer_id}}">
-<div class="ui {{if or (and (not .Reviewers) (not .TeamReviewers)) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown">
-	<a class="text tw-flex tw-items-center muted">
-		<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong>
-		{{if and .CanChooseReviewer (not .Repository.IsArchived)}}
-			{{svg "octicon-gear" 16 "tw-ml-1"}}
-		{{end}}
-	</a>
-	<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
-		{{if .Reviewers}}
-			<div class="ui icon search input">
-				<i class="icon">{{svg "octicon-search" 16}}</i>
-				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_reviewers"}}">
-			</div>
-		{{end}}
-		{{if .Reviewers}}
-			{{range .Reviewers}}
+{{$data := .IssueSidebarReviewersData}}
+{{$hasCandidates := or $data.Reviewers $data.TeamReviewers}}
+<div class="issue-sidebar-combo" data-sidebar-combo-for="reviewers"
+		{{if $data.IssueID}}data-update-url="{{$data.RepoLink}}/issues/request_review?issue_ids={{$data.IssueID}}"{{end}}
+>
+	<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
+	<div class="ui dropdown custom {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
+		<a class="muted text">
+			<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if and $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
+		</a>
+		<div class="menu flex-items-menu">
+			{{if $hasCandidates}}
+				<div class="ui icon search input">
+					<i class="icon">{{svg "octicon-search"}}</i>
+					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_reviewers"}}">
+				</div>
+			{{end}}
+			{{range $data.Reviewers}}
 				{{if .User}}
-					<a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_{{.ItemID}}" {{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
-						<span class="octicon-check {{if not .Checked}}tw-invisible{{end}}">{{svg "octicon-check"}}</span>
-						<span class="text">
-							{{ctx.AvatarUtils.Avatar .User 28 "tw-mr-2"}}{{template "repo/search_name" .User}}
-						</span>
+					<a class="item muted {{if .Requested}}checked{{end}}" href="{{.User.HomeLink}}" data-value="{{.ItemID}}" data-can-change="{{.CanChange}}"
+						{{if not .CanChange}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
+						{{svg "octicon-check"}} {{ctx.AvatarUtils.Avatar .User 20}} {{template "repo/search_name" .User}}
 					</a>
 				{{end}}
 			{{end}}
-		{{end}}
-		{{if .TeamReviewers}}
-			{{if .Reviewers}}
-				<div class="divider"></div>
-			{{end}}
-			{{range .TeamReviewers}}
-				{{if .Team}}
-					<a class="{{if not .CanChange}}ui{{end}} item {{if .Checked}}checked{{end}} {{if not .CanChange}}ban-change{{end}}" href="#" data-id="{{.ItemID}}" data-id-selector="#review_request_team_{{.Team.ID}}" {{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
-						<span class="octicon-check {{if not .Checked}}tw-invisible{{end}}">{{svg "octicon-check" 16}}</span>
-						<span class="text">
-							{{svg "octicon-people" 16 "tw-ml-4 tw-mr-1"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}
-						</span>
-					</a>
+			{{if $data.TeamReviewers}}
+				{{if $data.Reviewers}}<div class="divider"></div>{{end}}
+				{{range $data.TeamReviewers}}
+					{{if .Team}}
+						<a class="item muted {{if .Requested}}checked{{end}}" href="#" data-value="{{.ItemID}}" data-can-change="{{.CanChange}}"
+							{{if not .CanChange}} data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review_block"}}"{{end}}>
+							{{svg "octicon-check"}} {{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
+						</a>
+					{{end}}
 				{{end}}
 			{{end}}
-		{{end}}
+		</div>
 	</div>
-</div>
 
-<div class="ui assignees list">
-	<span class="no-select item {{if or .OriginalReviews .PullReviewers}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_reviewers"}}</span>
-	<div class="selected">
-		{{range .PullReviewers}}
-			<div class="item tw-flex tw-items-center tw-py-2">
-				<div class="tw-flex tw-items-center tw-flex-1">
+	<div class="ui relaxed list flex-items-block tw-my-4">
+		<span class="item empty-list {{if or $data.OriginalReviews $data.CurrentPullReviewers}}tw-hidden{{end}}">
+			{{ctx.Locale.Tr "repo.issues.new.no_reviewers"}}
+		</span>
+		{{range $data.CurrentPullReviewers}}
+			<div class="item">
+				<div class="flex-text-inline tw-flex-1">
 					{{if .User}}
-						<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User 20 "tw-mr-2"}}{{.User.GetDisplayName}}</a>
+						<a class="muted flex-text-inline" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User 20}} {{.User.GetDisplayName}}</a>
 					{{else if .Team}}
-						<span class="text">{{svg "octicon-people" 20 "tw-mr-2"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
+						{{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
 					{{end}}
 				</div>
-				<div class="tw-flex tw-items-center tw-gap-2">
-					{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed) (not $.Issue.PullRequest.HasMerged))}}
-						<a href="#" class="ui muted icon tw-flex tw-items-center show-modal" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.dismiss_review"}}" data-modal="#dismiss-review-modal-{{.Review.ID}}">
+				<div class="flex-text-inline">
+					{{if .CanBeDismissed}}
+						<a href="#" class="ui muted icon show-modal" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.dismiss_review"}}"
+							data-modal="#issue-sidebar-dismiss-review-modal" data-modal-reviewer-id="{{.Review.ID}}">
 							{{svg "octicon-x" 20}}
 						</a>
-						<div class="ui small modal" id="dismiss-review-modal-{{.Review.ID}}">
-							<div class="header">
-								{{ctx.Locale.Tr "repo.issues.dismiss_review"}}
-							</div>
-							<div class="content">
-								<div class="ui warning message">
-									{{ctx.Locale.Tr "repo.issues.dismiss_review_warning"}}
-								</div>
-								<form class="ui form dismiss-review-form" id="dismiss-review-{{.Review.ID}}" action="{{$.RepoLink}}/issues/dismiss_review" method="post">
-									{{$.CsrfTokenHtml}}
-									<input type="hidden" name="review_id" value="{{.Review.ID}}">
-									<div class="field">
-										<label for="message">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</label>
-										<input id="message" name="message">
-									</div>
-									<div class="text right actions">
-										<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
-										<button class="ui red button" type="submit">{{ctx.Locale.Tr "ok"}}</button>
-									</div>
-								</form>
-							</div>
-						</div>
 					{{end}}
 					{{if .Review.Stale}}
-						<span data-tooltip-content="{{ctx.Locale.Tr "repo.issues.is_stale"}}">
-							{{svg "octicon-hourglass" 16}}
-						</span>
+						<span data-tooltip-content="{{ctx.Locale.Tr "repo.issues.is_stale"}}">{{svg "octicon-hourglass" 16}}</span>
 					{{end}}
-					{{if and .CanChange (or .Checked (and (not $.Issue.IsClosed) (not $.Issue.PullRequest.HasMerged)))}}
-						<a href="#" class="ui muted icon re-request-review{{if .Checked}} checked{{end}}" data-tooltip-content="{{if .Checked}}{{ctx.Locale.Tr "repo.issues.remove_request_review"}}{{else}}{{ctx.Locale.Tr "repo.issues.re_request_review"}}{{end}}" data-issue-id="{{$.Issue.ID}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">{{svg (Iif .Checked "octicon-trash" "octicon-sync")}}</a>
+					{{if and .CanChange $data.CanChooseReviewer}}
+						{{if .Requested}}
+							<a href="#" class="ui muted icon link-action"
+								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.remove_request_review"}}"
+								data-url="{{$data.RepoLink}}/issues/request_review?action=detach&issue_ids={{$data.IssueID}}&id={{.ItemID}}">
+								{{svg "octicon-trash"}}
+							</a>
+						{{else}}
+							<a href="#" class="ui muted icon link-action"
+								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.re_request_review"}}"
+								data-url="{{$data.RepoLink}}/issues/request_review?action=attach&issue_ids={{$data.IssueID}}&id={{.ItemID}}">
+								{{svg "octicon-sync"}}
+							</a>
+						{{end}}
 					{{end}}
 					<span {{if .Review.TooltipContent}}data-tooltip-content="{{ctx.Locale.Tr .Review.TooltipContent}}"{{end}}>
 						{{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
@@ -97,15 +81,16 @@
 				</div>
 			</div>
 		{{end}}
-		{{range .OriginalReviews}}
-			<div class="item tw-flex tw-items-center tw-py-2">
-				<div class="tw-flex tw-items-center tw-flex-1">
-					<a class="muted" href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{ctx.Locale.Tr "repo.migrated_from_fake" $.Repository.GetOriginalURLHostname}}">
-						{{svg (MigrationIcon $.Repository.GetOriginalURLHostname) 20 "tw-mr-2"}}
-						{{.OriginalAuthor}}
+		{{range $data.OriginalReviews}}
+			<div class="item">
+				<div class="flex-text-inline tw-flex-1">
+					{{$originalURLHostname := $data.Repository.GetOriginalURLHostname}}
+					{{$originalURL := $data.Repository.OriginalURL}}
+					<a class="muted flex-text-inline" href="{{$originalURL}}" data-tooltip-content="{{ctx.Locale.Tr "repo.migrated_from_fake" $originalURLHostname}}">
+						{{svg (MigrationIcon $originalURLHostname) 20}} {{.OriginalAuthor}}
 					</a>
 				</div>
-				<div class="tw-flex tw-items-center tw-gap-2">
+				<div class="flex-text-inline">
 					<span {{if .TooltipContent}}data-tooltip-content="{{ctx.Locale.Tr .TooltipContent}}"{{end}}>
 						{{svg (printf "octicon-%s" .Type.Icon) 16 (printf "text %s" (.HTMLTypeColorName))}}
 					</span>
@@ -113,4 +98,29 @@
 			</div>
 		{{end}}
 	</div>
+
+	{{if $data.CurrentPullReviewers}}
+	<div class="ui small modal" id="issue-sidebar-dismiss-review-modal">
+		<div class="header">
+			{{ctx.Locale.Tr "repo.issues.dismiss_review"}}
+		</div>
+		<div class="content">
+			<div class="ui warning message">
+				{{ctx.Locale.Tr "repo.issues.dismiss_review_warning"}}
+			</div>
+			<form class="ui form" action="{{$data.RepoLink}}/issues/dismiss_review" method="post">
+				{{ctx.RootData.CsrfTokenHtml}}
+				<input type="hidden" class="reviewer-id" name="review_id">
+				<div class="field">
+					<label for="issue-sidebar-dismiss-review-message">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</label>
+					<input id="issue-sidebar-dismiss-review-message" name="message">
+				</div>
+				<div class="text right actions">
+					<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
+					<button class="ui red button" type="submit">{{ctx.Locale.Tr "ok"}}</button>
+				</div>
+			</form>
+		</div>
+	</div>
+	{{end}}
 </div>
diff --git a/templates/repo/issue/sidebar/wip_switch.tmpl b/templates/repo/issue/sidebar/wip_switch.tmpl
index 2f8994673e..06a3be0d8f 100644
--- a/templates/repo/issue/sidebar/wip_switch.tmpl
+++ b/templates/repo/issue/sidebar/wip_switch.tmpl
@@ -1,5 +1,5 @@
 {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .HasMerged) (not .Issue.IsClosed) (not .IsPullWorkInProgress)}}
-	<div class="toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{index .PullRequestWorkInProgressPrefixes 0}}" data-update-url="{{.Issue.Link}}/title">
+	<div class="toggle-wip tw-mt-2" data-title="{{.Issue.Title}}" data-wip-prefix="{{index .PullRequestWorkInProgressPrefixes 0}}" data-update-url="{{.Issue.Link}}/title">
 		<a class="muted">
 			{{ctx.Locale.Tr "repo.pulls.still_in_progress"}} {{ctx.Locale.Tr "repo.pulls.add_prefix" (index .PullRequestWorkInProgressPrefixes 0)}}
 		</a>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 7afb76968a..7a40274759 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -2,7 +2,7 @@
 	{{template "repo/issue/branch_selector_field" $}}
 
 	{{if .Issue.IsPull}}
-		{{template "repo/issue/sidebar/reviewer_list" $}}
+		{{template "repo/issue/sidebar/reviewer_list" dict "IssueSidebarReviewersData" $.IssueSidebarReviewersData}}
 		{{template "repo/issue/sidebar/wip_switch" $}}
 		<div class="divider"></div>
 	{{end}}