From 98d29218ab3bec8b9349c23687cd6be386429206 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Fri, 26 Mar 2021 00:52:53 +0000
Subject: [PATCH 1/5] Add tabs and header action buttons to issues list page
 refactor

Add Open/Closed/All tabs and header action buttons (RSS,
calendar, import/export CSV, bulk edit issues, and new issue
buttons) to issues list page refactor, behind `vue_issues_list`
feature flag defaulted to off.

https://gitlab.com/gitlab-org/gitlab/-/issues/322755
---
 .../issuable/components/csv_export_modal.vue  |  14 +-
 .../components/csv_import_export_buttons.vue  |  19 ++-
 .../init_csv_import_export_buttons.js         |   9 +-
 .../issuable_bulk_update_sidebar.js           |  15 +--
 .../components/issuable_tabs.vue              |  13 +-
 .../components/issues_list_app.vue            | 105 +++++++++++++--
 app/assets/javascripts/issues_list/index.js   |  24 ++++
 app/views/projects/issues/index.html.haml     |  52 +++++---
 .../components/csv_export_modal_spec.js       |   6 +-
 .../csv_import_export_buttons_spec.js         |   9 +-
 .../components/issuable_tabs_spec.js          |   8 +-
 spec/frontend/issuable_list/mock_data.js      |   2 +-
 .../components/issues_list_app_spec.js        | 126 +++++++++++++++++-
 13 files changed, 341 insertions(+), 61 deletions(-)

diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue
index 78987a5c62923b..9ca8db0350bbee 100644
--- a/app/assets/javascripts/issuable/components/csv_export_modal.vue
+++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue
@@ -14,17 +14,21 @@ export default {
     issuableType: {
       default: '',
     },
-    issuableCount: {
-      default: 0,
-    },
     email: {
       default: '',
     },
+  },
+  props: {
     exportCsvPath: {
+      type: String,
+      required: false,
       default: '',
     },
-  },
-  props: {
+    issuableCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
     modalId: {
       type: String,
       required: true,
diff --git a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
index 14474d44e105cd..a903b96fc617fd 100644
--- a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
+++ b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
@@ -53,6 +53,18 @@ export default {
       default: false,
     },
   },
+  props: {
+    exportCsvPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issuableCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
   computed: {
     exportModalId() {
       return `${this.issuableType}-export-modal`;
@@ -105,7 +117,12 @@ export default {
         >
       </gl-dropdown>
     </gl-button-group>
-    <csv-export-modal v-if="showExportButton" :modal-id="exportModalId" />
+    <csv-export-modal
+      v-if="showExportButton"
+      :modal-id="exportModalId"
+      :export-csv-path="exportCsvPath"
+      :issuable-count="issuableCount"
+    />
     <csv-import-modal v-if="showImportButton" :modal-id="importModalId" />
   </div>
 </template>
diff --git a/app/assets/javascripts/issuable/init_csv_import_export_buttons.js b/app/assets/javascripts/issuable/init_csv_import_export_buttons.js
index 5a720b89d338ea..f8649fc13b76c7 100644
--- a/app/assets/javascripts/issuable/init_csv_import_export_buttons.js
+++ b/app/assets/javascripts/issuable/init_csv_import_export_buttons.js
@@ -28,9 +28,7 @@ export default () => {
       showExportButton: parseBoolean(showExportButton),
       showImportButton: parseBoolean(showImportButton),
       issuableType,
-      issuableCount,
       email,
-      exportCsvPath,
       importCsvIssuesPath,
       containerClass,
       canEdit: parseBoolean(canEdit),
@@ -39,7 +37,12 @@ export default () => {
       showLabel,
     },
     render(h) {
-      return h(ImportExportButtons);
+      return h(ImportExportButtons, {
+        props: {
+          exportCsvPath,
+          issuableCount,
+        },
+      });
     },
   });
 };
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index 1f707bc955f1de..97d50dde9f746c 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -46,14 +46,11 @@ export default class IssuableBulkUpdateSidebar {
     this.$bulkEditSubmitBtn.on('click', () => this.prepForSubmit());
     this.$checkAllContainer.on('click', () => this.updateFormState());
 
-    issueableEventHub.$on('issuables:updateBulkEdit', () => {
-      // Danger! Strong coupling ahead!
-      // The bulk update sidebar and its dropdowns look for checkboxes, and get data on which issue
-      // is selected by inspecting the DOM. Ideally, we would pass the selected issuable IDs and their properties
-      // explicitly, but this component is used in too many places right now to refactor straight away.
-
-      this.updateFormState();
-    });
+    // The event hub connects this bulk update logic with `issues_list_app.vue`.
+    // We can remove it once we've refactored the issues list page bulk edit sidebar to Vue.
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/325874
+    issueableEventHub.$on('issuables:enableBulkEdit', () => this.toggleBulkEdit(null, true));
+    issueableEventHub.$on('issuables:updateBulkEdit', () => this.updateFormState());
   }
 
   initDropdowns() {
@@ -110,7 +107,7 @@ export default class IssuableBulkUpdateSidebar {
   }
 
   toggleBulkEdit(e, enable) {
-    e.preventDefault();
+    e?.preventDefault();
 
     issueableEventHub.$emit('issuables:toggleBulkEdit', enable);
 
diff --git a/app/assets/javascripts/issuable_list/components/issuable_tabs.vue b/app/assets/javascripts/issuable_list/components/issuable_tabs.vue
index 57da030e22e9a4..b314f2b368f446 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_tabs.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_tabs.vue
@@ -26,6 +26,9 @@ export default {
     isTabActive(tabName) {
       return tabName === this.currentTab;
     },
+    isTabCountNumeric(tab) {
+      return typeof this.tabCounts[tab.name] === 'number';
+    },
   },
 };
 </script>
@@ -44,9 +47,13 @@ export default {
       >
         <template #title>
           <span :title="tab.titleTooltip">{{ tab.title }}</span>
-          <gl-badge v-if="tabCounts" variant="neutral" size="sm" class="gl-tab-counter-badge">{{
-            tabCounts[tab.name]
-          }}</gl-badge>
+          <gl-badge
+            v-if="isTabCountNumeric(tab)"
+            variant="neutral"
+            size="sm"
+            class="gl-tab-counter-badge"
+            >{{ tabCounts[tab.name] }}</gl-badge
+          >
         </template>
       </gl-tab>
     </gl-tabs>
diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index d7af388c8931bb..7a7e91e2179c41 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -1,9 +1,11 @@
 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { toNumber } from 'lodash';
 import createFlash from '~/flash';
+import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
+import { ISSUABLE_TYPE } from '~/issuable/constants';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
-import { IssuableStatus } from '~/issue_show/constants';
+import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants';
 import {
   CREATED_DESC,
   PAGE_SIZE,
@@ -19,13 +21,18 @@ import IssueCardTimeInfo from './issue_card_time_info.vue';
 
 export default {
   CREATED_DESC,
+  IssuableListTabs,
   PAGE_SIZE,
   sortOptions,
   sortParams,
   i18n: {
+    calendarLabel: __('Subscribe to calendar'),
     reorderError: __('An error occurred while reordering issues.'),
+    rssLabel: __('Subscribe to RSS feed'),
   },
   components: {
+    CsvImportExportButtons,
+    GlButton,
     GlIcon,
     IssuableList,
     IssueCardTimeInfo,
@@ -34,16 +41,38 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  provide: {
+    // For CsvImportExportButtons component
+    issuableType: ISSUABLE_TYPE.issues,
+  },
   inject: {
+    calendarUrl: {
+      default: '',
+    },
+    canBulkUpdate: {
+      default: false,
+    },
     endpoint: {
       default: '',
     },
+    exportCsvPath: {
+      default: '',
+    },
     fullPath: {
       default: '',
     },
     issuesPath: {
       default: '',
     },
+    newIssuePath: {
+      default: '',
+    },
+    rssUrl: {
+      default: '',
+    },
+    showNewIssueLink: {
+      default: false,
+    },
   },
   data() {
     const orderBy = getParameterByName('order_by');
@@ -54,6 +83,8 @@ export default {
 
     return {
       currentPage: toNumber(getParameterByName('page')) || 1,
+      currentState: getParameterByName('state') || IssuableStates.Opened,
+      exportCsvUrl: `${this.exportCsvPath}?${window.location.search}`,
       filters: sortParams[sortKey] || {},
       isLoading: false,
       issues: [],
@@ -63,10 +94,19 @@ export default {
     };
   },
   computed: {
+    tabCounts() {
+      return Object.values(IssuableStates).reduce(
+        (acc, state) => ({
+          ...acc,
+          [state]: this.currentState === state ? this.totalIssues : undefined,
+        }),
+        {},
+      );
+    },
     urlParams() {
       return {
         page: this.currentPage,
-        state: IssuableStatus.Open,
+        state: this.currentState,
         ...this.filters,
       };
     },
@@ -85,15 +125,15 @@ export default {
     eventHub.$off('issuables:toggleBulkEdit');
   },
   methods: {
-    fetchIssues(pageToFetch) {
+    fetchIssues() {
       this.isLoading = true;
 
       return axios
         .get(this.endpoint, {
           params: {
-            page: pageToFetch || this.currentPage,
+            page: this.currentPage,
             per_page: this.$options.PAGE_SIZE,
-            state: IssuableStatus.Open,
+            state: this.currentState,
             with_labels_details: true,
             ...this.filters,
           },
@@ -102,6 +142,7 @@ export default {
           this.currentPage = Number(headers['x-page']);
           this.totalIssues = Number(headers['x-total']);
           this.issues = data.map((issue) => convertObjectPropsToCamelCase(issue, { deep: true }));
+          this.exportCsvUrl = `${this.exportCsvPath}${window.location.search}`;
         })
         .catch(() => {
           createFlash({ message: __('An error occurred while loading issues') });
@@ -117,8 +158,19 @@ export default {
         eventHub.$emit('issuables:updateBulkEdit');
       });
     },
+    handleBulkUpdateClick() {
+      eventHub.$emit('issuables:enableBulkEdit');
+    },
+    handleClickTab(state) {
+      if (this.currentState !== state) {
+        this.currentPage = 1;
+      }
+      this.currentState = state;
+      this.fetchIssues();
+    },
     handlePageChange(page) {
-      this.fetchIssues(page);
+      this.currentPage = page;
+      this.fetchIssues();
     },
     handleReorder({ newIndex, oldIndex }) {
       const issueToMove = this.issues[oldIndex];
@@ -171,8 +223,9 @@ export default {
     :sort-options="$options.sortOptions"
     :initial-sort-by="sortKey"
     :issuables="issues"
-    :tabs="[]"
-    current-tab=""
+    :tabs="$options.IssuableListTabs"
+    :current-tab="currentState"
+    :tab-counts="tabCounts"
     :issuables-loading="isLoading"
     :is-manual-ordering="isManualOrdering"
     :show-bulk-edit-sidebar="showBulkEditSidebar"
@@ -182,14 +235,48 @@ export default {
     :previous-page="currentPage - 1"
     :next-page="currentPage + 1"
     :url-params="urlParams"
+    @click-tab="handleClickTab"
     @page-change="handlePageChange"
     @reorder="handleReorder"
     @sort="handleSort"
     @update-legacy-bulk-edit="handleUpdateLegacyBulkEdit"
   >
+    <template #nav-actions>
+      <gl-button
+        v-gl-tooltip
+        :href="rssUrl"
+        icon="rss"
+        :title="$options.i18n.rssLabel"
+        :aria-label="$options.i18n.rssLabel"
+      />
+      <gl-button
+        v-gl-tooltip
+        :href="calendarUrl"
+        icon="calendar"
+        :title="$options.i18n.calendarLabel"
+        :aria-label="$options.i18n.calendarLabel"
+      />
+      <csv-import-export-buttons
+        class="gl-mr-3"
+        :export-csv-path="exportCsvUrl"
+        :issuable-count="totalIssues"
+      />
+      <gl-button
+        v-if="canBulkUpdate"
+        :disabled="showBulkEditSidebar"
+        @click="handleBulkUpdateClick"
+      >
+        {{ __('Edit issues') }}
+      </gl-button>
+      <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
+        {{ __('New issue') }}
+      </gl-button>
+    </template>
+
     <template #timeframe="{ issuable = {} }">
       <issue-card-time-info :issue="issuable" />
     </template>
+
     <template #statistics="{ issuable = {} }">
       <li
         v-if="issuable.mergeRequestsCount"
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index b55ebf8dbdbb89..765ae0a612f546 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -73,12 +73,22 @@ export function initIssuesListApp() {
   }
 
   const {
+    calendarUrl,
+    canBulkUpdate,
     endpoint,
     fullPath,
     hasBlockedIssuesFeature,
     hasIssuableHealthStatusFeature,
     hasIssueWeightsFeature,
     issuesPath,
+    newIssuePath,
+    rssUrl,
+    showNewIssueLink,
+    canEdit,
+    email,
+    exportCsvPath,
+    importCsvIssuesPath,
+    projectImportJiraPath,
   } = el.dataset;
 
   return new Vue({
@@ -87,12 +97,26 @@ export function initIssuesListApp() {
     // issue is fixed upstream in https://github.com/vuejs/vue-apollo/pull/1153
     apolloProvider: {},
     provide: {
+      calendarUrl,
+      canBulkUpdate: parseBoolean(canBulkUpdate),
       endpoint,
       fullPath,
       hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
       hasIssuableHealthStatusFeature: parseBoolean(hasIssuableHealthStatusFeature),
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
       issuesPath,
+      newIssuePath,
+      rssUrl,
+      showNewIssueLink: parseBoolean(showNewIssueLink),
+      // For CsvImportExportButtons component
+      canEdit: parseBoolean(canEdit),
+      email,
+      exportCsvPath,
+      importCsvIssuesPath,
+      maxAttachmentSize: `${gon.max_file_size || 10} MB`, // eslint-disable-line @gitlab/require-i18n-strings
+      projectImportJiraPath,
+      showExportButton: true,
+      showImportButton: true,
     },
     render: (createComponent) => createComponent(IssuesListApp),
   });
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 3b35bd7544a43a..93435e5ed3b39c 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -4,6 +4,8 @@
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
 - add_page_specific_style 'page_bundles/issues_list'
 - issuable_type = 'issue'
+- can_edit = can?(current_user, :admin_project, @project)
+- notification_email = current_user.present? ? current_user.notification_email : nil
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
@@ -13,32 +15,40 @@
   issues_path: project_issues_path(@project),
   project_path: @project.full_path } }
 
-- if project_issues(@project).exists?
+- if Feature.enabled?(:vue_issues_list, @project)
+  - data_endpoint = local_assigns.fetch(:data_endpoint, expose_path(api_v4_projects_issues_path(id: @project.id)))
+  .js-issues-list{ data: { calendar_url: url_for(safe_params.merge(calendar_url_options)),
+    can_bulk_update: @can_bulk_update.to_s,
+    endpoint: data_endpoint,
+    full_path: @project.full_path,
+    has_blocked_issues_feature: Gitlab.ee? && @project.feature_available?(:blocked_issues).to_s,
+    has_issuable_health_status_feature: Gitlab.ee? && @project.feature_available?(:issuable_health_status).to_s,
+    has_issue_weights_feature: Gitlab.ee? && @project.feature_available?(:issue_weights).to_s,
+    issues_path: project_issues_path(@project),
+    new_issue_path: new_project_issue_path(@project, issue: { assignee_id: finder.assignee.try(:id), milestone_id: finder.milestones.first.try(:id) }),
+    rss_url: url_for(safe_params.merge(rss_url_options)),
+    show_new_issue_link: show_new_issue_link?(@project).to_s,
+    can_edit: can_edit.to_s,
+    email: notification_email,
+    export_csv_path: export_csv_project_issues_path(@project),
+    import_csv_issues_path: import_csv_namespace_project_issues_path,
+    project_import_jira_path: project_import_jira_path(@project) } }
+  - if @can_bulk_update
+    = render 'shared/issuable/bulk_update_sidebar', type: :issues
+- elsif project_issues(@project).exists?
   .top-area
     = render 'shared/issuable/nav', type: :issues
     = render "projects/issues/nav_btns"
+  = render 'shared/issuable/search_bar', type: :issues
 
-  - if Feature.enabled?(:vue_issues_list, @project)
-    - data_endpoint = local_assigns.fetch(:data_endpoint, expose_path(api_v4_projects_issues_path(id: @project.id)))
-    .js-issues-list{ data: { endpoint: data_endpoint,
-      full_path: @project.full_path,
-      has_blocked_issues_feature: Gitlab.ee? && @project.feature_available?(:blocked_issues).to_s,
-      has_issuable_health_status_feature: Gitlab.ee? && @project.feature_available?(:issuable_health_status).to_s,
-      has_issue_weights_feature: Gitlab.ee? && @project.feature_available?(:issue_weights).to_s,
-      issues_path: project_issues_path(@project) } }
-    - if @can_bulk_update
-      = render 'shared/issuable/bulk_update_sidebar', type: :issues
-  - else
-    = render 'shared/issuable/search_bar', type: :issues
+  - if @can_bulk_update
+    = render 'shared/issuable/bulk_update_sidebar', type: :issues
 
-    - if @can_bulk_update
-      = render 'shared/issuable/bulk_update_sidebar', type: :issues
-
-    .issues-holder
-      = render 'issues'
-      - if new_issue_email
-        .issuable-footer.text-center
-          .js-issueable-by-email{ data: { initial_email: new_issue_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
+  .issues-holder
+    = render 'issues'
+    - if new_issue_email
+      .issuable-footer.text-center
+        .js-issueable-by-email{ data: { initial_email: new_issue_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
 - else
   - new_project_issue_button_path = @project.archived? ? false : new_project_issue_path(@project)
   = render 'shared/empty_states/issues', new_project_issue_button_path: new_project_issue_button_path, show_import_button: true
diff --git a/spec/frontend/issuable/components/csv_export_modal_spec.js b/spec/frontend/issuable/components/csv_export_modal_spec.js
index f46b6f72f054a2..a327da2d63af6e 100644
--- a/spec/frontend/issuable/components/csv_export_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_export_modal_spec.js
@@ -58,14 +58,14 @@ describe('CsvExportModal', () => {
 
     describe('issuable count info text', () => {
       it('displays the info text when issuableCount is > -1', () => {
-        wrapper = createComponent({ injectedProperties: { issuableCount: 10 } });
+        wrapper = createComponent({ props: { issuableCount: 10 } });
         expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(true);
         expect(wrapper.findByTestId('issuable-count-note').text()).toContain('10 issues selected');
         expect(findIcon().exists()).toBe(true);
       });
 
       it("doesn't display the info text when issuableCount is -1", () => {
-        wrapper = createComponent({ injectedProperties: { issuableCount: -1 } });
+        wrapper = createComponent({ props: { issuableCount: -1 } });
         expect(wrapper.findByTestId('issuable-count-note').exists()).toBe(false);
       });
     });
@@ -83,7 +83,7 @@ describe('CsvExportModal', () => {
     describe('primary button', () => {
       it('passes the exportCsvPath to the button', () => {
         const exportCsvPath = '/gitlab-org/gitlab-test/-/issues/export_csv';
-        wrapper = createComponent({ injectedProperties: { exportCsvPath } });
+        wrapper = createComponent({ props: { exportCsvPath } });
         expect(findButton().attributes('href')).toBe(exportCsvPath);
       });
     });
diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
index e32bf35b13a5e5..2fe8d28a333585 100644
--- a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
+++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
@@ -9,6 +9,9 @@ describe('CsvImportExportButtons', () => {
   let wrapper;
   let glModalDirective;
 
+  const exportCsvPath = '/gitlab-org/gitlab-test/-/issues/export_csv';
+  const issuableCount = 10;
+
   function createComponent(injectedProperties = {}) {
     glModalDirective = jest.fn();
     return extendedWrapper(
@@ -24,6 +27,10 @@ describe('CsvImportExportButtons', () => {
         provide: {
           ...injectedProperties,
         },
+        propsData: {
+          exportCsvPath,
+          issuableCount,
+        },
       }),
     );
   }
@@ -57,7 +64,7 @@ describe('CsvImportExportButtons', () => {
       });
 
       it('renders the export modal', () => {
-        expect(findExportCsvModal().exists()).toBe(true);
+        expect(findExportCsvModal().props()).toMatchObject({ exportCsvPath, issuableCount });
       });
 
       it('opens the export modal', () => {
diff --git a/spec/frontend/issuable_list/components/issuable_tabs_spec.js b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
index 3cc237b9ce98a5..4a91eb63089f99 100644
--- a/spec/frontend/issuable_list/components/issuable_tabs_spec.js
+++ b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
@@ -64,10 +64,12 @@ describe('IssuableTabs', () => {
     });
 
     it('renders gl-badge component within a tab', () => {
-      const badgeEl = wrapper.findAll(GlBadge).at(0);
+      const badgeEl = wrapper.findAll(GlBadge);
 
-      expect(badgeEl.exists()).toBe(true);
-      expect(badgeEl.text()).toBe(`${mockIssuableListProps.tabCounts.opened}`);
+      // Does not render `All` tab since it has an undefined count
+      expect(badgeEl).toHaveLength(2);
+      expect(badgeEl.at(0).text()).toBe(`${mockIssuableListProps.tabCounts.opened}`);
+      expect(badgeEl.at(1).text()).toBe(`${mockIssuableListProps.tabCounts.closed}`);
     });
 
     it('renders contents for slot "nav-actions"', () => {
diff --git a/spec/frontend/issuable_list/mock_data.js b/spec/frontend/issuable_list/mock_data.js
index 33ffd60bf95c20..e2fa99f7cc9941 100644
--- a/spec/frontend/issuable_list/mock_data.js
+++ b/spec/frontend/issuable_list/mock_data.js
@@ -135,7 +135,7 @@ export const mockTabs = [
 export const mockTabCounts = {
   opened: 5,
   closed: 0,
-  all: 5,
+  all: undefined,
 };
 
 export const mockIssuableListProps = {
diff --git a/spec/frontend/issues_list/components/issues_list_app_spec.js b/spec/frontend/issues_list/components/issues_list_app_spec.js
index 20644f80bf6fa5..faf4ecec4b90a8 100644
--- a/spec/frontend/issues_list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues_list/components/issues_list_app_spec.js
@@ -1,10 +1,14 @@
+import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
+import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
+import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants';
 import IssuesListApp from '~/issues_list/components/issues_list_app.vue';
+
 import {
   CREATED_DESC,
   PAGE_SIZE,
@@ -24,12 +28,21 @@ describe('IssuesListApp component', () => {
   let axiosMock;
   let wrapper;
 
-  const fullPath = 'path/to/project';
+  const calendarUrl = 'calendar/url';
   const endpoint = 'api/endpoint';
+  const exportCsvPath = 'export/csv/path';
+  const fullPath = 'path/to/project';
   const issuesPath = `${fullPath}/-/issues`;
+  const newIssuePath = `new/issue/path`;
+  const rssUrl = 'rss/url';
   const state = 'opened';
   const xPage = 1;
   const xTotal = 25;
+  const tabCounts = {
+    opened: xTotal,
+    closed: undefined,
+    all: undefined,
+  };
   const fetchIssuesResponse = {
     data: [],
     headers: {
@@ -38,14 +51,21 @@ describe('IssuesListApp component', () => {
     },
   };
 
+  const findGlButtons = () => wrapper.findAllComponents(GlButton);
+  const findGlButtonAt = (index) => wrapper.findAllComponents(GlButton).at(index);
   const findIssuableList = () => wrapper.findComponent(IssuableList);
 
-  const mountComponent = () =>
+  const mountComponent = ({ provide = {} } = {}) =>
     shallowMount(IssuesListApp, {
       provide: {
+        calendarUrl,
         endpoint,
+        exportCsvPath,
         fullPath,
         issuesPath,
+        newIssuePath,
+        rssUrl,
+        ...provide,
       },
     });
 
@@ -73,6 +93,9 @@ describe('IssuesListApp component', () => {
         searchInputPlaceholder: 'Search or filter results…',
         sortOptions,
         initialSortBy: CREATED_DESC,
+        tabs: IssuableListTabs,
+        currentTab: IssuableStates.Opened,
+        tabCounts,
         showPaginationControls: true,
         issuables: [],
         totalItems: xTotal,
@@ -84,6 +107,85 @@ describe('IssuesListApp component', () => {
     });
   });
 
+  describe('header action buttons', () => {
+    it('renders rss button', () => {
+      wrapper = mountComponent();
+
+      expect(findGlButtonAt(0).attributes()).toMatchObject({
+        href: rssUrl,
+        icon: 'rss',
+        'aria-label': IssuesListApp.i18n.rssLabel,
+      });
+    });
+
+    it('renders calendar button', () => {
+      wrapper = mountComponent();
+
+      expect(findGlButtonAt(1).attributes()).toMatchObject({
+        href: calendarUrl,
+        icon: 'calendar',
+        'aria-label': IssuesListApp.i18n.calendarLabel,
+      });
+    });
+
+    it('renders csv import/export component', async () => {
+      const search = '?page=1&search=refactor';
+
+      Object.defineProperty(window, 'location', {
+        writable: true,
+        value: { search },
+      });
+
+      wrapper = mountComponent();
+
+      await waitForPromises();
+
+      expect(wrapper.findComponent(CsvImportExportButtons).props()).toMatchObject({
+        exportCsvPath: `${exportCsvPath}${search}`,
+        issuableCount: xTotal,
+      });
+    });
+
+    describe('bulk edit button', () => {
+      it('renders when user has permissions', () => {
+        wrapper = mountComponent({ provide: { canBulkUpdate: true } });
+
+        expect(findGlButtonAt(2).text()).toBe('Edit issues');
+      });
+
+      it('does not render when user has permissions', () => {
+        wrapper = mountComponent({ provide: { canBulkUpdate: false } });
+
+        expect(findGlButtons().filter((button) => button.text() === 'Edit issues')).toHaveLength(0);
+      });
+
+      it('emits "issuables:enableBulkEdit" event to legacy bulk edit class', () => {
+        wrapper = mountComponent({ provide: { canBulkUpdate: true } });
+
+        jest.spyOn(eventHub, '$emit');
+
+        findGlButtonAt(2).vm.$emit('click');
+
+        expect(eventHub.$emit).toHaveBeenCalledWith('issuables:enableBulkEdit');
+      });
+    });
+
+    describe('new issue button', () => {
+      it('renders when user has permissions', () => {
+        wrapper = mountComponent({ provide: { showNewIssueLink: true } });
+
+        expect(findGlButtonAt(2).text()).toBe('New issue');
+        expect(findGlButtonAt(2).attributes('href')).toBe(newIssuePath);
+      });
+
+      it('does not render when user has permissions', () => {
+        wrapper = mountComponent({ provide: { showNewIssueLink: false } });
+
+        expect(findGlButtons().filter((button) => button.text() === 'New issue')).toHaveLength(0);
+      });
+    });
+  });
+
   describe('initial sort', () => {
     it.each(Object.keys(sortParams))('is set as %s when the url query matches', (sortKey) => {
       Object.defineProperty(window, 'location', {
@@ -119,6 +221,26 @@ describe('IssuesListApp component', () => {
     );
   });
 
+  describe('when "click-tab" event is emitted by IssuableList', () => {
+    beforeEach(() => {
+      axiosMock.onGet(endpoint).reply(200, fetchIssuesResponse.data, {
+        'x-page': 2,
+        'x-total': xTotal,
+      });
+
+      wrapper = mountComponent();
+
+      findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
+    });
+
+    it('makes API call to filter the list by the new state and resets the page to 1', async () => {
+      expect(axiosMock.history.get[1].params).toMatchObject({
+        page: 1,
+        state: IssuableStates.Closed,
+      });
+    });
+  });
+
   describe('when "page-change" event is emitted by IssuableList', () => {
     const data = [{ id: 10, title: 'title', state }];
     const page = 2;
-- 
GitLab


From ae7b0c2bfcbb91f1d31bd2399a85ba7d28b4bc61 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Tue, 30 Mar 2021 13:00:30 +0100
Subject: [PATCH 2/5] Add @justin_ho suggestions

---
 .../design_management/constants.js            |  2 +
 .../design_management/pages/index.vue         |  4 +-
 .../issuable/components/csv_export_modal.vue  |  2 +-
 .../components/csv_import_export_buttons.vue  |  2 +-
 .../init_csv_import_export_buttons.js         |  6 +--
 .../components/issues_list_app.vue            | 54 +++++++++----------
 app/assets/javascripts/issues_list/index.js   | 21 ++++----
 app/helpers/issues_helper.rb                  | 18 +++++++
 app/views/projects/issues/index.html.haml     | 20 +------
 ee/app/helpers/ee/issues_helper.rb            | 13 +++++
 .../components/issuable_tabs_spec.js          |  8 +--
 .../components/issues_list_app_spec.js        | 18 +++----
 12 files changed, 91 insertions(+), 77 deletions(-)

diff --git a/app/assets/javascripts/design_management/constants.js b/app/assets/javascripts/design_management/constants.js
index 92928ca429fa38..afe621ac3c51a6 100644
--- a/app/assets/javascripts/design_management/constants.js
+++ b/app/assets/javascripts/design_management/constants.js
@@ -12,3 +12,5 @@ export const ACTIVE_DISCUSSION_SOURCE_TYPES = {
 };
 
 export const DESIGN_DETAIL_LAYOUT_CLASSLIST = ['design-detail-layout', 'overflow-hidden', 'm-0'];
+
+export const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 3cc22e1519bdf5..cc844f6fe7ab30 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -12,7 +12,7 @@ import DesignDestroyer from '../components/design_destroyer.vue';
 import Design from '../components/list/item.vue';
 import UploadButton from '../components/upload/button.vue';
 import DesignVersionDropdown from '../components/upload/design_version_dropdown.vue';
-import { VALID_DESIGN_FILE_MIMETYPE } from '../constants';
+import { MAXIMUM_FILE_UPLOAD_LIMIT, VALID_DESIGN_FILE_MIMETYPE } from '../constants';
 import moveDesignMutation from '../graphql/mutations/move_design.mutation.graphql';
 import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql';
 import allDesignsMixin from '../mixins/all_designs';
@@ -37,8 +37,6 @@ import {
 } from '../utils/error_messages';
 import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking';
 
-const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
-
 export default {
   components: {
     GlLoadingIcon,
diff --git a/app/assets/javascripts/issuable/components/csv_export_modal.vue b/app/assets/javascripts/issuable/components/csv_export_modal.vue
index 9ca8db0350bbee..7bdd55ddda3499 100644
--- a/app/assets/javascripts/issuable/components/csv_export_modal.vue
+++ b/app/assets/javascripts/issuable/components/csv_export_modal.vue
@@ -12,7 +12,7 @@ export default {
   },
   inject: {
     issuableType: {
-      default: '',
+      default: ISSUABLE_TYPE.issues,
     },
     email: {
       default: '',
diff --git a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
index a903b96fc617fd..fb4d5aca2f568b 100644
--- a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
+++ b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
@@ -62,7 +62,7 @@ export default {
     issuableCount: {
       type: Number,
       required: false,
-      default: 0,
+      default: undefined,
     },
   },
   computed: {
diff --git a/app/assets/javascripts/issuable/init_csv_import_export_buttons.js b/app/assets/javascripts/issuable/init_csv_import_export_buttons.js
index f8649fc13b76c7..83163e3c4789f5 100644
--- a/app/assets/javascripts/issuable/init_csv_import_export_buttons.js
+++ b/app/assets/javascripts/issuable/init_csv_import_export_buttons.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import ImportExportButtons from './components/csv_import_export_buttons.vue';
+import CsvImportExportButtons from './components/csv_import_export_buttons.vue';
 
 export default () => {
   const el = document.querySelector('.js-csv-import-export-buttons');
@@ -37,10 +37,10 @@ export default () => {
       showLabel,
     },
     render(h) {
-      return h(ImportExportButtons, {
+      return h(CsvImportExportButtons, {
         props: {
           exportCsvPath,
-          issuableCount,
+          issuableCount: parseInt(issuableCount, 10),
         },
       });
     },
diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index 7a7e91e2179c41..1f26c65475b18a 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -3,7 +3,6 @@ import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { toNumber } from 'lodash';
 import createFlash from '~/flash';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
-import { ISSUABLE_TYPE } from '~/issuable/constants';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
 import { IssuableListTabs, IssuableStates } from '~/issuable_list/constants';
 import {
@@ -41,12 +40,8 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  provide: {
-    // For CsvImportExportButtons component
-    issuableType: ISSUABLE_TYPE.issues,
-  },
   inject: {
-    calendarUrl: {
+    calendarPath: {
       default: '',
     },
     canBulkUpdate: {
@@ -67,7 +62,7 @@ export default {
     newIssuePath: {
       default: '',
     },
-    rssUrl: {
+    rssPath: {
       default: '',
     },
     showNewIssueLink: {
@@ -82,14 +77,14 @@ export default {
     );
 
     return {
-      currentPage: toNumber(getParameterByName('page')) || 1,
-      currentState: getParameterByName('state') || IssuableStates.Opened,
-      exportCsvUrl: `${this.exportCsvPath}?${window.location.search}`,
+      exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
       filters: sortParams[sortKey] || {},
       isLoading: false,
       issues: [],
+      page: toNumber(getParameterByName('page')) || 1,
       showBulkEditSidebar: false,
       sortKey: sortKey || CREATED_DESC,
+      state: getParameterByName('state') || IssuableStates.Opened,
       totalIssues: 0,
     };
   },
@@ -98,15 +93,15 @@ export default {
       return Object.values(IssuableStates).reduce(
         (acc, state) => ({
           ...acc,
-          [state]: this.currentState === state ? this.totalIssues : undefined,
+          [state]: this.state === state ? this.totalIssues : undefined,
         }),
         {},
       );
     },
     urlParams() {
       return {
-        page: this.currentPage,
-        state: this.currentState,
+        page: this.page,
+        state: this.state,
         ...this.filters,
       };
     },
@@ -131,18 +126,18 @@ export default {
       return axios
         .get(this.endpoint, {
           params: {
-            page: this.currentPage,
+            page: this.page,
             per_page: this.$options.PAGE_SIZE,
-            state: this.currentState,
+            state: this.state,
             with_labels_details: true,
             ...this.filters,
           },
         })
         .then(({ data, headers }) => {
-          this.currentPage = Number(headers['x-page']);
+          this.page = Number(headers['x-page']);
           this.totalIssues = Number(headers['x-total']);
           this.issues = data.map((issue) => convertObjectPropsToCamelCase(issue, { deep: true }));
-          this.exportCsvUrl = `${this.exportCsvPath}${window.location.search}`;
+          this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
         })
         .catch(() => {
           createFlash({ message: __('An error occurred while loading issues') });
@@ -151,6 +146,9 @@ export default {
           this.isLoading = false;
         });
     },
+    getExportCsvPathWithQuery() {
+      return `${this.exportCsvPath}${window.location.search}`;
+    },
     handleUpdateLegacyBulkEdit() {
       // If "select all" checkbox was checked, wait for all checkboxes
       // to be checked before updating IssuableBulkUpdateSidebar class
@@ -162,14 +160,14 @@ export default {
       eventHub.$emit('issuables:enableBulkEdit');
     },
     handleClickTab(state) {
-      if (this.currentState !== state) {
-        this.currentPage = 1;
+      if (this.state !== state) {
+        this.page = 1;
       }
-      this.currentState = state;
+      this.state = state;
       this.fetchIssues();
     },
     handlePageChange(page) {
-      this.currentPage = page;
+      this.page = page;
       this.fetchIssues();
     },
     handleReorder({ newIndex, oldIndex }) {
@@ -224,16 +222,16 @@ export default {
     :initial-sort-by="sortKey"
     :issuables="issues"
     :tabs="$options.IssuableListTabs"
-    :current-tab="currentState"
+    :current-tab="state"
     :tab-counts="tabCounts"
     :issuables-loading="isLoading"
     :is-manual-ordering="isManualOrdering"
     :show-bulk-edit-sidebar="showBulkEditSidebar"
     :show-pagination-controls="true"
     :total-items="totalIssues"
-    :current-page="currentPage"
-    :previous-page="currentPage - 1"
-    :next-page="currentPage + 1"
+    :current-page="page"
+    :previous-page="page - 1"
+    :next-page="page + 1"
     :url-params="urlParams"
     @click-tab="handleClickTab"
     @page-change="handlePageChange"
@@ -244,21 +242,21 @@ export default {
     <template #nav-actions>
       <gl-button
         v-gl-tooltip
-        :href="rssUrl"
+        :href="rssPath"
         icon="rss"
         :title="$options.i18n.rssLabel"
         :aria-label="$options.i18n.rssLabel"
       />
       <gl-button
         v-gl-tooltip
-        :href="calendarUrl"
+        :href="calendarPath"
         icon="calendar"
         :title="$options.i18n.calendarLabel"
         :aria-label="$options.i18n.calendarLabel"
       />
       <csv-import-export-buttons
         class="gl-mr-3"
-        :export-csv-path="exportCsvUrl"
+        :export-csv-path="exportCsvPathWithQuery"
         :issuable-count="totalIssues"
       />
       <gl-button
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index 765ae0a612f546..440862ac2652d6 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { MAXIMUM_FILE_UPLOAD_LIMIT } from '~/design_management/constants';
 import IssuesListApp from '~/issues_list/components/issues_list_app.vue';
 import createDefaultClient from '~/lib/graphql';
 import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
@@ -73,22 +74,22 @@ export function initIssuesListApp() {
   }
 
   const {
-    calendarUrl,
+    calendarPath,
     canBulkUpdate,
+    canEdit,
+    email,
     endpoint,
+    exportCsvPath,
     fullPath,
     hasBlockedIssuesFeature,
     hasIssuableHealthStatusFeature,
     hasIssueWeightsFeature,
+    importCsvIssuesPath,
     issuesPath,
     newIssuePath,
-    rssUrl,
-    showNewIssueLink,
-    canEdit,
-    email,
-    exportCsvPath,
-    importCsvIssuesPath,
     projectImportJiraPath,
+    rssPath,
+    showNewIssueLink,
   } = el.dataset;
 
   return new Vue({
@@ -97,7 +98,7 @@ export function initIssuesListApp() {
     // issue is fixed upstream in https://github.com/vuejs/vue-apollo/pull/1153
     apolloProvider: {},
     provide: {
-      calendarUrl,
+      calendarPath,
       canBulkUpdate: parseBoolean(canBulkUpdate),
       endpoint,
       fullPath,
@@ -106,14 +107,14 @@ export function initIssuesListApp() {
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
       issuesPath,
       newIssuePath,
-      rssUrl,
+      rssPath,
       showNewIssueLink: parseBoolean(showNewIssueLink),
       // For CsvImportExportButtons component
       canEdit: parseBoolean(canEdit),
       email,
       exportCsvPath,
       importCsvIssuesPath,
-      maxAttachmentSize: `${gon.max_file_size || 10} MB`, // eslint-disable-line @gitlab/require-i18n-strings
+      maxAttachmentSize: `${gon.max_file_size || MAXIMUM_FILE_UPLOAD_LIMIT} MB`, // eslint-disable-line @gitlab/require-i18n-strings
       projectImportJiraPath,
       showExportButton: true,
       showImportButton: true,
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 0a9965496b84bf..fe099ef4a0a39d 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -163,6 +163,24 @@ def issue_header_actions_data(project, issuable, current_user)
     }
   end
 
+  def issues_list_data(project, current_user)
+    {
+      calendar_path: url_for(safe_params.merge(calendar_url_options)),
+      can_bulk_update: can?(current_user, :admin_issue, project).to_s,
+      can_edit: can?(current_user, :admin_project, project).to_s,
+      email: current_user&.notification_email,
+      endpoint: expose_path(api_v4_projects_issues_path(id: project.id)),
+      export_csv_path: export_csv_project_issues_path(project),
+      full_path: project.full_path,
+      import_csv_issues_path: import_csv_namespace_project_issues_path,
+      issues_path: project_issues_path(project),
+      new_issue_path: new_project_issue_path(project, issue: { assignee_id: finder.assignee.try(:id), milestone_id: finder.milestones.first.try(:id) }),
+      project_import_jira_path: project_import_jira_path(project),
+      rss_path: url_for(safe_params.merge(rss_url_options)),
+      show_new_issue_link: show_new_issue_link?(project).to_s
+    }
+  end
+
   # Overridden in EE
   def scoped_labels_available?(parent)
     false
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 93435e5ed3b39c..13cc261c2b7efc 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -4,8 +4,6 @@
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
 - add_page_specific_style 'page_bundles/issues_list'
 - issuable_type = 'issue'
-- can_edit = can?(current_user, :admin_project, @project)
-- notification_email = current_user.present? ? current_user.notification_email : nil
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
@@ -16,23 +14,7 @@
   project_path: @project.full_path } }
 
 - if Feature.enabled?(:vue_issues_list, @project)
-  - data_endpoint = local_assigns.fetch(:data_endpoint, expose_path(api_v4_projects_issues_path(id: @project.id)))
-  .js-issues-list{ data: { calendar_url: url_for(safe_params.merge(calendar_url_options)),
-    can_bulk_update: @can_bulk_update.to_s,
-    endpoint: data_endpoint,
-    full_path: @project.full_path,
-    has_blocked_issues_feature: Gitlab.ee? && @project.feature_available?(:blocked_issues).to_s,
-    has_issuable_health_status_feature: Gitlab.ee? && @project.feature_available?(:issuable_health_status).to_s,
-    has_issue_weights_feature: Gitlab.ee? && @project.feature_available?(:issue_weights).to_s,
-    issues_path: project_issues_path(@project),
-    new_issue_path: new_project_issue_path(@project, issue: { assignee_id: finder.assignee.try(:id), milestone_id: finder.milestones.first.try(:id) }),
-    rss_url: url_for(safe_params.merge(rss_url_options)),
-    show_new_issue_link: show_new_issue_link?(@project).to_s,
-    can_edit: can_edit.to_s,
-    email: notification_email,
-    export_csv_path: export_csv_project_issues_path(@project),
-    import_csv_issues_path: import_csv_namespace_project_issues_path,
-    project_import_jira_path: project_import_jira_path(@project) } }
+  .js-issues-list{ data: issues_list_data(@project, current_user) }
   - if @can_bulk_update
     = render 'shared/issuable/bulk_update_sidebar', type: :issues
 - elsif project_issues(@project).exists?
diff --git a/ee/app/helpers/ee/issues_helper.rb b/ee/app/helpers/ee/issues_helper.rb
index 54483fa9ff483d..7dbc079528640a 100644
--- a/ee/app/helpers/ee/issues_helper.rb
+++ b/ee/app/helpers/ee/issues_helper.rb
@@ -68,5 +68,18 @@ def issue_header_actions_data(project, issuable, current_user)
       actions[:can_promote_to_epic] = issuable.can_be_promoted_to_epic?(current_user).to_s
       actions
     end
+
+    override :issues_list_data
+    def issues_list_data(project, current_user)
+      data = super
+
+      data.merge!(
+        has_blocked_issues_feature: project.feature_available?(:blocked_issues).to_s,
+        has_issuable_health_status_feature: project.feature_available?(:issuable_health_status).to_s,
+        has_issue_weights_feature: project.feature_available?(:issue_weights).to_s,
+      )
+
+      data
+    end
   end
 end
diff --git a/spec/frontend/issuable_list/components/issuable_tabs_spec.js b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
index 4a91eb63089f99..dd7c936077b455 100644
--- a/spec/frontend/issuable_list/components/issuable_tabs_spec.js
+++ b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
@@ -34,6 +34,8 @@ describe('IssuableTabs', () => {
     wrapper.destroy();
   });
 
+  const findGlTabs = () => wrapper.findAllComponents(GlTab);
+
   describe('methods', () => {
     describe('isTabActive', () => {
       it.each`
@@ -57,14 +59,14 @@ describe('IssuableTabs', () => {
 
   describe('template', () => {
     it('renders gl-tab for each tab within `tabs` array', () => {
-      const tabsEl = wrapper.findAll(GlTab);
+      const tabsEl = findGlTabs();
 
       expect(tabsEl.exists()).toBe(true);
       expect(tabsEl).toHaveLength(mockIssuableListProps.tabs.length);
     });
 
     it('renders gl-badge component within a tab', () => {
-      const badgeEl = wrapper.findAll(GlBadge);
+      const badgeEl = wrapper.findAllComponents(GlBadge);
 
       // Does not render `All` tab since it has an undefined count
       expect(badgeEl).toHaveLength(2);
@@ -82,7 +84,7 @@ describe('IssuableTabs', () => {
 
   describe('events', () => {
     it('gl-tab component emits `click` event on `click` event', () => {
-      const tabEl = wrapper.findAll(GlTab).at(0);
+      const tabEl = findGlTabs().at(0);
 
       tabEl.vm.$emit('click', 'opened');
 
diff --git a/spec/frontend/issues_list/components/issues_list_app_spec.js b/spec/frontend/issues_list/components/issues_list_app_spec.js
index faf4ecec4b90a8..67ae644911a9d9 100644
--- a/spec/frontend/issues_list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues_list/components/issues_list_app_spec.js
@@ -28,13 +28,13 @@ describe('IssuesListApp component', () => {
   let axiosMock;
   let wrapper;
 
-  const calendarUrl = 'calendar/url';
+  const calendarPath = 'calendar/path';
   const endpoint = 'api/endpoint';
   const exportCsvPath = 'export/csv/path';
   const fullPath = 'path/to/project';
   const issuesPath = `${fullPath}/-/issues`;
   const newIssuePath = `new/issue/path`;
-  const rssUrl = 'rss/url';
+  const rssPath = 'rss/path';
   const state = 'opened';
   const xPage = 1;
   const xTotal = 25;
@@ -52,19 +52,19 @@ describe('IssuesListApp component', () => {
   };
 
   const findGlButtons = () => wrapper.findAllComponents(GlButton);
-  const findGlButtonAt = (index) => wrapper.findAllComponents(GlButton).at(index);
+  const findGlButtonAt = (index) => findGlButtons().at(index);
   const findIssuableList = () => wrapper.findComponent(IssuableList);
 
   const mountComponent = ({ provide = {} } = {}) =>
     shallowMount(IssuesListApp, {
       provide: {
-        calendarUrl,
+        calendarPath,
         endpoint,
         exportCsvPath,
         fullPath,
         issuesPath,
         newIssuePath,
-        rssUrl,
+        rssPath,
         ...provide,
       },
     });
@@ -112,7 +112,7 @@ describe('IssuesListApp component', () => {
       wrapper = mountComponent();
 
       expect(findGlButtonAt(0).attributes()).toMatchObject({
-        href: rssUrl,
+        href: rssPath,
         icon: 'rss',
         'aria-label': IssuesListApp.i18n.rssLabel,
       });
@@ -122,7 +122,7 @@ describe('IssuesListApp component', () => {
       wrapper = mountComponent();
 
       expect(findGlButtonAt(1).attributes()).toMatchObject({
-        href: calendarUrl,
+        href: calendarPath,
         icon: 'calendar',
         'aria-label': IssuesListApp.i18n.calendarLabel,
       });
@@ -178,7 +178,7 @@ describe('IssuesListApp component', () => {
         expect(findGlButtonAt(2).attributes('href')).toBe(newIssuePath);
       });
 
-      it('does not render when user has permissions', () => {
+      it('does not render when user does not have permissions', () => {
         wrapper = mountComponent({ provide: { showNewIssueLink: false } });
 
         expect(findGlButtons().filter((button) => button.text() === 'New issue')).toHaveLength(0);
@@ -233,7 +233,7 @@ describe('IssuesListApp component', () => {
       findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
     });
 
-    it('makes API call to filter the list by the new state and resets the page to 1', async () => {
+    it('makes API call to filter the list by the new state and resets the page to 1', () => {
       expect(axiosMock.history.get[1].params).toMatchObject({
         page: 1,
         state: IssuableStates.Closed,
-- 
GitLab


From b2b7bef3abf5c5e8d23c80c25979023159ae806c Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Tue, 30 Mar 2021 19:30:47 +0100
Subject: [PATCH 3/5] Add @justin_ho suggestions

---
 ee/app/helpers/ee/issues_helper.rb                |  8 ++------
 .../components/issuable_tabs_spec.js              | 15 ++++++++-------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/ee/app/helpers/ee/issues_helper.rb b/ee/app/helpers/ee/issues_helper.rb
index 7dbc079528640a..e055c4b58bfc5f 100644
--- a/ee/app/helpers/ee/issues_helper.rb
+++ b/ee/app/helpers/ee/issues_helper.rb
@@ -71,15 +71,11 @@ def issue_header_actions_data(project, issuable, current_user)
 
     override :issues_list_data
     def issues_list_data(project, current_user)
-      data = super
-
-      data.merge!(
+      super.merge!(
         has_blocked_issues_feature: project.feature_available?(:blocked_issues).to_s,
         has_issuable_health_status_feature: project.feature_available?(:issuable_health_status).to_s,
-        has_issue_weights_feature: project.feature_available?(:issue_weights).to_s,
+        has_issue_weights_feature: project.feature_available?(:issue_weights).to_s
       )
-
-      data
     end
   end
 end
diff --git a/spec/frontend/issuable_list/components/issuable_tabs_spec.js b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
index dd7c936077b455..90f8d33e63a5e0 100644
--- a/spec/frontend/issuable_list/components/issuable_tabs_spec.js
+++ b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
@@ -34,7 +34,8 @@ describe('IssuableTabs', () => {
     wrapper.destroy();
   });
 
-  const findGlTabs = () => wrapper.findAllComponents(GlTab);
+  const findAllGlBadges = () => wrapper.findAllComponents(GlBadge);
+  const findAllGlTabs = () => wrapper.findAllComponents(GlTab);
 
   describe('methods', () => {
     describe('isTabActive', () => {
@@ -59,19 +60,19 @@ describe('IssuableTabs', () => {
 
   describe('template', () => {
     it('renders gl-tab for each tab within `tabs` array', () => {
-      const tabsEl = findGlTabs();
+      const tabsEl = findAllGlTabs();
 
       expect(tabsEl.exists()).toBe(true);
       expect(tabsEl).toHaveLength(mockIssuableListProps.tabs.length);
     });
 
     it('renders gl-badge component within a tab', () => {
-      const badgeEl = wrapper.findAllComponents(GlBadge);
+      const badges = findAllGlBadges();
 
       // Does not render `All` tab since it has an undefined count
-      expect(badgeEl).toHaveLength(2);
-      expect(badgeEl.at(0).text()).toBe(`${mockIssuableListProps.tabCounts.opened}`);
-      expect(badgeEl.at(1).text()).toBe(`${mockIssuableListProps.tabCounts.closed}`);
+      expect(badges).toHaveLength(2);
+      expect(badges.at(0).text()).toBe(`${mockIssuableListProps.tabCounts.opened}`);
+      expect(badges.at(1).text()).toBe(`${mockIssuableListProps.tabCounts.closed}`);
     });
 
     it('renders contents for slot "nav-actions"', () => {
@@ -84,7 +85,7 @@ describe('IssuableTabs', () => {
 
   describe('events', () => {
     it('gl-tab component emits `click` event on `click` event', () => {
-      const tabEl = findGlTabs().at(0);
+      const tabEl = findAllGlTabs().at(0);
 
       tabEl.vm.$emit('click', 'opened');
 
-- 
GitLab


From 118caa73cf24651f85aae2e4fb1c0a6448ab445d Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Wed, 31 Mar 2021 20:54:06 +0100
Subject: [PATCH 4/5] Add reviewer suggestions

---
 .../design_management/constants.js            |  2 --
 .../design_management/pages/index.vue         |  4 ++-
 .../components/issuable_tabs.vue              |  2 +-
 app/assets/javascripts/issues_list/index.js   |  4 +--
 app/helpers/issues_helper.rb                  |  1 +
 ee/spec/helpers/ee/issues_helper_spec.rb      | 24 +++++++++++++
 .../components/issuable_tabs_spec.js          |  2 +-
 spec/helpers/issues_helper_spec.rb            | 34 +++++++++++++++++++
 8 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/design_management/constants.js b/app/assets/javascripts/design_management/constants.js
index afe621ac3c51a6..92928ca429fa38 100644
--- a/app/assets/javascripts/design_management/constants.js
+++ b/app/assets/javascripts/design_management/constants.js
@@ -12,5 +12,3 @@ export const ACTIVE_DISCUSSION_SOURCE_TYPES = {
 };
 
 export const DESIGN_DETAIL_LAYOUT_CLASSLIST = ['design-detail-layout', 'overflow-hidden', 'm-0'];
-
-export const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index cc844f6fe7ab30..3cc22e1519bdf5 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -12,7 +12,7 @@ import DesignDestroyer from '../components/design_destroyer.vue';
 import Design from '../components/list/item.vue';
 import UploadButton from '../components/upload/button.vue';
 import DesignVersionDropdown from '../components/upload/design_version_dropdown.vue';
-import { MAXIMUM_FILE_UPLOAD_LIMIT, VALID_DESIGN_FILE_MIMETYPE } from '../constants';
+import { VALID_DESIGN_FILE_MIMETYPE } from '../constants';
 import moveDesignMutation from '../graphql/mutations/move_design.mutation.graphql';
 import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql';
 import allDesignsMixin from '../mixins/all_designs';
@@ -37,6 +37,8 @@ import {
 } from '../utils/error_messages';
 import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking';
 
+const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
+
 export default {
   components: {
     GlLoadingIcon,
diff --git a/app/assets/javascripts/issuable_list/components/issuable_tabs.vue b/app/assets/javascripts/issuable_list/components/issuable_tabs.vue
index b314f2b368f446..6bc621b52e614e 100644
--- a/app/assets/javascripts/issuable_list/components/issuable_tabs.vue
+++ b/app/assets/javascripts/issuable_list/components/issuable_tabs.vue
@@ -27,7 +27,7 @@ export default {
       return tabName === this.currentTab;
     },
     isTabCountNumeric(tab) {
-      return typeof this.tabCounts[tab.name] === 'number';
+      return Number.isInteger(this.tabCounts[tab.name]);
     },
   },
 };
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index 440862ac2652d6..0ba20e4305069a 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { MAXIMUM_FILE_UPLOAD_LIMIT } from '~/design_management/constants';
 import IssuesListApp from '~/issues_list/components/issues_list_app.vue';
 import createDefaultClient from '~/lib/graphql';
 import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
@@ -86,6 +85,7 @@ export function initIssuesListApp() {
     hasIssueWeightsFeature,
     importCsvIssuesPath,
     issuesPath,
+    maxAttachmentSize,
     newIssuePath,
     projectImportJiraPath,
     rssPath,
@@ -114,7 +114,7 @@ export function initIssuesListApp() {
       email,
       exportCsvPath,
       importCsvIssuesPath,
-      maxAttachmentSize: `${gon.max_file_size || MAXIMUM_FILE_UPLOAD_LIMIT} MB`, // eslint-disable-line @gitlab/require-i18n-strings
+      maxAttachmentSize,
       projectImportJiraPath,
       showExportButton: true,
       showImportButton: true,
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index fe099ef4a0a39d..379ad1d56e3a97 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -174,6 +174,7 @@ def issues_list_data(project, current_user)
       full_path: project.full_path,
       import_csv_issues_path: import_csv_namespace_project_issues_path,
       issues_path: project_issues_path(project),
+      max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
       new_issue_path: new_project_issue_path(project, issue: { assignee_id: finder.assignee.try(:id), milestone_id: finder.milestones.first.try(:id) }),
       project_import_jira_path: project_import_jira_path(project),
       rss_path: url_for(safe_params.merge(rss_url_options)),
diff --git a/ee/spec/helpers/ee/issues_helper_spec.rb b/ee/spec/helpers/ee/issues_helper_spec.rb
index 349ea1ae71968b..93ab34bc40aa32 100644
--- a/ee/spec/helpers/ee/issues_helper_spec.rb
+++ b/ee/spec/helpers/ee/issues_helper_spec.rb
@@ -122,4 +122,28 @@
       it_behaves_like 'with license'
     end
   end
+
+  describe '#issues_list_data' do
+    let(:current_user) { create(:user) }
+    let(:finder) { IssuesFinder.new(current_user) }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(current_user)
+      allow(helper).to receive(:finder).and_return(finder)
+      allow(helper).to receive(:can?).and_return(true)
+      allow(helper).to receive(:url_for).and_return('#')
+      allow(helper).to receive(:import_csv_namespace_project_issues_path).and_return('#')
+      allow(project).to receive(:feature_available?).and_return(true)
+    end
+
+    it 'returns expected result' do
+      expected = {
+        has_blocked_issues_feature: 'true',
+        has_issuable_health_status_feature: 'true',
+        has_issue_weights_feature: 'true'
+      }
+
+      expect(helper.issues_list_data(project, current_user)).to include(expected)
+    end
+  end
 end
diff --git a/spec/frontend/issuable_list/components/issuable_tabs_spec.js b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
index 90f8d33e63a5e0..cbf5765078ae4a 100644
--- a/spec/frontend/issuable_list/components/issuable_tabs_spec.js
+++ b/spec/frontend/issuable_list/components/issuable_tabs_spec.js
@@ -69,7 +69,7 @@ describe('IssuableTabs', () => {
     it('renders gl-badge component within a tab', () => {
       const badges = findAllGlBadges();
 
-      // Does not render `All` tab since it has an undefined count
+      // Does not render `All` badge since it has an undefined count
       expect(badges).toHaveLength(2);
       expect(badges.at(0).text()).toBe(`${mockIssuableListProps.tabCounts.opened}`);
       expect(badges.at(1).text()).toBe(`${mockIssuableListProps.tabCounts.closed}`);
diff --git a/spec/helpers/issues_helper_spec.rb b/spec/helpers/issues_helper_spec.rb
index 07e55e9b0169f9..fb495e99daed1c 100644
--- a/spec/helpers/issues_helper_spec.rb
+++ b/spec/helpers/issues_helper_spec.rb
@@ -281,4 +281,38 @@
       expect(helper.issue_header_actions_data(project, issue, current_user)).to include(expected)
     end
   end
+
+  describe '#issues_list_data' do
+    let(:current_user) { create(:user) }
+    let(:finder) { IssuesFinder.new(current_user) }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(current_user)
+      allow(helper).to receive(:finder).and_return(finder)
+      allow(helper).to receive(:can?).and_return(true)
+      allow(helper).to receive(:url_for).and_return('#')
+      allow(helper).to receive(:import_csv_namespace_project_issues_path).and_return('#')
+    end
+
+    it 'returns expected result' do
+      expected = {
+        calendar_path: '#',
+        can_bulk_update: 'true',
+        can_edit: 'true',
+        email: current_user.notification_email,
+        endpoint: expose_path(api_v4_projects_issues_path(id: project.id)),
+        export_csv_path: export_csv_project_issues_path(project),
+        full_path: project.full_path,
+        import_csv_issues_path: '#',
+        issues_path: project_issues_path(project),
+        max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
+        new_issue_path: new_project_issue_path(project, issue: { assignee_id: finder.assignee.try(:id), milestone_id: finder.milestones.first.try(:id) }),
+        project_import_jira_path: project_import_jira_path(project),
+        rss_path: '#',
+        show_new_issue_link: 'true'
+      }
+
+      expect(helper.issues_list_data(project, current_user)).to include(expected)
+    end
+  end
 end
-- 
GitLab


From 4371324ac2310255180b8e77c0a6fe6b6abf3f9c Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Thu, 1 Apr 2021 17:14:47 +0100
Subject: [PATCH 5/5] Improve issues_helper specs

---
 app/helpers/issues_helper.rb              |  2 +-
 app/views/projects/issues/index.html.haml |  2 +-
 ee/app/helpers/ee/issues_helper.rb        |  2 +-
 ee/spec/helpers/ee/issues_helper_spec.rb  | 11 +++------
 spec/helpers/issues_helper_spec.rb        | 30 +++++++++++++++--------
 5 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 379ad1d56e3a97..7e3c64ff7361cf 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -163,7 +163,7 @@ def issue_header_actions_data(project, issuable, current_user)
     }
   end
 
-  def issues_list_data(project, current_user)
+  def issues_list_data(project, current_user, finder)
     {
       calendar_path: url_for(safe_params.merge(calendar_url_options)),
       can_bulk_update: can?(current_user, :admin_issue, project).to_s,
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 13cc261c2b7efc..9b043ea3c47aa2 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -14,7 +14,7 @@
   project_path: @project.full_path } }
 
 - if Feature.enabled?(:vue_issues_list, @project)
-  .js-issues-list{ data: issues_list_data(@project, current_user) }
+  .js-issues-list{ data: issues_list_data(@project, current_user, finder) }
   - if @can_bulk_update
     = render 'shared/issuable/bulk_update_sidebar', type: :issues
 - elsif project_issues(@project).exists?
diff --git a/ee/app/helpers/ee/issues_helper.rb b/ee/app/helpers/ee/issues_helper.rb
index e055c4b58bfc5f..82ce527267db1b 100644
--- a/ee/app/helpers/ee/issues_helper.rb
+++ b/ee/app/helpers/ee/issues_helper.rb
@@ -70,7 +70,7 @@ def issue_header_actions_data(project, issuable, current_user)
     end
 
     override :issues_list_data
-    def issues_list_data(project, current_user)
+    def issues_list_data(project, current_user, finder)
       super.merge!(
         has_blocked_issues_feature: project.feature_available?(:blocked_issues).to_s,
         has_issuable_health_status_feature: project.feature_available?(:issuable_health_status).to_s,
diff --git a/ee/spec/helpers/ee/issues_helper_spec.rb b/ee/spec/helpers/ee/issues_helper_spec.rb
index 93ab34bc40aa32..319de03fd262bf 100644
--- a/ee/spec/helpers/ee/issues_helper_spec.rb
+++ b/ee/spec/helpers/ee/issues_helper_spec.rb
@@ -124,26 +124,23 @@
   end
 
   describe '#issues_list_data' do
-    let(:current_user) { create(:user) }
-    let(:finder) { IssuesFinder.new(current_user) }
-
-    before do
+    it 'returns expected result' do
+      current_user = double.as_null_object
+      finder = double.as_null_object
       allow(helper).to receive(:current_user).and_return(current_user)
       allow(helper).to receive(:finder).and_return(finder)
       allow(helper).to receive(:can?).and_return(true)
       allow(helper).to receive(:url_for).and_return('#')
       allow(helper).to receive(:import_csv_namespace_project_issues_path).and_return('#')
       allow(project).to receive(:feature_available?).and_return(true)
-    end
 
-    it 'returns expected result' do
       expected = {
         has_blocked_issues_feature: 'true',
         has_issuable_health_status_feature: 'true',
         has_issue_weights_feature: 'true'
       }
 
-      expect(helper.issues_list_data(project, current_user)).to include(expected)
+      expect(helper.issues_list_data(project, current_user, finder)).to include(expected)
     end
   end
 end
diff --git a/spec/helpers/issues_helper_spec.rb b/spec/helpers/issues_helper_spec.rb
index fb495e99daed1c..b5b2ca1dcd3144 100644
--- a/spec/helpers/issues_helper_spec.rb
+++ b/spec/helpers/issues_helper_spec.rb
@@ -282,37 +282,47 @@
     end
   end
 
-  describe '#issues_list_data' do
-    let(:current_user) { create(:user) }
-    let(:finder) { IssuesFinder.new(current_user) }
-
-    before do
+  shared_examples 'issues list data' do
+    it 'returns expected result' do
+      finder = double.as_null_object
       allow(helper).to receive(:current_user).and_return(current_user)
       allow(helper).to receive(:finder).and_return(finder)
       allow(helper).to receive(:can?).and_return(true)
       allow(helper).to receive(:url_for).and_return('#')
       allow(helper).to receive(:import_csv_namespace_project_issues_path).and_return('#')
-    end
 
-    it 'returns expected result' do
       expected = {
         calendar_path: '#',
         can_bulk_update: 'true',
         can_edit: 'true',
-        email: current_user.notification_email,
+        email: current_user&.notification_email,
         endpoint: expose_path(api_v4_projects_issues_path(id: project.id)),
         export_csv_path: export_csv_project_issues_path(project),
         full_path: project.full_path,
         import_csv_issues_path: '#',
         issues_path: project_issues_path(project),
         max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
-        new_issue_path: new_project_issue_path(project, issue: { assignee_id: finder.assignee.try(:id), milestone_id: finder.milestones.first.try(:id) }),
+        new_issue_path: new_project_issue_path(project, issue: { assignee_id: finder.assignee.id, milestone_id: finder.milestones.first.id }),
         project_import_jira_path: project_import_jira_path(project),
         rss_path: '#',
         show_new_issue_link: 'true'
       }
 
-      expect(helper.issues_list_data(project, current_user)).to include(expected)
+      expect(helper.issues_list_data(project, current_user, finder)).to include(expected)
+    end
+  end
+
+  describe '#issues_list_data' do
+    context 'when user is signed in' do
+      it_behaves_like 'issues list data' do
+        let(:current_user) { double.as_null_object }
+      end
+    end
+
+    context 'when user is anonymous' do
+      it_behaves_like 'issues list data' do
+        let(:current_user) { nil }
+      end
     end
   end
 end
-- 
GitLab