Sort milestone dropdown items by due date

Sort milestones within milestone select dropdown
first by `expired` and then by `due_date`.

app/assets/javascripts/milestone_select.js

@@ -95,14 +95,19 @@ export default class MilestoneSelect {
                   name: m.title,
                 }))
                 .sort((mA, mB) => {
+                  const dueDateA = mA.due_date ? parsePikadayDate(mA.due_date) : null;
+                  const dueDateB = mB.due_date ? parsePikadayDate(mB.due_date) : null;
+
                   // Move all expired milestones to the bottom.
-                  if (mA.expired) {
-                    return 1;
-                  }
-                  if (mB.expired) {
-                    return -1;
-                  }
-                  return 0;
+                  if (mA.expired) return 1;
+                  if (mB.expired) return -1;
+
+                  // Move milestones without due dates just above expired milestones.
+                  if (!dueDateA) return 1;
+                  if (!dueDateB) return -1;
+
+                  // Sort by due date in ascending order.
+                  return dueDateA - dueDateB;
                 }),
             )
             .then((data) => {

changelogs/unreleased/262047-order-milestones-by-due-date.yml

+---
+title: Sort milestone dropdown items by due date
+merge_request: 53242
+author:
+type: changed

spec/features/issues/issue_sidebar_spec.rb

@@ -11,6 +11,11 @@ RSpec.describe 'Issue Sidebar' do
   let!(:label) { create(:label, project: project, title: 'bug') }
   let(:issue) { create(:labeled_issue, project: project, labels: [label]) }
   let!(:xss_label) { create(:label, project: project, title: '<script>alert("xss");</script>') }
+  let!(:milestone_expired) { create(:milestone, project: project, due_date: 5.days.ago) }
+  let!(:milestone_no_duedate) { create(:milestone, project: project, title: 'Foo - No due date') }
+  let!(:milestone1) { create(:milestone, project: project, title: 'Milestone-1', due_date: 20.days.from_now) }
+  let!(:milestone2) { create(:milestone, project: project, title: 'Milestone-2', due_date: 15.days.from_now) }
+  let!(:milestone3) { create(:milestone, project: project, title: 'Milestone-3', due_date: 10.days.from_now) }
 
   before do
     stub_incoming_email_setting(enabled: true, address: "p+%{key}@gl.ab")
@@ -134,6 +139,36 @@ RSpec.describe 'Issue Sidebar' do
         end
       end
 
+      context 'editing issue milestone', :js do
+        before do
+          page.within('.block.milestone > .title') do
+            click_on 'Edit'
+          end
+        end
+
+        it 'shows milestons list in the dropdown' do
+          page.within('.block.milestone .dropdown-content') do
+            # 5 milestones + "No milestone" = 6 items
+            expect(page.find('ul')).to have_selector('li[data-milestone-id]', count: 6)
+          end
+        end
+
+        it 'shows expired milestone at the bottom of the list' do
+          page.within('.block.milestone .dropdown-content ul') do
+            expect(page.find('li:last-child')).to have_content milestone_expired.title
+          end
+        end
+
+        it 'shows milestone due earliest at the top of the list' do
+          page.within('.block.milestone .dropdown-content ul') do
+            expect(page.all('li[data-milestone-id]')[1]).to have_content milestone3.title
+            expect(page.all('li[data-milestone-id]')[2]).to have_content milestone2.title
+            expect(page.all('li[data-milestone-id]')[3]).to have_content milestone1.title
+            expect(page.all('li[data-milestone-id]')[4]).to have_content milestone_no_duedate.title
+          end
+        end
+      end
+
       context 'editing issue labels', :js do
         before do
           issue.update(labels: [label])