Refactor sidebar label selector (#32460)

Introduce `issueSidebarLabelsData` to handle all sidebar labels related data.

8 files changed, 79 insertions, 84 deletions

diff --git a/templates/repo/issue/labels/label.tmpl b/templates/repo/issue/labels/label.tmpl
deleted file mode 100644
index f40c792da7..0000000000
--- a/templates/repo/issue/labels/label.tmpl
+++ /dev/null
@@ -1,7 +0,0 @@
-<a
-	class="item {{if not .label.IsChecked}}tw-hidden{{end}}"
-	id="label_{{.label.ID}}"
-	href="{{.root.RepoLink}}/{{if or .root.IsPull .root.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.label.ID}}"{{/* FIXME: use .root.Issue.Link or create .root.Link */}}
->
-	{{- ctx.RenderUtils.RenderLabel .label -}}
-</a>
diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl
deleted file mode 100644
index 96fb658664..0000000000
--- a/templates/repo/issue/labels/labels_selector_field.tmpl
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
-	<span class="text muted flex-text-block">
-		<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong>
-		{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-			{{svg "octicon-gear" 16 "tw-ml-1"}}
-		{{end}}
-	</span>
-	<div class="filter menu" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
-		{{if or .Labels .OrgLabels}}
-			<div class="ui icon search input">
-				<i class="icon">{{svg "octicon-search" 16}}</i>
-				<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
-			</div>
-		{{end}}
-		<a class="no-select item" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
-		{{if or .Labels .OrgLabels}}
-			{{$previousExclusiveScope := "_no_scope"}}
-			{{range .Labels}}
-				{{$exclusiveScope := .ExclusiveScope}}
-				{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
-					<div class="divider"></div>
-				{{end}}
-				{{$previousExclusiveScope = $exclusiveScope}}
-				<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{svg (Iif $exclusiveScope "octicon-dot-fill" "octicon-check")}}</span>&nbsp;&nbsp;{{ctx.RenderUtils.RenderLabel .}}
-					{{if .Description}}<br><small class="desc">{{.Description | ctx.RenderUtils.RenderEmoji}}</small>{{end}}
-					<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
-				</a>
-			{{end}}
-			<div class="divider"></div>
-			{{$previousExclusiveScope = "_no_scope"}}
-			{{range .OrgLabels}}
-				{{$exclusiveScope := .ExclusiveScope}}
-				{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
-					<div class="divider"></div>
-				{{end}}
-				{{$previousExclusiveScope = $exclusiveScope}}
-				<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{svg (Iif $exclusiveScope "octicon-dot-fill" "octicon-check")}}</span>&nbsp;&nbsp;{{ctx.RenderUtils.RenderLabel .}}
-					{{if .Description}}<br><small class="desc">{{.Description | ctx.RenderUtils.RenderEmoji}}</small>{{end}}
-					<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
-				</a>
-			{{end}}
-		{{else}}
-			<div class="disabled item">{{ctx.Locale.Tr "repo.issues.new.no_items"}}</div>
-		{{end}}
-	</div>
-</div>
diff --git a/templates/repo/issue/labels/labels_sidebar.tmpl b/templates/repo/issue/labels/labels_sidebar.tmpl
deleted file mode 100644
index 0b7b9b8969..0000000000
--- a/templates/repo/issue/labels/labels_sidebar.tmpl
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="ui labels list">
-	<span class="labels-list">
-		<span class="no-select {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
-		{{range .root.Labels}}
-			{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
-		{{end}}
-		{{range .root.OrgLabels}}
-			{{template "repo/issue/labels/label" dict "root" $.root "label" .}}
-		{{end}}
-	</span>
-</div>
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 190d52cf47..65d359e9dc 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -18,15 +18,15 @@
 						<input type="hidden" name="template-file" value="{{.TemplateFile}}">
 						{{range .Fields}}
 							{{if eq .Type "input"}}
-								{{template "repo/issue/fields/input" "item" .}}
+								{{template "repo/issue/fields/input" dict "item" .}}
 							{{else if eq .Type "markdown"}}
-								{{template "repo/issue/fields/markdown" "item" .}}
+								{{template "repo/issue/fields/markdown" dict "item" .}}
 							{{else if eq .Type "textarea"}}
-								{{template "repo/issue/fields/textarea" "item" . "root" $}}
+								{{template "repo/issue/fields/textarea" dict "item" . "root" $}}
 							{{else if eq .Type "dropdown"}}
-								{{template "repo/issue/fields/dropdown" "item" .}}
+								{{template "repo/issue/fields/dropdown" dict "item" .}}
 							{{else if eq .Type "checkboxes"}}
-								{{template "repo/issue/fields/checkboxes" "item" .}}
+								{{template "repo/issue/fields/checkboxes" dict "item" .}}
 							{{end}}
 						{{end}}
 					{{else}}
@@ -49,13 +49,11 @@
 	<div class="issue-content-right ui segment">
 		{{template "repo/issue/branch_selector_field" $}}
 		{{if .PageIsComparePull}}
-			{{template "repo/issue/sidebar/reviewer_list" dict "IssueSidebarReviewersData" $.IssueSidebarReviewersData}}
+			{{template "repo/issue/sidebar/reviewer_list" $.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" .}}
-		{{template "repo/issue/labels/labels_sidebar" dict "root" $}}
+		{{template "repo/issue/sidebar/label_list" $.IssueSidebarLabelsData}}
 
 		<div class="divider"></div>
 
diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
new file mode 100644
index 0000000000..e9f4baa433
--- /dev/null
+++ b/templates/repo/issue/sidebar/label_list.tmpl
@@ -0,0 +1,51 @@
+{{$data := .}}
+{{$canChange := and ctx.RootData.HasIssuesOrPullsWritePermission (not $data.Repository.IsArchived)}}
+<div class="issue-sidebar-combo" {{if $data.IssueID}}data-update-url="{{$data.RepoLink}}/issues/labels?issue_ids={{$data.IssueID}}"{{end}}>
+	<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
+	<div class="ui dropdown {{if not $canChange}}disabled{{end}}">
+		<a class="text muted">
+			<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $canChange}}{{svg "octicon-gear"}}{{end}}
+		</a>
+		<div class="menu">
+			{{if not $data.AllLabels}}
+				<div class="item disabled">{{ctx.Locale.Tr "repo.issues.new.no_items"}}</div>
+			{{else}}
+				<div class="ui icon search input">
+					<i class="icon">{{svg "octicon-search" 16}}</i>
+					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
+				</div>
+				<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
+				{{$previousExclusiveScope := "_no_scope"}}
+				{{range .RepoLabels}}
+					{{$exclusiveScope := .ExclusiveScope}}
+					{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
+						<div class="divider"></div>
+					{{end}}
+					{{$previousExclusiveScope = $exclusiveScope}}
+					{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
+				{{end}}
+				<div class="divider"></div>
+				{{$previousExclusiveScope = "_no_scope"}}
+				{{range .OrgLabels}}
+					{{$exclusiveScope := .ExclusiveScope}}
+					{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
+						<div class="divider"></div>
+					{{end}}
+					{{$previousExclusiveScope = $exclusiveScope}}
+					{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
+				{{end}}
+			{{end}}
+		</div>
+	</div>
+
+	<div class="ui list labels-list tw-my-2 tw-flex tw-gap-2">
+		<span class="item empty-list {{if $data.SelectedLabelIDs}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
+		{{range $data.AllLabels}}
+			{{if .IsChecked}}
+				<a class="item" href="{{$data.RepoLink}}/{{if $data.IsPullRequest}}pulls{{else}}issues{{end}}?labels={{.ID}}">
+					{{- ctx.RenderUtils.RenderLabel . -}}
+				</a>
+			{{end}}
+		{{end}}
+	</div>
+</div>
diff --git a/templates/repo/issue/sidebar/label_list_item.tmpl b/templates/repo/issue/sidebar/label_list_item.tmpl
new file mode 100644
index 0000000000..ad878e918b
--- /dev/null
+++ b/templates/repo/issue/sidebar/label_list_item.tmpl
@@ -0,0 +1,11 @@
+{{$label := .Label}}
+<a class="item {{if $label.IsChecked}}checked{{else if $label.IsArchived}}tw-hidden{{end}}" href="#"
+	data-scope="{{$label.ExclusiveScope}}" data-value="{{$label.ID}}" {{if $label.IsArchived}}data-is-archived{{end}}
+>
+	<span class="item-check-mark">{{svg (Iif $label.ExclusiveScope "octicon-dot-fill" "octicon-check")}}</span>
+	{{ctx.RenderUtils.RenderLabel $label}}
+	<div class="item-secondary-info">
+		{{if $label.Description}}<div class="tw-pl-[20px]"><small>{{$label.Description | ctx.RenderUtils.RenderEmoji}}</small></div>{{end}}
+		<div class="archived-label-hint">{{template "repo/issue/labels/label_archived" $label}}</div>
+	</div>
+</a>
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index 2d3218e927..cf7b97c02b 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -1,11 +1,9 @@
-{{$data := .IssueSidebarReviewersData}}
+{{$data := .}}
 {{$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}}
->
+<div class="issue-sidebar-combo" {{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">
+	<div class="ui dropdown {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
+		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if and $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
 		</a>
 		<div class="menu flex-items-menu">
@@ -19,7 +17,8 @@
 				{{if .User}}
 					<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}}
+						<span class="item-check-mark">{{svg "octicon-check"}}</span>
+						{{ctx.AvatarUtils.Avatar .User 20}} {{template "repo/search_name" .User}}
 					</a>
 				{{end}}
 			{{end}}
@@ -29,7 +28,8 @@
 					{{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}}
+							<span class="item-check-mark">{{svg "octicon-check"}}</span>
+							{{svg "octicon-people" 20}} {{$data.RepoOwnerName}}/{{.Team.Name}}
 						</a>
 					{{end}}
 				{{end}}
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 7a40274759..0fae1e9e1c 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -2,13 +2,12 @@
 	{{template "repo/issue/branch_selector_field" $}}
 
 	{{if .Issue.IsPull}}
-		{{template "repo/issue/sidebar/reviewer_list" dict "IssueSidebarReviewersData" $.IssueSidebarReviewersData}}
+		{{template "repo/issue/sidebar/reviewer_list" $.IssueSidebarReviewersData}}
 		{{template "repo/issue/sidebar/wip_switch" $}}
 		<div class="divider"></div>
 	{{end}}
 
-	{{template "repo/issue/labels/labels_selector_field" $}}
-	{{template "repo/issue/labels/labels_sidebar" dict "root" $}}
+	{{template "repo/issue/sidebar/label_list" $.IssueSidebarLabelsData}}
 
 	{{template "repo/issue/sidebar/milestone_list" $}}
 	{{template "repo/issue/sidebar/project_list" $}}