Add latest changes from gitlab-org/gitlab@master

4 files changed, 109 insertions, 223 deletions

diff --git a/spec/frontend/search/mock_data.js b/spec/frontend/search/mock_data.js
index 0aa4f0e1c84..9ca170d34e2 100644
--- a/spec/frontend/search/mock_data.js
+++ b/spec/frontend/search/mock_data.js
@@ -6,6 +6,7 @@ export const MOCK_QUERY = {
   state: 'all',
   confidential: null,
   group_id: 1,
+  language: ['C', 'JavaScript'],
 };
 
 export const MOCK_GROUP = {
@@ -193,214 +194,6 @@ export const MOCK_NAVIGATION_ACTION_MUTATION = {
   payload: { key: 'projects', count: '13' },
 };
 
-export const MOCK_AGGREGATIONS = [
-  {
-    name: 'language',
-    buckets: [
-      { key: 'random-label-edumingos0', count: 1 },
-      { key: 'random-label-rbourgourd1', count: 2 },
-      { key: 'random-label-dfearnside2', count: 3 },
-      { key: 'random-label-gewins3', count: 4 },
-      { key: 'random-label-telverstone4', count: 5 },
-      { key: 'random-label-ygerriets5', count: 6 },
-      { key: 'random-label-lmoffet6', count: 7 },
-      { key: 'random-label-ehinnerk7', count: 8 },
-      { key: 'random-label-flanceley8', count: 9 },
-      { key: 'random-label-adoyle9', count: 10 },
-      { key: 'random-label-rmcgirla', count: 11 },
-      { key: 'random-label-dwhellansb', count: 12 },
-      { key: 'random-label-apitkethlyc', count: 13 },
-      { key: 'random-label-senevoldsend', count: 14 },
-      { key: 'random-label-tlardnare', count: 15 },
-      { key: 'random-label-fcoilsf', count: 16 },
-      { key: 'random-label-qgeckg', count: 17 },
-      { key: 'random-label-rgrabenh', count: 18 },
-      { key: 'random-label-lashardi', count: 19 },
-      { key: 'random-label-sadamovitchj', count: 20 },
-      { key: 'random-label-rlyddiardk', count: 21 },
-      { key: 'random-label-jpoell', count: 22 },
-      { key: 'random-label-kcharitym', count: 23 },
-      { key: 'random-label-cbertenshawn', count: 24 },
-      { key: 'random-label-jsturgeso', count: 25 },
-      { key: 'random-label-ohouldcroftp', count: 26 },
-      { key: 'random-label-rheijnenq', count: 27 },
-      { key: 'random-label-snortheyr', count: 28 },
-      { key: 'random-label-vpairpoints', count: 29 },
-      { key: 'random-label-odavidovicit', count: 30 },
-      { key: 'random-label-fmccartu', count: 31 },
-      { key: 'random-label-cwansburyv', count: 32 },
-      { key: 'random-label-bdimontw', count: 33 },
-      { key: 'random-label-adocketx', count: 34 },
-      { key: 'random-label-obavridgey', count: 35 },
-      { key: 'random-label-jperezz', count: 36 },
-      { key: 'random-label-gdeneve10', count: 37 },
-      { key: 'random-label-rmckeand11', count: 38 },
-      { key: 'random-label-kwestmerland12', count: 39 },
-      { key: 'random-label-mpryer13', count: 40 },
-      { key: 'random-label-rmcneil14', count: 41 },
-      { key: 'random-label-ablondel15', count: 42 },
-      { key: 'random-label-wbalducci16', count: 43 },
-      { key: 'random-label-swigley17', count: 44 },
-      { key: 'random-label-gferroni18', count: 45 },
-      { key: 'random-label-icollings19', count: 46 },
-      { key: 'random-label-wszymanski1a', count: 47 },
-      { key: 'random-label-jelson1b', count: 48 },
-      { key: 'random-label-fsambrook1c', count: 49 },
-      { key: 'random-label-kconey1d', count: 50 },
-      { key: 'random-label-agoodread1e', count: 51 },
-      { key: 'random-label-nmewton1f', count: 52 },
-      { key: 'random-label-gcodman1g', count: 53 },
-      { key: 'random-label-rpoplee1h', count: 54 },
-      { key: 'random-label-mhug1i', count: 55 },
-      { key: 'random-label-ggowrie1j', count: 56 },
-      { key: 'random-label-ctonepohl1k', count: 57 },
-      { key: 'random-label-cstillman1l', count: 58 },
-      { key: 'random-label-dcollyer1m', count: 59 },
-      { key: 'random-label-idimelow1n', count: 60 },
-      { key: 'random-label-djarley1o', count: 61 },
-      { key: 'random-label-omclleese1p', count: 62 },
-      { key: 'random-label-dstivers1q', count: 63 },
-      { key: 'random-label-svose1r', count: 64 },
-      { key: 'random-label-clanfare1s', count: 65 },
-      { key: 'random-label-aport1t', count: 66 },
-      { key: 'random-label-hcarlett1u', count: 67 },
-      { key: 'random-label-dstillmann1v', count: 68 },
-      { key: 'random-label-ncorpe1w', count: 69 },
-      { key: 'random-label-mjacobsohn1x', count: 70 },
-      { key: 'random-label-ycleiment1y', count: 71 },
-      { key: 'random-label-owherton1z', count: 72 },
-      { key: 'random-label-anowaczyk20', count: 73 },
-      { key: 'random-label-rmckennan21', count: 74 },
-      { key: 'random-label-cmoulding22', count: 75 },
-      { key: 'random-label-sswate23', count: 76 },
-      { key: 'random-label-cbarge24', count: 77 },
-      { key: 'random-label-agrainger25', count: 78 },
-      { key: 'random-label-ncosin26', count: 79 },
-      { key: 'random-label-pkears27', count: 80 },
-      { key: 'random-label-cmcarthur28', count: 81 },
-      { key: 'random-label-jmantripp29', count: 82 },
-      { key: 'random-label-cjekel2a', count: 83 },
-      { key: 'random-label-hdilleway2b', count: 84 },
-      { key: 'random-label-lbovaird2c', count: 85 },
-      { key: 'random-label-mweld2d', count: 86 },
-      { key: 'random-label-marnowitz2e', count: 87 },
-      { key: 'random-label-nbertomieu2f', count: 88 },
-      { key: 'random-label-mledward2g', count: 89 },
-      { key: 'random-label-mhince2h', count: 90 },
-      { key: 'random-label-baarons2i', count: 91 },
-      { key: 'random-label-kfrancie2j', count: 92 },
-      { key: 'random-label-ishooter2k', count: 93 },
-      { key: 'random-label-glowmass2l', count: 94 },
-      { key: 'random-label-rgeorgi2m', count: 95 },
-      { key: 'random-label-bproby2n', count: 96 },
-      { key: 'random-label-hsteffan2o', count: 97 },
-      { key: 'random-label-doruane2p', count: 98 },
-      { key: 'random-label-rlunny2q', count: 99 },
-      { key: 'random-label-geles2r', count: 100 },
-      { key: 'random-label-nmaggiore2s', count: 101 },
-      { key: 'random-label-aboocock2t', count: 102 },
-      { key: 'random-label-eguilbert2u', count: 103 },
-      { key: 'random-label-emccutcheon2v', count: 104 },
-      { key: 'random-label-hcowser2w', count: 105 },
-      { key: 'random-label-dspeeding2x', count: 106 },
-      { key: 'random-label-oseebright2y', count: 107 },
-      { key: 'random-label-hpresdee2z', count: 108 },
-      { key: 'random-label-pesseby30', count: 109 },
-      { key: 'random-label-hpusey31', count: 110 },
-      { key: 'random-label-dmanthorpe32', count: 111 },
-      { key: 'random-label-natley33', count: 112 },
-      { key: 'random-label-iferentz34', count: 113 },
-      { key: 'random-label-adyble35', count: 114 },
-      { key: 'random-label-dlockitt36', count: 115 },
-      { key: 'random-label-acoxwell37', count: 116 },
-      { key: 'random-label-amcgarvey38', count: 117 },
-      { key: 'random-label-rmcgougan39', count: 118 },
-      { key: 'random-label-mscole3a', count: 119 },
-      { key: 'random-label-lmalim3b', count: 120 },
-      { key: 'random-label-cends3c', count: 121 },
-      { key: 'random-label-dmannie3d', count: 122 },
-      { key: 'random-label-lgoodricke3e', count: 123 },
-      { key: 'random-label-rcaghy3f', count: 124 },
-      { key: 'random-label-mprozillo3g', count: 125 },
-      { key: 'random-label-mcardnell3h', count: 126 },
-      { key: 'random-label-gericssen3i', count: 127 },
-      { key: 'random-label-fspooner3j', count: 128 },
-      { key: 'random-label-achadney3k', count: 129 },
-      { key: 'random-label-corchard3l', count: 130 },
-      { key: 'random-label-lyerill3m', count: 131 },
-      { key: 'random-label-jrusk3n', count: 132 },
-      { key: 'random-label-lbonelle3o', count: 133 },
-      { key: 'random-label-eduny3p', count: 134 },
-      { key: 'random-label-mhutchence3q', count: 135 },
-      { key: 'random-label-rmargeram3r', count: 136 },
-      { key: 'random-label-smaudlin3s', count: 137 },
-      { key: 'random-label-sfarrance3t', count: 138 },
-      { key: 'random-label-eclendennen3u', count: 139 },
-      { key: 'random-label-cyabsley3v', count: 140 },
-      { key: 'random-label-ahensmans3w', count: 141 },
-      { key: 'random-label-tsenchenko3x', count: 142 },
-      { key: 'random-label-ryurchishin3y', count: 143 },
-      { key: 'random-label-teby3z', count: 144 },
-      { key: 'random-label-dvaillant40', count: 145 },
-      { key: 'random-label-kpetyakov41', count: 146 },
-      { key: 'random-label-cmorrison42', count: 147 },
-      { key: 'random-label-ltwiddy43', count: 148 },
-      { key: 'random-label-ineame44', count: 149 },
-      { key: 'random-label-blucock45', count: 150 },
-      { key: 'random-label-kdunsford46', count: 151 },
-      { key: 'random-label-dducham47', count: 152 },
-      { key: 'random-label-javramovitz48', count: 153 },
-      { key: 'random-label-mascraft49', count: 154 },
-      { key: 'random-label-bloughead4a', count: 155 },
-      { key: 'random-label-sduckit4b', count: 156 },
-      { key: 'random-label-hhardman4c', count: 157 },
-      { key: 'random-label-cstaniforth4d', count: 158 },
-      { key: 'random-label-jedney4e', count: 159 },
-      { key: 'random-label-bobbard4f', count: 160 },
-      { key: 'random-label-cgiraux4g', count: 161 },
-      { key: 'random-label-tkiln4h', count: 162 },
-      { key: 'random-label-jwansbury4i', count: 163 },
-      { key: 'random-label-dquinlan4j', count: 164 },
-      { key: 'random-label-hgindghill4k', count: 165 },
-      { key: 'random-label-jjowle4l', count: 166 },
-      { key: 'random-label-egambrell4m', count: 167 },
-      { key: 'random-label-jmcgloughlin4n', count: 168 },
-      { key: 'random-label-bbabb4o', count: 169 },
-      { key: 'random-label-achuck4p', count: 170 },
-      { key: 'random-label-tsyers4q', count: 171 },
-      { key: 'random-label-jlandon4r', count: 172 },
-      { key: 'random-label-wteather4s', count: 173 },
-      { key: 'random-label-dfoskin4t', count: 174 },
-      { key: 'random-label-gmorlon4u', count: 175 },
-      { key: 'random-label-jseely4v', count: 176 },
-      { key: 'random-label-cbrass4w', count: 177 },
-      { key: 'random-label-fmanilo4x', count: 178 },
-      { key: 'random-label-bfrangleton4y', count: 179 },
-      { key: 'random-label-vbartkiewicz4z', count: 180 },
-      { key: 'random-label-tclymer50', count: 181 },
-      { key: 'random-label-pqueen51', count: 182 },
-      { key: 'random-label-bpol52', count: 183 },
-      { key: 'random-label-jclaeskens53', count: 184 },
-      { key: 'random-label-cstranieri54', count: 185 },
-      { key: 'random-label-drumbelow55', count: 186 },
-      { key: 'random-label-wbrumham56', count: 187 },
-      { key: 'random-label-azeal57', count: 188 },
-      { key: 'random-label-msnooks58', count: 189 },
-      { key: 'random-label-blapre59', count: 190 },
-      { key: 'random-label-cduckers5a', count: 191 },
-      { key: 'random-label-mgumary5b', count: 192 },
-      { key: 'random-label-rtebbs5c', count: 193 },
-      { key: 'random-label-eroe5d', count: 194 },
-      { key: 'random-label-rconfait5e', count: 195 },
-      { key: 'random-label-fsinderland5f', count: 196 },
-      { key: 'random-label-tdallywater5g', count: 197 },
-      { key: 'random-label-glindenman5h', count: 198 },
-      { key: 'random-label-fbauser5i', count: 199 },
-      { key: 'random-label-bdownton5j', count: 200 },
-    ],
-  },
-];
-
 export const MOCK_LANGUAGE_AGGREGATIONS_BUCKETS = [
   { key: 'random-label-edumingos0', count: 1 },
   { key: 'random-label-rbourgourd1', count: 2 },
@@ -604,13 +397,27 @@ export const MOCK_LANGUAGE_AGGREGATIONS_BUCKETS = [
   { key: 'random-label-bdownton5j', count: 200 },
 ];
 
+export const MOCK_AGGREGATIONS = [
+  {
+    name: 'language',
+    buckets: MOCK_LANGUAGE_AGGREGATIONS_BUCKETS,
+  },
+];
+
+export const SORTED_MOCK_AGGREGATIONS = [
+  {
+    name: 'language',
+    buckets: MOCK_LANGUAGE_AGGREGATIONS_BUCKETS.reverse(),
+  },
+];
+
 export const MOCK_RECEIVE_AGGREGATIONS_SUCCESS_MUTATION = [
   {
     type: types.REQUEST_AGGREGATIONS,
   },
   {
     type: types.RECEIVE_AGGREGATIONS_SUCCESS,
-    payload: MOCK_AGGREGATIONS,
+    payload: SORTED_MOCK_AGGREGATIONS,
   },
 ];
 
diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
index 8a35ae96d5e..963b73aeae5 100644
--- a/spec/frontend/search/sidebar/components/app_spec.js
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -5,7 +5,7 @@ import { MOCK_QUERY } from 'jest/search/mock_data';
 import GlobalSearchSidebar from '~/search/sidebar/components/app.vue';
 import ResultsFilters from '~/search/sidebar/components/results_filters.vue';
 import ScopeNavigation from '~/search/sidebar/components/scope_navigation.vue';
-import LanguageFilter from '~/search/sidebar/components/language_filter.vue';
+import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue';
 
 Vue.use(Vuex);
 
diff --git a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
index f7b35c7bb14..7af588f059f 100644
--- a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
@@ -1,17 +1,22 @@
 import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { MOCK_QUERY, MOCK_LANGUAGE_AGGREGATIONS_BUCKETS } from 'jest/search/mock_data';
-import CheckboxFilter from '~/search/sidebar/components/checkbox_filter.vue';
+import CheckboxFilter, {
+  TRACKING_LABEL_CHECKBOX,
+  TRACKING_LABEL_SET,
+} from '~/search/sidebar/components/checkbox_filter.vue';
 
-import { languageFilterData } from '~/search/sidebar/constants/language_filter_data';
+import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
 import { convertFiltersData } from '~/search/sidebar/utils';
 
 Vue.use(Vuex);
 
 describe('CheckboxFilter', () => {
   let wrapper;
+  let trackingSpy;
 
   const actionSpies = {
     setQuery: jest.fn(),
@@ -23,9 +28,10 @@ describe('CheckboxFilter', () => {
 
   const defaultProps = {
     filtersData: convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
+    trackingNamespace: 'testNameSpace',
   };
 
-  const createComponent = () => {
+  const createComponent = (Props = defaultProps) => {
     const store = new Vuex.Store({
       state: {
         query: MOCK_QUERY,
@@ -37,13 +43,13 @@ describe('CheckboxFilter', () => {
     wrapper = shallowMountExtended(CheckboxFilter, {
       store,
       propsData: {
-        ...defaultProps,
+        ...Props,
       },
     });
   };
 
-  beforeEach(() => {
-    createComponent();
+  afterEach(() => {
+    unmockTracking();
   });
 
   const findFormCheckboxGroup = () => wrapper.findComponent(GlFormCheckboxGroup);
@@ -52,6 +58,11 @@ describe('CheckboxFilter', () => {
   const fintAllCheckboxLabelCounts = () => wrapper.findAllByTestId('labelCount');
 
   describe('Renders correctly', () => {
+    beforeEach(() => {
+      createComponent();
+      trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
+    });
+
     it('renders form', () => {
       expect(findFormCheckboxGroup().exists()).toBe(true);
     });
@@ -76,15 +87,34 @@ describe('CheckboxFilter', () => {
   });
 
   describe('actions', () => {
-    it('triggers setQuery', () => {
-      const filter =
-        defaultProps.filtersData.filters[Object.keys(defaultProps.filtersData.filters)[0]].value;
-      findFormCheckboxGroup().vm.$emit('input', filter);
+    const checkedLanguageName = MOCK_LANGUAGE_AGGREGATIONS_BUCKETS[0].key;
+
+    beforeEach(async () => {
+      defaultProps.filtersData = convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS.slice(0, 3));
+      CheckboxFilter.computed.selectedFilter.get = jest.fn(() => checkedLanguageName);
+
+      createComponent();
+      trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
+      findFormCheckboxGroup().vm.$emit('input', checkedLanguageName);
+    });
 
+    it('triggers setQuery', () => {
       expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), {
         key: languageFilterData.filterParam,
-        value: filter,
+        value: checkedLanguageName,
       });
     });
+
+    it('sends tracking information when setQuery', () => {
+      findFormCheckboxGroup().vm.$emit('input', checkedLanguageName);
+      expect(trackingSpy).toHaveBeenCalledWith(
+        defaultProps.trackingNamespace,
+        TRACKING_LABEL_CHECKBOX,
+        {
+          label: TRACKING_LABEL_SET,
+          property: checkedLanguageName,
+        },
+      );
+    });
   });
 });
diff --git a/spec/frontend/search/sidebar/components/language_filter_spec.js b/spec/frontend/search/sidebar/components/language_filter_spec.js
index 17656ba749b..5821def5b43 100644
--- a/spec/frontend/search/sidebar/components/language_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/language_filter_spec.js
@@ -1,20 +1,35 @@
 import { GlAlert, GlFormCheckbox, GlForm } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
   MOCK_QUERY,
   MOCK_AGGREGATIONS,
   MOCK_LANGUAGE_AGGREGATIONS_BUCKETS,
 } from 'jest/search/mock_data';
-import LanguageFilter from '~/search/sidebar/components/language_filter.vue';
+import LanguageFilter from '~/search/sidebar/components/language_filter/index.vue';
 import CheckboxFilter from '~/search/sidebar/components/checkbox_filter.vue';
-import { MAX_ITEM_LENGTH } from '~/search/sidebar/constants/language_filter_data';
+
+import {
+  TRACKING_LABEL_SHOW_MORE,
+  TRACKING_CATEGORY,
+  TRACKING_PROPERTY_MAX,
+  TRACKING_LABEL_MAX,
+  TRACKING_LABEL_FILTERS,
+  TRACKING_ACTION_SHOW,
+  TRACKING_ACTION_CLICK,
+  TRACKING_LABEL_APPLY,
+  TRACKING_LABEL_ALL,
+} from '~/search/sidebar/components/language_filter/tracking';
+
+import { MAX_ITEM_LENGTH } from '~/search/sidebar/components/language_filter/data';
 
 Vue.use(Vuex);
 
 describe('GlobalSearchSidebarLanguageFilter', () => {
   let wrapper;
+  let trackingSpy;
 
   const actionSpies = {
     fetchLanguageAggregation: jest.fn(),
@@ -46,6 +61,10 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
     });
   };
 
+  afterEach(() => {
+    unmockTracking();
+  });
+
   const findForm = () => wrapper.findComponent(GlForm);
   const findCheckboxFilter = () => wrapper.findComponent(CheckboxFilter);
   const findApplyButton = () => wrapper.findByTestId('apply-button');
@@ -58,6 +77,7 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
   describe('Renders correctly', () => {
     beforeEach(() => {
       createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
     it('renders form', () => {
@@ -130,20 +150,40 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
   describe('Show All button works', () => {
     beforeEach(() => {
       createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
     it(`renders ${MAX_ITEM_LENGTH} amount of items`, async () => {
       findShowMoreButton().vm.$emit('click');
+
       await nextTick();
+
       expect(findAllCheckboxes()).toHaveLength(MAX_ITEM_LENGTH);
     });
 
+    it('sends tracking information when show more clicked', () => {
+      findShowMoreButton().vm.$emit('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_SHOW_MORE, {
+        label: TRACKING_LABEL_ALL,
+      });
+    });
+
     it(`renders more then ${MAX_ITEM_LENGTH} text`, async () => {
       findShowMoreButton().vm.$emit('click');
       await nextTick();
       expect(findHasOverMax().exists()).toBe(true);
     });
 
+    it('sends tracking information when show more clicked and max item reached', () => {
+      findShowMoreButton().vm.$emit('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_SHOW, TRACKING_LABEL_FILTERS, {
+        label: TRACKING_LABEL_MAX,
+        property: TRACKING_PROPERTY_MAX,
+      });
+    });
+
     it(`doesn't render show more button after click`, async () => {
       findShowMoreButton().vm.$emit('click');
       await nextTick();
@@ -154,6 +194,7 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
   describe('actions', () => {
     beforeEach(() => {
       createComponent({});
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
     });
 
     it('uses getter languageAggregationBuckets', () => {
@@ -169,5 +210,13 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
 
       expect(actionSpies.applyQuery).toHaveBeenCalled();
     });
+
+    it('sends tracking information clicking ApplyButton', () => {
+      findForm().vm.$emit('submit', { preventDefault: () => {} });
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_ACTION_CLICK, TRACKING_LABEL_APPLY, {
+        label: TRACKING_CATEGORY,
+      });
+    });
   });
 });