Ensure Milestones Are Displayed With Few Results

In the event there are less than a full page's worth of results, the
X-Total header might be missing from the HTTP response. In this case, we
can fall back to the length of the list returned by the API.

Changelog: fixed

app/assets/javascripts/milestones/stores/mutations.js

@@ -38,7 +38,7 @@ export default {
   [types.RECEIVE_PROJECT_MILESTONES_SUCCESS](state, response) {
     state.matches.projectMilestones = {
       list: response.data.map(({ title }) => ({ title })),
-      totalCount: parseInt(response.headers['x-total'], 10),
+      totalCount: parseInt(response.headers['x-total'], 10) || response.data.length,
       error: null,
     };
   },
@@ -52,7 +52,7 @@ export default {
   [types.RECEIVE_GROUP_MILESTONES_SUCCESS](state, response) {
     state.matches.groupMilestones = {
       list: response.data.map(({ title }) => ({ title })),
-      totalCount: parseInt(response.headers['x-total'], 10),
+      totalCount: parseInt(response.headers['x-total'], 10) || response.data.length,
       error: null,
     };
   },

spec/frontend/milestones/stores/mutations_spec.js

@@ -174,6 +174,35 @@ describe('Milestones combobox Vuex store mutations', () => {
       });
     });
 
+    it('falls back to the length of list if pagination headers are missing', () => {
+      const response = {
+        data: [
+          {
+            title: 'v0.1',
+          },
+          {
+            title: 'v0.2',
+          },
+        ],
+        headers: {},
+      };
+
+      mutations[types.RECEIVE_PROJECT_MILESTONES_SUCCESS](state, response);
+
+      expect(state.matches.projectMilestones).toEqual({
+        list: [
+          {
+            title: 'v0.1',
+          },
+          {
+            title: 'v0.2',
+          },
+        ],
+        error: null,
+        totalCount: 2,
+      });
+    });
+
     describe(`${types.RECEIVE_PROJECT_MILESTONES_ERROR}`, () => {
       it('updates state.matches.projectMilestones to an empty state with the error object', () => {
         const error = new Error('Something went wrong!');
@@ -227,6 +256,35 @@ describe('Milestones combobox Vuex store mutations', () => {
       });
     });
 
+    it('falls back to the length of data received if pagination headers are missing', () => {
+      const response = {
+        data: [
+          {
+            title: 'group-0.1',
+          },
+          {
+            title: 'group-0.2',
+          },
+        ],
+        headers: {},
+      };
+
+      mutations[types.RECEIVE_GROUP_MILESTONES_SUCCESS](state, response);
+
+      expect(state.matches.groupMilestones).toEqual({
+        list: [
+          {
+            title: 'group-0.1',
+          },
+          {
+            title: 'group-0.2',
+          },
+        ],
+        error: null,
+        totalCount: 2,
+      });
+    });
+
     describe(`${types.RECEIVE_GROUP_MILESTONES_ERROR}`, () => {
       it('updates state.matches.groupMilestones to an empty state with the error object', () => {
         const error = new Error('Something went wrong!');