1 files changed, 61 insertions, 71 deletions

diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index d5cab77f26c..dbf7717b248 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -9,7 +9,7 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import { toNumber } from 'lodash';
+import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
 import createFlash from '~/flash';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
@@ -17,13 +17,12 @@ import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
 import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants';
 import {
   API_PARAM,
-  apiSortParams,
   CREATED_DESC,
   i18n,
+  initialPageParams,
   MAX_LIST_SIZE,
   PAGE_SIZE,
   PARAM_DUE_DATE,
-  PARAM_PAGE,
   PARAM_SORT,
   PARAM_STATE,
   RELATIVE_POSITION_DESC,
@@ -49,7 +48,8 @@ import {
   getSortOptions,
 } from '~/issues_list/utils';
 import axios from '~/lib/utils/axios_utils';
-import { convertObjectPropsToCamelCase, getParameterByName } from '~/lib/utils/common_utils';
+import { getParameterByName } from '~/lib/utils/common_utils';
+import { scrollUp } from '~/lib/utils/scroll_utils';
 import {
   DEFAULT_NONE_ANY,
   OPERATOR_IS_ONLY,
@@ -107,9 +107,6 @@ export default {
     emptyStateSvgPath: {
       default: '',
     },
-    endpoint: {
-      default: '',
-    },
     exportCsvPath: {
       default: '',
     },
@@ -173,15 +170,43 @@ export default {
       dueDateFilter: getDueDateValue(getParameterByName(PARAM_DUE_DATE)),
       exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
       filterTokens: getFilterTokens(window.location.search),
-      isLoading: false,
       issues: [],
-      page: toNumber(getParameterByName(PARAM_PAGE)) || 1,
+      pageInfo: {},
+      pageParams: initialPageParams,
       showBulkEditSidebar: false,
       sortKey: getSortKey(getParameterByName(PARAM_SORT)) || defaultSortKey,
       state: state || IssuableStates.Opened,
       totalIssues: 0,
     };
   },
+  apollo: {
+    issues: {
+      query: getIssuesQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+          search: this.searchQuery,
+          sort: this.sortKey,
+          state: this.state,
+          ...this.pageParams,
+          ...this.apiFilterParams,
+        };
+      },
+      update: ({ project }) => project.issues.nodes,
+      result({ data }) {
+        this.pageInfo = data.project.issues.pageInfo;
+        this.totalIssues = data.project.issues.count;
+        this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
+      },
+      error(error) {
+        createFlash({ message: this.$options.i18n.errorFetchingIssues, captureError: true, error });
+      },
+      skip() {
+        return !this.hasProjectIssues;
+      },
+      debounce: 200,
+    },
+  },
   computed: {
     hasSearch() {
       return this.searchQuery || Object.keys(this.urlFilterParams).length;
@@ -348,7 +373,6 @@ export default {
 
       return {
         due_date: this.dueDateFilter,
-        page: this.page,
         search: this.searchQuery,
         state: this.state,
         ...urlSortParams[this.sortKey],
@@ -361,7 +385,6 @@ export default {
   },
   mounted() {
     eventHub.$on('issuables:toggleBulkEdit', this.toggleBulkEditSidebar);
-    this.fetchIssues();
   },
   beforeDestroy() {
     eventHub.$off('issuables:toggleBulkEdit', this.toggleBulkEditSidebar);
@@ -406,54 +429,11 @@ export default {
     fetchUsers(search) {
       return axios.get(this.autocompleteUsersPath, { params: { search } });
     },
-    fetchIssues() {
-      if (!this.hasProjectIssues) {
-        return undefined;
-      }
-
-      this.isLoading = true;
-
-      const filterParams = {
-        ...this.apiFilterParams,
-      };
-
-      if (filterParams.epic_id) {
-        filterParams.epic_id = filterParams.epic_id.split('::&').pop();
-      } else if (filterParams['not[epic_id]']) {
-        filterParams['not[epic_id]'] = filterParams['not[epic_id]'].split('::&').pop();
-      }
-
-      return axios
-        .get(this.endpoint, {
-          params: {
-            due_date: this.dueDateFilter,
-            page: this.page,
-            per_page: PAGE_SIZE,
-            search: this.searchQuery,
-            state: this.state,
-            with_labels_details: true,
-            ...apiSortParams[this.sortKey],
-            ...filterParams,
-          },
-        })
-        .then(({ data, headers }) => {
-          this.page = Number(headers['x-page']);
-          this.totalIssues = Number(headers['x-total']);
-          this.issues = data.map((issue) => convertObjectPropsToCamelCase(issue, { deep: true }));
-          this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
-        })
-        .catch(() => {
-          createFlash({ message: this.$options.i18n.errorFetchingIssues });
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
-    },
     getExportCsvPathWithQuery() {
       return `${this.exportCsvPath}${window.location.search}`;
     },
     getStatus(issue) {
-      if (issue.closedAt && issue.movedToId) {
+      if (issue.closedAt && issue.moved) {
         return this.$options.i18n.closedMoved;
       }
       if (issue.closedAt) {
@@ -484,18 +464,26 @@ export default {
     },
     handleClickTab(state) {
       if (this.state !== state) {
-        this.page = 1;
+        this.pageParams = initialPageParams;
       }
       this.state = state;
-      this.fetchIssues();
     },
     handleFilter(filter) {
       this.filterTokens = filter;
-      this.fetchIssues();
     },
-    handlePageChange(page) {
-      this.page = page;
-      this.fetchIssues();
+    handleNextPage() {
+      this.pageParams = {
+        afterCursor: this.pageInfo.endCursor,
+        firstPageSize: PAGE_SIZE,
+      };
+      scrollUp();
+    },
+    handlePreviousPage() {
+      this.pageParams = {
+        beforeCursor: this.pageInfo.startCursor,
+        lastPageSize: PAGE_SIZE,
+      };
+      scrollUp();
     },
     handleReorder({ newIndex, oldIndex }) {
       const issueToMove = this.issues[oldIndex];
@@ -530,9 +518,11 @@ export default {
           createFlash({ message: this.$options.i18n.reorderError });
         });
     },
-    handleSort(value) {
-      this.sortKey = value;
-      this.fetchIssues();
+    handleSort(sortKey) {
+      if (this.sortKey !== sortKey) {
+        this.pageParams = initialPageParams;
+      }
+      this.sortKey = sortKey;
     },
     toggleBulkEditSidebar(showBulkEditSidebar) {
       this.showBulkEditSidebar = showBulkEditSidebar;
@@ -556,18 +546,18 @@ export default {
       :tabs="$options.IssuableListTabs"
       :current-tab="state"
       :tab-counts="tabCounts"
-      :issuables-loading="isLoading"
+      :issuables-loading="$apollo.queries.issues.loading"
       :is-manual-ordering="isManualOrdering"
       :show-bulk-edit-sidebar="showBulkEditSidebar"
       :show-pagination-controls="showPaginationControls"
-      :total-items="totalIssues"
-      :current-page="page"
-      :previous-page="page - 1"
-      :next-page="page + 1"
+      :use-keyset-pagination="true"
+      :has-next-page="pageInfo.hasNextPage"
+      :has-previous-page="pageInfo.hasPreviousPage"
       :url-params="urlParams"
       @click-tab="handleClickTab"
       @filter="handleFilter"
-      @page-change="handlePageChange"
+      @next-page="handleNextPage"
+      @previous-page="handlePreviousPage"
       @reorder="handleReorder"
       @sort="handleSort"
       @update-legacy-bulk-edit="handleUpdateLegacyBulkEdit"
@@ -646,7 +636,7 @@ export default {
         </li>
         <blocking-issues-count
           class="gl-display-none gl-sm-display-block"
-          :blocking-issues-count="issuable.blockingIssuesCount"
+          :blocking-issues-count="issuable.blockedByCount"
           :is-list-item="true"
         />
       </template>