Add latest changes from gitlab-org/gitlab@master

6 files changed, 124 insertions, 51 deletions

diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 6ebaab5178c..e2d2e4b73b3 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -4,7 +4,7 @@ import ClusterStore from '~/clusters_list/store';
 import MockAdapter from 'axios-mock-adapter';
 import { apiData } from '../mock_data';
 import { mount } from '@vue/test-utils';
-import { GlTable, GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlTable, GlPagination } from '@gitlab/ui';
 
 describe('Clusters', () => {
   let mock;
@@ -14,11 +14,12 @@ describe('Clusters', () => {
   const endpoint = 'some/endpoint';
 
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findPaginatedButtons = () => wrapper.find(GlPagination);
   const findTable = () => wrapper.find(GlTable);
   const findStatuses = () => findTable().findAll('.js-status');
 
   const mockPollingApi = (response, body, header) => {
-    mock.onGet(endpoint).reply(response, body, header);
+    mock.onGet(`${endpoint}?page=${header['x-page']}`).reply(response, body, header);
   };
 
   const mountWrapper = () => {
@@ -29,7 +30,11 @@ describe('Clusters', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    mockPollingApi(200, apiData, {});
+    mockPollingApi(200, apiData, {
+      'x-total': apiData.clusters.length,
+      'x-per-page': 20,
+      'x-page': 1,
+    });
 
     return mountWrapper();
   });
@@ -93,4 +98,47 @@ describe('Clusters', () => {
       }
     });
   });
+
+  describe('pagination', () => {
+    const perPage = apiData.clusters.length;
+    const totalFirstPage = 100;
+    const totalSecondPage = 500;
+
+    beforeEach(() => {
+      mockPollingApi(200, apiData, {
+        'x-total': totalFirstPage,
+        'x-per-page': perPage,
+        'x-page': 1,
+      });
+      return mountWrapper();
+    });
+
+    it('should load to page 1 with header values', () => {
+      const buttons = findPaginatedButtons();
+
+      expect(buttons.props('perPage')).toBe(perPage);
+      expect(buttons.props('totalItems')).toBe(totalFirstPage);
+      expect(buttons.props('value')).toBe(1);
+    });
+
+    describe('when updating currentPage', () => {
+      beforeEach(() => {
+        mockPollingApi(200, apiData, {
+          'x-total': totalSecondPage,
+          'x-per-page': perPage,
+          'x-page': 2,
+        });
+        wrapper.setData({ currentPage: 2 });
+        return axios.waitForAll();
+      });
+
+      it('should change pagination when currentPage changes', () => {
+        const buttons = findPaginatedButtons();
+
+        expect(buttons.props('perPage')).toBe(perPage);
+        expect(buttons.props('totalItems')).toBe(totalSecondPage);
+        expect(buttons.props('value')).toBe(2);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/clusters_list/store/actions_spec.js b/spec/frontend/clusters_list/store/actions_spec.js
index 2d164b7cc4a..70766af3ec4 100644
--- a/spec/frontend/clusters_list/store/actions_spec.js
+++ b/spec/frontend/clusters_list/store/actions_spec.js
@@ -19,14 +19,29 @@ describe('Clusters store actions', () => {
     afterEach(() => mock.restore());
 
     it('should commit SET_CLUSTERS_DATA with received response', done => {
-      mock.onGet().reply(200, apiData);
+      const headers = {
+        'x-total': apiData.clusters.length,
+        'x-per-page': 20,
+        'x-page': 1,
+      };
+
+      const paginationInformation = {
+        nextPage: NaN,
+        page: 1,
+        perPage: 20,
+        previousPage: NaN,
+        total: apiData.clusters.length,
+        totalPages: NaN,
+      };
+
+      mock.onGet().reply(200, apiData, headers);
 
       testAction(
         actions.fetchClusters,
         { endpoint: apiData.endpoint },
         {},
         [
-          { type: types.SET_CLUSTERS_DATA, payload: apiData },
+          { type: types.SET_CLUSTERS_DATA, payload: { data: apiData, paginationInformation } },
           { type: types.SET_LOADING_STATE, payload: false },
         ],
         [],
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 1fc02f0abe1..b2c9fe93cde 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -39,7 +39,7 @@ describe('Dashboard', () => {
   const findEnvironmentsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
   const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
   const setSearchTerm = searchTerm => {
-    wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
+    store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
   };
 
   const createShallowWrapper = (props = {}, options = {}) => {
@@ -135,7 +135,7 @@ describe('Dashboard', () => {
     it('hides the group panels when showPanels is false', () => {
       createMountedWrapper({ hasMetrics: true, showPanels: false });
 
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.showEmptyState).toEqual(false);
@@ -148,7 +148,7 @@ describe('Dashboard', () => {
 
       createMountedWrapper({ hasMetrics: true });
 
-      wrapper.vm.$store.commit(
+      store.commit(
         `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
         environmentData,
       );
@@ -188,7 +188,7 @@ describe('Dashboard', () => {
       );
 
       createMountedWrapper({ hasMetrics: true });
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/setExpandedPanel', {
@@ -205,7 +205,7 @@ describe('Dashboard', () => {
       setSearch('');
 
       createMountedWrapper({ hasMetrics: true });
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(store.dispatch).not.toHaveBeenCalledWith(
@@ -228,7 +228,7 @@ describe('Dashboard', () => {
       );
 
       createMountedWrapper({ hasMetrics: true });
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(createFlash).toHaveBeenCalled();
@@ -328,7 +328,7 @@ describe('Dashboard', () => {
     beforeEach(() => {
       createMountedWrapper({ hasMetrics: true });
 
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick();
     });
@@ -436,7 +436,7 @@ describe('Dashboard', () => {
   it('hides the environments dropdown list when there is no environments', () => {
     createMountedWrapper({ hasMetrics: true });
 
-    setupStoreWithDashboard(wrapper.vm.$store);
+    setupStoreWithDashboard(store);
 
     return wrapper.vm.$nextTick().then(() => {
       expect(findAllEnvironmentsDropdownItems()).toHaveLength(0);
@@ -446,7 +446,7 @@ describe('Dashboard', () => {
   it('renders the datetimepicker dropdown', () => {
     createMountedWrapper({ hasMetrics: true });
 
-    setupStoreWithData(wrapper.vm.$store);
+    setupStoreWithData(store);
 
     return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.find(DateTimePicker).exists()).toBe(true);
@@ -456,7 +456,7 @@ describe('Dashboard', () => {
   it('renders the refresh dashboard button', () => {
     createMountedWrapper({ hasMetrics: true });
 
-    setupStoreWithData(wrapper.vm.$store);
+    setupStoreWithData(store);
 
     return wrapper.vm.$nextTick().then(() => {
       const refreshBtn = wrapper.findAll({ ref: 'refreshDashboardBtn' });
@@ -469,8 +469,8 @@ describe('Dashboard', () => {
   describe('variables section', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
-      setupStoreWithData(wrapper.vm.$store);
-      setupStoreWithVariable(wrapper.vm.$store);
+      setupStoreWithData(store);
+      setupStoreWithVariable(store);
 
       return wrapper.vm.$nextTick();
     });
@@ -486,7 +486,7 @@ describe('Dashboard', () => {
     describe('when the panel is not expanded', () => {
       beforeEach(() => {
         createShallowWrapper({ hasMetrics: true });
-        setupStoreWithData(wrapper.vm.$store);
+        setupStoreWithData(store);
         return wrapper.vm.$nextTick();
       });
 
@@ -524,14 +524,14 @@ describe('Dashboard', () => {
 
       beforeEach(() => {
         createShallowWrapper({ hasMetrics: true }, { stubs: { DashboardPanel: MockPanel } });
-        setupStoreWithData(wrapper.vm.$store);
+        setupStoreWithData(store);
 
-        const { panelGroups } = wrapper.vm.$store.state.monitoringDashboard.dashboard;
+        const { panelGroups } = store.state.monitoringDashboard.dashboard;
 
         group = panelGroups[0].group;
         [panel] = panelGroups[0].panels;
 
-        wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_EXPANDED_PANEL}`, {
+        store.commit(`monitoringDashboard/${types.SET_EXPANDED_PANEL}`, {
           group,
           panel,
         });
@@ -593,10 +593,8 @@ describe('Dashboard', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
 
-      const { $store } = wrapper.vm;
-
-      setupStoreWithDashboard($store);
-      setMetricResult({ $store, result: [], panel: 2 });
+      setupStoreWithDashboard(store);
+      setMetricResult({ store, result: [], panel: 2 });
 
       return wrapper.vm.$nextTick();
     });
@@ -622,7 +620,7 @@ describe('Dashboard', () => {
     beforeEach(() => {
       createMountedWrapper({ hasMetrics: true }, { attachToDocument: true });
 
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick();
     });
@@ -673,7 +671,7 @@ describe('Dashboard', () => {
     });
 
     it('shows loading element when environments fetch is still loading', () => {
-      wrapper.vm.$store.commit(`monitoringDashboard/${types.REQUEST_ENVIRONMENTS_DATA}`);
+      store.commit(`monitoringDashboard/${types.REQUEST_ENVIRONMENTS_DATA}`);
 
       return wrapper.vm
         .$nextTick()
@@ -681,7 +679,7 @@ describe('Dashboard', () => {
           expect(wrapper.find({ ref: 'monitorEnvironmentsDropdownLoading' }).exists()).toBe(true);
         })
         .then(() => {
-          wrapper.vm.$store.commit(
+          store.commit(
             `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
             environmentData,
           );
@@ -703,7 +701,7 @@ describe('Dashboard', () => {
       store.dispatch.mockRestore();
 
       createShallowWrapper({ hasMetrics: true });
-      setupStoreWithData(wrapper.vm.$store);
+      setupStoreWithData(store);
 
       return wrapper.vm.$nextTick();
     });
@@ -791,7 +789,7 @@ describe('Dashboard', () => {
       createShallowWrapper({ hasMetrics: true, showHeader: false });
 
       // all_dashboards is not defined in health dashboards
-      wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
+      store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
       return wrapper.vm.$nextTick();
     });
 
@@ -917,7 +915,7 @@ describe('Dashboard', () => {
           customMetricsPath: '/endpoint',
           customMetricsAvailable: true,
         });
-        setupStoreWithData(wrapper.vm.$store);
+        setupStoreWithData(store);
 
         origPage = document.body.dataset.page;
         document.body.dataset.page = 'projects:environments:metrics';
diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js
index 2fb7b753de0..095d89c9231 100644
--- a/spec/frontend/monitoring/components/variables_section_spec.js
+++ b/spec/frontend/monitoring/components/variables_section_spec.js
@@ -47,7 +47,7 @@ describe('Metrics dashboard/variables section component', () => {
 
   it('shows the variables section', () => {
     createShallowWrapper();
-    wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables);
+    store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, sampleVariables);
 
     return wrapper.vm.$nextTick(() => {
       const allInputs = findTextInput().length + findCustomInput().length;
diff --git a/spec/frontend/monitoring/store_utils.js b/spec/frontend/monitoring/store_utils.js
index 3cfd3baaee7..338af79dbbe 100644
--- a/spec/frontend/monitoring/store_utils.js
+++ b/spec/frontend/monitoring/store_utils.js
@@ -2,48 +2,48 @@ import * as types from '~/monitoring/stores/mutation_types';
 import { metricsResult, environmentData, dashboardGitResponse } from './mock_data';
 import { metricsDashboardPayload } from './fixture_data';
 
-export const setMetricResult = ({ $store, result, group = 0, panel = 0, metric = 0 }) => {
-  const { dashboard } = $store.state.monitoringDashboard;
+export const setMetricResult = ({ store, result, group = 0, panel = 0, metric = 0 }) => {
+  const { dashboard } = store.state.monitoringDashboard;
   const { metricId } = dashboard.panelGroups[group].panels[panel].metrics[metric];
 
-  $store.commit(`monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, {
+  store.commit(`monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, {
     metricId,
     result,
   });
 };
 
-const setEnvironmentData = $store => {
-  $store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, environmentData);
+const setEnvironmentData = store => {
+  store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, environmentData);
 };
 
-export const setupAllDashboards = $store => {
-  $store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse);
+export const setupAllDashboards = store => {
+  store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse);
 };
 
-export const setupStoreWithDashboard = $store => {
-  $store.commit(
+export const setupStoreWithDashboard = store => {
+  store.commit(
     `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
     metricsDashboardPayload,
   );
-  $store.commit(
+  store.commit(
     `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
     metricsDashboardPayload,
   );
 };
 
-export const setupStoreWithVariable = $store => {
-  $store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, {
+export const setupStoreWithVariable = store => {
+  store.commit(`monitoringDashboard/${types.SET_VARIABLES}`, {
     label1: 'pod',
   });
 };
 
-export const setupStoreWithData = $store => {
-  setupAllDashboards($store);
-  setupStoreWithDashboard($store);
+export const setupStoreWithData = store => {
+  setupAllDashboards(store);
+  setupStoreWithDashboard(store);
 
-  setMetricResult({ $store, result: [], panel: 0 });
-  setMetricResult({ $store, result: metricsResult, panel: 1 });
-  setMetricResult({ $store, result: metricsResult, panel: 2 });
+  setMetricResult({ store, result: [], panel: 0 });
+  setMetricResult({ store, result: metricsResult, panel: 1 });
+  setMetricResult({ store, result: metricsResult, panel: 2 });
 
-  setEnvironmentData($store);
+  setEnvironmentData(store);
 };
diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index 9b9ce0a8ed0..2bb08b60569 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/spec/frontend/notes/components/note_header_spec.js
@@ -18,6 +18,7 @@ describe('NoteHeader component', () => {
   const findActionText = () => wrapper.find({ ref: 'actionText' });
   const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
   const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
+  const findConfidentialIndicator = () => wrapper.find('[data-testid="confidentialIndicator"]');
   const findSpinner = () => wrapper.find({ ref: 'spinner' });
 
   const author = {
@@ -231,4 +232,15 @@ describe('NoteHeader component', () => {
       });
     });
   });
+
+  describe('with confidentiality indicator', () => {
+    it.each`
+      status   | condition
+      ${true}  | ${'shows'}
+      ${false} | ${'hides'}
+    `('$condition icon indicator when isConfidential is $status', ({ status }) => {
+      createComponent({ isConfidential: status });
+      expect(findConfidentialIndicator().exists()).toBe(status);
+    });
+  });
 });