Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

12 files changed, 295 insertions, 101 deletions

diff --git a/spec/frontend/releases/__snapshots__/util_spec.js.snap b/spec/frontend/releases/__snapshots__/util_spec.js.snap
index 25c108e45bc..f49d3d7b716 100644
--- a/spec/frontend/releases/__snapshots__/util_spec.js.snap
+++ b/spec/frontend/releases/__snapshots__/util_spec.js.snap
@@ -5,9 +5,12 @@ Object {
   "data": Array [
     Object {
       "_links": Object {
+        "closedIssuesUrl": "http://localhost/releases-namespace/releases-project/-/issues?release_tag=v1.1&scope=all&state=closed",
+        "closedMergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=closed",
         "editUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/edit",
-        "issuesUrl": "http://localhost/releases-namespace/releases-project/-/issues?release_tag=v1.1&scope=all&state=opened",
-        "mergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=opened",
+        "mergedMergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=merged",
+        "openedIssuesUrl": "http://localhost/releases-namespace/releases-project/-/issues?release_tag=v1.1&scope=all&state=opened",
+        "openedMergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=opened",
         "self": "http://localhost/releases-namespace/releases-project/-/releases/v1.1",
         "selfUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1",
       },
@@ -15,7 +18,7 @@ Object {
         "count": 8,
         "links": Array [
           Object {
-            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/awesome-app-3",
+            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/awesome-app-3",
             "external": true,
             "id": "gid://gitlab/Releases::Link/13",
             "linkType": "image",
@@ -23,7 +26,7 @@ Object {
             "url": "https://example.com/image",
           },
           Object {
-            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/awesome-app-2",
+            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/awesome-app-2",
             "external": true,
             "id": "gid://gitlab/Releases::Link/12",
             "linkType": "package",
@@ -31,7 +34,7 @@ Object {
             "url": "https://example.com/package",
           },
           Object {
-            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/awesome-app-1",
+            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/awesome-app-1",
             "external": false,
             "id": "gid://gitlab/Releases::Link/11",
             "linkType": "runbook",
@@ -39,7 +42,7 @@ Object {
             "url": "http://localhost/releases-namespace/releases-project/runbook",
           },
           Object {
-            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/linux-amd64",
+            "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/linux-amd64",
             "external": true,
             "id": "gid://gitlab/Releases::Link/10",
             "linkType": "other",
@@ -130,9 +133,12 @@ exports[`releases/util.js convertOneReleaseGraphQLResponse matches snapshot 1`]
 Object {
   "data": Object {
     "_links": Object {
+      "closedIssuesUrl": "http://localhost/releases-namespace/releases-project/-/issues?release_tag=v1.1&scope=all&state=closed",
+      "closedMergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=closed",
       "editUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/edit",
-      "issuesUrl": "http://localhost/releases-namespace/releases-project/-/issues?release_tag=v1.1&scope=all&state=opened",
-      "mergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=opened",
+      "mergedMergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=merged",
+      "openedIssuesUrl": "http://localhost/releases-namespace/releases-project/-/issues?release_tag=v1.1&scope=all&state=opened",
+      "openedMergeRequestsUrl": "http://localhost/releases-namespace/releases-project/-/merge_requests?release_tag=v1.1&scope=all&state=opened",
       "self": "http://localhost/releases-namespace/releases-project/-/releases/v1.1",
       "selfUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1",
     },
@@ -140,7 +146,7 @@ Object {
       "count": 8,
       "links": Array [
         Object {
-          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/awesome-app-3",
+          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/awesome-app-3",
           "external": true,
           "id": "gid://gitlab/Releases::Link/13",
           "linkType": "image",
@@ -148,7 +154,7 @@ Object {
           "url": "https://example.com/image",
         },
         Object {
-          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/awesome-app-2",
+          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/awesome-app-2",
           "external": true,
           "id": "gid://gitlab/Releases::Link/12",
           "linkType": "package",
@@ -156,7 +162,7 @@ Object {
           "url": "https://example.com/package",
         },
         Object {
-          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/awesome-app-1",
+          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/awesome-app-1",
           "external": false,
           "id": "gid://gitlab/Releases::Link/11",
           "linkType": "runbook",
@@ -164,7 +170,7 @@ Object {
           "url": "http://localhost/releases-namespace/releases-project/runbook",
         },
         Object {
-          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/binaries/linux-amd64",
+          "directAssetUrl": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/downloads/binaries/linux-amd64",
           "external": true,
           "id": "gid://gitlab/Releases::Link/10",
           "linkType": "other",
diff --git a/spec/frontend/releases/components/__snapshots__/issuable_stats_spec.js.snap b/spec/frontend/releases/components/__snapshots__/issuable_stats_spec.js.snap
new file mode 100644
index 00000000000..e53ea6b2ec6
--- /dev/null
+++ b/spec/frontend/releases/components/__snapshots__/issuable_stats_spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`~/releases/components/issuable_stats.vue matches snapshot 1`] = `
+"<div class=\\"gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-mr-6 gl-mb-5\\"><span class=\\"gl-mb-2\\">
+    Items
+    <span class=\\"badge badge-muted badge-pill gl-badge sm\\"><!----> 10</span></span>
+  <div class=\\"gl-display-flex\\"><span data-testid=\\"open-stat\\" class=\\"gl-white-space-pre-wrap\\">Open: <a href=\\"path/to/opened/items\\" class=\\"gl-link\\">1</a></span> <span class=\\"gl-mx-2\\">•</span> <span data-testid=\\"merged-stat\\" class=\\"gl-white-space-pre-wrap\\">Merged: <a href=\\"path/to/merged/items\\" class=\\"gl-link\\">7</a></span> <span class=\\"gl-mx-2\\">•</span> <span data-testid=\\"closed-stat\\" class=\\"gl-white-space-pre-wrap\\">Closed: <a href=\\"path/to/closed/items\\" class=\\"gl-link\\">2</a></span></div>
+</div>"
+`;
diff --git a/spec/frontend/releases/components/app_edit_new_spec.js b/spec/frontend/releases/components/app_edit_new_spec.js
index d92bdc3b99a..1d409b5b590 100644
--- a/spec/frontend/releases/components/app_edit_new_spec.js
+++ b/spec/frontend/releases/components/app_edit_new_spec.js
@@ -24,9 +24,10 @@ describe('Release edit/new component', () => {
     state = {
       release,
       markdownDocsPath: 'path/to/markdown/docs',
-      updateReleaseApiDocsPath: 'path/to/update/release/api/docs',
       releasesPagePath: 'path/to/releases/page',
       projectId: '8',
+      groupId: '42',
+      groupMilestonesAvailable: true,
     };
 
     actions = {
diff --git a/spec/frontend/releases/components/issuable_stats_spec.js b/spec/frontend/releases/components/issuable_stats_spec.js
new file mode 100644
index 00000000000..d8211ec2adc
--- /dev/null
+++ b/spec/frontend/releases/components/issuable_stats_spec.js
@@ -0,0 +1,114 @@
+import { GlLink } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { trimText } from 'helpers/text_helper';
+import IssuableStats from '~/releases/components/issuable_stats.vue';
+
+describe('~/releases/components/issuable_stats.vue', () => {
+  let wrapper;
+  let defaultProps;
+
+  const createComponent = propUpdates => {
+    wrapper = mount(IssuableStats, {
+      propsData: {
+        ...defaultProps,
+        ...propUpdates,
+      },
+    });
+  };
+
+  const findOpenStatLink = () => wrapper.find('[data-testid="open-stat"]').find(GlLink);
+  const findMergedStatLink = () => wrapper.find('[data-testid="merged-stat"]').find(GlLink);
+  const findClosedStatLink = () => wrapper.find('[data-testid="closed-stat"]').find(GlLink);
+
+  beforeEach(() => {
+    defaultProps = {
+      label: 'Items',
+      total: 10,
+      closed: 2,
+      merged: 7,
+      openedPath: 'path/to/opened/items',
+      closedPath: 'path/to/closed/items',
+      mergedPath: 'path/to/merged/items',
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('matches snapshot', () => {
+    createComponent();
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe('when only total and closed counts are provided', () => {
+    beforeEach(() => {
+      createComponent({ merged: undefined, mergedPath: undefined });
+    });
+
+    it('renders a label with the total count; also, the opened count and the closed count', () => {
+      expect(trimText(wrapper.text())).toMatchInterpolatedText('Items 10 Open: 8 • Closed: 2');
+    });
+  });
+
+  describe('when only total, merged, and closed counts are provided', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders a label with the total count; also, the opened count, the merged count, and the closed count', () => {
+      expect(wrapper.text()).toMatchInterpolatedText('Items 10 Open: 1 • Merged: 7 • Closed: 2');
+    });
+  });
+
+  describe('when path parameters are provided', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the "open" stat as a link', () => {
+      const link = findOpenStatLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(defaultProps.openedPath);
+    });
+
+    it('renders the "merged" stat as a link', () => {
+      const link = findMergedStatLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(defaultProps.mergedPath);
+    });
+
+    it('renders the "closed" stat as a link', () => {
+      const link = findClosedStatLink();
+
+      expect(link.exists()).toBe(true);
+      expect(link.attributes('href')).toBe(defaultProps.closedPath);
+    });
+  });
+
+  describe('when path parameters are not provided', () => {
+    beforeEach(() => {
+      createComponent({
+        openedPath: undefined,
+        closedPath: undefined,
+        mergedPath: undefined,
+      });
+    });
+
+    it('does not render the "open" stat as a link', () => {
+      expect(findOpenStatLink().exists()).toBe(false);
+    });
+
+    it('does not render the "merged" stat as a link', () => {
+      expect(findMergedStatLink().exists()).toBe(false);
+    });
+
+    it('does not render the "closed" stat as a link', () => {
+      expect(findClosedStatLink().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/releases/components/release_block_milestone_info_spec.js b/spec/frontend/releases/components/release_block_milestone_info_spec.js
index 45f4eaa01a9..bb34693c757 100644
--- a/spec/frontend/releases/components/release_block_milestone_info_spec.js
+++ b/spec/frontend/releases/components/release_block_milestone_info_spec.js
@@ -31,7 +31,8 @@ describe('Release block milestone info', () => {
 
   const milestoneProgressBarContainer = () => wrapper.find('.js-milestone-progress-bar-container');
   const milestoneListContainer = () => wrapper.find('.js-milestone-list-container');
-  const issuesContainer = () => wrapper.find('.js-issues-container');
+  const issuesContainer = () => wrapper.find('[data-testid="issue-stats"]');
+  const mergeRequestsContainer = () => wrapper.find('[data-testid="merge-request-stats"]');
 
   describe('with default props', () => {
     beforeEach(() => factory({ milestones }));
@@ -188,66 +189,32 @@ describe('Release block milestone info', () => {
     expectAllZeros();
   });
 
-  describe('Issue links', () => {
-    const findOpenIssuesLink = () => wrapper.find({ ref: 'openIssuesLink' });
-    const findOpenIssuesText = () => wrapper.find({ ref: 'openIssuesText' });
-    const findClosedIssuesLink = () => wrapper.find({ ref: 'closedIssuesLink' });
-    const findClosedIssuesText = () => wrapper.find({ ref: 'closedIssuesText' });
-
-    describe('when openIssuePath is provided', () => {
-      const openIssuesPath = '/path/to/open/issues';
-
-      beforeEach(() => {
-        return factory({ milestones, openIssuesPath });
-      });
-
-      it('renders the open issues as a link', () => {
-        expect(findOpenIssuesLink().exists()).toBe(true);
-        expect(findOpenIssuesText().exists()).toBe(false);
-      });
-
-      it('renders the open issues link with the correct href', () => {
-        expect(findOpenIssuesLink().attributes().href).toBe(openIssuesPath);
-      });
-    });
-
-    describe('when openIssuePath is not provided', () => {
-      beforeEach(() => {
-        return factory({ milestones });
-      });
+  describe('if the API response is missing the "mr_stats" property', () => {
+    beforeEach(() => factory({ milestones }));
 
-      it('renders the open issues as plain text', () => {
-        expect(findOpenIssuesLink().exists()).toBe(false);
-        expect(findOpenIssuesText().exists()).toBe(true);
-      });
+    it('does not render merge request stats', () => {
+      expect(mergeRequestsContainer().exists()).toBe(false);
     });
+  });
 
-    describe('when closedIssuePath is provided', () => {
-      const closedIssuesPath = '/path/to/closed/issues';
-
-      beforeEach(() => {
-        return factory({ milestones, closedIssuesPath });
-      });
-
-      it('renders the closed issues as a link', () => {
-        expect(findClosedIssuesLink().exists()).toBe(true);
-        expect(findClosedIssuesText().exists()).toBe(false);
-      });
+  describe('if the API response includes the "mr_stats" property', () => {
+    beforeEach(() => {
+      milestones = milestones.map(m => ({
+        ...m,
+        mrStats: {
+          total: 15,
+          merged: 12,
+          closed: 1,
+        },
+      }));
 
-      it('renders the closed issues link with the correct href', () => {
-        expect(findClosedIssuesLink().attributes().href).toBe(closedIssuesPath);
-      });
+      return factory({ milestones });
     });
 
-    describe('when closedIssuePath is not provided', () => {
-      beforeEach(() => {
-        return factory({ milestones });
-      });
-
-      it('renders the closed issues as plain text', () => {
-        expect(findClosedIssuesLink().exists()).toBe(false);
-        expect(findClosedIssuesText().exists()).toBe(true);
-      });
+    it('renders merge request stats', () => {
+      expect(trimText(mergeRequestsContainer().text())).toBe(
+        'Merge Requests 30 Open: 4 • Merged: 24 • Closed: 2',
+      );
     });
   });
 });
diff --git a/spec/frontend/releases/components/releases_sort_spec.js b/spec/frontend/releases/components/releases_sort_spec.js
new file mode 100644
index 00000000000..c089ee3cc38
--- /dev/null
+++ b/spec/frontend/releases/components/releases_sort_spec.js
@@ -0,0 +1,66 @@
+import Vuex from 'vuex';
+import { GlSorting, GlSortingItem } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import ReleasesSort from '~/releases/components/releases_sort.vue';
+import createStore from '~/releases/stores';
+import createListModule from '~/releases/stores/modules/list';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('~/releases/components/releases_sort.vue', () => {
+  let wrapper;
+  let store;
+  let listModule;
+  const projectId = 8;
+
+  const createComponent = () => {
+    listModule = createListModule({ projectId });
+
+    store = createStore({
+      modules: {
+        list: listModule,
+      },
+    });
+
+    store.dispatch = jest.fn();
+
+    wrapper = shallowMount(ReleasesSort, {
+      store,
+      stubs: {
+        GlSortingItem,
+      },
+      localVue,
+    });
+  };
+
+  const findReleasesSorting = () => wrapper.find(GlSorting);
+  const findSortingItems = () => wrapper.findAll(GlSortingItem);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('has all the sortable items', () => {
+    expect(findSortingItems()).toHaveLength(wrapper.vm.sortOptions.length);
+  });
+
+  it('on sort change set sorting in vuex and emit event', () => {
+    findReleasesSorting().vm.$emit('sortDirectionChange');
+    expect(store.dispatch).toHaveBeenCalledWith('list/setSorting', { sort: 'asc' });
+    expect(wrapper.emitted('sort:changed')).toBeTruthy();
+  });
+
+  it('on sort item click set sorting and emit event', () => {
+    const item = findSortingItems().at(0);
+    const { orderBy } = wrapper.vm.sortOptions[0];
+    item.vm.$emit('click');
+    expect(store.dispatch).toHaveBeenCalledWith('list/setSorting', { orderBy });
+    expect(wrapper.emitted('sort:changed')).toBeTruthy();
+  });
+});
diff --git a/spec/frontend/releases/components/tag_field_exsting_spec.js b/spec/frontend/releases/components/tag_field_exsting_spec.js
index 70a195556df..d4110b57776 100644
--- a/spec/frontend/releases/components/tag_field_exsting_spec.js
+++ b/spec/frontend/releases/components/tag_field_exsting_spec.js
@@ -6,7 +6,6 @@ import createStore from '~/releases/stores';
 import createDetailModule from '~/releases/stores/modules/detail';
 
 const TEST_TAG_NAME = 'test-tag-name';
-const TEST_DOCS_PATH = '/help/test/docs/path';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -24,21 +23,11 @@ describe('releases/components/tag_field_existing', () => {
 
   const findInput = () => wrapper.find(GlFormInput);
   const findHelp = () => wrapper.find('[data-testid="tag-name-help"]');
-  const findHelpLink = () => {
-    const link = findHelp().find('a');
-
-    return {
-      text: link.text(),
-      href: link.attributes('href'),
-      target: link.attributes('target'),
-    };
-  };
 
   beforeEach(() => {
     store = createStore({
       modules: {
         detail: createDetailModule({
-          updateReleaseApiDocsPath: TEST_DOCS_PATH,
           tagName: TEST_TAG_NAME,
         }),
       },
@@ -68,16 +57,8 @@ describe('releases/components/tag_field_existing', () => {
       createComponent(mount);
 
       expect(findHelp().text()).toMatchInterpolatedText(
-        'Changing a Release tag is only supported via Releases API. More information',
+        "The tag name can't be changed for an existing release.",
       );
-
-      const helpLink = findHelpLink();
-
-      expect(helpLink).toEqual({
-        text: 'More information',
-        href: TEST_DOCS_PATH,
-        target: '_blank',
-      });
     });
   });
 });
diff --git a/spec/frontend/releases/stores/modules/detail/actions_spec.js b/spec/frontend/releases/stores/modules/detail/actions_spec.js
index d38f6766d4e..abd0db6a589 100644
--- a/spec/frontend/releases/stores/modules/detail/actions_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/actions_spec.js
@@ -47,7 +47,6 @@ describe('Release detail actions', () => {
         releasesPagePath: 'path/to/releases/page',
         markdownDocsPath: 'path/to/markdown/docs',
         markdownPreviewPath: 'path/to/markdown/preview',
-        updateReleaseApiDocsPath: 'path/to/api/docs',
       }),
       ...getters,
       ...rootState,
diff --git a/spec/frontend/releases/stores/modules/detail/mutations_spec.js b/spec/frontend/releases/stores/modules/detail/mutations_spec.js
index f3e84262754..88eddc4019c 100644
--- a/spec/frontend/releases/stores/modules/detail/mutations_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/mutations_spec.js
@@ -18,7 +18,6 @@ describe('Release detail mutations', () => {
       releasesPagePath: 'path/to/releases/page',
       markdownDocsPath: 'path/to/markdown/docs',
       markdownPreviewPath: 'path/to/markdown/preview',
-      updateReleaseApiDocsPath: 'path/to/api/docs',
     });
     release = convertObjectPropsToCamelCase(originalRelease);
   });
diff --git a/spec/frontend/releases/stores/modules/list/actions_spec.js b/spec/frontend/releases/stores/modules/list/actions_spec.js
index 4e235e1d00f..35551b77dc4 100644
--- a/spec/frontend/releases/stores/modules/list/actions_spec.js
+++ b/spec/frontend/releases/stores/modules/list/actions_spec.js
@@ -6,6 +6,7 @@ import {
   fetchReleasesGraphQl,
   fetchReleasesRest,
   receiveReleasesError,
+  setSorting,
 } from '~/releases/stores/modules/list/actions';
 import createState from '~/releases/stores/modules/list/state';
 import * as types from '~/releases/stores/modules/list/mutation_types';
@@ -114,7 +115,7 @@ describe('Releases State actions', () => {
         it('makes a GraphQl query with a first variable', () => {
           expect(gqClient.query).toHaveBeenCalledWith({
             query: allReleasesQuery,
-            variables: { fullPath: projectPath, first: PAGE_SIZE },
+            variables: { fullPath: projectPath, first: PAGE_SIZE, sort: 'RELEASED_AT_DESC' },
           });
         });
       });
@@ -127,7 +128,7 @@ describe('Releases State actions', () => {
         it('makes a GraphQl query with last and before variables', () => {
           expect(gqClient.query).toHaveBeenCalledWith({
             query: allReleasesQuery,
-            variables: { fullPath: projectPath, last: PAGE_SIZE, before },
+            variables: { fullPath: projectPath, last: PAGE_SIZE, before, sort: 'RELEASED_AT_DESC' },
           });
         });
       });
@@ -140,7 +141,7 @@ describe('Releases State actions', () => {
         it('makes a GraphQl query with first and after variables', () => {
           expect(gqClient.query).toHaveBeenCalledWith({
             query: allReleasesQuery,
-            variables: { fullPath: projectPath, first: PAGE_SIZE, after },
+            variables: { fullPath: projectPath, first: PAGE_SIZE, after, sort: 'RELEASED_AT_DESC' },
           });
         });
       });
@@ -156,6 +157,29 @@ describe('Releases State actions', () => {
           );
         });
       });
+
+      describe('when the sort parameters are provided', () => {
+        it.each`
+          sort      | orderBy          | ReleaseSort
+          ${'asc'}  | ${'released_at'} | ${'RELEASED_AT_ASC'}
+          ${'desc'} | ${'released_at'} | ${'RELEASED_AT_DESC'}
+          ${'asc'}  | ${'created_at'}  | ${'CREATED_ASC'}
+          ${'desc'} | ${'created_at'}  | ${'CREATED_DESC'}
+        `(
+          'correctly sets $ReleaseSort based on $sort and $orderBy',
+          ({ sort, orderBy, ReleaseSort }) => {
+            mockedState.sorting.sort = sort;
+            mockedState.sorting.orderBy = orderBy;
+
+            fetchReleasesGraphQl(vuexParams, { before: undefined, after: undefined });
+
+            expect(gqClient.query).toHaveBeenCalledWith({
+              query: allReleasesQuery,
+              variables: { fullPath: projectPath, first: PAGE_SIZE, sort: ReleaseSort },
+            });
+          },
+        );
+      });
     });
 
     describe('when the request is successful', () => {
@@ -230,7 +254,11 @@ describe('Releases State actions', () => {
         });
 
         it('makes a REST query with a page query parameter', () => {
-          expect(api.releases).toHaveBeenCalledWith(projectId, { page });
+          expect(api.releases).toHaveBeenCalledWith(projectId, {
+            page,
+            order_by: 'released_at',
+            sort: 'desc',
+          });
         });
       });
     });
@@ -302,4 +330,16 @@ describe('Releases State actions', () => {
       );
     });
   });
+
+  describe('setSorting', () => {
+    it('should commit SET_SORTING', () => {
+      return testAction(
+        setSorting,
+        { orderBy: 'released_at', sort: 'asc' },
+        null,
+        [{ type: types.SET_SORTING, payload: { orderBy: 'released_at', sort: 'asc' } }],
+        [],
+      );
+    });
+  });
 });
diff --git a/spec/frontend/releases/stores/modules/list/mutations_spec.js b/spec/frontend/releases/stores/modules/list/mutations_spec.js
index 521418cbddb..78071573072 100644
--- a/spec/frontend/releases/stores/modules/list/mutations_spec.js
+++ b/spec/frontend/releases/stores/modules/list/mutations_spec.js
@@ -80,4 +80,16 @@ describe('Releases Store Mutations', () => {
       expect(stateCopy.graphQlPageInfo).toEqual({});
     });
   });
+
+  describe('SET_SORTING', () => {
+    it('should merge the sorting object with sort value', () => {
+      mutations[types.SET_SORTING](stateCopy, { sort: 'asc' });
+      expect(stateCopy.sorting).toEqual({ ...stateCopy.sorting, sort: 'asc' });
+    });
+
+    it('should merge the sorting object with order_by value', () => {
+      mutations[types.SET_SORTING](stateCopy, { orderBy: 'created_at' });
+      expect(stateCopy.sorting).toEqual({ ...stateCopy.sorting, orderBy: 'created_at' });
+    });
+  });
 });
diff --git a/spec/frontend/releases/util_spec.js b/spec/frontend/releases/util_spec.js
index e7b7766c0d0..fd00a524628 100644
--- a/spec/frontend/releases/util_spec.js
+++ b/spec/frontend/releases/util_spec.js
@@ -22,7 +22,7 @@ describe('releases/util.js', () => {
         tagName: 'tag-name',
         name: 'Release name',
         description: 'Release description',
-        milestones: [{ id: 1, title: '13.2' }, { id: 2, title: '13.3' }],
+        milestones: ['13.2', '13.3'],
         assets: {
           links: [{ url: 'https://gitlab.example.com/link', linkType: 'other' }],
         },
@@ -74,14 +74,14 @@ describe('releases/util.js', () => {
       });
     });
 
-    describe('when release.milestones is falsy', () => {
-      it('includes a "milestone" property in the returned result as an empty array', () => {
-        const release = {};
-
-        const expectedJson = {
-          milestones: [],
+    describe('when milestones contains full milestone objects', () => {
+      it('converts the milestone objects into titles', () => {
+        const release = {
+          milestones: [{ title: '13.2' }, { title: '13.3' }, '13.4'],
         };
 
+        const expectedJson = { milestones: ['13.2', '13.3', '13.4'] };
+
         expect(releaseToApiJson(release)).toMatchObject(expectedJson);
       });
     });