From 757a048ca0b7a2102eff3305cbba327baf1e057c Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 9 Sep 2021 09:57:32 +0800
Subject: [PATCH 01/11] Feature ZenTao integration list part

Abstract duplicate code from Jira to ExternalIssue List.
Add ZenTao logo
---
 app/assets/images/logos/zentao.svg            |  14 +
 .../external_issues_list_empty_state.vue      |  70 +++++
 .../components/external_issues_list_root.vue  | 284 ++++++++++++++++++
 .../external_issue/issues_list/constants.js   |   3 +
 .../issues_list/external_issue_list_bundle.js |  66 ++++
 .../issues_list/graphql/index.js              |  19 ++
 .../stylesheets/page_bundles/issues_list.scss |   6 +
 7 files changed, 462 insertions(+)
 create mode 100644 app/assets/images/logos/zentao.svg
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_list/constants.js
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js

diff --git a/app/assets/images/logos/zentao.svg b/app/assets/images/logos/zentao.svg
new file mode 100644
index 00000000000000..d2115b72aee056
--- /dev/null
+++ b/app/assets/images/logos/zentao.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" fill="none">
+    <path fill="url(#SVGID_1_)" d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1L8,1z M11.3,8.2C9.8,7.7,7.9,6.1,5.8,7.6
+		C4,8.9,4.8,11.1,6,11.8c0.9,0.6,2.3,0.7,3,0.1C9.7,11.4,10,10,9,9.5C8.6,9.4,7.9,9.3,7.5,9.8c-0.5,0.6-0.3,1.4,0.4,1.7
+		c0,0-1.2-0.1-1.4-1.3C6.2,7.9,9,7.6,10.3,8.4c2.4,1.5,1.5,4.8-2,5.4c-1.8,0.3-4.8-0.3-5.9-2.7c-0.4-0.9-0.3-0.7-0.3-0.7
+		c0.1,0.1,0.3,0.3,0.4,0.4c0.8,0.6,1.6,0.1,1.4-0.8C3.3,7.2,4.4,6.7,5.1,6.2s0.4-1.5-0.9-1.3c-1.9,0.3-2.4,3-2.4,3s-0.3-4.6,3.7-5
+		c4.1-0.4,4.7,3.2,6.5,3.7c2.5,0.8,1.3-2.6,1.3-2.6s1.1,1.7,0.6,3.2C13.5,8.2,12.3,8.5,11.3,8.2z" />
+    <defs>
+        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="8" y1="-271.1102" x2="8" y2="-257.1102"
+            gradientTransform="matrix(1 0 0 -1 0 -256.1102)">
+            <stop offset="0" style="stop-color:#445470" />
+            <stop offset="1" style="stop-color:#7A869A" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue b/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue
new file mode 100644
index 00000000000000..264326fc081634
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlEmptyState, GlButton, GlIcon, GlSprintf } from '@gitlab/ui';
+import { IssuableStates } from '~/issuable_list/constants';
+import { __, s__ } from '~/locale';
+
+export default {
+  FilterStateEmptyMessage: {
+    [IssuableStates.Opened]: __('There are no open issues'),
+    [IssuableStates.Closed]: __('There are no closed issues'),
+  },
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlIcon,
+    GlSprintf,
+  },
+  // The text injected is sanitized.
+  inject: ['emptyStatePath', 'issueCreateUrl', 'emptyStateNoIssueText', 'createNewIssueText'],
+  props: {
+    currentState: {
+      type: String,
+      required: true,
+    },
+    issuesCount: {
+      type: Object,
+      required: true,
+    },
+    hasFiltersApplied: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    hasIssues() {
+      return this.issuesCount[IssuableStates.Opened] + this.issuesCount[IssuableStates.Closed] > 0;
+    },
+    emptyStateTitle() {
+      if (this.hasFiltersApplied) {
+        return __('Sorry, your filter produced no results');
+      } else if (this.hasIssues) {
+        return this.$options.FilterStateEmptyMessage[this.currentState];
+      }
+      return this.emptyStateNoIssueText;
+    },
+    emptyStateDescription() {
+      if (this.hasFiltersApplied) {
+        return __('To widen your search, change or remove filters above');
+      } else if (!this.hasIssues) {
+        return s__('Integrations|To keep this project going, create a new issue.');
+      }
+      return '';
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state :svg-path="emptyStatePath" :title="emptyStateTitle">
+    <template v-if="!hasIssues || hasFiltersApplied" #description>
+      <gl-sprintf :message="emptyStateDescription" />
+    </template>
+    <template v-if="!hasIssues" #actions>
+      <gl-button :href="issueCreateUrl" target="_blank" variant="confirm">
+        {{ createNewIssueText }}
+        <gl-icon name="external-link" />
+      </gl-button>
+    </template>
+  </gl-empty-state>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue b/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue
new file mode 100644
index 00000000000000..acb2a6c7833646
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue
@@ -0,0 +1,284 @@
+<script>
+import { GlButton, GlIcon, GlLink, GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+
+import createFlash from '~/flash';
+import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
+import {
+  IssuableStates,
+  IssuableListTabs,
+  AvailableSortOptions,
+  DEFAULT_PAGE_SIZE,
+} from '~/issuable_list/constants';
+import {
+  FILTERED_SEARCH_LABELS,
+  FILTERED_SEARCH_TERM,
+  OPERATOR_IS_ONLY,
+  TOKEN_TITLE_LABEL,
+} from '~/vue_shared/components/filtered_search_bar/constants';
+import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
+
+import { ISSUES_LIST_FETCH_ERROR } from '../constants';
+import ExternalIssuesListEmptyState from './external_issues_list_empty_state.vue';
+
+export default {
+  name: 'ExternalIssuesList',
+  IssuableListTabs,
+  AvailableSortOptions,
+  defaultPageSize: DEFAULT_PAGE_SIZE,
+  components: {
+    GlButton,
+    GlIcon,
+    GlLink,
+    GlSprintf,
+    IssuableList,
+    ExternalIssuesListEmptyState,
+  },
+  directives: {
+    SafeHtml,
+  },
+  inject: [
+    'initialState',
+    'initialSortBy',
+    'page',
+    'issuesFetchPath',
+    'projectFullPath',
+    'issueCreateUrl',
+    'getIssuesQuery',
+    'externalIssuesLogo',
+    'externalIssueName',
+    'searchInputPlaceholderText',
+    'recentSearchesStorageKey',
+    'createNewIssueText',
+    'logoContainerClass',
+  ],
+  props: {
+    initialFilterParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      issues: [],
+      totalIssues: 0,
+      currentState: this.initialState,
+      filterParams: this.initialFilterParams,
+      sortedBy: this.initialSortBy,
+      currentPage: this.page,
+      issuesCount: {
+        [IssuableStates.Opened]: 0,
+        [IssuableStates.Closed]: 0,
+        [IssuableStates.All]: 0,
+      },
+    };
+  },
+  computed: {
+    issuesListLoading() {
+      return this.$apollo.queries.externalIssues.loading;
+    },
+    showPaginationControls() {
+      return Boolean(!this.issuesListLoading && this.issues.length && this.totalIssues > 1);
+    },
+    hasFiltersApplied() {
+      return Boolean(this.filterParams.search || this.filterParams.labels);
+    },
+    urlParams() {
+      return {
+        'labels[]': this.filterParams.labels,
+        search: this.filterParams.search,
+        ...(this.currentPage === 1 ? {} : { page: this.currentPage }),
+        ...(this.sortedBy === this.initialSortBy ? {} : { sort: this.sortedBy }),
+        ...(this.currentState === this.initialState ? {} : { state: this.currentState }),
+      };
+    },
+  },
+  apollo: {
+    externalIssues: {
+      query() {
+        return this.getIssuesQuery;
+      },
+      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?.externalIssues ?? {};
+        if (errors?.length > 0) {
+          this.onExternalIssuesQueryError(new Error(errors[0]));
+          return;
+        }
+
+        this.issues = nodes;
+        this.currentPage = pageInfo.page;
+        this.totalIssues = pageInfo.total;
+        this.issuesCount[this.currentState] = nodes.length;
+      },
+      error() {
+        this.onExternalIssuesQueryError(new Error(ISSUES_LIST_FETCH_ERROR));
+      },
+    },
+  },
+  methods: {
+    getFilteredSearchTokens() {
+      return [
+        {
+          type: FILTERED_SEARCH_LABELS,
+          icon: 'labels',
+          symbol: '~',
+          title: TOKEN_TITLE_LABEL,
+          unique: false,
+          token: LabelToken,
+          operators: OPERATOR_IS_ONLY,
+          defaultLabels: [],
+          fetchLabels: () => {
+            return Promise.resolve([]);
+          },
+        },
+      ];
+    },
+
+    getFilteredSearchValue() {
+      const { labels, search } = this.filterParams || {};
+      const filteredSearchValue = [];
+
+      if (labels) {
+        filteredSearchValue.push(
+          ...labels.map((label) => ({
+            type: FILTERED_SEARCH_LABELS,
+            value: { data: label },
+          })),
+        );
+      }
+
+      if (search) {
+        filteredSearchValue.push({
+          type: FILTERED_SEARCH_TERM,
+          value: {
+            data: search,
+          },
+        });
+      }
+
+      return filteredSearchValue;
+    },
+    onExternalIssuesQueryError(error) {
+      createFlash({
+        message: error.message,
+        captureError: true,
+        error,
+      });
+    },
+    onIssuableListClickTab(selectedIssueState) {
+      this.currentPage = 1;
+      this.currentState = selectedIssueState;
+    },
+    onIssuableListPageChange(selectedPage) {
+      this.currentPage = selectedPage;
+    },
+    onIssuableListSort(selectedSort) {
+      this.currentPage = 1;
+      this.sortedBy = selectedSort;
+    },
+    onIssuableListFilter(filters = []) {
+      const filterParams = {};
+      const labels = [];
+      const plainText = [];
+
+      filters.forEach((filter) => {
+        if (!filter.value.data) return;
+
+        switch (filter.type) {
+          case FILTERED_SEARCH_LABELS:
+            labels.push(filter.value.data);
+            break;
+          case FILTERED_SEARCH_TERM:
+            plainText.push(filter.value.data);
+            break;
+          default:
+            break;
+        }
+      });
+
+      if (plainText.length) {
+        filterParams.search = plainText.join(' ');
+      }
+
+      if (labels.length) {
+        filterParams.labels = labels;
+      }
+
+      this.filterParams = filterParams;
+    },
+  },
+};
+</script>
+
+<template>
+  <issuable-list
+    :namespace="projectFullPath"
+    :tabs="$options.IssuableListTabs"
+    :current-tab="currentState"
+    :search-input-placeholder="searchInputPlaceholderText"
+    :search-tokens="getFilteredSearchTokens()"
+    :sort-options="$options.AvailableSortOptions"
+    :initial-filter-value="getFilteredSearchValue()"
+    :initial-sort-by="sortedBy"
+    :issuables="issues"
+    :issuables-loading="issuesListLoading"
+    :show-pagination-controls="showPaginationControls"
+    :default-page-size="$options.defaultPageSize"
+    :total-items="totalIssues"
+    :current-page="currentPage"
+    :previous-page="currentPage - 1"
+    :next-page="currentPage + 1"
+    :url-params="urlParams"
+    label-filter-param="labels"
+    :recent-searches-storage-key="recentSearchesStorageKey"
+    @click-tab="onIssuableListClickTab"
+    @page-change="onIssuableListPageChange"
+    @sort="onIssuableListSort"
+    @filter="onIssuableListFilter"
+  >
+    <template #nav-actions>
+      <gl-button :href="issueCreateUrl" target="_blank" class="gl-my-5">
+        {{ createNewIssueText }}
+        <gl-icon name="external-link" />
+      </gl-button>
+    </template>
+    <template #reference="{ issuable }">
+      <span v-safe-html="externalIssuesLogo" :class="['svg-container', logoContainerClass]"></span>
+      <span v-if="issuable">{{ issuable.id }}</span>
+    </template>
+    <template #author="{ author }">
+      <gl-sprintf :message="`%{authorName} in ${externalIssueName}`">
+        <template #authorName>
+          <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl">
+            {{ author.name }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+    <template #status="{ issuable }">
+      <template v-if="issuable"> {{ issuable.status }}</template>
+    </template>
+    <template #empty-state>
+      <external-issues-list-empty-state
+        :current-state="currentState"
+        :issues-count="issuesCount"
+        :has-filters-applied="hasFiltersApplied"
+      />
+    </template>
+  </issuable-list>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/constants.js b/app/assets/javascripts/integrations/external_issue/issues_list/constants.js
new file mode 100644
index 00000000000000..b8d2532e108b11
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_list/constants.js
@@ -0,0 +1,3 @@
+import { __ } from '~/locale';
+
+export const ISSUES_LIST_FETCH_ERROR = __('An error occurred while loading issues');
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js b/app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js
new file mode 100644
index 00000000000000..f752b9cbc50516
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js
@@ -0,0 +1,66 @@
+import Vue from 'vue';
+
+import { IssuableStates } from '~/issuable_list/constants';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { queryToObject } from '~/lib/utils/url_utility';
+
+import externalIssuesListApp from './components/external_issues_list_root.vue';
+import getApolloProvider from './graphql';
+
+/**
+ *
+ * @param {provides} provides necessary attributes for issues_list
+ * make sure
+ * {
+ *  'getIssuesQuery',
+ *  'externalIssuesLogo',
+ *  'externalIssueName',
+ *  'searchInputPlaceholderText',
+ *  'recentSearchesStorageKey',
+ *  'createNewIssueText',
+ *  'logoContainerClass'
+ * }
+ * is provided
+ */
+export default function externalIssuesListFactory({ provides, query }) {
+  return function initExternalIssuesList({ mountPointSelector }) {
+    const mountPointEl = document.querySelector(mountPointSelector);
+
+    if (!mountPointEl) {
+      return null;
+    }
+
+    const {
+      page = 1,
+      initialState = IssuableStates.Opened,
+      initialSortBy = 'created_desc',
+    } = mountPointEl.dataset;
+
+    const initialFilterParams = Object.assign(
+      convertObjectPropsToCamelCase(
+        queryToObject(window.location.search.substring(1), { gatherArrays: true }),
+        {
+          dropKeys: ['scope', 'utf8', 'state', 'sort'], // These keys are unsupported/unnecessary
+        },
+      ),
+    );
+
+    return new Vue({
+      el: mountPointEl,
+      provide: {
+        ...mountPointEl.dataset,
+        page: parseInt(page, 10),
+        initialState,
+        initialSortBy,
+        ...provides,
+      },
+      apolloProvider: getApolloProvider(query),
+      render: (createElement) =>
+        createElement(externalIssuesListApp, {
+          props: {
+            initialFilterParams,
+          },
+        }),
+    });
+  };
+}
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js b/app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js
new file mode 100644
index 00000000000000..996f62db1c0ecc
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+Vue.use(VueApollo);
+
+export default (externalIssues) => {
+  const resolvers = {
+    Query: {
+      externalIssues,
+    },
+  };
+
+  const defaultClient = createDefaultClient(resolvers, { assumeImmutableResults: true });
+
+  return new VueApollo({
+    defaultClient,
+  });
+};
diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss
index 8a958bdf0c5750..5af8902949a63f 100644
--- a/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -43,3 +43,9 @@
   opacity: 0.3;
   pointer-events: none;
 }
+
+.svg-container.logo-container {
+  svg {
+    vertical-align: text-bottom;
+  }
+}
-- 
GitLab


From e8648d184de2b75af71b4e5c6e140562e12c1610 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Fri, 10 Sep 2021 15:23:04 +0800
Subject: [PATCH 02/11] Move external_issue/list to external_issue_list

---
 .../external_issues_list_empty_state.vue      |  27 +-
 .../components/external_issues_list_root.vue  |  14 +-
 .../graphql/index.js                          |   4 +-
 .../index.js}                                 |  49 +--
 .../external_issue/issues_list/constants.js   |   3 -
 .../external_issues_list_root_spec.js.snap    | 169 +++++++++
 .../external_issues_list_empty_state_spec.js  | 207 +++++++++++
 .../external_issues_list_root_spec.js         | 334 ++++++++++++++++++
 .../external_issues_list/mock_data.js         | 102 ++++++
 .../mock_get_jira_issues.query.graphql        |  48 +++
 10 files changed, 916 insertions(+), 41 deletions(-)
 rename app/assets/javascripts/{integrations/external_issue/issues_list => external_issues_list}/components/external_issues_list_empty_state.vue (67%)
 rename app/assets/javascripts/{integrations/external_issue/issues_list => external_issues_list}/components/external_issues_list_root.vue (94%)
 rename app/assets/javascripts/{integrations/external_issue/issues_list => external_issues_list}/graphql/index.js (76%)
 rename app/assets/javascripts/{integrations/external_issue/issues_list/external_issue_list_bundle.js => external_issues_list/index.js} (62%)
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_list/constants.js
 create mode 100644 spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap
 create mode 100644 spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
 create mode 100644 spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
 create mode 100644 spec/frontend/external_issues_list/mock_data.js
 create mode 100644 spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql

diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue b/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
similarity index 67%
rename from app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue
rename to app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
index 264326fc081634..dc8bf4fc76678d 100644
--- a/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_empty_state.vue
+++ b/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
@@ -4,10 +4,6 @@ import { IssuableStates } from '~/issuable_list/constants';
 import { __, s__ } from '~/locale';
 
 export default {
-  FilterStateEmptyMessage: {
-    [IssuableStates.Opened]: __('There are no open issues'),
-    [IssuableStates.Closed]: __('There are no closed issues'),
-  },
   components: {
     GlEmptyState,
     GlButton,
@@ -36,22 +32,37 @@ export default {
       return this.issuesCount[IssuableStates.Opened] + this.issuesCount[IssuableStates.Closed] > 0;
     },
     emptyStateTitle() {
+      const { titleWhenFilters, filterStateEmptyMessage } = this.$options.i18n;
+
       if (this.hasFiltersApplied) {
-        return __('Sorry, your filter produced no results');
+        return titleWhenFilters;
       } else if (this.hasIssues) {
-        return this.$options.FilterStateEmptyMessage[this.currentState];
+        return filterStateEmptyMessage[this.currentState];
       }
+
       return this.emptyStateNoIssueText;
     },
     emptyStateDescription() {
+      const { descriptionWhenFilters, descriptionWhenNoIssues } = this.$options.i18n;
+
       if (this.hasFiltersApplied) {
-        return __('To widen your search, change or remove filters above');
+        return descriptionWhenFilters;
       } else if (!this.hasIssues) {
-        return s__('Integrations|To keep this project going, create a new issue.');
+        return descriptionWhenNoIssues;
       }
+
       return '';
     },
   },
+  i18n: {
+    titleWhenFilters: __('Sorry, your filter produced no results'),
+    descriptionWhenFilters: __('To widen your search, change or remove filters above'),
+    descriptionWhenNoIssues: s__('Integrations|To keep this project going, create a new issue.'),
+    filterStateEmptyMessage: {
+      [IssuableStates.Opened]: __('There are no open issues'),
+      [IssuableStates.Closed]: __('There are no closed issues'),
+    },
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue b/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
similarity index 94%
rename from app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue
rename to app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
index acb2a6c7833646..0de509959ab516 100644
--- a/app/assets/javascripts/integrations/external_issue/issues_list/components/external_issues_list_root.vue
+++ b/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
@@ -9,6 +9,7 @@ import {
   AvailableSortOptions,
   DEFAULT_PAGE_SIZE,
 } from '~/issuable_list/constants';
+import { i18n } from '~/issues_list/constants';
 import {
   FILTERED_SEARCH_LABELS,
   FILTERED_SEARCH_TERM,
@@ -17,7 +18,6 @@ import {
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 
-import { ISSUES_LIST_FETCH_ERROR } from '../constants';
 import ExternalIssuesListEmptyState from './external_issues_list_empty_state.vue';
 
 export default {
@@ -45,11 +45,10 @@ export default {
     'issueCreateUrl',
     'getIssuesQuery',
     'externalIssuesLogo',
-    'externalIssueName',
+    'externalIssueTrackerName',
     'searchInputPlaceholderText',
     'recentSearchesStorageKey',
     'createNewIssueText',
-    'logoContainerClass',
   ],
   props: {
     initialFilterParams: {
@@ -126,7 +125,7 @@ export default {
         this.issuesCount[this.currentState] = nodes.length;
       },
       error() {
-        this.onExternalIssuesQueryError(new Error(ISSUES_LIST_FETCH_ERROR));
+        this.onExternalIssuesQueryError(new Error(this.$options.i18n.errorFetchingIssues));
       },
     },
   },
@@ -222,6 +221,9 @@ export default {
       this.filterParams = filterParams;
     },
   },
+  i18n: {
+    errorFetchingIssues: i18n.errorFetchingIssues,
+  },
 };
 </script>
 
@@ -258,11 +260,11 @@ export default {
       </gl-button>
     </template>
     <template #reference="{ issuable }">
-      <span v-safe-html="externalIssuesLogo" :class="['svg-container', logoContainerClass]"></span>
+      <span v-safe-html="externalIssuesLogo" class="svg-container logo-container"></span>
       <span v-if="issuable">{{ issuable.id }}</span>
     </template>
     <template #author="{ author }">
-      <gl-sprintf :message="`%{authorName} in ${externalIssueName}`">
+      <gl-sprintf :message="`%{authorName} in ${externalIssueTrackerName}`">
         <template #authorName>
           <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl">
             {{ author.name }}
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js b/app/assets/javascripts/external_issues_list/graphql/index.js
similarity index 76%
rename from app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js
rename to app/assets/javascripts/external_issues_list/graphql/index.js
index 996f62db1c0ecc..1f35f3be2ff3a7 100644
--- a/app/assets/javascripts/integrations/external_issue/issues_list/graphql/index.js
+++ b/app/assets/javascripts/external_issues_list/graphql/index.js
@@ -4,10 +4,10 @@ import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
 
-export default (externalIssues) => {
+export default (externalIssuesQueryResolver) => {
   const resolvers = {
     Query: {
-      externalIssues,
+      externalIssues: externalIssuesQueryResolver,
     },
   };
 
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js b/app/assets/javascripts/external_issues_list/index.js
similarity index 62%
rename from app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js
rename to app/assets/javascripts/external_issues_list/index.js
index f752b9cbc50516..4103ddcc411633 100644
--- a/app/assets/javascripts/integrations/external_issue/issues_list/external_issue_list_bundle.js
+++ b/app/assets/javascripts/external_issues_list/index.js
@@ -7,22 +7,18 @@ import { queryToObject } from '~/lib/utils/url_utility';
 import externalIssuesListApp from './components/external_issues_list_root.vue';
 import getApolloProvider from './graphql';
 
-/**
- *
- * @param {provides} provides necessary attributes for issues_list
- * make sure
- * {
- *  'getIssuesQuery',
- *  'externalIssuesLogo',
- *  'externalIssueName',
- *  'searchInputPlaceholderText',
- *  'recentSearchesStorageKey',
- *  'createNewIssueText',
- *  'logoContainerClass'
- * }
- * is provided
- */
-export default function externalIssuesListFactory({ provides, query }) {
+export default function externalIssuesListFactory(
+  {
+    getIssuesQuery,
+    externalIssuesLogo,
+    externalIssueTrackerName,
+    searchInputPlaceholderText,
+    recentSearchesStorageKey,
+    createNewIssueText,
+    emptyStateNoIssueText,
+  } = {},
+  { externalIssuesQueryResolver },
+) {
   return function initExternalIssuesList({ mountPointSelector }) {
     const mountPointEl = document.querySelector(mountPointSelector);
 
@@ -35,6 +31,12 @@ export default function externalIssuesListFactory({ provides, query }) {
       initialState = IssuableStates.Opened,
       initialSortBy = 'created_desc',
     } = mountPointEl.dataset;
+    const defaultProvide = {
+      ...mountPointEl.dataset,
+      page: parseInt(page, 10),
+      initialState,
+      initialSortBy,
+    };
 
     const initialFilterParams = Object.assign(
       convertObjectPropsToCamelCase(
@@ -48,13 +50,16 @@ export default function externalIssuesListFactory({ provides, query }) {
     return new Vue({
       el: mountPointEl,
       provide: {
-        ...mountPointEl.dataset,
-        page: parseInt(page, 10),
-        initialState,
-        initialSortBy,
-        ...provides,
+        ...defaultProvide,
+        getIssuesQuery,
+        externalIssuesLogo,
+        externalIssueTrackerName,
+        searchInputPlaceholderText,
+        recentSearchesStorageKey,
+        createNewIssueText,
+        emptyStateNoIssueText,
       },
-      apolloProvider: getApolloProvider(query),
+      apolloProvider: getApolloProvider(externalIssuesQueryResolver),
       render: (createElement) =>
         createElement(externalIssuesListApp, {
           props: {
diff --git a/app/assets/javascripts/integrations/external_issue/issues_list/constants.js b/app/assets/javascripts/integrations/external_issue/issues_list/constants.js
deleted file mode 100644
index b8d2532e108b11..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_list/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { __ } from '~/locale';
-
-export const ISSUES_LIST_FETCH_ERROR = __('An error occurred while loading issues');
diff --git a/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap b/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap
new file mode 100644
index 00000000000000..1d10de88c54585
--- /dev/null
+++ b/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExternalIssuesListRoot when request succeeds renders issuable-list component with correct props 1`] = `
+Object {
+  "currentPage": 1,
+  "currentTab": "opened",
+  "defaultPageSize": 2,
+  "enableLabelPermalinks": true,
+  "hasNextPage": false,
+  "hasPreviousPage": false,
+  "initialFilterValue": Array [],
+  "initialSortBy": "created_desc",
+  "isManualOrdering": false,
+  "issuableSymbol": "#",
+  "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",
+  "nextPage": 2,
+  "previousPage": 0,
+  "recentSearchesStorageKey": "jira_issues",
+  "searchInputPlaceholder": "Search Jira issues",
+  "searchTokens": Array [
+    Object {
+      "defaultLabels": Array [],
+      "fetchLabels": [Function],
+      "icon": "labels",
+      "operators": Array [
+        Object {
+          "description": "is",
+          "value": "=",
+        },
+      ],
+      "symbol": "~",
+      "title": "Label",
+      "token": "LabelTokenMock",
+      "type": "labels",
+      "unique": false,
+    },
+  ],
+  "showBulkEditSidebar": false,
+  "showPaginationControls": true,
+  "sortOptions": Array [
+    Object {
+      "id": 1,
+      "sortDirection": Object {
+        "ascending": "created_asc",
+        "descending": "created_desc",
+      },
+      "title": "Created date",
+    },
+    Object {
+      "id": 2,
+      "sortDirection": Object {
+        "ascending": "updated_asc",
+        "descending": "updated_desc",
+      },
+      "title": "Last updated",
+    },
+  ],
+  "tabCounts": null,
+  "tabs": Array [
+    Object {
+      "id": "state-opened",
+      "name": "opened",
+      "title": "Open",
+      "titleTooltip": "Filter by issues that are currently opened.",
+    },
+    Object {
+      "id": "state-closed",
+      "name": "closed",
+      "title": "Closed",
+      "titleTooltip": "Filter by issues that are currently closed.",
+    },
+    Object {
+      "id": "state-all",
+      "name": "all",
+      "title": "All",
+      "titleTooltip": "Show all issues.",
+    },
+  ],
+  "totalItems": 3,
+  "urlParams": Object {
+    "labels[]": undefined,
+    "search": undefined,
+  },
+  "useKeysetPagination": false,
+}
+`;
diff --git a/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js b/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
new file mode 100644
index 00000000000000..163d737abedcac
--- /dev/null
+++ b/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
@@ -0,0 +1,207 @@
+import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+import ExternalIssuesListEmptyState from '~/external_issues_list/components/external_issues_list_empty_state.vue';
+import { IssuableStates } from '~/issuable_list/constants';
+
+import { mockProvide } from '../mock_data';
+
+const createComponent = (props = {}) =>
+  shallowMount(ExternalIssuesListEmptyState, {
+    provide: mockProvide,
+    propsData: {
+      currentState: 'opened',
+      issuesCount: {
+        [IssuableStates.Opened]: 0,
+        [IssuableStates.Closed]: 0,
+        [IssuableStates.All]: 0,
+      },
+      hasFiltersApplied: false,
+      ...props,
+    },
+    stubs: { GlEmptyState },
+  });
+
+describe('ExternalIssuesListEmptyState', () => {
+  let wrapper;
+
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    describe('hasIssues', () => {
+      it('returns false when total of opened and closed issues within `issuesCount` is 0', () => {
+        expect(wrapper.vm.hasIssues).toBe(false);
+      });
+
+      it('returns true when total of opened and closed issues within `issuesCount` is more than 0', async () => {
+        wrapper.setProps({
+          issuesCount: {
+            [IssuableStates.Opened]: 1,
+            [IssuableStates.Closed]: 1,
+          },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.hasIssues).toBe(true);
+      });
+    });
+
+    describe('emptyStateTitle', () => {
+      it(`returns correct string when hasFiltersApplied prop is true`, async () => {
+        wrapper.setProps({
+          hasFiltersApplied: true,
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(findEmptyState().props('title')).toBe(
+          ExternalIssuesListEmptyState.i18n.titleWhenFilters,
+        );
+      });
+
+      it(`returns correct string when hasFiltersApplied prop is false and hasIssues is true`, async () => {
+        wrapper.setProps({
+          hasFiltersApplied: false,
+          issuesCount: {
+            [IssuableStates.Opened]: 1,
+            [IssuableStates.Closed]: 1,
+          },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(findEmptyState().props('title')).toBe(
+          ExternalIssuesListEmptyState.i18n.filterStateEmptyMessage[IssuableStates.Opened],
+        );
+      });
+
+      it('returns default title string when both hasFiltersApplied and hasIssues props are false', async () => {
+        wrapper.setProps({
+          hasFiltersApplied: false,
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(findEmptyState().props('title')).toBe(mockProvide.emptyStateNoIssueText);
+      });
+    });
+
+    describe('emptyStateDescription', () => {
+      it(`returns correct when hasFiltersApplied prop is true`, async () => {
+        wrapper.setProps({
+          hasFiltersApplied: true,
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.emptyStateDescription).toBe(
+          ExternalIssuesListEmptyState.i18n.descriptionWhenFilters,
+        );
+      });
+
+      it(`returns correct string when both hasFiltersApplied and hasIssues props are false`, async () => {
+        wrapper.setProps({
+          hasFiltersApplied: false,
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.emptyStateDescription).toBe(
+          ExternalIssuesListEmptyState.i18n.descriptionWhenNoIssues,
+        );
+      });
+
+      it(`returns empty string when hasFiltersApplied is false and hasIssues is true`, async () => {
+        wrapper.setProps({
+          hasFiltersApplied: false,
+          issuesCount: {
+            [IssuableStates.Opened]: 1,
+            [IssuableStates.Closed]: 1,
+          },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.emptyStateDescription).toBe('');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders gl-empty-state component', () => {
+      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+    });
+
+    it('renders empty state title', async () => {
+      const emptyStateEl = wrapper.find(GlEmptyState);
+
+      expect(emptyStateEl.props()).toMatchObject({
+        svgPath: mockProvide.emptyStatePath,
+        title: mockProvide.emptyStateNoIssueText,
+      });
+
+      wrapper.setProps({
+        hasFiltersApplied: true,
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(emptyStateEl.props('title')).toBe(ExternalIssuesListEmptyState.i18n.titleWhenFilters);
+
+      wrapper.setProps({
+        hasFiltersApplied: false,
+        issuesCount: {
+          [IssuableStates.Opened]: 1,
+          [IssuableStates.Closed]: 1,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(emptyStateEl.props('title')).toBe(
+        ExternalIssuesListEmptyState.i18n.filterStateEmptyMessage[IssuableStates.Opened],
+      );
+    });
+
+    it('renders empty state description', () => {
+      const descriptionEl = wrapper.find(GlSprintf);
+
+      expect(descriptionEl.exists()).toBe(true);
+      expect(descriptionEl.attributes('message')).toBe(
+        'To keep this project going, create a new issue.',
+      );
+    });
+
+    it('does not render empty state description when issues are present', async () => {
+      wrapper.setProps({
+        issuesCount: {
+          [IssuableStates.Opened]: 1,
+          [IssuableStates.Closed]: 1,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+
+      const descriptionEl = wrapper.find(GlSprintf);
+
+      expect(descriptionEl.exists()).toBe(false);
+    });
+
+    it('renders "create issue button', () => {
+      const buttonEl = wrapper.findComponent(GlButton);
+
+      expect(buttonEl.exists()).toBe(true);
+      expect(buttonEl.attributes('href')).toBe(mockProvide.issueCreateUrl);
+      expect(buttonEl.text()).toBe(mockProvide.createNewIssueText);
+    });
+  });
+});
diff --git a/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js b/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
new file mode 100644
index 00000000000000..86e7361cd266d8
--- /dev/null
+++ b/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
@@ -0,0 +1,334 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import VueApollo from 'vue-apollo';
+
+import jiraIssuesResolver from 'ee/integrations/jira/issues_list/graphql/resolvers/jira_issues';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import ExternalIssuesListRoot from '~/external_issues_list/components/external_issues_list_root.vue';
+import createFlash from '~/flash';
+import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
+import axios from '~/lib/utils/axios_utils';
+import httpStatus from '~/lib/utils/http_status';
+
+import { mockProvide, mockJiraIssues as mockExternalIssues } from '../mock_data';
+
+jest.mock('~/flash');
+jest.mock('~/issuable_list/constants', () => ({
+  DEFAULT_PAGE_SIZE: 2,
+  IssuableStates: jest.requireActual('~/issuable_list/constants').IssuableStates,
+  IssuableListTabs: jest.requireActual('~/issuable_list/constants').IssuableListTabs,
+  AvailableSortOptions: jest.requireActual('~/issuable_list/constants').AvailableSortOptions,
+}));
+jest.mock(
+  '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue',
+  () => 'LabelTokenMock',
+);
+
+const resolvedValue = {
+  headers: {
+    'x-page': 1,
+    'x-total': mockExternalIssues.length,
+  },
+  data: mockExternalIssues,
+};
+
+const localVue = createLocalVue();
+
+const resolvers = {
+  Query: {
+    externalIssues: jiraIssuesResolver,
+  },
+};
+
+function createMockApolloProvider(mockResolvers = resolvers) {
+  localVue.use(VueApollo);
+  return createMockApollo([], mockResolvers);
+}
+
+describe('ExternalIssuesListRoot', () => {
+  let wrapper;
+  let mock;
+
+  const mockSearchTerm = 'test issue';
+  const mockLabel = 'ecosystem';
+
+  const findIssuableList = () => wrapper.findComponent(IssuableList);
+  const createLabelFilterEvent = (data) => ({ type: 'labels', value: { data } });
+  const createSearchFilterEvent = (data) => ({ type: 'filtered-search-term', value: { data } });
+
+  const createComponent = ({
+    apolloProvider = createMockApolloProvider(),
+    provide = mockProvide,
+    initialFilterParams = {},
+  } = {}) => {
+    wrapper = shallowMount(ExternalIssuesListRoot, {
+      propsData: {
+        initialFilterParams,
+      },
+      provide,
+      localVue,
+      apolloProvider,
+    });
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mock.restore();
+  });
+
+  describe('while loading', () => {
+    it('sets issuesListLoading to `true`', async () => {
+      jest.spyOn(axios, 'get').mockResolvedValue(new Promise(() => {}));
+
+      createComponent();
+      await wrapper.vm.$nextTick();
+
+      const issuableList = findIssuableList();
+      expect(issuableList.props('issuablesLoading')).toBe(true);
+    });
+
+    it('calls `axios.get` with `issuesFetchPath` and query params', async () => {
+      jest.spyOn(axios, 'get');
+
+      createComponent();
+      await waitForPromises();
+
+      expect(axios.get).toHaveBeenCalledWith(
+        mockProvide.issuesFetchPath,
+        expect.objectContaining({
+          params: {
+            with_labels_details: true,
+            page: wrapper.vm.currentPage,
+            per_page: wrapper.vm.$options.defaultPageSize,
+            state: wrapper.vm.currentState,
+            sort: wrapper.vm.sortedBy,
+            search: wrapper.vm.filterParams.search,
+          },
+        }),
+      );
+    });
+  });
+
+  describe('with `initialFilterParams` prop', () => {
+    beforeEach(async () => {
+      jest.spyOn(axios, 'get').mockResolvedValue(resolvedValue);
+
+      createComponent({
+        initialFilterParams: {
+          labels: [mockLabel],
+          search: mockSearchTerm,
+        },
+      });
+      await waitForPromises();
+    });
+
+    it('renders issuable-list component with correct props', () => {
+      const issuableList = findIssuableList();
+
+      expect(issuableList.props('initialFilterValue')).toEqual([
+        { type: 'labels', value: { data: mockLabel } },
+        { type: 'filtered-search-term', value: { data: mockSearchTerm } },
+      ]);
+      expect(issuableList.props('urlParams').search).toBe(mockSearchTerm);
+    });
+  });
+
+  describe('when request succeeds', () => {
+    beforeEach(async () => {
+      jest.spyOn(axios, 'get').mockResolvedValue(resolvedValue);
+
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('renders issuable-list component with correct props', () => {
+      const issuableList = findIssuableList();
+      expect(issuableList.exists()).toBe(true);
+      expect(issuableList.props()).toMatchSnapshot();
+    });
+
+    describe('issuable-list events', () => {
+      it('"click-tab" event executes GET request correctly', async () => {
+        const issuableList = findIssuableList();
+
+        issuableList.vm.$emit('click-tab', 'closed');
+        await waitForPromises();
+
+        expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
+          params: {
+            labels: undefined,
+            page: 1,
+            per_page: 2,
+            search: undefined,
+            sort: 'created_desc',
+            state: 'closed',
+            with_labels_details: true,
+          },
+        });
+        expect(issuableList.props('currentTab')).toBe('closed');
+      });
+
+      it('"page-change" event executes GET request correctly', async () => {
+        const mockPage = 2;
+        const issuableList = findIssuableList();
+        jest.spyOn(axios, 'get').mockResolvedValue({
+          ...resolvedValue,
+          headers: { 'x-page': mockPage, 'x-total': mockExternalIssues.length },
+        });
+
+        issuableList.vm.$emit('page-change', mockPage);
+        await waitForPromises();
+
+        expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
+          params: {
+            labels: undefined,
+            page: mockPage,
+            per_page: 2,
+            search: undefined,
+            sort: 'created_desc',
+            state: 'opened',
+            with_labels_details: true,
+          },
+        });
+
+        await wrapper.vm.$nextTick();
+        expect(issuableList.props()).toMatchObject({
+          currentPage: mockPage,
+          previousPage: mockPage - 1,
+          nextPage: mockPage + 1,
+        });
+      });
+
+      it('"sort" event executes GET request correctly', async () => {
+        const mockSortBy = 'updated_asc';
+        const issuableList = findIssuableList();
+
+        issuableList.vm.$emit('sort', mockSortBy);
+        await waitForPromises();
+
+        expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
+          params: {
+            labels: undefined,
+            page: 1,
+            per_page: 2,
+            search: undefined,
+            sort: 'created_desc',
+            state: 'opened',
+            with_labels_details: true,
+          },
+        });
+        expect(issuableList.props('initialSortBy')).toBe(mockSortBy);
+      });
+
+      it.each`
+        desc                        | input                                                                           | expected
+        ${'with label and search'}  | ${[createLabelFilterEvent(mockLabel), createSearchFilterEvent(mockSearchTerm)]} | ${{ labels: [mockLabel], search: mockSearchTerm }}
+        ${'with multiple lables'}   | ${[createLabelFilterEvent('label1'), createLabelFilterEvent('label2')]}         | ${{ labels: ['label1', 'label2'], search: undefined }}
+        ${'with multiple searches'} | ${[createSearchFilterEvent('foo bar'), createSearchFilterEvent('lorem')]}       | ${{ labels: undefined, search: 'foo bar lorem' }}
+      `(
+        '$desc, filter event sets "filterParams" value and calls fetchIssues',
+        async ({ input, expected }) => {
+          const issuableList = findIssuableList();
+
+          issuableList.vm.$emit('filter', input);
+          await waitForPromises();
+
+          expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
+            params: {
+              page: 1,
+              per_page: 2,
+              sort: 'created_desc',
+              state: 'opened',
+              with_labels_details: true,
+              ...expected,
+            },
+          });
+        },
+      );
+    });
+  });
+
+  describe('error handling', () => {
+    describe('when request fails', () => {
+      it.each`
+        APIErrors        | expectedRenderedErrorMessage
+        ${['API error']} | ${'API error'}
+        ${undefined}     | ${ExternalIssuesListRoot.i18n.errorFetchingIssues}
+      `(
+        'calls `createFlash` with "$expectedRenderedErrorMessage" when API responds with "$APIErrors"',
+        async ({ APIErrors, expectedRenderedErrorMessage }) => {
+          jest.spyOn(axios, 'get');
+          mock
+            .onGet(mockProvide.issuesFetchPath)
+            .replyOnce(httpStatus.INTERNAL_SERVER_ERROR, { errors: APIErrors });
+
+          createComponent();
+          await waitForPromises();
+
+          expect(createFlash).toHaveBeenCalledWith({
+            message: expectedRenderedErrorMessage,
+            captureError: true,
+            error: expect.any(Object),
+          });
+        },
+      );
+    });
+
+    describe('when GraphQL network error is encountered', () => {
+      it('calls `createFlash` correctly with default error message', async () => {
+        createComponent({
+          apolloProvider: createMockApolloProvider({
+            Query: {
+              externalIssues: jest.fn().mockRejectedValue(new Error('GraphQL networkError')),
+            },
+          }),
+        });
+        await waitForPromises();
+
+        expect(createFlash).toHaveBeenCalledWith({
+          message: ExternalIssuesListRoot.i18n.errorFetchingIssues,
+          captureError: true,
+          error: expect.any(Object),
+        });
+      });
+    });
+  });
+
+  describe('pagination', () => {
+    it.each`
+      scenario                 | issuesListLoadFailed | issues                | shouldShowPaginationControls
+      ${'fails'}               | ${true}              | ${[]}                 | ${false}
+      ${'returns no issues'}   | ${false}             | ${[]}                 | ${false}
+      ${`returns some issues`} | ${false}             | ${mockExternalIssues} | ${true}
+    `(
+      'sets `showPaginationControls` prop to $shouldShowPaginationControls when request $scenario',
+      async ({ issuesListLoadFailed, issues, shouldShowPaginationControls }) => {
+        jest.spyOn(axios, 'get');
+        mock
+          .onGet(mockProvide.issuesFetchPath)
+          .replyOnce(
+            issuesListLoadFailed ? httpStatus.INTERNAL_SERVER_ERROR : httpStatus.OK,
+            issues,
+            {
+              'x-page': 1,
+              'x-total': issues.length,
+            },
+          );
+
+        createComponent();
+        await waitForPromises();
+
+        expect(findIssuableList().props('showPaginationControls')).toBe(
+          shouldShowPaginationControls,
+        );
+      },
+    );
+  });
+});
diff --git a/spec/frontend/external_issues_list/mock_data.js b/spec/frontend/external_issues_list/mock_data.js
new file mode 100644
index 00000000000000..9d21b6b1bfe38d
--- /dev/null
+++ b/spec/frontend/external_issues_list/mock_data.js
@@ -0,0 +1,102 @@
+import jiraLogo from '@gitlab/svgs/dist/illustrations/logos/jira.svg';
+import mockGetJiraIssuesQuery from './mock_get_jira_issues.query.graphql';
+
+export const mockProvide = {
+  initialState: 'opened',
+  initialSortBy: 'created_desc',
+  page: 1,
+  issuesFetchPath: '/gitlab-org/gitlab-test/-/integrations/jira/issues.json',
+  projectFullPath: 'gitlab-org/gitlab-test',
+  issueCreateUrl: 'https://gitlab-jira.atlassian.net/secure/CreateIssue!default.jspa',
+  emptyStatePath: '/assets/illustrations/issues.svg',
+
+  getIssuesQuery: mockGetJiraIssuesQuery,
+  externalIssuesLogo: jiraLogo,
+  externalIssueTrackerName: 'Jira',
+  emptyStateNoIssueText:
+    'Issues created in Jira are shown here once you have created the issues in project setup in Jira.',
+  recentSearchesStorageKey: 'jira_issues',
+  createNewIssueText: 'Create new issue in Jira',
+  searchInputPlaceholderText: 'Search Jira issues',
+};
+
+export const mockJiraIssue1 = {
+  project_id: 1,
+  title: 'Eius fuga voluptates.',
+  created_at: '2020-03-19T14:31:51.281Z',
+  updated_at: '2020-10-20T07:01:45.865Z',
+  closed_at: null,
+  status: 'Selected for Development',
+  labels: [
+    {
+      title: 'backend',
+      name: 'backend',
+      color: '#0052CC',
+      text_color: '#FFFFFF',
+    },
+  ],
+  author: {
+    name: 'jhope',
+    web_url: 'https://gitlab-jira.atlassian.net/people/5e32f803e127810e82875bc1',
+    avatar_url: null,
+  },
+  assignees: [
+    {
+      name: 'Kushal Pandya',
+      web_url: 'https://gitlab-jira.atlassian.net/people/1920938475',
+      avatar_url: null,
+    },
+  ],
+  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31596',
+  gitlab_web_url: '',
+  references: {
+    relative: 'IG-31596',
+  },
+  external_tracker: 'jira',
+};
+
+export const mockJiraIssue2 = {
+  project_id: 1,
+  title: 'Hic sit sint ducimus ea et sint.',
+  created_at: '2020-03-19T14:31:50.677Z',
+  updated_at: '2020-03-19T14:31:50.677Z',
+  closed_at: null,
+  status: 'Backlog',
+  labels: [],
+  author: {
+    name: 'Gabe Weaver',
+    web_url: 'https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde',
+    avatar_url: null,
+  },
+  assignees: [],
+  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31595',
+  gitlab_web_url: '',
+  references: {
+    relative: 'IG-31595',
+  },
+  external_tracker: 'jira',
+};
+
+export const mockJiraIssue3 = {
+  project_id: 1,
+  title: 'Alias ut modi est labore.',
+  created_at: '2020-03-19T14:31:50.012Z',
+  updated_at: '2020-03-19T14:31:50.012Z',
+  closed_at: null,
+  status: 'Backlog',
+  labels: [],
+  author: {
+    name: 'Gabe Weaver',
+    web_url: 'https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde',
+    avatar_url: null,
+  },
+  assignees: [],
+  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31594',
+  gitlab_web_url: '',
+  references: {
+    relative: 'IG-31594',
+  },
+  external_tracker: 'jira',
+};
+
+export const mockJiraIssues = [mockJiraIssue1, mockJiraIssue2, mockJiraIssue3];
diff --git a/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql b/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
new file mode 100644
index 00000000000000..4b8c57bb544602
--- /dev/null
+++ b/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
@@ -0,0 +1,48 @@
+#import "ee/integrations/jira/issues_list/graphql/fragments/jira_label.fragment.graphql"
+#import "ee/integrations/jira/issues_list/graphql/fragments/jira_user.fragment.graphql"
+
+query jiraIssues(
+  $issuesFetchPath: String
+  $search: String
+  $labels: String
+  $sort: String
+  $state: String
+  $page: Integer
+) {
+  externalIssues(
+    issuesFetchPath: $issuesFetchPath
+    search: $search
+    labels: $labels
+    sort: $sort
+    state: $state
+    page: $page
+  ) @client {
+    errors
+    pageInfo {
+      total
+      page
+    }
+    nodes {
+      id
+      projectId
+      createdAt
+      updatedAt
+      closedAt
+      title
+      webUrl
+      gitlabWebUrl
+      status
+      references
+      externalTracker
+      labels {
+        ...JiraLabel
+      }
+      assignees {
+        ...JiraUser
+      }
+      author {
+        ...JiraUser
+      }
+    }
+  }
+}
-- 
GitLab


From 44bd19da718f0cf1511af77bf0ec1c909ab68c52 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Mon, 13 Sep 2021 17:41:41 +0800
Subject: [PATCH 03/11] Move external_issue_list from FOSS to EE

---
 app/assets/stylesheets/page_bundles/issues_list.scss        | 6 ------
 .../components/external_issues_list_empty_state.vue         | 0
 .../components/external_issues_list_root.vue                | 0
 .../javascripts/external_issues_list/graphql/index.js       | 0
 .../app}/assets/javascripts/external_issues_list/index.js   | 0
 ee/app/assets/stylesheets/page_bundles/issues_list.scss     | 2 +-
 .../__snapshots__/external_issues_list_root_spec.js.snap    | 0
 .../components/external_issues_list_empty_state_spec.js     | 2 +-
 .../components/external_issues_list_root_spec.js            | 2 +-
 .../spec}/frontend/external_issues_list/mock_data.js        | 0
 .../external_issues_list/mock_get_jira_issues.query.graphql | 0
 11 files changed, 3 insertions(+), 9 deletions(-)
 rename {app => ee/app}/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue (100%)
 rename {app => ee/app}/assets/javascripts/external_issues_list/components/external_issues_list_root.vue (100%)
 rename {app => ee/app}/assets/javascripts/external_issues_list/graphql/index.js (100%)
 rename {app => ee/app}/assets/javascripts/external_issues_list/index.js (100%)
 rename {spec => ee/spec}/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap (100%)
 rename {spec => ee/spec}/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js (98%)
 rename {spec => ee/spec}/frontend/external_issues_list/components/external_issues_list_root_spec.js (99%)
 rename {spec => ee/spec}/frontend/external_issues_list/mock_data.js (100%)
 rename {spec => ee/spec}/frontend/external_issues_list/mock_get_jira_issues.query.graphql (100%)

diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss
index 5af8902949a63f..8a958bdf0c5750 100644
--- a/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -43,9 +43,3 @@
   opacity: 0.3;
   pointer-events: none;
 }
-
-.svg-container.logo-container {
-  svg {
-    vertical-align: text-bottom;
-  }
-}
diff --git a/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
similarity index 100%
rename from app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
rename to ee/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
diff --git a/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
similarity index 100%
rename from app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
rename to ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
diff --git a/app/assets/javascripts/external_issues_list/graphql/index.js b/ee/app/assets/javascripts/external_issues_list/graphql/index.js
similarity index 100%
rename from app/assets/javascripts/external_issues_list/graphql/index.js
rename to ee/app/assets/javascripts/external_issues_list/graphql/index.js
diff --git a/app/assets/javascripts/external_issues_list/index.js b/ee/app/assets/javascripts/external_issues_list/index.js
similarity index 100%
rename from app/assets/javascripts/external_issues_list/index.js
rename to ee/app/assets/javascripts/external_issues_list/index.js
diff --git a/ee/app/assets/stylesheets/page_bundles/issues_list.scss b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
index 236948aa679e4a..69d0c8aa5e0a41 100644
--- a/ee/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -1,6 +1,6 @@
 @import '../../../../../app/assets/stylesheets/page_bundles/issues_list';
 
-.svg-container.jira-logo-container {
+.svg-container.logo-container {
   svg {
     vertical-align: text-bottom;
   }
diff --git a/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap b/ee/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap
similarity index 100%
rename from spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap
rename to ee/spec/frontend/external_issues_list/components/__snapshots__/external_issues_list_root_spec.js.snap
diff --git a/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js b/ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
similarity index 98%
rename from spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
rename to ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
index 163d737abedcac..24226c8117965a 100644
--- a/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
+++ b/ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
@@ -1,7 +1,7 @@
 import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
-import ExternalIssuesListEmptyState from '~/external_issues_list/components/external_issues_list_empty_state.vue';
+import ExternalIssuesListEmptyState from 'ee/external_issues_list/components/external_issues_list_empty_state.vue';
 import { IssuableStates } from '~/issuable_list/constants';
 
 import { mockProvide } from '../mock_data';
diff --git a/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js b/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
similarity index 99%
rename from spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
rename to ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
index 86e7361cd266d8..3bc57bc50a5e3a 100644
--- a/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
+++ b/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
@@ -2,12 +2,12 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import VueApollo from 'vue-apollo';
 
+import ExternalIssuesListRoot from 'ee/external_issues_list/components/external_issues_list_root.vue';
 import jiraIssuesResolver from 'ee/integrations/jira/issues_list/graphql/resolvers/jira_issues';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import ExternalIssuesListRoot from '~/external_issues_list/components/external_issues_list_root.vue';
 import createFlash from '~/flash';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
 import axios from '~/lib/utils/axios_utils';
diff --git a/spec/frontend/external_issues_list/mock_data.js b/ee/spec/frontend/external_issues_list/mock_data.js
similarity index 100%
rename from spec/frontend/external_issues_list/mock_data.js
rename to ee/spec/frontend/external_issues_list/mock_data.js
diff --git a/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql b/ee/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
similarity index 100%
rename from spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
rename to ee/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
-- 
GitLab


From 569791d7ec861fd17acfb4026d4895074fd38495 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 14 Sep 2021 09:29:47 +0800
Subject: [PATCH 04/11] Remove zentao.svg Restore jira style rules

---
 app/assets/images/logos/zentao.svg                 | 14 --------------
 .../stylesheets/page_bundles/issues_list.scss      |  8 +++++---
 2 files changed, 5 insertions(+), 17 deletions(-)
 delete mode 100644 app/assets/images/logos/zentao.svg

diff --git a/app/assets/images/logos/zentao.svg b/app/assets/images/logos/zentao.svg
deleted file mode 100644
index d2115b72aee056..00000000000000
--- a/app/assets/images/logos/zentao.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" fill="none">
-    <path fill="url(#SVGID_1_)" d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1L8,1z M11.3,8.2C9.8,7.7,7.9,6.1,5.8,7.6
-		C4,8.9,4.8,11.1,6,11.8c0.9,0.6,2.3,0.7,3,0.1C9.7,11.4,10,10,9,9.5C8.6,9.4,7.9,9.3,7.5,9.8c-0.5,0.6-0.3,1.4,0.4,1.7
-		c0,0-1.2-0.1-1.4-1.3C6.2,7.9,9,7.6,10.3,8.4c2.4,1.5,1.5,4.8-2,5.4c-1.8,0.3-4.8-0.3-5.9-2.7c-0.4-0.9-0.3-0.7-0.3-0.7
-		c0.1,0.1,0.3,0.3,0.4,0.4c0.8,0.6,1.6,0.1,1.4-0.8C3.3,7.2,4.4,6.7,5.1,6.2s0.4-1.5-0.9-1.3c-1.9,0.3-2.4,3-2.4,3s-0.3-4.6,3.7-5
-		c4.1-0.4,4.7,3.2,6.5,3.7c2.5,0.8,1.3-2.6,1.3-2.6s1.1,1.7,0.6,3.2C13.5,8.2,12.3,8.5,11.3,8.2z" />
-    <defs>
-        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="8" y1="-271.1102" x2="8" y2="-257.1102"
-            gradientTransform="matrix(1 0 0 -1 0 -256.1102)">
-            <stop offset="0" style="stop-color:#445470" />
-            <stop offset="1" style="stop-color:#7A869A" />
-        </linearGradient>
-    </defs>
-</svg>
diff --git a/ee/app/assets/stylesheets/page_bundles/issues_list.scss b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
index 69d0c8aa5e0a41..5858cb65d00c04 100644
--- a/ee/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -1,7 +1,9 @@
 @import '../../../../../app/assets/stylesheets/page_bundles/issues_list';
 
-.svg-container.logo-container {
-  svg {
-    vertical-align: text-bottom;
+.svg-container {
+  &.logo-container, &.jira-logo-container {
+    svg {
+      vertical-align: text-bottom;
+    }
   }
 }
-- 
GitLab


From 3b878461d83c105bf6e15b3943403e51f2baeb8f Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 14 Sep 2021 10:32:45 +0800
Subject: [PATCH 05/11] Fix style file lint issue

---
 ee/app/assets/stylesheets/page_bundles/issues_list.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/stylesheets/page_bundles/issues_list.scss b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
index 5858cb65d00c04..3f6c6469818395 100644
--- a/ee/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -1,7 +1,8 @@
 @import '../../../../../app/assets/stylesheets/page_bundles/issues_list';
 
 .svg-container {
-  &.logo-container, &.jira-logo-container {
+  &.logo-container,
+  &.jira-logo-container {
     svg {
       vertical-align: text-bottom;
     }
-- 
GitLab


From 2ae3eea00241ec761ec8e44d782fbb29c135b0b5 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 14 Sep 2021 13:50:43 +0800
Subject: [PATCH 06/11] Integrate Jira List with External List

---
 .../issues_list/components/issuable.vue       |   2 +-
 .../javascripts/external_issues_list/index.js |  10 +-
 .../jira_issues_list_empty_state.vue          |  71 ----
 .../jira/issues_list/constants.js             |   3 -
 .../queries/get_jira_issues.query.graphql     |   2 +-
 .../graphql/resolvers/jira_issues.js          |   5 +-
 .../issues_list/jira_issues_list_bundle.js    |  64 +---
 .../stylesheets/page_bundles/issues_list.scss |   9 +-
 .../external_issues_list/mock_data.js         |   2 +-
 .../mock_get_jira_issues.query.graphql        |  48 ---
 .../jira_issues_list_root_spec.js.snap        | 169 ---------
 .../jira_issues_list_empty_state_spec.js      | 203 -----------
 .../components/jira_issues_list_root_spec.js  | 335 ------------------
 .../jira/issues_list/mock_data.js             |  90 -----
 14 files changed, 32 insertions(+), 981 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_empty_state.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_list/constants.js
 delete mode 100644 ee/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
 delete mode 100644 ee/spec/frontend/integrations/jira/issues_list/components/__snapshots__/jira_issues_list_root_spec.js.snap
 delete mode 100644 ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_empty_state_spec.js
 delete mode 100644 ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_root_spec.js
 delete mode 100644 ee/spec/frontend/integrations/jira/issues_list/mock_data.js

diff --git a/app/assets/javascripts/issues_list/components/issuable.vue b/app/assets/javascripts/issues_list/components/issuable.vue
index 60b01a6d37f2eb..6dc7460b037421 100644
--- a/app/assets/javascripts/issues_list/components/issuable.vue
+++ b/app/assets/javascripts/issues_list/components/issuable.vue
@@ -315,7 +315,7 @@ export default {
             <span
               v-if="isJiraIssue"
               v-safe-html="jiraLogo"
-              class="svg-container jira-logo-container"
+              class="svg-container logo-container"
               data-testid="jira-logo"
             ></span>
             {{ referencePath }}
diff --git a/ee/app/assets/javascripts/external_issues_list/index.js b/ee/app/assets/javascripts/external_issues_list/index.js
index 4103ddcc411633..1f06994575c02c 100644
--- a/ee/app/assets/javascripts/external_issues_list/index.js
+++ b/ee/app/assets/javascripts/external_issues_list/index.js
@@ -7,8 +7,8 @@ import { queryToObject } from '~/lib/utils/url_utility';
 import externalIssuesListApp from './components/external_issues_list_root.vue';
 import getApolloProvider from './graphql';
 
-export default function externalIssuesListFactory(
-  {
+export default function externalIssuesListFactory({
+  provides: {
     getIssuesQuery,
     externalIssuesLogo,
     externalIssueTrackerName,
@@ -16,9 +16,9 @@ export default function externalIssuesListFactory(
     recentSearchesStorageKey,
     createNewIssueText,
     emptyStateNoIssueText,
-  } = {},
-  { externalIssuesQueryResolver },
-) {
+  },
+  externalIssuesQueryResolver,
+}) {
   return function initExternalIssuesList({ mountPointSelector }) {
     const mountPointEl = document.querySelector(mountPointSelector);
 
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_empty_state.vue b/ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_empty_state.vue
deleted file mode 100644
index 90c08497c7df99..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_empty_state.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-import { GlEmptyState, GlButton, GlIcon, GlSprintf } from '@gitlab/ui';
-import { IssuableStates } from '~/issuable_list/constants';
-import { __, s__ } from '~/locale';
-
-export default {
-  FilterStateEmptyMessage: {
-    [IssuableStates.Opened]: __('There are no open issues'),
-    [IssuableStates.Closed]: __('There are no closed issues'),
-  },
-  components: {
-    GlEmptyState,
-    GlButton,
-    GlIcon,
-    GlSprintf,
-  },
-  inject: ['emptyStatePath', 'issueCreateUrl'],
-  props: {
-    currentState: {
-      type: String,
-      required: true,
-    },
-    issuesCount: {
-      type: Object,
-      required: true,
-    },
-    hasFiltersApplied: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    hasIssues() {
-      return this.issuesCount[IssuableStates.Opened] + this.issuesCount[IssuableStates.Closed] > 0;
-    },
-    emptyStateTitle() {
-      if (this.hasFiltersApplied) {
-        return __('Sorry, your filter produced no results');
-      } else if (this.hasIssues) {
-        return this.$options.FilterStateEmptyMessage[this.currentState];
-      }
-      return s__(
-        'Integrations|Issues created in Jira are shown here once you have created the issues in project setup in Jira.',
-      );
-    },
-    emptyStateDescription() {
-      if (this.hasFiltersApplied) {
-        return __('To widen your search, change or remove filters above');
-      } else if (!this.hasIssues) {
-        return s__('Integrations|To keep this project going, create a new issue.');
-      }
-      return '';
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-empty-state :svg-path="emptyStatePath" :title="emptyStateTitle">
-    <template v-if="!hasIssues || hasFiltersApplied" #description>
-      <gl-sprintf :message="emptyStateDescription" />
-    </template>
-    <template v-if="!hasIssues" #actions>
-      <gl-button :href="issueCreateUrl" target="_blank" variant="confirm">
-        {{ s__('Integrations|Create new issue in Jira') }}
-        <gl-icon name="external-link" />
-      </gl-button>
-    </template>
-  </gl-empty-state>
-</template>
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/constants.js b/ee/app/assets/javascripts/integrations/jira/issues_list/constants.js
deleted file mode 100644
index b8d2532e108b11..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { __ } from '~/locale';
-
-export const ISSUES_LIST_FETCH_ERROR = __('An error occurred while loading issues');
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/queries/get_jira_issues.query.graphql b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/queries/get_jira_issues.query.graphql
index e4e55dbbbfe51a..839199d54dff73 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/queries/get_jira_issues.query.graphql
+++ b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/queries/get_jira_issues.query.graphql
@@ -9,7 +9,7 @@ query jiraIssues(
   $state: String
   $page: Integer
 ) {
-  jiraIssues(
+  externalIssues(
     issuesFetchPath: $issuesFetchPath
     search: $search
     labels: $labels
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js
index 59a31a37ed95b4..a5edff6507872b 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js
+++ b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js
@@ -1,7 +1,7 @@
 import { DEFAULT_PAGE_SIZE } from '~/issuable_list/constants';
+import { i18n } from '~/issues_list/constants';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { ISSUES_LIST_FETCH_ERROR } from '../../constants';
 
 const transformJiraIssueAssignees = (jiraIssue) => {
   return jiraIssue.assignees.map((assignee) => ({
@@ -34,6 +34,7 @@ const transformJiraIssuePageInfo = (responseHeaders = {}) => {
 };
 
 export const transformJiraIssuesREST = (response) => {
+  console.log(response);
   const { headers, data: jiraIssues } = response;
 
   return {
@@ -78,7 +79,7 @@ export default function jiraIssuesResolver(
     .catch((error) => {
       return {
         __typename: 'JiraIssues',
-        errors: error?.response?.data?.errors || [ISSUES_LIST_FETCH_ERROR],
+        errors: error?.response?.data?.errors || [i18n.errorFetchingIssues],
         pageInfo: transformJiraIssuePageInfo(),
         nodes: [],
       };
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/jira_issues_list_bundle.js b/ee/app/assets/javascripts/integrations/jira/issues_list/jira_issues_list_bundle.js
index 60e0b2e75c214d..672f03a4cb89b9 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/jira_issues_list_bundle.js
+++ b/ee/app/assets/javascripts/integrations/jira/issues_list/jira_issues_list_bundle.js
@@ -1,48 +1,20 @@
-import Vue from 'vue';
+import jiraLogo from '@gitlab/svgs/dist/illustrations/logos/jira.svg';
+import externalIssuesListFactory from 'ee/external_issues_list';
+import { s__ } from '~/locale';
+import getIssuesQuery from './graphql/queries/get_jira_issues.query.graphql';
+import jiraIssuesResolver from './graphql/resolvers/jira_issues';
 
-import { IssuableStates } from '~/issuable_list/constants';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { queryToObject } from '~/lib/utils/url_utility';
-
-import JiraIssuesListApp from './components/jira_issues_list_root.vue';
-import apolloProvider from './graphql';
-
-export default function initJiraIssuesList({ mountPointSelector }) {
-  const mountPointEl = document.querySelector(mountPointSelector);
-
-  if (!mountPointEl) {
-    return null;
-  }
-
-  const {
-    page = 1,
-    initialState = IssuableStates.Opened,
-    initialSortBy = 'created_desc',
-  } = mountPointEl.dataset;
-
-  const initialFilterParams = Object.assign(
-    convertObjectPropsToCamelCase(
-      queryToObject(window.location.search.substring(1), { gatherArrays: true }),
-      {
-        dropKeys: ['scope', 'utf8', 'state', 'sort'], // These keys are unsupported/unnecessary
-      },
+export default externalIssuesListFactory({
+  externalIssuesQueryResolver: jiraIssuesResolver,
+  provides: {
+    getIssuesQuery,
+    externalIssuesLogo: jiraLogo,
+    externalIssueTrackerName: 'Jira', // eslint-disable-line @gitlab/require-i18n-strings
+    searchInputPlaceholderText: s__('Integrations|Search Jira issues'),
+    recentSearchesStorageKey: 'jira_issues',
+    createNewIssueText: s__('Integrations|Create new issue in Jira'),
+    emptyStateNoIssueText: s__(
+      'Integrations|Issues created in Jira are shown here once you have created the issues in project setup in Jira.',
     ),
-  );
-
-  return new Vue({
-    el: mountPointEl,
-    provide: {
-      ...mountPointEl.dataset,
-      page: parseInt(page, 10),
-      initialState,
-      initialSortBy,
-    },
-    apolloProvider,
-    render: (createElement) =>
-      createElement(JiraIssuesListApp, {
-        props: {
-          initialFilterParams,
-        },
-      }),
-  });
-}
+  },
+});
diff --git a/ee/app/assets/stylesheets/page_bundles/issues_list.scss b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
index 3f6c6469818395..69d0c8aa5e0a41 100644
--- a/ee/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/ee/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -1,10 +1,7 @@
 @import '../../../../../app/assets/stylesheets/page_bundles/issues_list';
 
-.svg-container {
-  &.logo-container,
-  &.jira-logo-container {
-    svg {
-      vertical-align: text-bottom;
-    }
+.svg-container.logo-container {
+  svg {
+    vertical-align: text-bottom;
   }
 }
diff --git a/ee/spec/frontend/external_issues_list/mock_data.js b/ee/spec/frontend/external_issues_list/mock_data.js
index 9d21b6b1bfe38d..75f8f9763377bb 100644
--- a/ee/spec/frontend/external_issues_list/mock_data.js
+++ b/ee/spec/frontend/external_issues_list/mock_data.js
@@ -1,5 +1,5 @@
 import jiraLogo from '@gitlab/svgs/dist/illustrations/logos/jira.svg';
-import mockGetJiraIssuesQuery from './mock_get_jira_issues.query.graphql';
+import mockGetJiraIssuesQuery from 'ee/integrations/jira/issues_list/graphql/queries/get_jira_issues.query.graphql';
 
 export const mockProvide = {
   initialState: 'opened',
diff --git a/ee/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql b/ee/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
deleted file mode 100644
index 4b8c57bb544602..00000000000000
--- a/ee/spec/frontend/external_issues_list/mock_get_jira_issues.query.graphql
+++ /dev/null
@@ -1,48 +0,0 @@
-#import "ee/integrations/jira/issues_list/graphql/fragments/jira_label.fragment.graphql"
-#import "ee/integrations/jira/issues_list/graphql/fragments/jira_user.fragment.graphql"
-
-query jiraIssues(
-  $issuesFetchPath: String
-  $search: String
-  $labels: String
-  $sort: String
-  $state: String
-  $page: Integer
-) {
-  externalIssues(
-    issuesFetchPath: $issuesFetchPath
-    search: $search
-    labels: $labels
-    sort: $sort
-    state: $state
-    page: $page
-  ) @client {
-    errors
-    pageInfo {
-      total
-      page
-    }
-    nodes {
-      id
-      projectId
-      createdAt
-      updatedAt
-      closedAt
-      title
-      webUrl
-      gitlabWebUrl
-      status
-      references
-      externalTracker
-      labels {
-        ...JiraLabel
-      }
-      assignees {
-        ...JiraUser
-      }
-      author {
-        ...JiraUser
-      }
-    }
-  }
-}
diff --git a/ee/spec/frontend/integrations/jira/issues_list/components/__snapshots__/jira_issues_list_root_spec.js.snap b/ee/spec/frontend/integrations/jira/issues_list/components/__snapshots__/jira_issues_list_root_spec.js.snap
deleted file mode 100644
index ca264c097d2afb..00000000000000
--- a/ee/spec/frontend/integrations/jira/issues_list/components/__snapshots__/jira_issues_list_root_spec.js.snap
+++ /dev/null
@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`JiraIssuesListRoot when request succeeds renders issuable-list component with correct props 1`] = `
-Object {
-  "currentPage": 1,
-  "currentTab": "opened",
-  "defaultPageSize": 2,
-  "enableLabelPermalinks": true,
-  "hasNextPage": false,
-  "hasPreviousPage": false,
-  "initialFilterValue": Array [],
-  "initialSortBy": "created_desc",
-  "isManualOrdering": false,
-  "issuableSymbol": "#",
-  "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",
-  "nextPage": 2,
-  "previousPage": 0,
-  "recentSearchesStorageKey": "jira_issues",
-  "searchInputPlaceholder": "Search Jira issues",
-  "searchTokens": Array [
-    Object {
-      "defaultLabels": Array [],
-      "fetchLabels": [Function],
-      "icon": "labels",
-      "operators": Array [
-        Object {
-          "description": "is",
-          "value": "=",
-        },
-      ],
-      "symbol": "~",
-      "title": "Label",
-      "token": "LabelTokenMock",
-      "type": "labels",
-      "unique": false,
-    },
-  ],
-  "showBulkEditSidebar": false,
-  "showPaginationControls": true,
-  "sortOptions": Array [
-    Object {
-      "id": 1,
-      "sortDirection": Object {
-        "ascending": "created_asc",
-        "descending": "created_desc",
-      },
-      "title": "Created date",
-    },
-    Object {
-      "id": 2,
-      "sortDirection": Object {
-        "ascending": "updated_asc",
-        "descending": "updated_desc",
-      },
-      "title": "Last updated",
-    },
-  ],
-  "tabCounts": null,
-  "tabs": Array [
-    Object {
-      "id": "state-opened",
-      "name": "opened",
-      "title": "Open",
-      "titleTooltip": "Filter by issues that are currently opened.",
-    },
-    Object {
-      "id": "state-closed",
-      "name": "closed",
-      "title": "Closed",
-      "titleTooltip": "Filter by issues that are currently closed.",
-    },
-    Object {
-      "id": "state-all",
-      "name": "all",
-      "title": "All",
-      "titleTooltip": "Show all issues.",
-    },
-  ],
-  "totalItems": 3,
-  "urlParams": Object {
-    "labels[]": undefined,
-    "search": undefined,
-  },
-  "useKeysetPagination": false,
-}
-`;
diff --git a/ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_empty_state_spec.js b/ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_empty_state_spec.js
deleted file mode 100644
index 03a1ca5390c5aa..00000000000000
--- a/ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_empty_state_spec.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-
-import JiraIssuesListEmptyState from 'ee/integrations/jira/issues_list/components/jira_issues_list_empty_state.vue';
-import { IssuableStates } from '~/issuable_list/constants';
-
-import { mockProvide } from '../mock_data';
-
-const createComponent = (props = {}) =>
-  shallowMount(JiraIssuesListEmptyState, {
-    provide: mockProvide,
-    propsData: {
-      currentState: 'opened',
-      issuesCount: {
-        [IssuableStates.Opened]: 0,
-        [IssuableStates.Closed]: 0,
-        [IssuableStates.All]: 0,
-      },
-      hasFiltersApplied: false,
-      ...props,
-    },
-    stubs: { GlEmptyState },
-  });
-
-describe('JiraIssuesListEmptyState', () => {
-  const titleDefault =
-    'Issues created in Jira are shown here once you have created the issues in project setup in Jira.';
-  const titleWhenFilters = 'Sorry, your filter produced no results';
-  const titleWhenIssues = 'There are no open issues';
-
-  const descriptionWhenFilters = 'To widen your search, change or remove filters above';
-  const descriptionWhenNoIssues = 'To keep this project going, create a new issue.';
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('computed', () => {
-    describe('hasIssues', () => {
-      it('returns false when total of opened and closed issues within `issuesCount` is 0', () => {
-        expect(wrapper.vm.hasIssues).toBe(false);
-      });
-
-      it('returns true when total of opened and closed issues within `issuesCount` is more than 0', async () => {
-        wrapper.setProps({
-          issuesCount: {
-            [IssuableStates.Opened]: 1,
-            [IssuableStates.Closed]: 1,
-          },
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.hasIssues).toBe(true);
-      });
-    });
-
-    describe('emptyStateTitle', () => {
-      it(`returns string "${titleWhenFilters}" when hasFiltersApplied prop is true`, async () => {
-        wrapper.setProps({
-          hasFiltersApplied: true,
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.emptyStateTitle).toBe(titleWhenFilters);
-      });
-
-      it(`returns string "${titleWhenIssues}" when hasFiltersApplied prop is false and hasIssues is true`, async () => {
-        wrapper.setProps({
-          hasFiltersApplied: false,
-          issuesCount: {
-            [IssuableStates.Opened]: 1,
-            [IssuableStates.Closed]: 1,
-          },
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.emptyStateTitle).toBe(titleWhenIssues);
-      });
-
-      it('returns default title string when both hasFiltersApplied and hasIssues props are false', async () => {
-        wrapper.setProps({
-          hasFiltersApplied: false,
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.emptyStateTitle).toBe(titleDefault);
-      });
-    });
-
-    describe('emptyStateDescription', () => {
-      it(`returns string "${descriptionWhenFilters}" when hasFiltersApplied prop is true`, async () => {
-        wrapper.setProps({
-          hasFiltersApplied: true,
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.emptyStateDescription).toBe(descriptionWhenFilters);
-      });
-
-      it(`returns string "${descriptionWhenNoIssues}" when both hasFiltersApplied and hasIssues props are false`, async () => {
-        wrapper.setProps({
-          hasFiltersApplied: false,
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.emptyStateDescription).toBe(descriptionWhenNoIssues);
-      });
-
-      it(`returns empty string when hasFiltersApplied is false and hasIssues is true`, async () => {
-        wrapper.setProps({
-          hasFiltersApplied: false,
-          issuesCount: {
-            [IssuableStates.Opened]: 1,
-            [IssuableStates.Closed]: 1,
-          },
-        });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.emptyStateDescription).toBe('');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders gl-empty-state component', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
-    });
-
-    it('renders empty state title', async () => {
-      const emptyStateEl = wrapper.find(GlEmptyState);
-
-      expect(emptyStateEl.props()).toMatchObject({
-        svgPath: mockProvide.emptyStatePath,
-        title:
-          'Issues created in Jira are shown here once you have created the issues in project setup in Jira.',
-      });
-
-      wrapper.setProps({
-        hasFiltersApplied: true,
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(emptyStateEl.props('title')).toBe('Sorry, your filter produced no results');
-
-      wrapper.setProps({
-        hasFiltersApplied: false,
-        issuesCount: {
-          [IssuableStates.Opened]: 1,
-          [IssuableStates.Closed]: 1,
-        },
-      });
-
-      await wrapper.vm.$nextTick();
-
-      expect(emptyStateEl.props('title')).toBe('There are no open issues');
-    });
-
-    it('renders empty state description', () => {
-      const descriptionEl = wrapper.find(GlSprintf);
-
-      expect(descriptionEl.exists()).toBe(true);
-      expect(descriptionEl.attributes('message')).toBe(
-        'To keep this project going, create a new issue.',
-      );
-    });
-
-    it('does not render empty state description when issues are present', async () => {
-      wrapper.setProps({
-        issuesCount: {
-          [IssuableStates.Opened]: 1,
-          [IssuableStates.Closed]: 1,
-        },
-      });
-
-      await wrapper.vm.$nextTick();
-
-      const descriptionEl = wrapper.find(GlSprintf);
-
-      expect(descriptionEl.exists()).toBe(false);
-    });
-
-    it('renders "Create new issue in Jira" button', () => {
-      const buttonEl = wrapper.find(GlButton);
-
-      expect(buttonEl.exists()).toBe(true);
-      expect(buttonEl.attributes('href')).toBe(mockProvide.issueCreateUrl);
-      expect(buttonEl.text()).toBe('Create new issue in Jira');
-    });
-  });
-});
diff --git a/ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_root_spec.js b/ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_root_spec.js
deleted file mode 100644
index bf8ee08ad3ac2e..00000000000000
--- a/ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_root_spec.js
+++ /dev/null
@@ -1,335 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import VueApollo from 'vue-apollo';
-
-import JiraIssuesListRoot from 'ee/integrations/jira/issues_list/components/jira_issues_list_root.vue';
-import { ISSUES_LIST_FETCH_ERROR } from 'ee/integrations/jira/issues_list/constants';
-import jiraIssues from 'ee/integrations/jira/issues_list/graphql/resolvers/jira_issues';
-
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-
-import createFlash from '~/flash';
-import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
-import axios from '~/lib/utils/axios_utils';
-import httpStatus from '~/lib/utils/http_status';
-
-import { mockProvide, mockJiraIssues } from '../mock_data';
-
-jest.mock('~/flash');
-jest.mock('~/issuable_list/constants', () => ({
-  DEFAULT_PAGE_SIZE: 2,
-  IssuableStates: jest.requireActual('~/issuable_list/constants').IssuableStates,
-  IssuableListTabs: jest.requireActual('~/issuable_list/constants').IssuableListTabs,
-  AvailableSortOptions: jest.requireActual('~/issuable_list/constants').AvailableSortOptions,
-}));
-jest.mock(
-  '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue',
-  () => 'LabelTokenMock',
-);
-
-const resolvedValue = {
-  headers: {
-    'x-page': 1,
-    'x-total': mockJiraIssues.length,
-  },
-  data: mockJiraIssues,
-};
-
-const localVue = createLocalVue();
-
-const resolvers = {
-  Query: {
-    jiraIssues,
-  },
-};
-
-function createMockApolloProvider(mockResolvers = resolvers) {
-  localVue.use(VueApollo);
-  return createMockApollo([], mockResolvers);
-}
-
-describe('JiraIssuesListRoot', () => {
-  let wrapper;
-  let mock;
-
-  const mockSearchTerm = 'test issue';
-  const mockLabel = 'ecosystem';
-
-  const findIssuableList = () => wrapper.findComponent(IssuableList);
-  const createLabelFilterEvent = (data) => ({ type: 'labels', value: { data } });
-  const createSearchFilterEvent = (data) => ({ type: 'filtered-search-term', value: { data } });
-
-  const createComponent = ({
-    apolloProvider = createMockApolloProvider(),
-    provide = mockProvide,
-    initialFilterParams = {},
-  } = {}) => {
-    wrapper = shallowMount(JiraIssuesListRoot, {
-      propsData: {
-        initialFilterParams,
-      },
-      provide,
-      localVue,
-      apolloProvider,
-    });
-  };
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    mock.restore();
-  });
-
-  describe('while loading', () => {
-    it('sets issuesListLoading to `true`', async () => {
-      jest.spyOn(axios, 'get').mockResolvedValue(new Promise(() => {}));
-
-      createComponent();
-      await wrapper.vm.$nextTick();
-
-      const issuableList = findIssuableList();
-      expect(issuableList.props('issuablesLoading')).toBe(true);
-    });
-
-    it('calls `axios.get` with `issuesFetchPath` and query params', async () => {
-      jest.spyOn(axios, 'get');
-
-      createComponent();
-      await waitForPromises();
-
-      expect(axios.get).toHaveBeenCalledWith(
-        mockProvide.issuesFetchPath,
-        expect.objectContaining({
-          params: {
-            with_labels_details: true,
-            page: wrapper.vm.currentPage,
-            per_page: wrapper.vm.$options.defaultPageSize,
-            state: wrapper.vm.currentState,
-            sort: wrapper.vm.sortedBy,
-            search: wrapper.vm.filterParams.search,
-          },
-        }),
-      );
-    });
-  });
-
-  describe('with `initialFilterParams` prop', () => {
-    beforeEach(async () => {
-      jest.spyOn(axios, 'get').mockResolvedValue(resolvedValue);
-
-      createComponent({
-        initialFilterParams: {
-          labels: [mockLabel],
-          search: mockSearchTerm,
-        },
-      });
-      await waitForPromises();
-    });
-
-    it('renders issuable-list component with correct props', () => {
-      const issuableList = findIssuableList();
-
-      expect(issuableList.props('initialFilterValue')).toEqual([
-        { type: 'labels', value: { data: mockLabel } },
-        { type: 'filtered-search-term', value: { data: mockSearchTerm } },
-      ]);
-      expect(issuableList.props('urlParams').search).toBe(mockSearchTerm);
-    });
-  });
-
-  describe('when request succeeds', () => {
-    beforeEach(async () => {
-      jest.spyOn(axios, 'get').mockResolvedValue(resolvedValue);
-
-      createComponent();
-      await waitForPromises();
-    });
-
-    it('renders issuable-list component with correct props', () => {
-      const issuableList = findIssuableList();
-      expect(issuableList.exists()).toBe(true);
-      expect(issuableList.props()).toMatchSnapshot();
-    });
-
-    describe('issuable-list events', () => {
-      it('"click-tab" event executes GET request correctly', async () => {
-        const issuableList = findIssuableList();
-
-        issuableList.vm.$emit('click-tab', 'closed');
-        await waitForPromises();
-
-        expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
-          params: {
-            labels: undefined,
-            page: 1,
-            per_page: 2,
-            search: undefined,
-            sort: 'created_desc',
-            state: 'closed',
-            with_labels_details: true,
-          },
-        });
-        expect(issuableList.props('currentTab')).toBe('closed');
-      });
-
-      it('"page-change" event executes GET request correctly', async () => {
-        const mockPage = 2;
-        const issuableList = findIssuableList();
-        jest.spyOn(axios, 'get').mockResolvedValue({
-          ...resolvedValue,
-          headers: { 'x-page': mockPage, 'x-total': mockJiraIssues.length },
-        });
-
-        issuableList.vm.$emit('page-change', mockPage);
-        await waitForPromises();
-
-        expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
-          params: {
-            labels: undefined,
-            page: mockPage,
-            per_page: 2,
-            search: undefined,
-            sort: 'created_desc',
-            state: 'opened',
-            with_labels_details: true,
-          },
-        });
-
-        await wrapper.vm.$nextTick();
-        expect(issuableList.props()).toMatchObject({
-          currentPage: mockPage,
-          previousPage: mockPage - 1,
-          nextPage: mockPage + 1,
-        });
-      });
-
-      it('"sort" event executes GET request correctly', async () => {
-        const mockSortBy = 'updated_asc';
-        const issuableList = findIssuableList();
-
-        issuableList.vm.$emit('sort', mockSortBy);
-        await waitForPromises();
-
-        expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
-          params: {
-            labels: undefined,
-            page: 1,
-            per_page: 2,
-            search: undefined,
-            sort: 'created_desc',
-            state: 'opened',
-            with_labels_details: true,
-          },
-        });
-        expect(issuableList.props('initialSortBy')).toBe(mockSortBy);
-      });
-
-      it.each`
-        desc                        | input                                                                           | expected
-        ${'with label and search'}  | ${[createLabelFilterEvent(mockLabel), createSearchFilterEvent(mockSearchTerm)]} | ${{ labels: [mockLabel], search: mockSearchTerm }}
-        ${'with multiple lables'}   | ${[createLabelFilterEvent('label1'), createLabelFilterEvent('label2')]}         | ${{ labels: ['label1', 'label2'], search: undefined }}
-        ${'with multiple searches'} | ${[createSearchFilterEvent('foo bar'), createSearchFilterEvent('lorem')]}       | ${{ labels: undefined, search: 'foo bar lorem' }}
-      `(
-        '$desc, filter event sets "filterParams" value and calls fetchIssues',
-        async ({ input, expected }) => {
-          const issuableList = findIssuableList();
-
-          issuableList.vm.$emit('filter', input);
-          await waitForPromises();
-
-          expect(axios.get).toHaveBeenCalledWith(mockProvide.issuesFetchPath, {
-            params: {
-              page: 1,
-              per_page: 2,
-              sort: 'created_desc',
-              state: 'opened',
-              with_labels_details: true,
-              ...expected,
-            },
-          });
-        },
-      );
-    });
-  });
-
-  describe('error handling', () => {
-    describe('when request fails', () => {
-      it.each`
-        APIErrors        | expectedRenderedErrorMessage
-        ${['API error']} | ${'API error'}
-        ${undefined}     | ${ISSUES_LIST_FETCH_ERROR}
-      `(
-        'calls `createFlash` with "$expectedRenderedErrorMessage" when API responds with "$APIErrors"',
-        async ({ APIErrors, expectedRenderedErrorMessage }) => {
-          jest.spyOn(axios, 'get');
-          mock
-            .onGet(mockProvide.issuesFetchPath)
-            .replyOnce(httpStatus.INTERNAL_SERVER_ERROR, { errors: APIErrors });
-
-          createComponent();
-          await waitForPromises();
-
-          expect(createFlash).toHaveBeenCalledWith({
-            message: expectedRenderedErrorMessage,
-            captureError: true,
-            error: expect.any(Object),
-          });
-        },
-      );
-    });
-
-    describe('when GraphQL network error is encountered', () => {
-      it('calls `createFlash` correctly with default error message', async () => {
-        createComponent({
-          apolloProvider: createMockApolloProvider({
-            Query: {
-              jiraIssues: jest.fn().mockRejectedValue(new Error('GraphQL networkError')),
-            },
-          }),
-        });
-        await waitForPromises();
-
-        expect(createFlash).toHaveBeenCalledWith({
-          message: ISSUES_LIST_FETCH_ERROR,
-          captureError: true,
-          error: expect.any(Object),
-        });
-      });
-    });
-  });
-
-  describe('pagination', () => {
-    it.each`
-      scenario                 | issuesListLoadFailed | issues            | shouldShowPaginationControls
-      ${'fails'}               | ${true}              | ${[]}             | ${false}
-      ${'returns no issues'}   | ${false}             | ${[]}             | ${false}
-      ${`returns some issues`} | ${false}             | ${mockJiraIssues} | ${true}
-    `(
-      'sets `showPaginationControls` prop to $shouldShowPaginationControls when request $scenario',
-      async ({ issuesListLoadFailed, issues, shouldShowPaginationControls }) => {
-        jest.spyOn(axios, 'get');
-        mock
-          .onGet(mockProvide.issuesFetchPath)
-          .replyOnce(
-            issuesListLoadFailed ? httpStatus.INTERNAL_SERVER_ERROR : httpStatus.OK,
-            issues,
-            {
-              'x-page': 1,
-              'x-total': issues.length,
-            },
-          );
-
-        createComponent();
-        await waitForPromises();
-
-        expect(findIssuableList().props('showPaginationControls')).toBe(
-          shouldShowPaginationControls,
-        );
-      },
-    );
-  });
-});
diff --git a/ee/spec/frontend/integrations/jira/issues_list/mock_data.js b/ee/spec/frontend/integrations/jira/issues_list/mock_data.js
deleted file mode 100644
index 1e3d9be3caeac8..00000000000000
--- a/ee/spec/frontend/integrations/jira/issues_list/mock_data.js
+++ /dev/null
@@ -1,90 +0,0 @@
-export const mockProvide = {
-  initialState: 'opened',
-  initialSortBy: 'created_desc',
-  page: 1,
-  issuesFetchPath: '/gitlab-org/gitlab-test/-/integrations/jira/issues.json',
-  projectFullPath: 'gitlab-org/gitlab-test',
-  issueCreateUrl: 'https://gitlab-jira.atlassian.net/secure/CreateIssue!default.jspa',
-  emptyStatePath: '/assets/illustrations/issues.svg',
-};
-
-export const mockJiraIssue1 = {
-  project_id: 1,
-  title: 'Eius fuga voluptates.',
-  created_at: '2020-03-19T14:31:51.281Z',
-  updated_at: '2020-10-20T07:01:45.865Z',
-  closed_at: null,
-  status: 'Selected for Development',
-  labels: [
-    {
-      title: 'backend',
-      name: 'backend',
-      color: '#0052CC',
-      text_color: '#FFFFFF',
-    },
-  ],
-  author: {
-    name: 'jhope',
-    web_url: 'https://gitlab-jira.atlassian.net/people/5e32f803e127810e82875bc1',
-    avatar_url: null,
-  },
-  assignees: [
-    {
-      name: 'Kushal Pandya',
-      web_url: 'https://gitlab-jira.atlassian.net/people/1920938475',
-      avatar_url: null,
-    },
-  ],
-  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31596',
-  gitlab_web_url: '',
-  references: {
-    relative: 'IG-31596',
-  },
-  external_tracker: 'jira',
-};
-
-export const mockJiraIssue2 = {
-  project_id: 1,
-  title: 'Hic sit sint ducimus ea et sint.',
-  created_at: '2020-03-19T14:31:50.677Z',
-  updated_at: '2020-03-19T14:31:50.677Z',
-  closed_at: null,
-  status: 'Backlog',
-  labels: [],
-  author: {
-    name: 'Gabe Weaver',
-    web_url: 'https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde',
-    avatar_url: null,
-  },
-  assignees: [],
-  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31595',
-  gitlab_web_url: '',
-  references: {
-    relative: 'IG-31595',
-  },
-  external_tracker: 'jira',
-};
-
-export const mockJiraIssue3 = {
-  project_id: 1,
-  title: 'Alias ut modi est labore.',
-  created_at: '2020-03-19T14:31:50.012Z',
-  updated_at: '2020-03-19T14:31:50.012Z',
-  closed_at: null,
-  status: 'Backlog',
-  labels: [],
-  author: {
-    name: 'Gabe Weaver',
-    web_url: 'https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde',
-    avatar_url: null,
-  },
-  assignees: [],
-  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31594',
-  gitlab_web_url: '',
-  references: {
-    relative: 'IG-31594',
-  },
-  external_tracker: 'jira',
-};
-
-export const mockJiraIssues = [mockJiraIssue1, mockJiraIssue2, mockJiraIssue3];
-- 
GitLab


From 33eaa1620ddc90602454f14f7dd3a6d385d24a20 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 14 Sep 2021 14:52:07 +0800
Subject: [PATCH 07/11] Remove unexpected console statement.

---
 .../jira/issues_list/graphql/resolvers/jira_issues.js            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js
index a5edff6507872b..9c23fbd9d6fa9b 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js
+++ b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/resolvers/jira_issues.js
@@ -34,7 +34,6 @@ const transformJiraIssuePageInfo = (responseHeaders = {}) => {
 };
 
 export const transformJiraIssuesREST = (response) => {
-  console.log(response);
   const { headers, data: jiraIssues } = response;
 
   return {
-- 
GitLab


From 85ef58f22f7cd766cec07ccf404b371e45453ef4 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 16 Sep 2021 10:01:55 +0800
Subject: [PATCH 08/11] Rebase and address comments

---
 .../components/external_issues_list_root.vue   |  4 +++-
 .../javascripts/external_issues_list/index.js  | 15 ++++++---------
 .../jira/issues_list/graphql/index.js          | 18 ------------------
 3 files changed, 9 insertions(+), 28 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_list/graphql/index.js

diff --git a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
index 0de509959ab516..335a5f1f421c77 100644
--- a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
+++ b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
@@ -261,7 +261,9 @@ export default {
     </template>
     <template #reference="{ issuable }">
       <span v-safe-html="externalIssuesLogo" class="svg-container logo-container"></span>
-      <span v-if="issuable">{{ issuable.id }}</span>
+      <span v-if="issuable">
+        {{ issuable.reference ? issuable.reference.id : issuable.id }}
+      </span>
     </template>
     <template #author="{ author }">
       <gl-sprintf :message="`%{authorName} in ${externalIssueTrackerName}`">
diff --git a/ee/app/assets/javascripts/external_issues_list/index.js b/ee/app/assets/javascripts/external_issues_list/index.js
index 1f06994575c02c..c992b25f38a117 100644
--- a/ee/app/assets/javascripts/external_issues_list/index.js
+++ b/ee/app/assets/javascripts/external_issues_list/index.js
@@ -4,7 +4,7 @@ import { IssuableStates } from '~/issuable_list/constants';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { queryToObject } from '~/lib/utils/url_utility';
 
-import externalIssuesListApp from './components/external_issues_list_root.vue';
+import ExternalIssuesListApp from './components/external_issues_list_root.vue';
 import getApolloProvider from './graphql';
 
 export default function externalIssuesListFactory({
@@ -31,12 +31,6 @@ export default function externalIssuesListFactory({
       initialState = IssuableStates.Opened,
       initialSortBy = 'created_desc',
     } = mountPointEl.dataset;
-    const defaultProvide = {
-      ...mountPointEl.dataset,
-      page: parseInt(page, 10),
-      initialState,
-      initialSortBy,
-    };
 
     const initialFilterParams = Object.assign(
       convertObjectPropsToCamelCase(
@@ -50,7 +44,10 @@ export default function externalIssuesListFactory({
     return new Vue({
       el: mountPointEl,
       provide: {
-        ...defaultProvide,
+        ...mountPointEl.dataset,
+        page: parseInt(page, 10),
+        initialState,
+        initialSortBy,
         getIssuesQuery,
         externalIssuesLogo,
         externalIssueTrackerName,
@@ -61,7 +58,7 @@ export default function externalIssuesListFactory({
       },
       apolloProvider: getApolloProvider(externalIssuesQueryResolver),
       render: (createElement) =>
-        createElement(externalIssuesListApp, {
+        createElement(ExternalIssuesListApp, {
           props: {
             initialFilterParams,
           },
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/index.js b/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/index.js
deleted file mode 100644
index 0c4f014e4ad1b2..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/graphql/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
-import jiraIssues from './resolvers/jira_issues';
-
-Vue.use(VueApollo);
-
-const resolvers = {
-  Query: {
-    jiraIssues,
-  },
-};
-
-const defaultClient = createDefaultClient(resolvers, { assumeImmutableResults: true });
-
-export default new VueApollo({
-  defaultClient,
-});
-- 
GitLab


From 150fa51b779b13e44a5f42c68e4f98f7c6aa2806 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 16 Sep 2021 16:28:54 +0800
Subject: [PATCH 09/11] Fix reference slot error and add test for reference
 slot

---
 .../components/external_issues_list_root.vue  |  2 +-
 .../external_issues_list_root_spec.js         | 47 ++++++++++++++++++-
 .../external_issues_list/mock_data.js         | 20 ++++++++
 3 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
index 335a5f1f421c77..d517b115677015 100644
--- a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
+++ b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
@@ -262,7 +262,7 @@ export default {
     <template #reference="{ issuable }">
       <span v-safe-html="externalIssuesLogo" class="svg-container logo-container"></span>
       <span v-if="issuable">
-        {{ issuable.reference ? issuable.reference.id : issuable.id }}
+        {{ issuable.references ? issuable.references.relative : issuable.id }}
       </span>
     </template>
     <template #author="{ author }">
diff --git a/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js b/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
index 3bc57bc50a5e3a..32e362f0afa9db 100644
--- a/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
+++ b/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import VueApollo from 'vue-apollo';
 
@@ -13,7 +13,11 @@ import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 
-import { mockProvide, mockJiraIssues as mockExternalIssues } from '../mock_data';
+import {
+  mockProvide,
+  mockJiraIssues as mockExternalIssues,
+  mockJiraIssue4 as mockJiraIssueNoReference,
+} from '../mock_data';
 
 jest.mock('~/flash');
 jest.mock('~/issuable_list/constants', () => ({
@@ -154,6 +158,45 @@ describe('ExternalIssuesListRoot', () => {
       expect(issuableList.props()).toMatchSnapshot();
     });
 
+    describe('issuable-list reference section', () => {
+      it('renders issuable-list component with correct reference', async () => {
+        jest.spyOn(axios, 'get').mockResolvedValue(resolvedValue);
+
+        wrapper = mount(ExternalIssuesListRoot, {
+          propsData: {
+            initialFilterParams: {},
+          },
+          provide: mockProvide,
+          localVue,
+          apolloProvider: createMockApolloProvider(),
+        });
+        await waitForPromises();
+        expect(wrapper.find('.issuable-info').text()).toContain(
+          resolvedValue.data[0].references.relative,
+        );
+      });
+
+      it('renders issuable-list component with id when references is not presence', async () => {
+        jest.spyOn(axios, 'get').mockResolvedValue({
+          ...resolvedValue,
+          data: [mockJiraIssueNoReference],
+        });
+
+        wrapper = mount(ExternalIssuesListRoot, {
+          propsData: {
+            initialFilterParams: {},
+          },
+          provide: mockProvide,
+          localVue,
+          apolloProvider: createMockApolloProvider(),
+        });
+        await waitForPromises();
+        // Since Jira transformer transforms references.relative into id, we can only test
+        // whether it exists.
+        expect(wrapper.find('.issuable-info').exists()).toBe(false);
+      });
+    });
+
     describe('issuable-list events', () => {
       it('"click-tab" event executes GET request correctly', async () => {
         const issuableList = findIssuableList();
diff --git a/ee/spec/frontend/external_issues_list/mock_data.js b/ee/spec/frontend/external_issues_list/mock_data.js
index 75f8f9763377bb..daec15adb8fb7c 100644
--- a/ee/spec/frontend/external_issues_list/mock_data.js
+++ b/ee/spec/frontend/external_issues_list/mock_data.js
@@ -99,4 +99,24 @@ export const mockJiraIssue3 = {
   external_tracker: 'jira',
 };
 
+// issue without reference presence
+export const mockJiraIssue4 = {
+  project_id: 1,
+  title: 'Alias ut modi est labore.',
+  created_at: '2020-03-19T14:31:50.012Z',
+  updated_at: '2020-03-19T14:31:50.012Z',
+  closed_at: null,
+  status: 'Backlog',
+  labels: [],
+  author: {
+    name: 'Gabe Weaver',
+    web_url: 'https://gitlab-jira.atlassian.net/people/5e320a31fe03e20c9d1dccde',
+    avatar_url: null,
+  },
+  assignees: [],
+  web_url: 'https://gitlab-jira.atlassian.net/browse/IG-31594',
+  gitlab_web_url: '',
+  external_tracker: 'jira',
+};
+
 export const mockJiraIssues = [mockJiraIssue1, mockJiraIssue2, mockJiraIssue3];
-- 
GitLab


From 38d2acc3f162d3df3561610b81e72df88cdf6457 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 16 Sep 2021 17:12:00 +0800
Subject: [PATCH 10/11] Update external issues list to align the newest jira
 list

---
 .../components/external_issues_list_root.vue  |   8 +-
 .../components/jira_issues_list_root.vue      | 277 ------------------
 2 files changed, 4 insertions(+), 281 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue

diff --git a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
index d517b115677015..0f1ffd71fbcefb 100644
--- a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
+++ b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
@@ -124,8 +124,8 @@ export default {
         this.totalIssues = pageInfo.total;
         this.issuesCount[this.currentState] = nodes.length;
       },
-      error() {
-        this.onExternalIssuesQueryError(new Error(this.$options.i18n.errorFetchingIssues));
+      error(error) {
+        this.onExternalIssuesQueryError(error, this.$options.i18n.errorFetchingIssues);
       },
     },
   },
@@ -172,9 +172,9 @@ export default {
 
       return filteredSearchValue;
     },
-    onExternalIssuesQueryError(error) {
+    onExternalIssuesQueryError(error, message) {
       createFlash({
-        message: error.message,
+        message: message || error.message,
         captureError: true,
         error,
       });
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue
deleted file mode 100644
index 317a42af8ec5a8..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_list/components/jira_issues_list_root.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<script>
-import jiraLogo from '@gitlab/svgs/dist/illustrations/logos/jira.svg';
-import { GlButton, GlIcon, GlLink, GlSprintf, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-
-import createFlash from '~/flash';
-import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
-import {
-  IssuableStates,
-  IssuableListTabs,
-  AvailableSortOptions,
-  DEFAULT_PAGE_SIZE,
-} from '~/issuable_list/constants';
-import {
-  FILTERED_SEARCH_LABELS,
-  FILTERED_SEARCH_TERM,
-  OPERATOR_IS_ONLY,
-  TOKEN_TITLE_LABEL,
-} from '~/vue_shared/components/filtered_search_bar/constants';
-import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
-
-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';
-
-export default {
-  name: 'JiraIssuesList',
-  IssuableListTabs,
-  AvailableSortOptions,
-  defaultPageSize: DEFAULT_PAGE_SIZE,
-  components: {
-    GlButton,
-    GlIcon,
-    GlLink,
-    GlSprintf,
-    IssuableList,
-    JiraIssuesListEmptyState,
-  },
-  directives: {
-    SafeHtml,
-  },
-  inject: [
-    'initialState',
-    'initialSortBy',
-    'page',
-    'issuesFetchPath',
-    'projectFullPath',
-    'issueCreateUrl',
-  ],
-  props: {
-    initialFilterParams: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      jiraLogo,
-      issues: [],
-      totalIssues: 0,
-      currentState: this.initialState,
-      filterParams: this.initialFilterParams,
-      sortedBy: this.initialSortBy,
-      currentPage: this.page,
-      issuesCount: {
-        [IssuableStates.Opened]: 0,
-        [IssuableStates.Closed]: 0,
-        [IssuableStates.All]: 0,
-      },
-    };
-  },
-  computed: {
-    issuesListLoading() {
-      return this.$apollo.queries.jiraIssues.loading;
-    },
-    showPaginationControls() {
-      return Boolean(!this.issuesListLoading && this.issues.length && this.totalIssues > 1);
-    },
-    hasFiltersApplied() {
-      return Boolean(this.filterParams.search || this.filterParams.labels);
-    },
-    urlParams() {
-      return {
-        'labels[]': this.filterParams.labels,
-        search: this.filterParams.search,
-        ...(this.currentPage === 1 ? {} : { page: this.currentPage }),
-        ...(this.sortedBy === this.initialSortBy ? {} : { sort: this.sortedBy }),
-        ...(this.currentState === this.initialState ? {} : { state: this.currentState }),
-      };
-    },
-  },
-  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) {
-          this.onJiraIssuesQueryError(new Error(errors[0]));
-          return;
-        }
-
-        this.issues = nodes;
-        this.currentPage = pageInfo.page;
-        this.totalIssues = pageInfo.total;
-        this.issuesCount[this.currentState] = nodes.length;
-      },
-      error(error) {
-        this.onJiraIssuesQueryError(error, ISSUES_LIST_FETCH_ERROR);
-      },
-    },
-  },
-  methods: {
-    getFilteredSearchTokens() {
-      return [
-        {
-          type: FILTERED_SEARCH_LABELS,
-          icon: 'labels',
-          symbol: '~',
-          title: TOKEN_TITLE_LABEL,
-          unique: false,
-          token: LabelToken,
-          operators: OPERATOR_IS_ONLY,
-          defaultLabels: [],
-          fetchLabels: () => {
-            return Promise.resolve([]);
-          },
-        },
-      ];
-    },
-    getFilteredSearchValue() {
-      const { labels, search } = this.filterParams || {};
-      const filteredSearchValue = [];
-
-      if (labels) {
-        filteredSearchValue.push(
-          ...labels.map((label) => ({
-            type: FILTERED_SEARCH_LABELS,
-            value: { data: label },
-          })),
-        );
-      }
-
-      if (search) {
-        filteredSearchValue.push({
-          type: FILTERED_SEARCH_TERM,
-          value: {
-            data: search,
-          },
-        });
-      }
-
-      return filteredSearchValue;
-    },
-    onJiraIssuesQueryError(error, message) {
-      createFlash({
-        message: message || error.message,
-        captureError: true,
-        error,
-      });
-    },
-    onIssuableListClickTab(selectedIssueState) {
-      this.currentPage = 1;
-      this.currentState = selectedIssueState;
-    },
-    onIssuableListPageChange(selectedPage) {
-      this.currentPage = selectedPage;
-    },
-    onIssuableListSort(selectedSort) {
-      this.currentPage = 1;
-      this.sortedBy = selectedSort;
-    },
-    onIssuableListFilter(filters = []) {
-      const filterParams = {};
-      const labels = [];
-      const plainText = [];
-
-      filters.forEach((filter) => {
-        if (!filter.value.data) return;
-
-        switch (filter.type) {
-          case FILTERED_SEARCH_LABELS:
-            labels.push(filter.value.data);
-            break;
-          case FILTERED_SEARCH_TERM:
-            plainText.push(filter.value.data);
-            break;
-          default:
-            break;
-        }
-      });
-
-      if (plainText.length) {
-        filterParams.search = plainText.join(' ');
-      }
-
-      if (labels.length) {
-        filterParams.labels = labels;
-      }
-
-      this.filterParams = filterParams;
-    },
-  },
-};
-</script>
-
-<template>
-  <issuable-list
-    :namespace="projectFullPath"
-    :tabs="$options.IssuableListTabs"
-    :current-tab="currentState"
-    :search-input-placeholder="s__('Integrations|Search Jira issues')"
-    :search-tokens="getFilteredSearchTokens()"
-    :sort-options="$options.AvailableSortOptions"
-    :initial-filter-value="getFilteredSearchValue()"
-    :initial-sort-by="sortedBy"
-    :issuables="issues"
-    :issuables-loading="issuesListLoading"
-    :show-pagination-controls="showPaginationControls"
-    :default-page-size="$options.defaultPageSize"
-    :total-items="totalIssues"
-    :current-page="currentPage"
-    :previous-page="currentPage - 1"
-    :next-page="currentPage + 1"
-    :url-params="urlParams"
-    label-filter-param="labels"
-    recent-searches-storage-key="jira_issues"
-    @click-tab="onIssuableListClickTab"
-    @page-change="onIssuableListPageChange"
-    @sort="onIssuableListSort"
-    @filter="onIssuableListFilter"
-  >
-    <template #nav-actions>
-      <gl-button :href="issueCreateUrl" target="_blank" class="gl-my-5">
-        {{ s__('Integrations|Create new issue in Jira') }}
-        <gl-icon name="external-link" />
-      </gl-button>
-    </template>
-    <template #reference="{ issuable }">
-      <span v-safe-html="jiraLogo" class="svg-container jira-logo-container"></span>
-      <span v-if="issuable">{{ issuable.references.relative }}</span>
-    </template>
-    <template #author="{ author }">
-      <gl-sprintf message="%{authorName} in Jira">
-        <template #authorName>
-          <gl-link class="author-link js-user-link" target="_blank" :href="author.webUrl">
-            {{ author.name }}
-          </gl-link>
-        </template>
-      </gl-sprintf>
-    </template>
-    <template #status="{ issuable }">
-      <template v-if="issuable"> {{ issuable.status }} </template>
-    </template>
-    <template #empty-state>
-      <jira-issues-list-empty-state
-        :current-state="currentState"
-        :issues-count="issuesCount"
-        :has-filters-applied="hasFiltersApplied"
-      />
-    </template>
-  </issuable-list>
-</template>
-- 
GitLab


From 082d3669b40eee1ed0d1f3f9eb3d7ea153a39ce8 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Fri, 17 Sep 2021 15:00:28 +0800
Subject: [PATCH 11/11] Improvements for code

---
 .../external_issues_list_empty_state.vue          | 15 +++------------
 .../components/external_issues_list_root.vue      |  7 ++-----
 .../javascripts/external_issues_list/constants.js | 12 ++++++++++++
 .../external_issues_list_empty_state_spec.js      | 13 +++++++------
 .../components/external_issues_list_root_spec.js  |  5 +++--
 5 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 ee/app/assets/javascripts/external_issues_list/constants.js

diff --git a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
index dc8bf4fc76678d..752a7033cf1ce4 100644
--- a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
+++ b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_empty_state.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlEmptyState, GlButton, GlIcon, GlSprintf } from '@gitlab/ui';
+import { externalIssuesListEmptyStateI18n as i18n } from 'ee/external_issues_list/constants';
 import { IssuableStates } from '~/issuable_list/constants';
-import { __, s__ } from '~/locale';
 
 export default {
   components: {
@@ -32,7 +32,7 @@ export default {
       return this.issuesCount[IssuableStates.Opened] + this.issuesCount[IssuableStates.Closed] > 0;
     },
     emptyStateTitle() {
-      const { titleWhenFilters, filterStateEmptyMessage } = this.$options.i18n;
+      const { titleWhenFilters, filterStateEmptyMessage } = i18n;
 
       if (this.hasFiltersApplied) {
         return titleWhenFilters;
@@ -43,7 +43,7 @@ export default {
       return this.emptyStateNoIssueText;
     },
     emptyStateDescription() {
-      const { descriptionWhenFilters, descriptionWhenNoIssues } = this.$options.i18n;
+      const { descriptionWhenFilters, descriptionWhenNoIssues } = i18n;
 
       if (this.hasFiltersApplied) {
         return descriptionWhenFilters;
@@ -54,15 +54,6 @@ export default {
       return '';
     },
   },
-  i18n: {
-    titleWhenFilters: __('Sorry, your filter produced no results'),
-    descriptionWhenFilters: __('To widen your search, change or remove filters above'),
-    descriptionWhenNoIssues: s__('Integrations|To keep this project going, create a new issue.'),
-    filterStateEmptyMessage: {
-      [IssuableStates.Opened]: __('There are no open issues'),
-      [IssuableStates.Closed]: __('There are no closed issues'),
-    },
-  },
 };
 </script>
 
diff --git a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
index 0f1ffd71fbcefb..7f631caa213e10 100644
--- a/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
+++ b/ee/app/assets/javascripts/external_issues_list/components/external_issues_list_root.vue
@@ -125,7 +125,7 @@ export default {
         this.issuesCount[this.currentState] = nodes.length;
       },
       error(error) {
-        this.onExternalIssuesQueryError(error, this.$options.i18n.errorFetchingIssues);
+        this.onExternalIssuesQueryError(error, i18n.errorFetchingIssues);
       },
     },
   },
@@ -221,9 +221,6 @@ export default {
       this.filterParams = filterParams;
     },
   },
-  i18n: {
-    errorFetchingIssues: i18n.errorFetchingIssues,
-  },
 };
 </script>
 
@@ -275,7 +272,7 @@ export default {
       </gl-sprintf>
     </template>
     <template #status="{ issuable }">
-      <template v-if="issuable"> {{ issuable.status }}</template>
+      <template v-if="issuable"> {{ issuable.status }} </template>
     </template>
     <template #empty-state>
       <external-issues-list-empty-state
diff --git a/ee/app/assets/javascripts/external_issues_list/constants.js b/ee/app/assets/javascripts/external_issues_list/constants.js
new file mode 100644
index 00000000000000..8c3f6a17f99e85
--- /dev/null
+++ b/ee/app/assets/javascripts/external_issues_list/constants.js
@@ -0,0 +1,12 @@
+import { IssuableStates } from '~/issuable_list/constants';
+import { __, s__ } from '~/locale';
+
+export const externalIssuesListEmptyStateI18n = {
+  titleWhenFilters: __('Sorry, your filter produced no results'),
+  descriptionWhenFilters: __('To widen your search, change or remove filters above'),
+  descriptionWhenNoIssues: s__('Integrations|To keep this project going, create a new issue.'),
+  filterStateEmptyMessage: {
+    [IssuableStates.Opened]: __('There are no open issues'),
+    [IssuableStates.Closed]: __('There are no closed issues'),
+  },
+};
diff --git a/ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js b/ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
index 24226c8117965a..21810ce1ec739d 100644
--- a/ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
+++ b/ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js
@@ -2,6 +2,7 @@ import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import ExternalIssuesListEmptyState from 'ee/external_issues_list/components/external_issues_list_empty_state.vue';
+import { externalIssuesListEmptyStateI18n } from 'ee/external_issues_list/constants';
 import { IssuableStates } from '~/issuable_list/constants';
 
 import { mockProvide } from '../mock_data';
@@ -64,7 +65,7 @@ describe('ExternalIssuesListEmptyState', () => {
         await wrapper.vm.$nextTick();
 
         expect(findEmptyState().props('title')).toBe(
-          ExternalIssuesListEmptyState.i18n.titleWhenFilters,
+          externalIssuesListEmptyStateI18n.titleWhenFilters,
         );
       });
 
@@ -80,7 +81,7 @@ describe('ExternalIssuesListEmptyState', () => {
         await wrapper.vm.$nextTick();
 
         expect(findEmptyState().props('title')).toBe(
-          ExternalIssuesListEmptyState.i18n.filterStateEmptyMessage[IssuableStates.Opened],
+          externalIssuesListEmptyStateI18n.filterStateEmptyMessage[IssuableStates.Opened],
         );
       });
 
@@ -104,7 +105,7 @@ describe('ExternalIssuesListEmptyState', () => {
         await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.emptyStateDescription).toBe(
-          ExternalIssuesListEmptyState.i18n.descriptionWhenFilters,
+          externalIssuesListEmptyStateI18n.descriptionWhenFilters,
         );
       });
 
@@ -116,7 +117,7 @@ describe('ExternalIssuesListEmptyState', () => {
         await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.emptyStateDescription).toBe(
-          ExternalIssuesListEmptyState.i18n.descriptionWhenNoIssues,
+          externalIssuesListEmptyStateI18n.descriptionWhenNoIssues,
         );
       });
 
@@ -155,7 +156,7 @@ describe('ExternalIssuesListEmptyState', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(emptyStateEl.props('title')).toBe(ExternalIssuesListEmptyState.i18n.titleWhenFilters);
+      expect(emptyStateEl.props('title')).toBe(externalIssuesListEmptyStateI18n.titleWhenFilters);
 
       wrapper.setProps({
         hasFiltersApplied: false,
@@ -168,7 +169,7 @@ describe('ExternalIssuesListEmptyState', () => {
       await wrapper.vm.$nextTick();
 
       expect(emptyStateEl.props('title')).toBe(
-        ExternalIssuesListEmptyState.i18n.filterStateEmptyMessage[IssuableStates.Opened],
+        externalIssuesListEmptyStateI18n.filterStateEmptyMessage[IssuableStates.Opened],
       );
     });
 
diff --git a/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js b/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
index 32e362f0afa9db..6e62fb633b686a 100644
--- a/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
+++ b/ee/spec/frontend/external_issues_list/components/external_issues_list_root_spec.js
@@ -10,6 +10,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 
 import createFlash from '~/flash';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
+import { i18n } from '~/issues_list/constants';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 
@@ -303,7 +304,7 @@ describe('ExternalIssuesListRoot', () => {
       it.each`
         APIErrors        | expectedRenderedErrorMessage
         ${['API error']} | ${'API error'}
-        ${undefined}     | ${ExternalIssuesListRoot.i18n.errorFetchingIssues}
+        ${undefined}     | ${i18n.errorFetchingIssues}
       `(
         'calls `createFlash` with "$expectedRenderedErrorMessage" when API responds with "$APIErrors"',
         async ({ APIErrors, expectedRenderedErrorMessage }) => {
@@ -336,7 +337,7 @@ describe('ExternalIssuesListRoot', () => {
         await waitForPromises();
 
         expect(createFlash).toHaveBeenCalledWith({
-          message: ExternalIssuesListRoot.i18n.errorFetchingIssues,
+          message: i18n.errorFetchingIssues,
           captureError: true,
           error: expect.any(Object),
         });
-- 
GitLab