Sort milestones by due date in filtered search

Sorts milestones within filtered search milestones dropdown
by due date.

Changelog: changed

app/assets/javascripts/filtered_search/available_dropdown_mappings.js

+import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
 import { mergeUrlParams } from '../lib/utils/url_utility';
 import DropdownAjaxFilter from './dropdown_ajax_filter';
 import DropdownEmoji from './dropdown_emoji';
@@ -87,6 +88,7 @@ export default class AvailableDropdownMappings {
         extraArguments: {
           endpoint: this.getMilestoneEndpoint(),
           symbol: '%',
+          preprocessing: (milestones) => milestones.sort(sortMilestonesByDueDate),
         },
         element: this.container.querySelector('#js-dropdown-milestone'),
       },

app/assets/javascripts/milestone_select.js

@@ -7,6 +7,7 @@ import { template, escape } from 'lodash';
 import Api from '~/api';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { __, sprintf } from '~/locale';
+import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
 import boardsStore, {
   boardStoreIssueSet,
   boardStoreIssueDelete,
@@ -93,21 +94,7 @@ export default class MilestoneSelect {
                   // Public API includes `title` instead of `name`.
                   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;
-
-                  // 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;
-                }),
+                .sort(sortMilestonesByDueDate),
             )
             .then((data) => {
               const extraOptions = [];

app/assets/javascripts/milestones/milestone_utils.js

+import { parsePikadayDate } from '~/lib/utils/datetime_utility';
+
+/**
+ * This method is to be used with `Array.prototype.sort` function
+ * where array contains milestones with `due_date`/`dueDate` and/or
+ * `expired` properties.
+ * This method sorts given milestone params based on their expiration
+ * status by putting expired milestones at the bottom and upcoming
+ * milestones at the top of the list.
+ *
+ * @param {object} milestoneA
+ * @param {object} milestoneB
+ */
+export function sortMilestonesByDueDate(milestoneA, milestoneB) {
+  const rawDueDateA = milestoneA.due_date || milestoneA.dueDate;
+  const rawDueDateB = milestoneB.due_date || milestoneB.dueDate;
+  const dueDateA = rawDueDateA ? parsePikadayDate(rawDueDateA) : null;
+  const dueDateB = rawDueDateB ? parsePikadayDate(rawDueDateB) : null;
+  const expiredA = milestoneA.expired || Date.now() > dueDateA?.getTime();
+  const expiredB = milestoneB.expired || Date.now() > dueDateB?.getTime();
+
+  // Move all expired milestones to the bottom.
+  if (expiredA) return 1;
+  if (expiredB) 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;
+}

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue

@@ -9,6 +9,7 @@ import { debounce } from 'lodash';
 
 import createFlash from '~/flash';
 import { __ } from '~/locale';
+import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
 
 import { DEFAULT_MILESTONES, DEBOUNCE_DELAY } from '../constants';
 import { stripQuotes } from '../filtered_search_utils';
@@ -63,7 +64,7 @@ export default {
       this.config
         .fetchMilestones(searchTerm)
         .then(({ data }) => {
-          this.milestones = data;
+          this.milestones = data.sort(sortMilestonesByDueDate);
         })
         .catch(() => createFlash({ message: __('There was a problem fetching milestones.') }))
         .finally(() => {

app/controllers/dashboard/milestones_controller.rb

@@ -13,7 +13,7 @@ class Dashboard::MilestonesController < Dashboard::ApplicationController
         @milestones = milestones.page(params[:page])
       end
       format.json do
-        render json: milestones.to_json(only: [:id, :title], methods: :name)
+        render json: milestones.to_json(only: [:id, :title, :due_date], methods: :name)
       end
     end
   end

app/controllers/groups/milestones_controller.rb

@@ -15,7 +15,7 @@ class Groups::MilestonesController < Groups::ApplicationController
         @milestones = milestones.page(params[:page])
       end
       format.json do
-        render json: milestones.to_json(only: [:id, :title], methods: :name)
+        render json: milestones.to_json(only: [:id, :title, :due_date], methods: :name)
       end
     end
   end

app/controllers/projects/milestones_controller.rb

@@ -33,7 +33,7 @@ class Projects::MilestonesController < Projects::ApplicationController
         @milestones = @milestones.page(params[:page])
       end
       format.json do
-        render json: @milestones.to_json(only: [:id, :title], methods: :name)
+        render json: @milestones.to_json(only: [:id, :title, :due_date], methods: :name)
       end
     end
   end

ee/app/assets/javascripts/filtered_search/available_dropdown_mappings.js

@@ -2,6 +2,7 @@ import AvailableDropdownMappingsCE from '~/filtered_search/available_dropdown_ma
 import DropdownAjaxFilter from '~/filtered_search/dropdown_ajax_filter';
 import DropdownNonUser from '~/filtered_search/dropdown_non_user';
 import DropdownUser from '~/filtered_search/dropdown_user';
+import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
 import DropdownWeight from './dropdown_weight';
 
 export default class AvailableDropdownMappings {
@@ -42,6 +43,7 @@ export default class AvailableDropdownMappings {
       extraArguments: {
         endpoint: this.getMilestoneEndpoint(),
         symbol: '%',
+        preprocessing: (milestones) => milestones.sort(sortMilestonesByDueDate),
       },
       element: this.container.querySelector('#js-dropdown-milestone'),
     };

spec/frontend/milestones/milestone_utils_spec.js

+import { useFakeDate } from 'helpers/fake_date';
+import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
+
+describe('sortMilestonesByDueDate', () => {
+  useFakeDate(2021, 6, 22);
+  const mockMilestones = [
+    {
+      id: 2,
+    },
+    {
+      id: 1,
+      dueDate: '2021-01-01',
+    },
+    {
+      id: 4,
+      dueDate: '2021-02-01',
+      expired: true,
+    },
+    {
+      id: 3,
+      dueDate: `2021-08-01`,
+    },
+  ];
+
+  describe('sorts milestones', () => {
+    it('expired milestones are kept at the bottom of the list', () => {
+      const sortedMilestones = [...mockMilestones].sort(sortMilestonesByDueDate);
+
+      expect(sortedMilestones[2].id).toBe(mockMilestones[1].id); // milestone with id `1` is expired
+      expect(sortedMilestones[3].id).toBe(mockMilestones[2].id); // milestone with id `4` is expired
+    });
+
+    it('milestones with closest due date are kept at the top of the list', () => {
+      const sortedMilestones = [...mockMilestones].sort(sortMilestonesByDueDate);
+
+      // milestone with id `3` & 2021-08-01 is closest to current date i.e. 2021-07-22
+      expect(sortedMilestones[0].id).toBe(mockMilestones[3].id);
+    });
+
+    it('milestones with no due date are kept between milestones with closest due date and expired milestones', () => {
+      const sortedMilestones = [...mockMilestones].sort(sortMilestonesByDueDate);
+
+      // milestone with id `2` has no due date
+      expect(sortedMilestones[1].id).toBe(mockMilestones[0].id);
+    });
+  });
+});

spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js

@@ -9,6 +9,7 @@ import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
+import { sortMilestonesByDueDate } from '~/milestones/milestone_utils';
 
 import { DEFAULT_MILESTONES } from '~/vue_shared/components/filtered_search_bar/constants';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
@@ -21,6 +22,7 @@ import {
 } from '../mock_data';
 
 jest.mock('~/flash');
+jest.mock('~/milestones/milestone_utils');
 
 const defaultStubs = {
   Portal: true,
@@ -112,6 +114,7 @@ describe('MilestoneToken', () => {
 
         return waitForPromises().then(() => {
           expect(wrapper.vm.milestones).toEqual(mockMilestones);
+          expect(sortMilestonesByDueDate).toHaveBeenCalled();
         });
       });