From c0eb24b806c2e89b3df5d1827c279745cac81ab3 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Wed, 7 Apr 2021 13:32:28 +0100
Subject: [PATCH 1/2] Add empty states and search to issues list page refactor

Added behind `vue_issues_list` feature flag defaulted to off,
as part of an ongoing refactor from Haml.

https://gitlab.com/gitlab-org/gitlab/-/issues/322755
---
 .../components/issues_list_app.vue            | 169 ++++++-
 app/assets/javascripts/issues_list/index.js   |  17 +-
 app/helpers/issues_helper.rb                  |   8 +-
 locale/gitlab.pot                             |   3 +
 .../components/issues_list_app_spec.js        | 456 ++++++++++++------
 spec/helpers/issues_helper_spec.rb            |  11 +-
 6 files changed, 512 insertions(+), 152 deletions(-)

diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index 1f26c65475b18a..5098d7f3e023e2 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { toNumber } from 'lodash';
 import createFlash from '~/flash';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
@@ -14,7 +14,7 @@ import {
 } from '~/issues_list/constants';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase, getParameterByName } from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import eventHub from '../eventhub';
 import IssueCardTimeInfo from './issue_card_time_info.vue';
 
@@ -26,13 +26,38 @@ export default {
   sortParams,
   i18n: {
     calendarLabel: __('Subscribe to calendar'),
+    jiraIntegrationMessage: s__(
+      'JiraService|%{jiraDocsLinkStart}Enable the Jira integration%{jiraDocsLinkEnd} to view your Jira issues in GitLab.',
+    ),
+    jiraIntegrationSecondaryMessage: s__('JiraService|This feature requires a Premium plan.'),
+    jiraIntegrationTitle: s__('JiraService|Using Jira for issue tracking?'),
+    newIssueLabel: __('New issue'),
+    noClosedIssuesTitle: __('There are no closed issues'),
+    noOpenIssuesDescription: __('To keep this project going, create a new issue'),
+    noOpenIssuesTitle: __('There are no open issues'),
+    noIssuesSignedInDescription: __(
+      'Issues can be bugs, tasks or ideas to be discussed. Also, issues are searchable and filterable.',
+    ),
+    noIssuesSignedInTitle: __(
+      'The Issue Tracker is the place to add things that need to be improved or solved in a project',
+    ),
+    noIssuesSignedOutButtonText: __('Register / Sign In'),
+    noIssuesSignedOutDescription: __(
+      'The Issue Tracker is the place to add things that need to be improved or solved in a project. You can register or sign in to create issues for this project.',
+    ),
+    noIssuesSignedOutTitle: __('There are no issues to show'),
+    noSearchResultsDescription: __('To widen your search, change or remove filters above'),
+    noSearchResultsTitle: __('Sorry, your filter produced no results'),
     reorderError: __('An error occurred while reordering issues.'),
     rssLabel: __('Subscribe to RSS feed'),
   },
   components: {
     CsvImportExportButtons,
     GlButton,
+    GlEmptyState,
     GlIcon,
+    GlLink,
+    GlSprintf,
     IssuableList,
     IssueCardTimeInfo,
     BlockingIssuesCount: () => import('ee_component/issues/components/blocking_issues_count.vue'),
@@ -47,6 +72,12 @@ export default {
     canBulkUpdate: {
       default: false,
     },
+    canImportIssues: {
+      default: false,
+    },
+    emptyStateSvgPath: {
+      default: '',
+    },
     endpoint: {
       default: '',
     },
@@ -56,9 +87,18 @@ export default {
     fullPath: {
       default: '',
     },
+    hasIssues: {
+      default: false,
+    },
+    isSignedIn: {
+      default: false,
+    },
     issuesPath: {
       default: '',
     },
+    jiraIntegrationPath: {
+      default: '',
+    },
     newIssuePath: {
       default: '',
     },
@@ -68,6 +108,9 @@ export default {
     showNewIssueLink: {
       default: false,
     },
+    signInPath: {
+      default: '',
+    },
   },
   data() {
     const orderBy = getParameterByName('order_by');
@@ -76,9 +119,18 @@ export default {
       (key) => sortParams[key].order_by === orderBy && sortParams[key].sort === sort,
     );
 
+    const search = getParameterByName('search') || '';
+    const tokens = search.split(' ').map((searchWord) => ({
+      type: 'filtered-search-term',
+      value: {
+        data: searchWord,
+      },
+    }));
+
     return {
       exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
       filters: sortParams[sortKey] || {},
+      filterTokens: tokens,
       isLoading: false,
       issues: [],
       page: toNumber(getParameterByName('page')) || 1,
@@ -89,6 +141,23 @@ export default {
     };
   },
   computed: {
+    isManualOrdering() {
+      return this.sortKey === RELATIVE_POSITION_ASC;
+    },
+    isOpenTab() {
+      return this.state === IssuableStates.Opened;
+    },
+    searchQuery() {
+      return (
+        this.filterTokens
+          .map((searchTerm) => searchTerm.value.data)
+          .filter((searchWord) => Boolean(searchWord))
+          .join(' ') || undefined
+      );
+    },
+    showPaginationControls() {
+      return this.issues.length > 0;
+    },
     tabCounts() {
       return Object.values(IssuableStates).reduce(
         (acc, state) => ({
@@ -101,13 +170,11 @@ export default {
     urlParams() {
       return {
         page: this.page,
+        search: this.searchQuery,
         state: this.state,
         ...this.filters,
       };
     },
-    isManualOrdering() {
-      return this.sortKey === RELATIVE_POSITION_ASC;
-    },
   },
   mounted() {
     eventHub.$on('issuables:toggleBulkEdit', (showBulkEditSidebar) => {
@@ -121,6 +188,10 @@ export default {
   },
   methods: {
     fetchIssues() {
+      if (!this.hasIssues) {
+        return undefined;
+      }
+
       this.isLoading = true;
 
       return axios
@@ -128,6 +199,7 @@ export default {
           params: {
             page: this.page,
             per_page: this.$options.PAGE_SIZE,
+            search: this.searchQuery,
             state: this.state,
             with_labels_details: true,
             ...this.filters,
@@ -166,6 +238,10 @@ export default {
       this.state = state;
       this.fetchIssues();
     },
+    handleFilter(filter) {
+      this.filterTokens = filter;
+      this.fetchIssues();
+    },
     handlePageChange(page) {
       this.page = page;
       this.fetchIssues();
@@ -214,10 +290,12 @@ export default {
 
 <template>
   <issuable-list
+    v-if="hasIssues"
     :namespace="fullPath"
     recent-searches-storage-key="issues"
     :search-input-placeholder="__('Search or filter results…')"
     :search-tokens="[]"
+    :initial-filter-value="filterTokens"
     :sort-options="$options.sortOptions"
     :initial-sort-by="sortKey"
     :issuables="issues"
@@ -227,13 +305,14 @@ export default {
     :issuables-loading="isLoading"
     :is-manual-ordering="isManualOrdering"
     :show-bulk-edit-sidebar="showBulkEditSidebar"
-    :show-pagination-controls="true"
+    :show-pagination-controls="showPaginationControls"
     :total-items="totalIssues"
     :current-page="page"
     :previous-page="page - 1"
     :next-page="page + 1"
     :url-params="urlParams"
     @click-tab="handleClickTab"
+    @filter="handleFilter"
     @page-change="handlePageChange"
     @reorder="handleReorder"
     @sort="handleSort"
@@ -267,7 +346,7 @@ export default {
         {{ __('Edit issues') }}
       </gl-button>
       <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
-        {{ __('New issue') }}
+        {{ $options.i18n.newIssueLabel }}
       </gl-button>
     </template>
 
@@ -312,5 +391,81 @@ export default {
         :is-list-item="true"
       />
     </template>
+
+    <template #empty-state>
+      <gl-empty-state
+        v-if="searchQuery"
+        :description="$options.i18n.noSearchResultsDescription"
+        :title="$options.i18n.noSearchResultsTitle"
+        :svg-path="emptyStateSvgPath"
+      >
+        <template #actions>
+          <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
+            {{ $options.i18n.newIssueLabel }}
+          </gl-button>
+        </template>
+      </gl-empty-state>
+
+      <gl-empty-state
+        v-else-if="isOpenTab"
+        :description="$options.i18n.noOpenIssuesDescription"
+        :title="$options.i18n.noOpenIssuesTitle"
+        :svg-path="emptyStateSvgPath"
+      >
+        <template #actions>
+          <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
+            {{ $options.i18n.newIssueLabel }}
+          </gl-button>
+        </template>
+      </gl-empty-state>
+
+      <gl-empty-state
+        v-else
+        :title="$options.i18n.noClosedIssuesTitle"
+        :svg-path="emptyStateSvgPath"
+      />
+    </template>
   </issuable-list>
+
+  <div v-else-if="isSignedIn">
+    <gl-empty-state
+      :description="$options.i18n.noIssuesSignedInDescription"
+      :title="$options.i18n.noIssuesSignedInTitle"
+      :svg-path="emptyStateSvgPath"
+    >
+      <template #actions>
+        <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
+          {{ $options.i18n.newIssueLabel }}
+        </gl-button>
+        <csv-import-export-buttons
+          class="gl-mr-3"
+          :export-csv-path="exportCsvPathWithQuery"
+          :issuable-count="totalIssues"
+        />
+      </template>
+    </gl-empty-state>
+    <hr />
+    <p class="gl-text-center gl-font-weight-bold gl-mb-0">
+      {{ $options.i18n.jiraIntegrationTitle }}
+    </p>
+    <p class="gl-text-center gl-mb-0">
+      <gl-sprintf :message="$options.i18n.jiraIntegrationMessage">
+        <template #jiraDocsLink="{ content }">
+          <gl-link :href="jiraIntegrationPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <p class="gl-text-center gl-text-gray-500">
+      {{ $options.i18n.jiraIntegrationSecondaryMessage }}
+    </p>
+  </div>
+
+  <gl-empty-state
+    v-else
+    :description="$options.i18n.noIssuesSignedOutDescription"
+    :title="$options.i18n.noIssuesSignedOutTitle"
+    :svg-path="emptyStateSvgPath"
+    :primary-button-text="$options.i18n.noIssuesSignedOutButtonText"
+    :primary-button-link="signInPath"
+  />
 </template>
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index 0ba20e4305069a..f15d02a6b2ca2a 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -76,20 +76,26 @@ export function initIssuesListApp() {
     calendarPath,
     canBulkUpdate,
     canEdit,
+    canImportIssues,
     email,
+    emptyStateSvgPath,
     endpoint,
     exportCsvPath,
     fullPath,
     hasBlockedIssuesFeature,
     hasIssuableHealthStatusFeature,
+    hasIssues,
     hasIssueWeightsFeature,
     importCsvIssuesPath,
+    isSignedIn,
     issuesPath,
+    jiraIntegrationPath,
     maxAttachmentSize,
     newIssuePath,
     projectImportJiraPath,
     rssPath,
     showNewIssueLink,
+    signInPath,
   } = el.dataset;
 
   return new Vue({
@@ -100,15 +106,21 @@ export function initIssuesListApp() {
     provide: {
       calendarPath,
       canBulkUpdate: parseBoolean(canBulkUpdate),
+      canImportIssues: parseBoolean(canImportIssues),
+      emptyStateSvgPath,
       endpoint,
       fullPath,
       hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
       hasIssuableHealthStatusFeature: parseBoolean(hasIssuableHealthStatusFeature),
+      hasIssues: parseBoolean(hasIssues),
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
+      isSignedIn: parseBoolean(isSignedIn),
       issuesPath,
+      jiraIntegrationPath,
       newIssuePath,
       rssPath,
       showNewIssueLink: parseBoolean(showNewIssueLink),
+      signInPath,
       // For CsvImportExportButtons component
       canEdit: parseBoolean(canEdit),
       email,
@@ -116,8 +128,9 @@ export function initIssuesListApp() {
       importCsvIssuesPath,
       maxAttachmentSize,
       projectImportJiraPath,
-      showExportButton: true,
-      showImportButton: true,
+      showExportButton: parseBoolean(hasIssues),
+      showImportButton: parseBoolean(canImportIssues),
+      showLabel: !parseBoolean(hasIssues),
     },
     render: (createComponent) => createComponent(IssuesListApp),
   });
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index f0c1bc01836c46..0a83e707412861 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -168,17 +168,23 @@ 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,
       can_edit: can?(current_user, :admin_project, project).to_s,
+      can_import_issues: can?(current_user, :import_issues, @project).to_s,
       email: current_user&.notification_email,
+      empty_state_svg_path: image_path('illustrations/issues.svg'),
       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,
+      has_issues: project_issues(project).exists?.to_s,
       import_csv_issues_path: import_csv_namespace_project_issues_path,
+      is_signed_in: current_user.present?.to_s,
       issues_path: project_issues_path(project),
+      jira_integration_path: help_page_url('user/project/integrations/jira', anchor: 'view-jira-issues'),
       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)),
-      show_new_issue_link: show_new_issue_link?(project).to_s
+      show_new_issue_link: show_new_issue_link?(project).to_s,
+      sign_in_path: new_user_session_path
     }
   end
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2e777566b62f92..9b2b50c9525f38 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -17666,6 +17666,9 @@ msgstr ""
 msgid "JiraService| on branch %{branch_link}"
 msgstr ""
 
+msgid "JiraService|%{jiraDocsLinkStart}Enable the Jira integration%{jiraDocsLinkEnd} to view your Jira issues in GitLab."
+msgstr ""
+
 msgid "JiraService|%{jira_docs_link_start}Enable the Jira integration%{jira_docs_link_end} to view your Jira issues in GitLab."
 msgstr ""
 
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 67ae644911a9d9..2021010468382f 100644
--- a/spec/frontend/issues_list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues_list/components/issues_list_app_spec.js
@@ -1,5 +1,5 @@
-import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlEmptyState, GlLink } from '@gitlab/ui';
+import { mount, 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';
@@ -28,13 +28,25 @@ describe('IssuesListApp component', () => {
   let axiosMock;
   let wrapper;
 
-  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 rssPath = 'rss/path';
+  const defaultProvide = {
+    calendarPath: 'calendar/path',
+    canBulkUpdate: false,
+    canImportIssues: true,
+    emptyStateSvgPath: 'empty-state.svg',
+    endpoint: 'api/endpoint',
+    exportCsvPath: 'export/csv/path',
+    fullPath: 'path/to/project',
+    hasIssues: true,
+    isSignedIn: false,
+    issuesPath: 'path/to/issues',
+    jiraIntegrationPath: 'jira/integration/path',
+    newIssuePath: 'new/issue/path',
+    rssPath: 'rss/path',
+    showImportButton: true,
+    showNewIssueLink: true,
+    signInPath: 'sign/in/path',
+  };
+
   const state = 'opened';
   const xPage = 1;
   const xTotal = 25;
@@ -51,27 +63,27 @@ describe('IssuesListApp component', () => {
     },
   };
 
+  const findCsvImportExportButtons = () => wrapper.findComponent(CsvImportExportButtons);
+  const findGlButton = () => wrapper.findComponent(GlButton);
   const findGlButtons = () => wrapper.findAllComponents(GlButton);
   const findGlButtonAt = (index) => findGlButtons().at(index);
+  const findGlEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findGlLink = () => wrapper.findComponent(GlLink);
   const findIssuableList = () => wrapper.findComponent(IssuableList);
 
-  const mountComponent = ({ provide = {} } = {}) =>
-    shallowMount(IssuesListApp, {
+  const mountComponent = ({ provide = {}, mountFn = shallowMount } = {}) =>
+    mountFn(IssuesListApp, {
       provide: {
-        calendarPath,
-        endpoint,
-        exportCsvPath,
-        fullPath,
-        issuesPath,
-        newIssuePath,
-        rssPath,
+        ...defaultProvide,
         ...provide,
       },
     });
 
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
-    axiosMock.onGet(endpoint).reply(200, fetchIssuesResponse.data, fetchIssuesResponse.headers);
+    axiosMock
+      .onGet(defaultProvide.endpoint)
+      .reply(200, fetchIssuesResponse.data, fetchIssuesResponse.headers);
   });
 
   afterEach(() => {
@@ -88,7 +100,7 @@ describe('IssuesListApp component', () => {
 
     it('renders', () => {
       expect(findIssuableList().props()).toMatchObject({
-        namespace: fullPath,
+        namespace: defaultProvide.fullPath,
         recentSearchesStorageKey: 'issues',
         searchInputPlaceholder: 'Search or filter results…',
         sortOptions,
@@ -96,7 +108,7 @@ describe('IssuesListApp component', () => {
         tabs: IssuableListTabs,
         currentTab: IssuableStates.Opened,
         tabCounts,
-        showPaginationControls: true,
+        showPaginationControls: false,
         issuables: [],
         totalItems: xTotal,
         currentPage: xPage,
@@ -112,7 +124,7 @@ describe('IssuesListApp component', () => {
       wrapper = mountComponent();
 
       expect(findGlButtonAt(0).attributes()).toMatchObject({
-        href: rssPath,
+        href: defaultProvide.rssPath,
         icon: 'rss',
         'aria-label': IssuesListApp.i18n.rssLabel,
       });
@@ -122,7 +134,7 @@ describe('IssuesListApp component', () => {
       wrapper = mountComponent();
 
       expect(findGlButtonAt(1).attributes()).toMatchObject({
-        href: calendarPath,
+        href: defaultProvide.calendarPath,
         icon: 'calendar',
         'aria-label': IssuesListApp.i18n.calendarLabel,
       });
@@ -140,8 +152,8 @@ describe('IssuesListApp component', () => {
 
       await waitForPromises();
 
-      expect(wrapper.findComponent(CsvImportExportButtons).props()).toMatchObject({
-        exportCsvPath: `${exportCsvPath}${search}`,
+      expect(findCsvImportExportButtons().props()).toMatchObject({
+        exportCsvPath: `${defaultProvide.exportCsvPath}${search}`,
         issuableCount: xTotal,
       });
     });
@@ -153,7 +165,7 @@ describe('IssuesListApp component', () => {
         expect(findGlButtonAt(2).text()).toBe('Edit issues');
       });
 
-      it('does not render when user has permissions', () => {
+      it('does not render when user does not have permissions', () => {
         wrapper = mountComponent({ provide: { canBulkUpdate: false } });
 
         expect(findGlButtons().filter((button) => button.text() === 'Edit issues')).toHaveLength(0);
@@ -175,7 +187,7 @@ describe('IssuesListApp component', () => {
         wrapper = mountComponent({ provide: { showNewIssueLink: true } });
 
         expect(findGlButtonAt(2).text()).toBe('New issue');
-        expect(findGlButtonAt(2).attributes('href')).toBe(newIssuePath);
+        expect(findGlButtonAt(2).attributes('href')).toBe(defaultProvide.newIssuePath);
       });
 
       it('does not render when user does not have permissions', () => {
@@ -186,20 +198,50 @@ describe('IssuesListApp component', () => {
     });
   });
 
-  describe('initial sort', () => {
-    it.each(Object.keys(sortParams))('is set as %s when the url query matches', (sortKey) => {
-      Object.defineProperty(window, 'location', {
-        writable: true,
-        value: {
-          href: setUrlParams(sortParams[sortKey], TEST_HOST),
-        },
+  describe('initial url params', () => {
+    describe('page', () => {
+      it('is set from the url params', () => {
+        const page = 5;
+
+        Object.defineProperty(window, 'location', {
+          writable: true,
+          value: { href: setUrlParams({ page }, TEST_HOST) },
+        });
+
+        wrapper = mountComponent();
+
+        expect(findIssuableList().props('currentPage')).toBe(page);
       });
+    });
 
-      wrapper = mountComponent();
+    describe('sort', () => {
+      it.each(Object.keys(sortParams))('is set as %s from the url params', (sortKey) => {
+        Object.defineProperty(window, 'location', {
+          writable: true,
+          value: { href: setUrlParams(sortParams[sortKey], TEST_HOST) },
+        });
 
-      expect(findIssuableList().props()).toMatchObject({
-        initialSortBy: sortKey,
-        urlParams: sortParams[sortKey],
+        wrapper = mountComponent();
+
+        expect(findIssuableList().props()).toMatchObject({
+          initialSortBy: sortKey,
+          urlParams: sortParams[sortKey],
+        });
+      });
+    });
+
+    describe('state', () => {
+      it('is set from the url params', () => {
+        const initialState = IssuableStates.All;
+
+        Object.defineProperty(window, 'location', {
+          writable: true,
+          value: { href: setUrlParams({ state: initialState }, TEST_HOST) },
+        });
+
+        wrapper = mountComponent();
+
+        expect(findIssuableList().props('currentTab')).toBe(initialState);
       });
     });
   });
@@ -221,148 +263,282 @@ 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,
+  describe('empty states', () => {
+    describe('when there are issues', () => {
+      describe('when search returns no results', () => {
+        beforeEach(async () => {
+          Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { href: setUrlParams({ search: 'no results' }, TEST_HOST) },
+          });
+
+          wrapper = mountComponent({ provide: { hasIssues: true } });
+
+          await waitForPromises();
+        });
+
+        it('shows empty state', () => {
+          expect(findGlEmptyState().props()).toMatchObject({
+            description: IssuesListApp.i18n.noSearchResultsDescription,
+            title: IssuesListApp.i18n.noSearchResultsTitle,
+            svgPath: defaultProvide.emptyStateSvgPath,
+          });
+        });
+      });
+
+      describe('when "Open" tab has no issues', () => {
+        beforeEach(() => {
+          wrapper = mountComponent({ provide: { hasIssues: true } });
+        });
+
+        it('shows empty state', () => {
+          expect(findGlEmptyState().props()).toMatchObject({
+            description: IssuesListApp.i18n.noOpenIssuesDescription,
+            title: IssuesListApp.i18n.noOpenIssuesTitle,
+            svgPath: defaultProvide.emptyStateSvgPath,
+          });
+        });
       });
 
-      wrapper = mountComponent();
+      describe('when "Closed" tab has no issues', () => {
+        beforeEach(async () => {
+          Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { href: setUrlParams({ state: IssuableStates.Closed }, TEST_HOST) },
+          });
 
-      findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
+          wrapper = mountComponent({ provide: { hasIssues: true } });
+        });
+
+        it('shows empty state', () => {
+          expect(findGlEmptyState().props()).toMatchObject({
+            title: IssuesListApp.i18n.noClosedIssuesTitle,
+            svgPath: defaultProvide.emptyStateSvgPath,
+          });
+        });
+      });
     });
 
-    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,
+    describe('when there are no issues', () => {
+      describe('when user is logged in', () => {
+        beforeEach(() => {
+          wrapper = mountComponent({
+            provide: { hasIssues: false, isSignedIn: true },
+            mountFn: mount,
+          });
+        });
+
+        it('shows empty state', () => {
+          expect(findGlEmptyState().props()).toMatchObject({
+            description: IssuesListApp.i18n.noIssuesSignedInDescription,
+            title: IssuesListApp.i18n.noIssuesSignedInTitle,
+            svgPath: defaultProvide.emptyStateSvgPath,
+          });
+        });
+
+        it('shows "New issue" and import/export buttons', () => {
+          expect(findGlButton().text()).toBe(IssuesListApp.i18n.newIssueLabel);
+          expect(findGlButton().attributes('href')).toBe(defaultProvide.newIssuePath);
+          expect(findCsvImportExportButtons().props()).toMatchObject({
+            exportCsvPath: defaultProvide.exportCsvPath,
+            issuableCount: 0,
+          });
+        });
+
+        it('shows Jira integration information', () => {
+          expect(wrapper.text()).toContain(IssuesListApp.i18n.jiraIntegrationTitle);
+          expect(wrapper.text()).toContain(
+            'Enable the Jira integration to view your Jira issues in GitLab.',
+          );
+          expect(wrapper.text()).toContain(IssuesListApp.i18n.jiraIntegrationSecondaryMessage);
+          expect(findGlLink().text()).toBe('Enable the Jira integration');
+          expect(findGlLink().attributes('href')).toBe(defaultProvide.jiraIntegrationPath);
+        });
+      });
+
+      describe('when user is logged out', () => {
+        beforeEach(() => {
+          wrapper = mountComponent({
+            provide: { hasIssues: false, isSignedIn: false },
+          });
+        });
+
+        it('shows empty state', () => {
+          expect(findGlEmptyState().props()).toMatchObject({
+            description: IssuesListApp.i18n.noIssuesSignedOutDescription,
+            title: IssuesListApp.i18n.noIssuesSignedOutTitle,
+            svgPath: defaultProvide.emptyStateSvgPath,
+            primaryButtonText: IssuesListApp.i18n.noIssuesSignedOutButtonText,
+            primaryButtonLink: defaultProvide.signInPath,
+          });
+        });
       });
     });
   });
 
-  describe('when "page-change" event is emitted by IssuableList', () => {
-    const data = [{ id: 10, title: 'title', state }];
-    const page = 2;
-    const totalItems = 21;
+  describe('events', () => {
+    describe('when "click-tab" event is emitted by IssuableList', () => {
+      beforeEach(() => {
+        axiosMock.onGet(defaultProvide.endpoint).reply(200, fetchIssuesResponse.data, {
+          'x-page': 2,
+          'x-total': xTotal,
+        });
 
-    beforeEach(async () => {
-      axiosMock.onGet(endpoint).reply(200, data, {
-        'x-page': page,
-        'x-total': totalItems,
+        wrapper = mountComponent();
+
+        findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
       });
 
-      wrapper = mountComponent();
+      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,
+        });
+      });
+    });
 
-      findIssuableList().vm.$emit('page-change', page);
+    describe('when "page-change" event is emitted by IssuableList', () => {
+      const data = [{ id: 10, title: 'title', state }];
+      const page = 2;
+      const totalItems = 21;
 
-      await waitForPromises();
-    });
+      beforeEach(async () => {
+        axiosMock.onGet(defaultProvide.endpoint).reply(200, data, {
+          'x-page': page,
+          'x-total': totalItems,
+        });
+
+        wrapper = mountComponent();
 
-    it('fetches issues with expected params', () => {
-      expect(axiosMock.history.get[1].params).toEqual({
-        page,
-        per_page: PAGE_SIZE,
-        state,
-        with_labels_details: true,
+        findIssuableList().vm.$emit('page-change', page);
+
+        await waitForPromises();
       });
-    });
 
-    it('updates IssuableList with response data', () => {
-      expect(findIssuableList().props()).toMatchObject({
-        issuables: data,
-        totalItems,
-        currentPage: page,
-        previousPage: page - 1,
-        nextPage: page + 1,
-        urlParams: { page, state },
+      it('fetches issues with expected params', () => {
+        expect(axiosMock.history.get[1].params).toEqual({
+          page,
+          per_page: PAGE_SIZE,
+          state,
+          with_labels_details: true,
+        });
+      });
+
+      it('updates IssuableList with response data', () => {
+        expect(findIssuableList().props()).toMatchObject({
+          issuables: data,
+          totalItems,
+          currentPage: page,
+          previousPage: page - 1,
+          nextPage: page + 1,
+          urlParams: { page, state },
+        });
       });
     });
-  });
 
-  describe('when "reorder" event is emitted by IssuableList', () => {
-    const issueOne = { id: 1, iid: 101, title: 'Issue one' };
-    const issueTwo = { id: 2, iid: 102, title: 'Issue two' };
-    const issueThree = { id: 3, iid: 103, title: 'Issue three' };
-    const issueFour = { id: 4, iid: 104, title: 'Issue four' };
-    const issues = [issueOne, issueTwo, issueThree, issueFour];
+    describe('when "reorder" event is emitted by IssuableList', () => {
+      const issueOne = { id: 1, iid: 101, title: 'Issue one' };
+      const issueTwo = { id: 2, iid: 102, title: 'Issue two' };
+      const issueThree = { id: 3, iid: 103, title: 'Issue three' };
+      const issueFour = { id: 4, iid: 104, title: 'Issue four' };
+      const issues = [issueOne, issueTwo, issueThree, issueFour];
 
-    beforeEach(async () => {
-      axiosMock.onGet(endpoint).reply(200, issues, fetchIssuesResponse.headers);
-      wrapper = mountComponent();
-      await waitForPromises();
-    });
+      beforeEach(async () => {
+        axiosMock.onGet(defaultProvide.endpoint).reply(200, issues, fetchIssuesResponse.headers);
+        wrapper = mountComponent();
+        await waitForPromises();
+      });
 
-    describe('when successful', () => {
-      describe.each`
-        description                       | issueToMove   | oldIndex | newIndex | moveBeforeId    | moveAfterId
-        ${'to the beginning of the list'} | ${issueThree} | ${2}     | ${0}     | ${null}         | ${issueOne.id}
-        ${'down the list'}                | ${issueOne}   | ${0}     | ${1}     | ${issueTwo.id}  | ${issueThree.id}
-        ${'up the list'}                  | ${issueThree} | ${2}     | ${1}     | ${issueOne.id}  | ${issueTwo.id}
-        ${'to the end of the list'}       | ${issueTwo}   | ${1}     | ${3}     | ${issueFour.id} | ${null}
-      `(
-        'when moving issue $description',
-        ({ issueToMove, oldIndex, newIndex, moveBeforeId, moveAfterId }) => {
-          it('makes API call to reorder the issue', async () => {
-            findIssuableList().vm.$emit('reorder', { oldIndex, newIndex });
-
-            await waitForPromises();
-
-            expect(axiosMock.history.put[0]).toMatchObject({
-              url: `${issuesPath}/${issueToMove.iid}/reorder`,
-              data: JSON.stringify({ move_before_id: moveBeforeId, move_after_id: moveAfterId }),
+      describe('when successful', () => {
+        describe.each`
+          description                       | issueToMove   | oldIndex | newIndex | moveBeforeId    | moveAfterId
+          ${'to the beginning of the list'} | ${issueThree} | ${2}     | ${0}     | ${null}         | ${issueOne.id}
+          ${'down the list'}                | ${issueOne}   | ${0}     | ${1}     | ${issueTwo.id}  | ${issueThree.id}
+          ${'up the list'}                  | ${issueThree} | ${2}     | ${1}     | ${issueOne.id}  | ${issueTwo.id}
+          ${'to the end of the list'}       | ${issueTwo}   | ${1}     | ${3}     | ${issueFour.id} | ${null}
+        `(
+          'when moving issue $description',
+          ({ issueToMove, oldIndex, newIndex, moveBeforeId, moveAfterId }) => {
+            it('makes API call to reorder the issue', async () => {
+              findIssuableList().vm.$emit('reorder', { oldIndex, newIndex });
+
+              await waitForPromises();
+
+              expect(axiosMock.history.put[0]).toMatchObject({
+                url: `${defaultProvide.issuesPath}/${issueToMove.iid}/reorder`,
+                data: JSON.stringify({ move_before_id: moveBeforeId, move_after_id: moveAfterId }),
+              });
             });
+          },
+        );
+      });
+
+      describe('when unsuccessful', () => {
+        it('displays an error message', async () => {
+          axiosMock.onPut(`${defaultProvide.issuesPath}/${issueOne.iid}/reorder`).reply(500);
+
+          findIssuableList().vm.$emit('reorder', { oldIndex: 0, newIndex: 1 });
+
+          await waitForPromises();
+
+          expect(createFlash).toHaveBeenCalledWith({ message: IssuesListApp.i18n.reorderError });
+        });
+      });
+    });
+
+    describe('when "sort" event is emitted by IssuableList', () => {
+      it.each(Object.keys(sortParams))(
+        'fetches issues with correct params with payload `%s`',
+        async (sortKey) => {
+          wrapper = mountComponent();
+
+          findIssuableList().vm.$emit('sort', sortKey);
+
+          await waitForPromises();
+
+          expect(axiosMock.history.get[1].params).toEqual({
+            page: xPage,
+            per_page: sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE,
+            state,
+            with_labels_details: true,
+            ...sortParams[sortKey],
           });
         },
       );
     });
 
-    describe('when unsuccessful', () => {
-      it('displays an error message', async () => {
-        axiosMock.onPut(`${issuesPath}/${issueOne.iid}/reorder`).reply(500);
+    describe('when "update-legacy-bulk-edit" event is emitted by IssuableList', () => {
+      beforeEach(() => {
+        wrapper = mountComponent();
+        jest.spyOn(eventHub, '$emit');
+      });
 
-        findIssuableList().vm.$emit('reorder', { oldIndex: 0, newIndex: 1 });
+      it('emits an "issuables:updateBulkEdit" event to the legacy bulk edit class', async () => {
+        findIssuableList().vm.$emit('update-legacy-bulk-edit');
 
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({ message: IssuesListApp.i18n.reorderError });
+        expect(eventHub.$emit).toHaveBeenCalledWith('issuables:updateBulkEdit');
       });
     });
-  });
 
-  describe('when "sort" event is emitted by IssuableList', () => {
-    it.each(Object.keys(sortParams))(
-      'fetches issues with correct params for "sort" payload `%s`',
-      async (sortKey) => {
+    describe('when "filter" event is emitted by IssuableList', () => {
+      beforeEach(async () => {
         wrapper = mountComponent();
 
-        findIssuableList().vm.$emit('sort', sortKey);
+        const payload = [
+          { type: 'filtered-search-term', value: { data: 'no' } },
+          { type: 'filtered-search-term', value: { data: 'issues' } },
+        ];
 
-        await waitForPromises();
+        findIssuableList().vm.$emit('filter', payload);
 
-        expect(axiosMock.history.get[1].params).toEqual({
-          page: xPage,
-          per_page: sortKey === RELATIVE_POSITION_ASC ? PAGE_SIZE_MANUAL : PAGE_SIZE,
-          state,
-          with_labels_details: true,
-          ...sortParams[sortKey],
-        });
-      },
-    );
-  });
-
-  describe('when "update-legacy-bulk-edit" event is emitted by IssuableList', () => {
-    beforeEach(() => {
-      wrapper = mountComponent();
-      jest.spyOn(eventHub, '$emit');
-    });
-
-    it('emits an "issuables:updateBulkEdit" event to the legacy bulk edit class', async () => {
-      findIssuableList().vm.$emit('update-legacy-bulk-edit');
-
-      await waitForPromises();
+        await waitForPromises();
+      });
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('issuables:updateBulkEdit');
+      it('makes an API call to search for issues with the search term', () => {
+        expect(axiosMock.history.get[1].params).toMatchObject({ search: 'no issues' });
+      });
     });
   });
 });
diff --git a/spec/helpers/issues_helper_spec.rb b/spec/helpers/issues_helper_spec.rb
index b5b2ca1dcd3144..21a01f349b5bfc 100644
--- a/spec/helpers/issues_helper_spec.rb
+++ b/spec/helpers/issues_helper_spec.rb
@@ -288,24 +288,31 @@
       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(:image_path).and_return('#')
       allow(helper).to receive(:import_csv_namespace_project_issues_path).and_return('#')
+      allow(helper).to receive(:url_for).and_return('#')
 
       expected = {
         calendar_path: '#',
         can_bulk_update: 'true',
         can_edit: 'true',
+        can_import_issues: 'true',
         email: current_user&.notification_email,
+        empty_state_svg_path: '#',
         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,
+        has_issues: project_issues(project).exists?.to_s,
         import_csv_issues_path: '#',
+        is_signed_in: current_user.present?.to_s,
         issues_path: project_issues_path(project),
+        jira_integration_path: help_page_url('user/project/integrations/jira', anchor: 'view-jira-issues'),
         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.id, milestone_id: finder.milestones.first.id }),
         project_import_jira_path: project_import_jira_path(project),
         rss_path: '#',
-        show_new_issue_link: 'true'
+        show_new_issue_link: 'true',
+        sign_in_path: new_user_session_path
       }
 
       expect(helper.issues_list_data(project, current_user, finder)).to include(expected)
-- 
GitLab


From 17640fa18e20a68c94d8e5c9d94764c6fd78861b Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Thu, 8 Apr 2021 19:04:22 +0100
Subject: [PATCH 2/2] Add reviewer suggestions

---
 .../issues_list/components/issues_list_app.vue         |  3 ---
 app/assets/javascripts/issues_list/index.js            |  1 -
 .../issues_list/components/issues_list_app_spec.js     | 10 ++++++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index 5098d7f3e023e2..57c5107fcbb358 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -72,9 +72,6 @@ export default {
     canBulkUpdate: {
       default: false,
     },
-    canImportIssues: {
-      default: false,
-    },
     emptyStateSvgPath: {
       default: '',
     },
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index f15d02a6b2ca2a..0b64df50691711 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -106,7 +106,6 @@ export function initIssuesListApp() {
     provide: {
       calendarPath,
       canBulkUpdate: parseBoolean(canBulkUpdate),
-      canImportIssues: parseBoolean(canImportIssues),
       emptyStateSvgPath,
       endpoint,
       fullPath,
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 2021010468382f..476804bda12dae 100644
--- a/spec/frontend/issues_list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues_list/components/issues_list_app_spec.js
@@ -31,7 +31,6 @@ describe('IssuesListApp component', () => {
   const defaultProvide = {
     calendarPath: 'calendar/path',
     canBulkUpdate: false,
-    canImportIssues: true,
     emptyStateSvgPath: 'empty-state.svg',
     endpoint: 'api/endpoint',
     exportCsvPath: 'export/csv/path',
@@ -346,11 +345,14 @@ describe('IssuesListApp component', () => {
         });
 
         it('shows Jira integration information', () => {
-          expect(wrapper.text()).toContain(IssuesListApp.i18n.jiraIntegrationTitle);
-          expect(wrapper.text()).toContain(
+          const paragraphs = wrapper.findAll('p');
+          expect(paragraphs.at(2).text()).toContain(IssuesListApp.i18n.jiraIntegrationTitle);
+          expect(paragraphs.at(3).text()).toContain(
             'Enable the Jira integration to view your Jira issues in GitLab.',
           );
-          expect(wrapper.text()).toContain(IssuesListApp.i18n.jiraIntegrationSecondaryMessage);
+          expect(paragraphs.at(4).text()).toContain(
+            IssuesListApp.i18n.jiraIntegrationSecondaryMessage,
+          );
           expect(findGlLink().text()).toBe('Enable the Jira integration');
           expect(findGlLink().attributes('href')).toBe(defaultProvide.jiraIntegrationPath);
         });
-- 
GitLab