Improve milestone filter on issues page (#22423)

Now we have `All milestones`, `No milestones`, `Open milestones` and
`Closed milestones`.
Fix #11924
Fix #22411 

<img width="1166" alt="image"
src="https://user-images.githubusercontent.com/81045/212243375-95eea035-a972-44b8-8088-53db614cb07e.png">

4 files changed, 64 insertions, 80 deletions

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index ba927b8498..fb2d8ee3bd 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -53,7 +53,7 @@
 					</div>
 
 					<!-- Milestone -->
-					<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
+					<div class="ui {{if not (or .OpenMilestones .ClosedMilestones)}}disabled{{end}} dropdown jump item">
 						<span class="text">
 							{{.locale.Tr "repo.issues.filter_milestone"}}
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -63,9 +63,28 @@
 								<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
 								<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestone"}}">
 							</div>
-							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_milestone_no_select"}}</a>
-							{{range .Milestones}}
-								<a class="{{if $.MilestoneID}}{{if eq $.MilestoneID .ID}}active selected{{end}}{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.Name}}</a>
+							<div class="divider"></div>
+							<a class="{{if not $.MilestoneID}}active selected {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone=0&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_milestone_all"}}</a>
+							<a class="{{if $.MilestoneID}}{{if eq $.MilestoneID -1}}active selected {{end}}{{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone=-1&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_milestone_none"}}</a>
+							{{if .OpenMilestones}}
+								<div class="divider"></div>
+								<div class="header">{{.locale.Tr "repo.issues.filter_milestone_open"}}</div>
+								{{range .OpenMilestones}}
+								<a class="{{if $.MilestoneID}}{{if eq $.MilestoneID .ID}}active selected {{end}}{{end}}item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">
+									{{svg "octicon-milestone" 16 "mr-2"}}
+									{{.Name}}
+								</a>
+								{{end}}
+							{{end}}
+							{{if .ClosedMilestones}}
+								<div class="divider"></div>
+								<div class="header">{{.locale.Tr "repo.issues.filter_milestone_closed"}}</div>
+								{{range .ClosedMilestones}}
+								<a class="{{if $.MilestoneID}}{{if eq $.MilestoneID .ID}}active selected {{end}}{{end}}item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">
+									{{svg "octicon-milestone" 16 "mr-2"}}
+									{{.Name}}
+								</a>
+								{{end}}
 							{{end}}
 						</div>
 					</div>
diff --git a/templates/repo/issue/milestone/select_menu.tmpl b/templates/repo/issue/milestone/select_menu.tmpl
new file mode 100644
index 0000000000..6f67b5d523
--- /dev/null
+++ b/templates/repo/issue/milestone/select_menu.tmpl
@@ -0,0 +1,39 @@
+<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
+{{if or .OpenMilestones .ClosedMilestones}}
+	<div class="ui icon search input">
+		<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
+		<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
+	</div>
+	<div class="divider"></div>
+{{end}}
+<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
+{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
+	<div class="header" style="text-transform: none;font-size:14px;">
+		{{.locale.Tr "repo.issues.new.no_items"}}
+	</div>
+{{else}}
+	{{if .OpenMilestones}}
+		<div class="divider"></div>
+		<div class="header">
+			{{.locale.Tr "repo.issues.new.open_milestone"}}
+		</div>
+		{{range .OpenMilestones}}
+			<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+				{{svg "octicon-milestone" 16 "gt-mr-2"}}
+				{{.Name}}
+			</a>
+		{{end}}
+	{{end}}
+	{{if .ClosedMilestones}}
+		<div class="divider"></div>
+		<div class="header">
+			{{.locale.Tr "repo.issues.new.closed_milestone"}}
+		</div>
+		{{range .ClosedMilestones}}
+			<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
+				{{svg "octicon-milestone" 16 "gt-mr-2"}}
+				{{.Name}}
+			</a>
+		{{end}}
+	{{end}}
+{{end}}
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index d673e89a39..196e911061 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -72,44 +72,7 @@
 					{{end}}
 				</span>
 				<div class="menu">
-					<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
-					{{if or .OpenMilestones .ClosedMilestones}}
-					<div class="ui icon search input">
-						<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
-						<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
-					</div>
-					{{end}}
-					<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
-					{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
-						<div class="header" style="text-transform: none;font-size:14px;">
-							{{.locale.Tr "repo.issues.new.no_items"}}
-						</div>
-					{{else}}
-						{{if .OpenMilestones}}
-							<div class="divider"></div>
-							<div class="header">
-								{{.locale.Tr "repo.issues.new.open_milestone"}}
-							</div>
-							{{range .OpenMilestones}}
-								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-									{{svg "octicon-milestone" 16 "gt-mr-2"}}
-									{{.Name}}
-								</a>
-							{{end}}
-						{{end}}
-						{{if .ClosedMilestones}}
-							<div class="divider"></div>
-							<div class="header">
-								{{.locale.Tr "repo.issues.new.closed_milestone"}}
-							</div>
-							{{range .ClosedMilestones}}
-								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-									{{svg "octicon-milestone" 16 "gt-mr-2"}}
-									{{.Name}}
-								</a>
-							{{end}}
-						{{end}}
-					{{end}}
+					{{template "repo/issue/milestone/select_menu" .}}
 				</div>
 			</div>
 			<div class="ui select-milestone list">
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index fad0aadafe..e07ef0fa37 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -118,44 +118,7 @@
 				{{end}}
 			</a>
 			<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
-				<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_milestone_title"}}</div>
-				{{if or .OpenMilestones .ClosedMilestones}}
-				<div class="ui icon search input">
-					<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
-					<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestones"}}">
-				</div>
-				{{end}}
-				<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_milestone"}}</div>
-				{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
-					<div class="header" style="text-transform: none;font-size:14px;">
-						{{.locale.Tr "repo.issues.new.no_items"}}
-					</div>
-				{{else}}
-					{{if .OpenMilestones}}
-						<div class="divider"></div>
-						<div class="header">
-							{{.locale.Tr "repo.issues.new.open_milestone"}}
-						</div>
-						{{range .OpenMilestones}}
-							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-								{{svg "octicon-milestone" 16 "gt-mr-2"}}
-								{{.Name}}
-							</a>
-						{{end}}
-					{{end}}
-					{{if .ClosedMilestones}}
-						<div class="divider"></div>
-						<div class="header">
-							{{.locale.Tr "repo.issues.new.closed_milestone"}}
-						</div>
-						{{range .ClosedMilestones}}
-							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
-								{{svg "octicon-milestone" 16 "gt-mr-2"}}
-								{{.Name}}
-							</a>
-						{{end}}
-					{{end}}
-				{{end}}
+				{{template "repo/issue/milestone/select_menu" .}}
 			</div>
 		</div>
 		<div class="ui select-milestone list">