Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

23 files changed, 148 insertions, 161 deletions

diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index 17720aeb702..e873edaad3b 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -37,6 +37,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
         headertext=""
+        hideheaderborder="true"
         id="monitor-environments-dropdown"
         menu-class="monitor-environment-dropdown-menu"
         size="medium"
diff --git a/spec/frontend/monitoring/components/alert_widget_form_spec.js b/spec/frontend/monitoring/components/alert_widget_form_spec.js
index 6d71a9b09e5..6d87fb85f4d 100644
--- a/spec/frontend/monitoring/components/alert_widget_form_spec.js
+++ b/spec/frontend/monitoring/components/alert_widget_form_spec.js
@@ -76,11 +76,15 @@ describe('AlertWidgetForm', () => {
   });
 
   it('shows correct title and button text', () => {
+    createComponent();
+
     expect(modalTitle()).toBe('Add alert');
     expect(submitButton().text()).toBe('Add');
   });
 
   it('sets tracking options for create alert', () => {
+    createComponent();
+
     expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.create);
   });
 
diff --git a/spec/frontend/monitoring/components/charts/annotations_spec.js b/spec/frontend/monitoring/components/charts/annotations_spec.js
index fc90175d307..1eac0935fe4 100644
--- a/spec/frontend/monitoring/components/charts/annotations_spec.js
+++ b/spec/frontend/monitoring/components/charts/annotations_spec.js
@@ -36,7 +36,7 @@ describe('annotations spec', () => {
         }),
       );
 
-      annotations.data.forEach(annotation => {
+      annotations.data.forEach((annotation) => {
         expect(annotation).toEqual(expect.any(Object));
       });
 
@@ -58,7 +58,7 @@ describe('annotations spec', () => {
         }),
       );
 
-      annotations.markLine.data.forEach(annotation => {
+      annotations.markLine.data.forEach((annotation) => {
         expect(annotation).toEqual(expect.any(Object));
       });
 
@@ -83,7 +83,7 @@ describe('annotations spec', () => {
         }),
       );
 
-      annotations.markLine.data.forEach(annotation => {
+      annotations.markLine.data.forEach((annotation) => {
         expect(annotation).toEqual(expect.any(Object));
       });
 
diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js
index ebb49a2a0aa..dad3003d536 100644
--- a/spec/frontend/monitoring/components/charts/anomaly_spec.js
+++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js
@@ -15,7 +15,7 @@ const TEST_LOWER = 9;
 describe('Anomaly chart component', () => {
   let wrapper;
 
-  const setupAnomalyChart = props => {
+  const setupAnomalyChart = (props) => {
     wrapper = shallowMount(Anomaly, {
       propsData: { ...props },
     });
@@ -91,7 +91,7 @@ describe('Anomaly chart component', () => {
           expect(series.length).toEqual(2); // 1 upper + 1 lower boundaries
           expect(series[0].stack).toEqual(series[1].stack);
 
-          series.forEach(s => {
+          series.forEach((s) => {
             expect(s.type).toBe('line');
             expect(s.lineStyle.width).toBe(0);
             expect(s.lineStyle.color).toMatch(/rgba\(.+\)/);
diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js
index a363fafdc31..40edde5f666 100644
--- a/spec/frontend/monitoring/components/charts/bar_spec.js
+++ b/spec/frontend/monitoring/components/charts/bar_spec.js
@@ -44,7 +44,7 @@ describe('Bar component', () => {
       it('should return chartData as array of arrays', () => {
         expect(chartData).toBeInstanceOf(Array);
 
-        chartData.forEach(item => {
+        chartData.forEach((item) => {
           expect(item).toBeInstanceOf(Array);
         });
       });
diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js
index fbcff33d692..0c4b6e8990d 100644
--- a/spec/frontend/monitoring/components/charts/column_spec.js
+++ b/spec/frontend/monitoring/components/charts/column_spec.js
@@ -45,7 +45,7 @@ describe('Column component', () => {
     });
   };
   const findChart = () => wrapper.find(GlColumnChart);
-  const chartProps = prop => findChart().props(prop);
+  const chartProps = (prop) => findChart().props(prop);
 
   beforeEach(() => {
     createWrapper();
@@ -58,7 +58,7 @@ describe('Column component', () => {
   describe('xAxisLabel', () => {
     const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT
 
-    const useXAxisFormatter = date => {
+    const useXAxisFormatter = (date) => {
       const { xAxis } = chartProps('option');
       const { formatter } = xAxis.axisLabel;
       return formatter(date);
diff --git a/spec/frontend/monitoring/components/charts/gauge_spec.js b/spec/frontend/monitoring/components/charts/gauge_spec.js
index 850e2ca87db..9215f2e411f 100644
--- a/spec/frontend/monitoring/components/charts/gauge_spec.js
+++ b/spec/frontend/monitoring/components/charts/gauge_spec.js
@@ -49,7 +49,7 @@ describe('Gauge Chart component', () => {
 
     it.each(invalidCases)(
       'if min has invalid value, defaults are used for both min and max',
-      invalidValue => {
+      (invalidValue) => {
         createWrapper({ minValue: invalidValue });
 
         expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT);
@@ -59,7 +59,7 @@ describe('Gauge Chart component', () => {
 
     it.each(invalidCases)(
       'if max has invalid value, defaults are used for both min and max',
-      invalidValue => {
+      (invalidValue) => {
         createWrapper({ minValue: invalidValue });
 
         expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT);
diff --git a/spec/frontend/monitoring/components/charts/options_spec.js b/spec/frontend/monitoring/components/charts/options_spec.js
index 3372d27e4f9..064ce6f204c 100644
--- a/spec/frontend/monitoring/components/charts/options_spec.js
+++ b/spec/frontend/monitoring/components/charts/options_spec.js
@@ -145,7 +145,7 @@ describe('options spec', () => {
       expect(thresholds).toEqual([]);
     });
 
-    it.each(invalidCases)('invalid values for thresholds are filtered out', invalidValue => {
+    it.each(invalidCases)('invalid values for thresholds are filtered out', (invalidValue) => {
       thresholds = getValidThresholds({
         mode: 'absolute',
         range: { min: 0, max: 100 },
@@ -197,7 +197,7 @@ describe('options spec', () => {
 
       it.each(invalidCases)(
         'when min has invalid value, empty result is returned',
-        invalidValue => {
+        (invalidValue) => {
           thresholds = getValidThresholds({
             mode: 'absolute',
             range: { min: invalidValue, max: 100 },
@@ -210,7 +210,7 @@ describe('options spec', () => {
 
       it.each(invalidCases)(
         'when max has invalid value, empty result is returned',
-        invalidValue => {
+        (invalidValue) => {
           thresholds = getValidThresholds({
             mode: 'absolute',
             range: { min: 0, max: invalidValue },
@@ -244,7 +244,7 @@ describe('options spec', () => {
 
       it.each(invalidCases)(
         'if invalid values are passed, empty result is returned',
-        invalidValue => {
+        (invalidValue) => {
           thresholds = getValidThresholds({
             mode: 'absolute',
             range: { min: 0, max: 100 },
@@ -259,7 +259,7 @@ describe('options spec', () => {
     describe('mode', () => {
       it.each(invalidCases)(
         'if invalid values are passed, empty result is returned',
-        invalidValue => {
+        (invalidValue) => {
           thresholds = getValidThresholds({
             mode: invalidValue,
             range: { min: 0, max: 100 },
@@ -305,7 +305,7 @@ describe('options spec', () => {
         const outOfPercentBoundsValues = [-1, 0, 100, 101];
         it.each(outOfPercentBoundsValues)(
           'when values out of 0-100 range are passed, empty result is returned',
-          invalidValue => {
+          (invalidValue) => {
             thresholds = getValidThresholds({
               mode: 'percentage',
               range: { min: 0, max: 1000 },
diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js
index 2032258730a..4d4224a8b11 100644
--- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js
+++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js
@@ -6,7 +6,7 @@ import StackedColumnChart from '~/monitoring/components/charts/stacked_column.vu
 import { stackedColumnGraphData } from '../../graph_data';
 
 jest.mock('~/lib/utils/icon_utils', () => ({
-  getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)),
+  getSvgIconPathContent: jest.fn().mockImplementation((icon) => Promise.resolve(`${icon}-content`)),
 }));
 
 describe('Stacked column chart component', () => {
@@ -26,7 +26,7 @@ describe('Stacked column chart component', () => {
       stubs: {
         GlPopover: true,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
 
   beforeEach(() => {
@@ -48,7 +48,7 @@ describe('Stacked column chart component', () => {
 
       data.forEach((series, index) => {
         const { values } = stackedColumnMockedData.metrics[index].result[0];
-        expect(series.data).toEqual(values.map(value => value[1]));
+        expect(series.data).toEqual(values.map((value) => value[1]));
       });
     });
 
diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js
index 8fcee80a2d8..b7e1cb91987 100644
--- a/spec/frontend/monitoring/components/charts/time_series_spec.js
+++ b/spec/frontend/monitoring/components/charts/time_series_spec.js
@@ -2,7 +2,7 @@ import { mount, shallowMount } from '@vue/test-utils';
 import { setTestTimeout } from 'helpers/timeout';
 import timezoneMock from 'timezone-mock';
 import { GlLink } from '@gitlab/ui';
-import { TEST_HOST } from 'jest/helpers/test_constants';
+import { TEST_HOST } from 'helpers/test_constants';
 import {
   GlAreaChart,
   GlLineChart,
@@ -23,14 +23,14 @@ import { timeSeriesGraphData } from '../../graph_data';
 
 jest.mock('lodash/throttle', () =>
   // this throttle mock executes immediately
-  jest.fn(func => {
+  jest.fn((func) => {
     // eslint-disable-next-line no-param-reassign
     func.cancel = jest.fn();
     return func;
   }),
 );
 jest.mock('~/lib/utils/icon_utils', () => ({
-  getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)),
+  getSvgIconPathContent: jest.fn().mockImplementation((icon) => Promise.resolve(`${icon}-content`)),
 }));
 
 describe('Time series component', () => {
@@ -53,7 +53,7 @@ describe('Time series component', () => {
       stubs: {
         GlPopover: true,
       },
-      attachToDocument: true,
+      attachTo: document.body,
     });
   };
 
@@ -122,7 +122,7 @@ describe('Time series component', () => {
                   },
                 ],
               }),
-              off: jest.fn(eChartEvent => {
+              off: jest.fn((eChartEvent) => {
                 delete eChartMock.handlers[eChartEvent];
               }),
               on: jest.fn((eChartEvent, fn) => {
@@ -193,7 +193,7 @@ describe('Time series component', () => {
           it('does not throw error if data point is outside the zoom range', () => {
             const seriesDataWithoutValue = {
               ...mockLineSeriesData(),
-              seriesData: mockLineSeriesData().seriesData.map(data => ({
+              seriesData: mockLineSeriesData().seriesData.map((data) => ({
                 ...data,
                 value: undefined,
               })),
@@ -270,7 +270,7 @@ describe('Time series component', () => {
             beforeEach(() => {
               wrapper.vm.formatTooltipText({
                 ...mockAnnotationsSeriesData,
-                seriesData: mockAnnotationsSeriesData.seriesData.map(data => ({
+                seriesData: mockAnnotationsSeriesData.seriesData.map((data) => ({
                   ...data,
                   data: annotationsMetadata,
                 })),
@@ -546,7 +546,7 @@ describe('Time series component', () => {
         describe('xAxisLabel', () => {
           const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT
 
-          const useXAxisFormatter = date => {
+          const useXAxisFormatter = (date) => {
             const { xAxis } = getChartOptions();
             const { formatter } = xAxis.axisLabel;
             return formatter(date);
@@ -620,7 +620,7 @@ describe('Time series component', () => {
         },
       ];
 
-      glChartComponents.forEach(dynamicComponent => {
+      glChartComponents.forEach((dynamicComponent) => {
         describe(`GitLab UI: ${dynamicComponent.chartType}`, () => {
           const findChartComponent = () => wrapper.find(dynamicComponent.component);
 
@@ -705,7 +705,7 @@ describe('Time series component', () => {
         let lineColors;
 
         beforeEach(() => {
-          lineColors = wrapper.find(GlAreaChart).vm.series.map(item => item.lineStyle.color);
+          lineColors = wrapper.find(GlAreaChart).vm.series.map((item) => item.lineStyle.color);
         });
 
         it('should contain different colors for contiguous time series', () => {
@@ -727,7 +727,7 @@ describe('Time series component', () => {
           const legendColors = wrapper
             .find(GlChartLegend)
             .props('seriesInfo')
-            .map(item => item.color);
+            .map((item) => item.color);
 
           lineColors.forEach((color, index) => {
             expect(color).toBe(legendColors[index]);
diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
index b22e05ec30a..43d5937a3a1 100644
--- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
@@ -107,7 +107,7 @@ describe('Actions menu', () => {
     describe('adding new metric from modal', () => {
       let origPage;
 
-      beforeEach(done => {
+      beforeEach((done) => {
         jest.spyOn(Tracking, 'event').mockReturnValue();
         createShallowWrapper();
 
@@ -123,7 +123,7 @@ describe('Actions menu', () => {
         document.body.dataset.page = origPage;
       });
 
-      it('is tracked', done => {
+      it('is tracked', (done) => {
         const submitButton = findAddMetricModalSubmitButton().vm;
 
         wrapper.vm.$nextTick(() => {
@@ -219,7 +219,7 @@ describe('Actions menu', () => {
       });
     });
 
-    describe.each(ootbDashboards)('when current dashboard is OOTB', dashboard => {
+    describe.each(ootbDashboards)('when current dashboard is OOTB', (dashboard) => {
       beforeEach(() => {
         setupAllDashboards(store, dashboard.path);
       });
@@ -240,7 +240,7 @@ describe('Actions menu', () => {
       createShallowWrapper();
     });
 
-    describe.each(ootbDashboards)('when current dashboard is OOTB', dashboard => {
+    describe.each(ootbDashboards)('when current dashboard is OOTB', (dashboard) => {
       beforeEach(() => {
         setupAllDashboards(store, dashboard.path);
       });
diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js
index f9a7a4d5a93..32fd9c45e8d 100644
--- a/spec/frontend/monitoring/components/dashboard_header_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_header_spec.js
@@ -41,7 +41,7 @@ describe('Dashboard header', () => {
 
   const findActionsMenu = () => wrapper.find(ActionsMenu);
 
-  const setSearchTerm = searchTerm => {
+  const setSearchTerm = (searchTerm) => {
     store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
   };
 
@@ -147,13 +147,13 @@ describe('Dashboard header', () => {
 
       it('environments dropdown items can be checked', () => {
         const items = findEnvsDropdownItems();
-        const checkItems = findEnvsDropdownItems().filter(item => item.props('isCheckItem'));
+        const checkItems = findEnvsDropdownItems().filter((item) => item.props('isCheckItem'));
 
         expect(items).toHaveLength(checkItems.length);
       });
 
       it('checks the currently selected environment', () => {
-        const selectedItems = findEnvsDropdownItems().filter(item => item.props('isChecked'));
+        const selectedItems = findEnvsDropdownItems().filter((item) => item.props('isChecked'));
 
         expect(selectedItems).toHaveLength(1);
         expect(selectedItems.at(0).text()).toBe(currentEnvironmentName);
@@ -218,7 +218,7 @@ describe('Dashboard header', () => {
     });
 
     describe('timezone setting', () => {
-      const setupWithTimezone = value => {
+      const setupWithTimezone = (value) => {
         store = createStore({ dashboardTimezone: value });
         createShallowWrapper();
       };
@@ -295,7 +295,7 @@ describe('Dashboard header', () => {
     });
 
     describe('adding metrics prop', () => {
-      it.each(ootbDashboards)('gets passed true if current dashboard is OOTB', dashboardPath => {
+      it.each(ootbDashboards)('gets passed true if current dashboard is OOTB', (dashboardPath) => {
         createShallowWrapper({ customMetricsAvailable: true });
 
         store.state.monitoringDashboard.emptyState = false;
@@ -308,7 +308,7 @@ describe('Dashboard header', () => {
 
       it.each(customDashboards)(
         'gets passed false if current dashboard is custom',
-        dashboardPath => {
+        (dashboardPath) => {
           createShallowWrapper({ customMetricsAvailable: true });
 
           store.state.monitoringDashboard.emptyState = false;
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js
index 1808faf8f0e..f64e05d3a2c 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js
@@ -57,7 +57,7 @@ describe('Dashboard Panel', () => {
   const findTitle = () => wrapper.find({ ref: 'graphTitle' });
   const findCtxMenu = () => wrapper.find({ ref: 'contextualMenu' });
   const findMenuItems = () => wrapper.findAll(GlDropdownItem);
-  const findMenuItemByText = text => findMenuItems().filter(i => i.text() === text);
+  const findMenuItemByText = (text) => findMenuItems().filter((i) => i.text() === text);
   const findAlertsWidget = () => wrapper.find(AlertWidget);
 
   const createWrapper = (props, { mountFn = shallowMount, ...options } = {}) => {
@@ -82,7 +82,7 @@ describe('Dashboard Panel', () => {
     });
   };
 
-  const setMetricsSavedToDb = val =>
+  const setMetricsSavedToDb = (val) =>
     monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val);
 
   beforeEach(() => {
@@ -214,7 +214,7 @@ describe('Dashboard Panel', () => {
     });
 
     describe('Supports different panel types', () => {
-      const dataWithType = type => {
+      const dataWithType = (type) => {
         return {
           ...graphData,
           type,
@@ -777,11 +777,7 @@ describe('Dashboard Panel', () => {
         await wrapper.vm.$nextTick();
 
         expect(findRunbookLinks().length).toBe(1);
-        expect(
-          findRunbookLinks()
-            .at(0)
-            .attributes('href'),
-        ).toBe(invalidUrl);
+        expect(findRunbookLinks().at(0).attributes('href')).toBe(invalidUrl);
       });
     });
   });
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 27e479ba498..db35f1cdde3 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -126,7 +126,7 @@ describe('Dashboard', () => {
   });
 
   describe('panel containers layout', () => {
-    const findPanelLayoutWrapperAt = index => {
+    const findPanelLayoutWrapperAt = (index) => {
       return wrapper
         .find(GraphGroup)
         .findAll('[data-testid="dashboard-panel-layout-wrapper"]')
@@ -225,7 +225,7 @@ describe('Dashboard', () => {
   describe('when the URL contains a reference to a panel', () => {
     let location;
 
-    const setSearch = search => {
+    const setSearch = (search) => {
       window.location = { ...location, search };
     };
 
@@ -391,7 +391,7 @@ describe('Dashboard', () => {
   });
 
   describe('when all panels in the first group are loading', () => {
-    const findGroupAt = i => wrapper.findAll(GraphGroup).at(i);
+    const findGroupAt = (i) => wrapper.findAll(GraphGroup).at(i);
 
     beforeEach(() => {
       setupStoreWithDashboard(store);
@@ -434,7 +434,7 @@ describe('Dashboard', () => {
       setupStoreWithData(store);
 
       wrapper.vm.$nextTick(() => {
-        wrapper.findAll(GraphGroup).wrappers.forEach(groupWrapper => {
+        wrapper.findAll(GraphGroup).wrappers.forEach((groupWrapper) => {
           expect(groupWrapper.props('isLoading')).toBe(false);
         });
       });
@@ -505,7 +505,7 @@ describe('Dashboard', () => {
       let group;
       let panel;
 
-      const mockKeyup = key => window.dispatchEvent(new KeyboardEvent('keyup', { key }));
+      const mockKeyup = (key) => window.dispatchEvent(new KeyboardEvent('keyup', { key }));
 
       const MockPanel = {
         template: `<div><slot name="top-left"/></div>`,
@@ -532,7 +532,7 @@ describe('Dashboard', () => {
 
       it('displays a single panel and others are hidden', () => {
         const panels = wrapper.findAll(MockPanel);
-        const visiblePanels = panels.filter(w => w.isVisible());
+        const visiblePanels = panels.filter((w) => w.isVisible());
 
         expect(findExpandedPanel().isVisible()).toBe(true);
         // v-show for hiding panels is more performant than v-if
@@ -587,18 +587,15 @@ describe('Dashboard', () => {
     });
 
     it('group empty area displays a NO_DATA state', () => {
-      expect(
-        wrapper
-          .findAll({ ref: 'empty-group' })
-          .at(0)
-          .props('selectedState'),
-      ).toEqual(metricStates.NO_DATA);
+      expect(wrapper.findAll({ ref: 'empty-group' }).at(0).props('selectedState')).toEqual(
+        metricStates.NO_DATA,
+      );
     });
   });
 
   describe('drag and drop function', () => {
     const findDraggables = () => wrapper.findAll(VueDraggable);
-    const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));
+    const findEnabledDraggables = () => findDraggables().filter((f) => !f.attributes('disabled'));
     const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel');
     const findRearrangeButton = () => wrapper.find('.js-rearrange-button');
 
@@ -634,9 +631,7 @@ describe('Dashboard', () => {
 
       describe('when rearrange button is clicked', () => {
         const findFirstDraggableRemoveButton = () =>
-          findDraggablePanels()
-            .at(0)
-            .find('.js-draggable-remove');
+          findDraggablePanels().at(0).find('.js-draggable-remove');
 
         beforeEach(() => {
           findRearrangeButton().vm.$emit('click');
@@ -668,11 +663,7 @@ describe('Dashboard', () => {
         });
 
         it('shows a remove button, which removes a panel', () => {
-          expect(
-            findFirstDraggableRemoveButton()
-              .find('a')
-              .exists(),
-          ).toBe(true);
+          expect(findFirstDraggableRemoveButton().find('a').exists()).toBe(true);
 
           expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount);
           findFirstDraggableRemoveButton().trigger('click');
@@ -772,10 +763,7 @@ describe('Dashboard', () => {
     const panelIndex = 1; // skip expanded panel
 
     const getClipboardTextFirstPanel = () =>
-      wrapper
-        .findAll(DashboardPanel)
-        .at(panelIndex)
-        .props('clipboardText');
+      wrapper.findAll(DashboardPanel).at(panelIndex).props('clipboardText');
 
     beforeEach(() => {
       setupStoreWithData(store);
diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index ef5784183b2..6ed190051ce 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 
@@ -27,18 +28,17 @@ describe('DashboardsDropdown', () => {
         ...props,
         defaultBranch,
       },
-      sync: false,
       ...storeOpts,
       ...opts,
     });
   }
 
   const findItems = () => wrapper.findAll(GlDropdownItem);
-  const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i);
+  const findItemAt = (i) => wrapper.findAll(GlDropdownItem).at(i);
   const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
   const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
   const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
-  const setSearchTerm = searchTerm => wrapper.setData({ searchTerm });
+  const setSearchTerm = (searchTerm) => wrapper.setData({ searchTerm });
 
   beforeEach(() => {
     mockDashboards = dashboardGitResponse;
@@ -72,22 +72,20 @@ describe('DashboardsDropdown', () => {
       expect(findNoItemsMsg().isVisible()).toBe(false);
     });
 
-    it('filters dropdown items when searched for item exists in the list', () => {
+    it('filters dropdown items when searched for item exists in the list', async () => {
       const searchTerm = 'Overview';
       setSearchTerm(searchTerm);
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findItems()).toHaveLength(1);
-      });
+      expect(findItems()).toHaveLength(1);
     });
 
-    it('shows no items found message when searched for item does not exists in the list', () => {
+    it('shows no items found message when searched for item does not exists in the list', async () => {
       const searchTerm = 'does-not-exist';
       setSearchTerm(searchTerm);
+      await nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findNoItemsMsg().isVisible()).toBe(true);
-      });
+      expect(findNoItemsMsg().isVisible()).toBe(true);
     });
   });
 
@@ -105,7 +103,7 @@ describe('DashboardsDropdown', () => {
 
   describe('when the dashboard is missing a display name', () => {
     beforeEach(() => {
-      mockDashboards = dashboardGitResponse.map(d => ({ ...d, display_name: undefined }));
+      mockDashboards = dashboardGitResponse.map((d) => ({ ...d, display_name: undefined }));
       createComponent();
     });
 
diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
index 29115ffb817..4abb5b2e27b 100644
--- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
 
@@ -9,20 +10,19 @@ const createMountedWrapper = (props = {}) => {
   // Use `mount` to render native input elements
   wrapper = mount(DuplicateDashboardForm, {
     propsData: { ...props },
-    sync: false,
     // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-    attachToDocument: true,
+    attachTo: document.body,
   });
 };
 
 describe('DuplicateDashboardForm', () => {
   const defaultBranch = 'master';
 
-  const findByRef = ref => wrapper.find({ ref });
+  const findByRef = (ref) => wrapper.find({ ref });
   const setValue = (ref, val) => {
     findByRef(ref).setValue(val);
   };
-  const setChecked = value => {
+  const setChecked = (value) => {
     const input = wrapper.find(`.form-check-input[value="${value}"]`);
     input.element.checked = true;
     input.trigger('click');
@@ -47,34 +47,34 @@ describe('DuplicateDashboardForm', () => {
   describe('validates the file name', () => {
     const findInvalidFeedback = () => findByRef('fileNameFormGroup').find('.invalid-feedback');
 
-    it('when is empty', () => {
+    it('when is empty', async () => {
       setValue('fileName', '');
-      return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
-        expect(findInvalidFeedback().exists()).toBe(false);
-      });
+      await nextTick();
+
+      expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
+      expect(findInvalidFeedback().exists()).toBe(false);
     });
 
-    it('when is valid', () => {
+    it('when is valid', async () => {
       setValue('fileName', 'my_dashboard.yml');
-      return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
-        expect(findInvalidFeedback().exists()).toBe(false);
-      });
+      await nextTick();
+
+      expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
+      expect(findInvalidFeedback().exists()).toBe(false);
     });
 
-    it('when is not valid', () => {
+    it('when is not valid', async () => {
       setValue('fileName', 'my_dashboard.exe');
-      return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid');
-        expect(findInvalidFeedback().text()).toBeTruthy();
-      });
+      await nextTick();
+
+      expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid');
+      expect(findInvalidFeedback().text()).toBeTruthy();
     });
   });
 
   describe('emits `change` event', () => {
     const lastChange = () =>
-      wrapper.vm.$nextTick().then(() => {
+      nextTick().then(() => {
         wrapper.find('form').trigger('change');
 
         // Resolves to the last emitted change
@@ -133,19 +133,19 @@ describe('DuplicateDashboardForm', () => {
         expect(lastChange()).resolves.toMatchObject({
           branch: defaultBranch,
         }),
-        wrapper.vm.$nextTick(() => {
+        nextTick(() => {
           expect(findByRef('branchName').isVisible()).toBe(false);
         }),
       ]);
     });
 
-    it('when `new` branch option is chosen, focuses on the branch name input', () => {
+    it('when `new` branch option is chosen, focuses on the branch name input', async () => {
       setChecked(wrapper.vm.$options.radioVals.NEW);
 
-      return wrapper.vm.$nextTick().then(() => {
-        wrapper.find('form').trigger('change');
-        expect(document.activeElement).toBe(findByRef('branchName').element);
-      });
+      await nextTick();
+
+      wrapper.find('form').trigger('change');
+      expect(document.activeElement).toBe(findByRef('branchName').element);
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js
index d8ffb4443ac..7e7065da179 100644
--- a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js
@@ -1,3 +1,5 @@
+import Vuex from 'vuex';
+import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
 
@@ -8,6 +10,8 @@ import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_
 
 import { dashboardGitResponse } from '../mock_data';
 
+Vue.use(Vuex);
+
 describe('duplicate dashboard modal', () => {
   let wrapper;
   let mockDashboards;
@@ -15,25 +19,28 @@ describe('duplicate dashboard modal', () => {
   let duplicateDashboardAction;
   let okEvent;
 
-  function createComponent(opts = {}) {
-    const storeOpts = {
-      methods: {
-        duplicateSystemDashboard: jest.fn(),
-      },
-      computed: {
-        allDashboards: () => mockDashboards,
-        selectedDashboard: () => mockSelectedDashboard,
+  function createComponent() {
+    const store = new Vuex.Store({
+      modules: {
+        monitoringDashboard: {
+          namespaced: true,
+          actions: {
+            duplicateSystemDashboard: duplicateDashboardAction,
+          },
+          getters: {
+            allDashboards: () => mockDashboards,
+            selectedDashboard: () => mockSelectedDashboard,
+          },
+        },
       },
-    };
+    });
 
     return shallowMount(DuplicateDashboardModal, {
       propsData: {
         defaultBranch: 'master',
         modalId: 'id',
       },
-      sync: false,
-      ...storeOpts,
-      ...opts,
+      store,
     });
   }
 
@@ -51,12 +58,7 @@ describe('duplicate dashboard modal', () => {
       preventDefault: jest.fn(),
     };
 
-    wrapper = createComponent({
-      methods: {
-        // Mock vuex actions
-        duplicateSystemDashboard: duplicateDashboardAction,
-      },
-    });
+    wrapper = createComponent();
 
     wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
   });
@@ -65,34 +67,33 @@ describe('duplicate dashboard modal', () => {
     expect(findDuplicateDashboardForm().exists()).toBe(true);
   });
 
-  it('saves a new dashboard', () => {
+  it('saves a new dashboard', async () => {
     findModal().vm.$emit('ok', okEvent);
 
-    return waitForPromises().then(() => {
-      expect(okEvent.preventDefault).toHaveBeenCalled();
-      expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
-      expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
-      expect(findAlert().exists()).toBe(false);
-    });
+    await waitForPromises();
+    expect(okEvent.preventDefault).toHaveBeenCalled();
+    expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
+    expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
+    expect(findAlert().exists()).toBe(false);
   });
 
-  it('handles error when a new dashboard is not saved', () => {
+  it('handles error when a new dashboard is not saved', async () => {
     const errMsg = 'An error occurred';
 
     duplicateDashboardAction.mockRejectedValueOnce(errMsg);
     findModal().vm.$emit('ok', okEvent);
 
-    return waitForPromises().then(() => {
-      expect(okEvent.preventDefault).toHaveBeenCalled();
+    await waitForPromises();
 
-      expect(findAlert().exists()).toBe(true);
-      expect(findAlert().text()).toBe(errMsg);
+    expect(okEvent.preventDefault).toHaveBeenCalled();
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
-    });
+    expect(findAlert().exists()).toBe(true);
+    expect(findAlert().text()).toBe(errMsg);
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
   });
 
   it('updates the form on changes', () => {
@@ -101,9 +102,7 @@ describe('duplicate dashboard modal', () => {
       commitMessage: 'A commit message',
     };
 
-    findModal()
-      .find(DuplicateDashboardForm)
-      .vm.$emit('change', formVals);
+    findModal().find(DuplicateDashboardForm).vm.$emit('change', formVals);
 
     // Binding's second argument contains the modal id
     expect(wrapper.vm.form).toEqual(formVals);
diff --git a/spec/frontend/monitoring/components/embeds/embed_group_spec.js b/spec/frontend/monitoring/components/embeds/embed_group_spec.js
index 01089752933..cb06a1a6b64 100644
--- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js
+++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js
@@ -76,7 +76,7 @@ describe('Embed Group', () => {
       expect(wrapper.find('.gl-card-body').classes()).not.toContain('d-none');
     });
 
-    it('collapses when clicked', done => {
+    it('collapses when clicked', (done) => {
       metricsWithDataGetter.mockReturnValue([1]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
 
@@ -134,7 +134,7 @@ describe('Embed Group', () => {
     });
 
     it('passes the correct props to the Embed components', () => {
-      expect(wrapper.findAll(MetricEmbed).wrappers.map(item => item.props())).toEqual(
+      expect(wrapper.findAll(MetricEmbed).wrappers.map((item) => item.props())).toEqual(
         multipleEmbedProps(),
       );
     });
diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js
index ebcd6c0df3a..c57461c2d09 100644
--- a/spec/frontend/monitoring/components/graph_group_spec.js
+++ b/spec/frontend/monitoring/components/graph_group_spec.js
@@ -11,7 +11,7 @@ describe('Graph group component', () => {
   const findCaretIcon = () => wrapper.find(GlIcon);
   const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]');
 
-  const createComponent = propsData => {
+  const createComponent = (propsData) => {
     wrapper = shallowMount(GraphGroup, {
       propsData,
     });
diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js
index 4a550efe23c..1dd2ed4e141 100644
--- a/spec/frontend/monitoring/components/group_empty_state_spec.js
+++ b/spec/frontend/monitoring/components/group_empty_state_spec.js
@@ -35,7 +35,7 @@ describe('GroupEmptyState', () => {
     metricStates.LOADING,
     metricStates.UNKNOWN_ERROR,
     'FOO STATE', // does not fail with unknown states
-  ])('given state %s', selectedState => {
+  ])('given state %s', (selectedState) => {
     beforeEach(() => {
       wrapper = createComponent({ selectedState });
     });
diff --git a/spec/frontend/monitoring/components/links_section_spec.js b/spec/frontend/monitoring/components/links_section_spec.js
index b771d63d51f..2daad77d513 100644
--- a/spec/frontend/monitoring/components/links_section_spec.js
+++ b/spec/frontend/monitoring/components/links_section_spec.js
@@ -12,7 +12,7 @@ describe('Links Section component', () => {
       store,
     });
   };
-  const setState = links => {
+  const setState = (links) => {
     store.state.monitoringDashboard = {
       ...store.state.monitoringDashboard,
       emptyState: null,
diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js
index 8a478362b5e..a03d29309d4 100644
--- a/spec/frontend/monitoring/components/refresh_button_spec.js
+++ b/spec/frontend/monitoring/components/refresh_button_spec.js
@@ -17,9 +17,9 @@ describe('RefreshButton', () => {
   const findRefreshBtn = () => wrapper.find(GlButton);
   const findDropdown = () => wrapper.find(GlDropdown);
   const findOptions = () => findDropdown().findAll(GlDropdownItem);
-  const findOptionAt = index => findOptions().at(index);
+  const findOptionAt = (index) => findOptions().at(index);
 
-  const expectFetchDataToHaveBeenCalledTimes = times => {
+  const expectFetchDataToHaveBeenCalledTimes = (times) => {
     const refreshCalls = dispatch.mock.calls.filter(([action, payload]) => {
       return action === 'monitoringDashboard/fetchDashboardData' && payload === undefined;
     });
diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
index cc384aef231..f5db17ce367 100644
--- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
@@ -10,11 +10,14 @@ describe('Custom variable component', () => {
     label: 'Select environment',
     value: 'Production',
     options: {
-      values: [{ text: 'Production', value: 'prod' }, { text: 'Canary', value: 'canary' }],
+      values: [
+        { text: 'Production', value: 'prod' },
+        { text: 'Canary', value: 'canary' },
+      ],
     },
   };
 
-  const createShallowWrapper = props => {
+  const createShallowWrapper = (props) => {
     wrapper = shallowMount(DropdownField, {
       propsData: {
         ...defaultProps,
@@ -54,9 +57,7 @@ describe('Custom variable component', () => {
     createShallowWrapper();
     jest.spyOn(wrapper.vm, '$emit');
 
-    findDropdownItems()
-      .at(1)
-      .vm.$emit('click');
+    findDropdownItems().at(1).vm.$emit('click');
 
     return wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary');