Add latest changes from gitlab-org/gitlab@master

2 files changed, 74 insertions, 0 deletions

diff --git a/app/assets/javascripts/releases/components/app_index_apollo_client.vue b/app/assets/javascripts/releases/components/app_index_apollo_client.vue
index be4d7d8543c..b915ec9c98f 100644
--- a/app/assets/javascripts/releases/components/app_index_apollo_client.vue
+++ b/app/assets/javascripts/releases/components/app_index_apollo_client.vue
@@ -2,6 +2,7 @@
 import { GlButton } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
+import { scrollUp } from '~/lib/utils/scroll_utils';
 import { __ } from '~/locale';
 import { PAGE_SIZE } from '~/releases/constants';
 import allReleasesQuery from '~/releases/graphql/queries/all_releases.query.graphql';
@@ -9,6 +10,7 @@ import { convertAllReleasesGraphQLResponse } from '~/releases/util';
 import ReleaseBlock from './release_block.vue';
 import ReleaseSkeletonLoader from './release_skeleton_loader.vue';
 import ReleasesEmptyState from './releases_empty_state.vue';
+import ReleasesPaginationApolloClient from './releases_pagination_apollo_client.vue';
 
 export default {
   name: 'ReleasesIndexApolloClientApp',
@@ -17,6 +19,7 @@ export default {
     ReleaseBlock,
     ReleaseSkeletonLoader,
     ReleasesEmptyState,
+    ReleasesPaginationApolloClient,
   },
   inject: {
     projectPath: {
@@ -85,6 +88,16 @@ export default {
 
       return convertAllReleasesGraphQLResponse(this.graphqlResponse).data;
     },
+    pageInfo() {
+      if (!this.graphqlResponse || this.hasError) {
+        return {
+          hasPreviousPage: false,
+          hasNextPage: false,
+        };
+      }
+
+      return this.graphqlResponse.data.project.releases.pageInfo;
+    },
     shouldRenderEmptyState() {
       return !this.releases.length && !this.hasError && !this.isLoading;
     },
@@ -94,6 +107,13 @@ export default {
     shouldRenderLoadingIndicator() {
       return this.isLoading && !this.hasError;
     },
+    shouldRenderPagination() {
+      return (
+        !this.isLoading &&
+        !this.hasError &&
+        (this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage)
+      );
+    },
   },
   created() {
     this.updateQueryParamsFromUrl();
@@ -108,6 +128,16 @@ export default {
       this.cursors.before = getParameterByName('before');
       this.cursors.after = getParameterByName('after');
     },
+    onPaginationButtonPress() {
+      this.updateQueryParamsFromUrl();
+
+      // In some cases, Apollo Client is able to pull its results from the cache instead of making
+      // a new network request. In these cases, the page's content gets swapped out immediately without
+      // changing the page's scroll, leaving the user looking at the bottom of the new page.
+      // To make the experience consistent, regardless of how the data is sourced, we manually
+      // scroll to the top of the page every time a pagination button is pressed.
+      scrollUp();
+    },
   },
   i18n: {
     newRelease: __('New release'),
@@ -140,6 +170,13 @@ export default {
         :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
       />
     </div>
+
+    <releases-pagination-apollo-client
+      v-if="shouldRenderPagination"
+      :page-info="pageInfo"
+      @prev="onPaginationButtonPress"
+      @next="onPaginationButtonPress"
+    />
   </div>
 </template>
 <style>
diff --git a/app/assets/javascripts/releases/components/releases_pagination_apollo_client.vue b/app/assets/javascripts/releases/components/releases_pagination_apollo_client.vue
new file mode 100644
index 00000000000..73339677a4b
--- /dev/null
+++ b/app/assets/javascripts/releases/components/releases_pagination_apollo_client.vue
@@ -0,0 +1,37 @@
+<script>
+import { GlKeysetPagination } from '@gitlab/ui';
+import { isBoolean } from 'lodash';
+import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
+
+export default {
+  name: 'ReleasesPaginationApolloClient',
+  components: { GlKeysetPagination },
+  props: {
+    pageInfo: {
+      type: Object,
+      required: true,
+      validator: (info) => isBoolean(info.hasPreviousPage) && isBoolean(info.hasNextPage),
+    },
+  },
+  methods: {
+    onPrev(before) {
+      historyPushState(buildUrlWithCurrentLocation(`?before=${before}`));
+    },
+    onNext(after) {
+      historyPushState(buildUrlWithCurrentLocation(`?after=${after}`));
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-justify-content-center">
+    <gl-keyset-pagination
+      v-bind="pageInfo"
+      :prev-text="__('Prev')"
+      :next-text="__('Next')"
+      v-on="$listeners"
+      @prev="onPrev($event)"
+      @next="onNext($event)"
+    />
+  </div>
+</template>