Use smart query for jira issues list

ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue

@@ -10,6 +10,7 @@ import {
   AvailableSortOptions,
   DEFAULT_PAGE_SIZE,
 } from '~/issuable_list/constants';
+import { ISSUES_LIST_FETCH_ERROR } from '../constants';
 import getJiraIssuesQuery from '../graphql/queries/get_jira_issues.query.graphql';
 import JiraIssuesListEmptyState from './jira_issues_list_empty_state.vue';
 
@@ -48,8 +49,6 @@ export default {
     return {
       jiraLogo,
       issues: [],
-      issuesListLoading: false,
-      issuesListLoadFailed: false,
       totalIssues: 0,
       currentState: this.initialState,
       filterParams: this.initialFilterParams,
@@ -63,67 +62,61 @@ export default {
     };
   },
   computed: {
+    issuesListLoading() {
+      return this.$apollo.queries.jiraIssues.loading;
+    },
     showPaginationControls() {
-      return Boolean(
-        !this.issuesListLoading &&
-          !this.issuesListLoadFailed &&
-          this.issues.length &&
-          this.totalIssues > 1,
-      );
+      return Boolean(!this.issuesListLoading && this.issues.length && this.totalIssues > 1);
     },
     hasFiltersApplied() {
       return Boolean(this.filterParams.search || this.filterParams.labels);
     },
     urlParams() {
       return {
-        state: this.currentState,
-        page: this.currentPage,
-        sort: this.sortedBy,
         'labels[]': this.filterParams.labels,
+        page: this.currentPage,
         search: this.filterParams.search,
+        sort: this.sortedBy,
+        state: this.currentState,
       };
     },
   },
-  mounted() {
-    this.fetchIssues();
-  },
-  methods: {
-    async fetchIssues() {
-      this.issuesListLoading = true;
-      this.issuesListLoadFailed = false;
-
-      try {
-        const { data } = await this.$apollo.query({
-          query: getJiraIssuesQuery,
-          variables: {
-            issuesFetchPath: this.issuesFetchPath,
-            search: this.filterParams.search,
-            state: this.currentState,
-            sort: this.sortedBy,
-            labels: this.filterParams.labels,
-            page: this.currentPage,
-          },
-        });
+  apollo: {
+    jiraIssues: {
+      query: getJiraIssuesQuery,
+      variables() {
+        return {
+          issuesFetchPath: this.issuesFetchPath,
+          labels: this.filterParams.labels,
+          page: this.currentPage,
+          search: this.filterParams.search,
+          sort: this.sortedBy,
+          state: this.currentState,
+        };
+      },
+      result({ data, error }) {
+        // let error() callback handle errors
+        if (error) {
+          return;
+        }
 
         const { pageInfo, nodes, errors } = data?.jiraIssues ?? {};
-        if (errors?.length > 0) throw new Error(errors[0]);
+        if (errors?.length > 0) {
+          this.onJiraIssuesQueryError(new Error(errors[0]));
+          return;
+        }
 
+        this.issues = nodes;
         this.currentPage = pageInfo.page;
         this.totalIssues = pageInfo.total;
-        this.issues = nodes;
-        this.issuesCount[this.currentState] = this.issues.length;
-      } catch (error) {
-        this.issuesListLoadFailed = true;
-
-        createFlash({
-          message: error.message,
-          captureError: true,
-          error,
-        });
-      }
-
-      this.issuesListLoading = false;
+        this.issuesCount[this.currentState] = nodes.length;
+      },
+      error() {
+        this.onJiraIssuesQueryError(new Error(ISSUES_LIST_FETCH_ERROR));
+      },
     },
+  },
+  methods: {
     getFilteredSearchValue() {
       return [
         {
@@ -134,11 +127,23 @@ export default {
         },
       ];
     },
-    fetchIssuesBy(propsName, propValue) {
-      this[propsName] = propValue;
-      this.fetchIssues();
+    onJiraIssuesQueryError(error) {
+      createFlash({
+        message: error.message,
+        captureError: true,
+        error,
+      });
+    },
+    onIssuableListClickTab(selectedIssueState) {
+      this.currentState = selectedIssueState;
+    },
+    onIssuableListPageChange(selectedPage) {
+      this.currentPage = selectedPage;
+    },
+    onIssuableListSort(selectedSort) {
+      this.sortedBy = selectedSort;
     },
-    handleFilterIssues(filters = []) {
+    onIssuableListFilter(filters = []) {
       const filterParams = {};
       const plainText = [];
 
@@ -153,7 +158,6 @@ export default {
       }
 
       this.filterParams = filterParams;
-      this.fetchIssues();
     },
   },
 };
@@ -180,10 +184,10 @@ export default {
     :url-params="urlParams"
     label-filter-param="labels"
     recent-searches-storage-key="jira_issues"
-    @click-tab="fetchIssuesBy('currentState', $event)"
-    @page-change="fetchIssuesBy('currentPage', $event)"
-    @sort="fetchIssuesBy('sortedBy', $event)"
-    @filter="handleFilterIssues"
+    @click-tab="onIssuableListClickTab"
+    @page-change="onIssuableListPageChange"
+    @sort="onIssuableListSort"
+    @filter="onIssuableListFilter"
   >
     <template #nav-actions>
       <gl-button :href="issueCreateUrl" target="_blank" class="gl-my-5">

ee/app/assets/javascripts/integrations/jira/issues_list/constants.js

+import { __ } from '~/locale';
+
+export const ISSUES_LIST_FETCH_ERROR = __('An error occurred while loading issues');

ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js

 import { DEFAULT_PAGE_SIZE } from '~/issuable_list/constants';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
+import { ISSUES_LIST_FETCH_ERROR } from '../../constants';
 
 const transformJiraIssueAssignees = (jiraIssue) => {
   return jiraIssue.assignees.map((assignee) => ({
@@ -78,7 +78,7 @@ export default function jiraIssuesResolver(
     .catch((error) => {
       return {
         __typename: 'JiraIssues',
-        errors: error?.response?.data?.errors || [__('An error occurred while loading issues')],
+        errors: error?.response?.data?.errors || [ISSUES_LIST_FETCH_ERROR],
         pageInfo: transformJiraIssuePageInfo(),
         nodes: [],
       };

ee/spec/frontend/integrations/jira/issues_list/components/__snapshots__/jira_issues_list_root_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JiraIssuesListRoot renders issuable-list component with correct props 1`] = `
+exports[`JiraIssuesListRoot when request succeeds renders issuable-list component with correct props 1`] = `
 Object {
   "currentPage": 1,
   "currentTab": "opened",
@@ -12,14 +12,94 @@ Object {
     Object {
       "type": "filtered-search-term",
       "value": Object {
-        "data": "foo",
+        "data": "",
       },
     },
   ],
   "initialSortBy": "created_desc",
   "isManualOrdering": false,
   "issuableSymbol": "#",
-  "issuables": Array [],
+  "issuables": Array [
+    Object {
+      "assignees": Array [
+        Object {
+          "avatarUrl": null,
+          "name": "Kushal Pandya",
+          "webUrl": "https://gitlab-jira.atlassian.net/people/1920938475",
+        },
+      ],
+      "author": Object {
+        "avatarUrl": null,
+        "name": "jhope",
+        "webUrl": "https://gitlab-jira.atlassian.net/people/5e32f803e127810e82875bc1",
+      },
+      "closedAt": null,
+      "createdAt": "2020-03-19T14:31:51.281Z",
+      "externalTracker": "jira",
+      "gitlabWebUrl": "",
+      "id": 31596,
+      "labels": Array [
+        Object {
+          "color": "#0052CC",
+          "name": "backend",
+          "textColor": "#FFFFFF",
+          "title": "backend",
+        },
+      ],
+      "projectId": 1,
+      "references": Object {
+        "relative": "IG-31596",
+      },
+      "status": "Selected for Development",
+      "title": "Eius fuga voluptates.",
+      "updatedAt": "2020-10-20T07:01:45.865Z",
+      "webUrl": "https://gitlab-jira.atlassian.net/browse/IG-31596",
+    },
+    Object {
+      "assignees": Array [],
+      "author": Object {
+        "avatarUrl": null,
+        "name": "Gabe Weaver",
+        "webUrl": "https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde",
+      },
+      "closedAt": null,
+      "createdAt": "2020-03-19T14:31:50.677Z",
+      "externalTracker": "jira",
+      "gitlabWebUrl": "",
+      "id": 31595,
+      "labels": Array [],
+      "projectId": 1,
+      "references": Object {
+        "relative": "IG-31595",
+      },
+      "status": "Backlog",
+      "title": "Hic sit sint ducimus ea et sint.",
+      "updatedAt": "2020-03-19T14:31:50.677Z",
+      "webUrl": "https://gitlab-jira.atlassian.net/browse/IG-31595",
+    },
+    Object {
+      "assignees": Array [],
+      "author": Object {
+        "avatarUrl": null,
+        "name": "Gabe Weaver",
+        "webUrl": "https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde",
+      },
+      "closedAt": null,
+      "createdAt": "2020-03-19T14:31:50.012Z",
+      "externalTracker": "jira",
+      "gitlabWebUrl": "",
+      "id": 31594,
+      "labels": Array [],
+      "projectId": 1,
+      "references": Object {
+        "relative": "IG-31594",
+      },
+      "status": "Backlog",
+      "title": "Alias ut modi est labore.",
+      "updatedAt": "2020-03-19T14:31:50.012Z",
+      "webUrl": "https://gitlab-jira.atlassian.net/browse/IG-31594",
+    },
+  ],
   "issuablesLoading": false,
   "labelFilterParam": "labels",
   "namespace": "gitlab-org/gitlab-test",
@@ -29,7 +109,7 @@ Object {
   "searchInputPlaceholder": "Search Jira issues",
   "searchTokens": Array [],
   "showBulkEditSidebar": false,
-  "showPaginationControls": false,
+  "showPaginationControls": true,
   "sortOptions": Array [
     Object {
       "id": 1,
@@ -69,11 +149,11 @@ Object {
       "titleTooltip": "Show all issues.",
     },
   ],
-  "totalItems": 0,
+  "totalItems": 3,
   "urlParams": Object {
     "labels[]": undefined,
     "page": 1,
-    "search": "foo",
+    "search": undefined,
     "sort": "created_desc",
     "state": "opened",
   },