Add latest changes from gitlab-org/gitlab@master

4 files changed, 31 insertions, 9 deletions

diff --git a/app/assets/javascripts/releases/list/components/app.vue b/app/assets/javascripts/releases/list/components/app.vue
index 5a06c4fec58..a414b3ccd4e 100644
--- a/app/assets/javascripts/releases/list/components/app.vue
+++ b/app/assets/javascripts/releases/list/components/app.vue
@@ -1,6 +1,12 @@
 <script>
 import { mapState, mapActions } from 'vuex';
 import { GlSkeletonLoading, GlEmptyState } from '@gitlab/ui';
+import {
+  getParameterByName,
+  historyPushState,
+  buildUrlWithCurrentLocation,
+} from '~/lib/utils/common_utils';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import ReleaseBlock from './release_block.vue';
 
 export default {
@@ -9,6 +15,7 @@ export default {
     GlSkeletonLoading,
     GlEmptyState,
     ReleaseBlock,
+    TablePagination,
   },
   props: {
     projectId: {
@@ -25,7 +32,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isLoading', 'releases', 'hasError']),
+    ...mapState(['isLoading', 'releases', 'hasError', 'pageInfo']),
     shouldRenderEmptyState() {
       return !this.releases.length && !this.hasError && !this.isLoading;
     },
@@ -34,10 +41,17 @@ export default {
     },
   },
   created() {
-    this.fetchReleases(this.projectId);
+    this.fetchReleases({
+      page: getParameterByName('page'),
+      projectId: this.projectId,
+    });
   },
   methods: {
     ...mapActions(['fetchReleases']),
+    onChangePage(page) {
+      historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
+      this.fetchReleases({ page, projectId: this.projectId });
+    },
   },
 };
 </script>
@@ -67,6 +81,8 @@ export default {
         :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
       />
     </div>
+
+    <table-pagination v-if="!isLoading" :change="onChangePage" :page-info="pageInfo" />
   </div>
 </template>
 <style>
diff --git a/app/assets/javascripts/releases/list/store/actions.js b/app/assets/javascripts/releases/list/store/actions.js
index e0a922d5ef6..b15fb69226f 100644
--- a/app/assets/javascripts/releases/list/store/actions.js
+++ b/app/assets/javascripts/releases/list/store/actions.js
@@ -2,6 +2,7 @@ import * as types from './mutation_types';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import api from '~/api';
+import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 
 /**
  * Commits a mutation to update the state while the main endpoint is being requested.
@@ -16,17 +17,19 @@ export const requestReleases = ({ commit }) => commit(types.REQUEST_RELEASES);
  *
  * @param {String} projectId
  */
-export const fetchReleases = ({ dispatch }, projectId) => {
+export const fetchReleases = ({ dispatch }, { page = '1', projectId }) => {
   dispatch('requestReleases');
 
   api
-    .releases(projectId)
-    .then(({ data }) => dispatch('receiveReleasesSuccess', data))
+    .releases(projectId, { page })
+    .then(response => dispatch('receiveReleasesSuccess', response))
     .catch(() => dispatch('receiveReleasesError'));
 };
 
-export const receiveReleasesSuccess = ({ commit }, data) =>
-  commit(types.RECEIVE_RELEASES_SUCCESS, data);
+export const receiveReleasesSuccess = ({ commit }, { data, headers }) => {
+  const pageInfo = parseIntPagination(normalizeHeaders(headers));
+  commit(types.RECEIVE_RELEASES_SUCCESS, { data, pageInfo });
+};
 
 export const receiveReleasesError = ({ commit }) => {
   commit(types.RECEIVE_RELEASES_ERROR);
diff --git a/app/assets/javascripts/releases/list/store/mutations.js b/app/assets/javascripts/releases/list/store/mutations.js
index b97dc6cb0ab..99fc096264a 100644
--- a/app/assets/javascripts/releases/list/store/mutations.js
+++ b/app/assets/javascripts/releases/list/store/mutations.js
@@ -13,13 +13,15 @@ export default {
    * Sets isLoading to false.
    * Sets hasError to false.
    * Sets the received data
+   * Sets the received pagination information
    * @param {Object} state
-   * @param {Object} data
+   * @param {Object} resp
    */
-  [types.RECEIVE_RELEASES_SUCCESS](state, data) {
+  [types.RECEIVE_RELEASES_SUCCESS](state, { data, pageInfo }) {
     state.hasError = false;
     state.isLoading = false;
     state.releases = data;
+    state.pageInfo = pageInfo;
   },
 
   /**
diff --git a/app/assets/javascripts/releases/list/store/state.js b/app/assets/javascripts/releases/list/store/state.js
index bf25e651c99..c251f56c9c5 100644
--- a/app/assets/javascripts/releases/list/store/state.js
+++ b/app/assets/javascripts/releases/list/store/state.js
@@ -2,4 +2,5 @@ export default () => ({
   isLoading: false,
   hasError: false,
   releases: [],
+  pageInfo: {},
 });