Add latest changes from gitlab-org/gitlab@master

2 files changed, 76 insertions, 8 deletions

diff --git a/spec/frontend/incidents/components/incidents_list_spec.js b/spec/frontend/incidents/components/incidents_list_spec.js
index 307806e0a8a..2a56881cab2 100644
--- a/spec/frontend/incidents/components/incidents_list_spec.js
+++ b/spec/frontend/incidents/components/incidents_list_spec.js
@@ -5,7 +5,6 @@ import {
   GlTable,
   GlAvatar,
   GlPagination,
-  GlSearchBoxByType,
   GlTab,
   GlTabs,
   GlBadge,
@@ -15,13 +14,18 @@ import { visitUrl, joinPaths, mergeUrlParams } from '~/lib/utils/url_utility';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import { I18N, INCIDENT_STATUS_TABS } from '~/incidents/constants';
 import mockIncidents from '../mocks/incidents.json';
+import mockFilters from '../mocks/incidents_filter.json';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn().mockName('visitUrlMock'),
   joinPaths: jest.fn().mockName('joinPaths'),
   mergeUrlParams: jest.fn().mockName('mergeUrlParams'),
+  setUrlParams: jest.fn().mockName('setUrlParams'),
+  updateHistory: jest.fn().mockName('updateHistory'),
 }));
 
 describe('Incidents List', () => {
@@ -43,7 +47,7 @@ describe('Incidents List', () => {
   const findTimeAgo = () => wrapper.findAll(TimeAgoTooltip);
   const findDateColumnHeader = () =>
     wrapper.find('[data-testid="incident-management-created-at-sort"]');
-  const findSearch = () => wrapper.find(GlSearchBoxByType);
+  const findSearch = () => wrapper.find(FilteredSearchBar);
   const findAssingees = () => wrapper.findAll('[data-testid="incident-assignees"]');
   const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
   const findClosedIcon = () => wrapper.findAll("[data-testid='incident-closed']");
@@ -76,6 +80,9 @@ describe('Incidents List', () => {
         issuePath: '/project/isssues',
         publishedAvailable: true,
         emptyListSvgPath,
+        textQuery: '',
+        authorUsernamesQuery: '',
+        assigneeUsernamesQuery: '',
       },
       stubs: {
         GlButton: true,
@@ -315,7 +322,7 @@ describe('Incidents List', () => {
       });
     });
 
-    describe('Search', () => {
+    describe('Filtered search component', () => {
       beforeEach(() => {
         mountComponent({
           data: {
@@ -331,15 +338,62 @@ describe('Incidents List', () => {
       });
 
       it('renders the search component for incidents', () => {
-        expect(findSearch().exists()).toBe(true);
+        expect(findSearch().props('searchInputPlaceholder')).toBe('Search or filter results…');
+        expect(findSearch().props('tokens')).toEqual([
+          {
+            type: 'author_username',
+            icon: 'user',
+            title: 'Author',
+            unique: true,
+            symbol: '@',
+            token: AuthorToken,
+            operators: [{ value: '=', description: 'is', default: 'true' }],
+            fetchPath: '/project/path',
+            fetchAuthors: expect.any(Function),
+          },
+          {
+            type: 'assignee_username',
+            icon: 'user',
+            title: 'Assignees',
+            unique: true,
+            symbol: '@',
+            token: AuthorToken,
+            operators: [{ value: '=', description: 'is', default: 'true' }],
+            fetchPath: '/project/path',
+            fetchAuthors: expect.any(Function),
+          },
+        ]);
+        expect(findSearch().props('recentSearchesStorageKey')).toBe('incidents');
+      });
+
+      it('returns correctly applied filter search values', async () => {
+        const searchTerm = 'foo';
+        wrapper.setData({
+          searchTerm,
+        });
+
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.filteredSearchValue).toEqual([searchTerm]);
       });
 
-      it('sets the `searchTerm` graphql variable', () => {
-        const SEARCH_TERM = 'Simple Incident';
+      it('updates props tied to getIncidents GraphQL query', () => {
+        wrapper.vm.handleFilterIncidents(mockFilters);
+
+        expect(wrapper.vm.authorUsername).toBe('root');
+        expect(wrapper.vm.assigneeUsernames).toEqual(['root2']);
+        expect(wrapper.vm.searchTerm).toBe(mockFilters[2].value.data);
+      });
+
+      it('updates props `searchTerm` and `authorUsername` with empty values when passed filters param is empty', () => {
+        wrapper.setData({
+          authorUsername: 'foo',
+          searchTerm: 'bar',
+        });
 
-        findSearch().vm.$emit('input', SEARCH_TERM);
+        wrapper.vm.handleFilterIncidents([]);
 
-        expect(wrapper.vm.$data.searchTerm).toBe(SEARCH_TERM);
+        expect(wrapper.vm.authorUsername).toBe('');
+        expect(wrapper.vm.searchTerm).toBe('');
       });
     });
 
diff --git a/spec/frontend/incidents/mocks/incidents_filter.json b/spec/frontend/incidents/mocks/incidents_filter.json
new file mode 100644
index 00000000000..9f54e259b1d
--- /dev/null
+++ b/spec/frontend/incidents/mocks/incidents_filter.json
@@ -0,0 +1,14 @@
+  [
+    {
+      "type": "assignee_username",
+      "value": { "data": "root2" }
+    },
+    {
+      "type": "author_username",
+      "value": { "data": "root" }
+    },
+    {
+      "type": "filtered-search-term",
+      "value": { "data": "bar" }
+    }
+  ]
\ No newline at end of file