Add latest changes from gitlab-org/gitlab@13-4-stable-ee

22 files changed, 93 insertions, 130 deletions

diff --git a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
index 59c17daacff..2a8ce1d3f30 100644
--- a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
+++ b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap
@@ -13,7 +13,7 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1
   />
    
   <span
-    class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"
+    class="text-truncate gl-pl-2"
   >
     Firing: 
             alert-label &gt; 42
@@ -35,7 +35,7 @@ exports[`AlertWidget Alert not firing displays a warning icon and matches snapsh
   />
    
   <span
-    class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me"
+    class="text-truncate gl-pl-2"
   >
     alert-label &gt; 42
   </span>
diff --git a/spec/frontend/monitoring/alert_widget_spec.js b/spec/frontend/monitoring/alert_widget_spec.js
index 193dbb3e63f..d004b1da0b6 100644
--- a/spec/frontend/monitoring/alert_widget_spec.js
+++ b/spec/frontend/monitoring/alert_widget_spec.js
@@ -84,7 +84,7 @@ describe('AlertWidget', () => {
       },
     });
   };
-  const hasLoadingIcon = () => wrapper.contains(GlLoadingIcon);
+  const hasLoadingIcon = () => wrapper.find(GlLoadingIcon).exists();
   const findWidgetForm = () => wrapper.find({ ref: 'widgetForm' });
   const findAlertErrorMessage = () => wrapper.find({ ref: 'alertErrorMessage' });
   const findCurrentSettingsText = () =>
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 7ef956f8e05..a28ecac00fd 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -32,7 +32,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
     <div
       class="mb-2 pr-2 d-flex d-sm-block"
     >
-      <gl-new-dropdown-stub
+      <gl-dropdown-stub
         category="tertiary"
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
@@ -47,12 +47,12 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         <div
           class="d-flex flex-column overflow-hidden"
         >
-          <gl-new-dropdown-header-stub>
+          <gl-dropdown-section-header-stub>
             Environment
-          </gl-new-dropdown-header-stub>
+          </gl-dropdown-section-header-stub>
            
           <gl-search-box-by-type-stub
-            class="m-2"
+            class="gl-m-3"
             clearbuttontitle="Clear"
             value=""
           />
@@ -69,7 +69,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         
           </div>
         </div>
-      </gl-new-dropdown-stub>
+      </gl-dropdown-stub>
     </div>
      
     <div
diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js
index 15a52d03bcd..ebb49a2a0aa 100644
--- a/spec/frontend/monitoring/components/charts/anomaly_spec.js
+++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js
@@ -46,9 +46,8 @@ describe('Anomaly chart component', () => {
       });
     });
 
-    it('is a Vue instance', () => {
+    it('renders correctly', () => {
       expect(findTimeSeries().exists()).toBe(true);
-      expect(findTimeSeries().isVueInstance()).toBe(true);
     });
 
     describe('receives props correctly', () => {
diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js
index e39e6e7e2c2..a363fafdc31 100644
--- a/spec/frontend/monitoring/components/charts/bar_spec.js
+++ b/spec/frontend/monitoring/components/charts/bar_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlBarChart } from '@gitlab/ui/dist/charts';
 import Bar from '~/monitoring/components/charts/bar.vue';
-import { barMockData } from '../../mock_data';
+import { barGraphData } from '../../graph_data';
 
 jest.mock('~/lib/utils/icon_utils', () => ({
   getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'),
@@ -10,11 +10,14 @@ jest.mock('~/lib/utils/icon_utils', () => ({
 describe('Bar component', () => {
   let barChart;
   let store;
+  let graphData;
 
   beforeEach(() => {
+    graphData = barGraphData();
+
     barChart = shallowMount(Bar, {
       propsData: {
-        graphData: barMockData,
+        graphData,
       },
       store,
     });
@@ -31,15 +34,11 @@ describe('Bar component', () => {
 
       beforeEach(() => {
         glbarChart = barChart.find(GlBarChart);
-        chartData = barChart.vm.chartData[barMockData.metrics[0].label];
-      });
-
-      it('is a Vue instance', () => {
-        expect(glbarChart.isVueInstance()).toBe(true);
+        chartData = barChart.vm.chartData[graphData.metrics[0].label];
       });
 
       it('should display a label on the x axis', () => {
-        expect(glbarChart.vm.xAxisTitle).toBe(barMockData.xLabel);
+        expect(glbarChart.props('xAxisTitle')).toBe(graphData.xLabel);
       });
 
       it('should return chartData as array of arrays', () => {
diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js
index a2056d96dcf..16e2080c000 100644
--- a/spec/frontend/monitoring/components/charts/column_spec.js
+++ b/spec/frontend/monitoring/components/charts/column_spec.js
@@ -95,10 +95,6 @@ describe('Column component', () => {
 
   describe('wrapped components', () => {
     describe('GitLab UI column chart', () => {
-      it('is a Vue instance', () => {
-        expect(findChart().isVueInstance()).toBe(true);
-      });
-
       it('receives data properties needed for proper chart render', () => {
         expect(chartProps('data').values).toEqual(dataValues);
       });
diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js
index 27a2021e9be..c8375810a7b 100644
--- a/spec/frontend/monitoring/components/charts/heatmap_spec.js
+++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js
@@ -24,21 +24,14 @@ describe('Heatmap component', () => {
   };
 
   describe('wrapped chart', () => {
-    let glHeatmapChart;
-
     beforeEach(() => {
       createWrapper();
-      glHeatmapChart = findChart();
     });
 
     afterEach(() => {
       wrapper.destroy();
     });
 
-    it('is a Vue instance', () => {
-      expect(glHeatmapChart.isVueInstance()).toBe(true);
-    });
-
     it('should display a label on the x axis', () => {
       expect(wrapper.vm.xAxisName).toBe(graphData.xLabel);
     });
diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js
index bb2fbc68eaa..24a2af87eb8 100644
--- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js
+++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js
@@ -3,13 +3,15 @@ import timezoneMock from 'timezone-mock';
 import { cloneDeep } from 'lodash';
 import { GlStackedColumnChart, GlChartLegend } from '@gitlab/ui/dist/charts';
 import StackedColumnChart from '~/monitoring/components/charts/stacked_column.vue';
-import { stackedColumnMockedData } from '../../mock_data';
+import { stackedColumnGraphData } from '../../graph_data';
 
 jest.mock('~/lib/utils/icon_utils', () => ({
   getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)),
 }));
 
 describe('Stacked column chart component', () => {
+  const stackedColumnMockedData = stackedColumnGraphData();
+
   let wrapper;
 
   const findChart = () => wrapper.find(GlStackedColumnChart);
@@ -63,9 +65,9 @@ describe('Stacked column chart component', () => {
       const groupBy = findChart().props('groupBy');
 
       expect(groupBy).toEqual([
-        '2020-01-30T12:00:00.000Z',
-        '2020-01-30T12:01:00.000Z',
-        '2020-01-30T12:02:00.000Z',
+        '2015-07-01T20:10:50.000Z',
+        '2015-07-01T20:12:50.000Z',
+        '2015-07-01T20:14:50.000Z',
       ]);
     });
 
diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js
index 6f9a89feb3e..7f0ff534db3 100644
--- a/spec/frontend/monitoring/components/charts/time_series_spec.js
+++ b/spec/frontend/monitoring/components/charts/time_series_spec.js
@@ -632,9 +632,8 @@ describe('Time series component', () => {
             return wrapper.vm.$nextTick();
           });
 
-          it('is a Vue instance', () => {
+          it('exists', () => {
             expect(findChartComponent().exists()).toBe(true);
-            expect(findChartComponent().isVueInstance()).toBe(true);
           });
 
           it('receives data properties needed for proper chart render', () => {
diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
index 024b2cbd7f1..b22e05ec30a 100644
--- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { createStore } from '~/monitoring/stores';
 import { DASHBOARD_PAGE, PANEL_NEW_PAGE } from '~/monitoring/router/constants';
 import { setupAllDashboards, setupStoreWithData } from '../store_utils';
@@ -146,8 +146,8 @@ describe('Actions menu', () => {
   });
 
   describe('add panel item', () => {
-    const GlNewDropdownItemStub = {
-      extends: GlNewDropdownItem,
+    const GlDropdownItemStub = {
+      extends: GlDropdownItem,
       props: {
         to: [String, Object],
       },
@@ -164,7 +164,7 @@ describe('Actions menu', () => {
         },
         {
           mocks: { $route },
-          stubs: { GlNewDropdownItem: GlNewDropdownItemStub },
+          stubs: { GlDropdownItem: GlDropdownItemStub },
         },
       );
     });
diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js
index 5cf24706ebd..f9a7a4d5a93 100644
--- a/spec/frontend/monitoring/components/dashboard_header_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_header_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
@@ -31,7 +31,7 @@ describe('Dashboard header', () => {
   const findDashboardDropdown = () => wrapper.find(DashboardsDropdown);
 
   const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
-  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlNewDropdownItem);
+  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem);
   const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
   const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
   const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
diff --git a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js
index 587ddd23d3f..08c69701bd2 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js
@@ -68,7 +68,7 @@ describe('dashboard invalid url parameters', () => {
     it('form exists and can be submitted', () => {
       expect(findForm().exists()).toBe(true);
       expect(findSubmitBtn().exists()).toBe(true);
-      expect(findSubmitBtn().is('[disabled]')).toBe(false);
+      expect(findSubmitBtn().props('disabled')).toBe(false);
     });
 
     it('form has a text area with a default value', () => {
@@ -109,7 +109,7 @@ describe('dashboard invalid url parameters', () => {
       });
 
       it('submit button is disabled', () => {
-        expect(findSubmitBtn().is('[disabled]')).toBe(true);
+        expect(findSubmitBtn().props('disabled')).toBe(true);
       });
     });
   });
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js
index fb96bcc042f..8947a6c1570 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js
@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { setTestTimeout } from 'helpers/timeout';
-import { GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import invalidUrl from '~/lib/utils/invalid_url';
 import axios from '~/lib/utils/axios_utils';
 import AlertWidget from '~/monitoring/components/alert_widget.vue';
@@ -15,10 +15,14 @@ import {
   mockNamespace,
   mockNamespacedData,
   mockTimeRange,
-  barMockData,
 } from '../mock_data';
 import { dashboardProps, graphData, graphDataEmpty } from '../fixture_data';
-import { anomalyGraphData, singleStatGraphData, heatmapGraphData } from '../graph_data';
+import {
+  anomalyGraphData,
+  singleStatGraphData,
+  heatmapGraphData,
+  barGraphData,
+} from '../graph_data';
 
 import { panelTypes } from '~/monitoring/constants';
 
@@ -137,7 +141,6 @@ describe('Dashboard Panel', () => {
 
     it('The Empty Chart component is rendered and is a Vue instance', () => {
       expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true);
-      expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true);
     });
   });
 
@@ -166,7 +169,6 @@ describe('Dashboard Panel', () => {
 
     it('The Empty Chart component is rendered and is a Vue instance', () => {
       expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true);
-      expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true);
     });
   });
 
@@ -222,13 +224,11 @@ describe('Dashboard Panel', () => {
       it('empty chart is rendered for empty results', () => {
         createWrapper({ graphData: graphDataEmpty });
         expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true);
-        expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true);
       });
 
       it('area chart is rendered by default', () => {
         createWrapper();
         expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true);
-        expect(wrapper.find(MonitorTimeSeriesChart).isVueInstance()).toBe(true);
       });
 
       describe.each`
@@ -240,7 +240,7 @@ describe('Dashboard Panel', () => {
         ${dataWithType(panelTypes.COLUMN)}         | ${MonitorColumnChart}        | ${false}
         ${dataWithType(panelTypes.STACKED_COLUMN)} | ${MonitorStackedColumnChart} | ${false}
         ${heatmapGraphData()}                      | ${MonitorHeatmapChart}       | ${false}
-        ${barMockData}                             | ${MonitorBarChart}           | ${false}
+        ${barGraphData()}                          | ${MonitorBarChart}           | ${false}
       `('when $data.type data is provided', ({ data, component, hasCtxMenu }) => {
         const attrs = { attr1: 'attr1Value', attr2: 'attr2Value' };
 
@@ -250,7 +250,6 @@ describe('Dashboard Panel', () => {
 
         it(`renders the chart component and binds attributes`, () => {
           expect(wrapper.find(component).exists()).toBe(true);
-          expect(wrapper.find(component).isVueInstance()).toBe(true);
           expect(wrapper.find(component).attributes()).toMatchObject(attrs);
         });
 
@@ -544,7 +543,6 @@ describe('Dashboard Panel', () => {
     });
 
     it('it renders a time series chart with no errors', () => {
-      expect(wrapper.find(MonitorTimeSeriesChart).isVueInstance()).toBe(true);
       expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index f37d95317ab..b7a0ea46b61 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -645,7 +645,7 @@ describe('Dashboard', () => {
 
         it('it enables draggables', () => {
           expect(findRearrangeButton().attributes('pressed')).toBeTruthy();
-          expect(findEnabledDraggables()).toEqual(findDraggables());
+          expect(findEnabledDraggables().wrappers).toEqual(findDraggables().wrappers);
         });
 
         it('metrics can be swapped', () => {
@@ -668,7 +668,11 @@ describe('Dashboard', () => {
         });
 
         it('shows a remove button, which removes a panel', () => {
-          expect(findFirstDraggableRemoveButton().isEmpty()).toBe(false);
+          expect(
+            findFirstDraggableRemoveButton()
+              .find('a')
+              .exists(),
+          ).toBe(true);
 
           expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount);
           findFirstDraggableRemoveButton().trigger('click');
@@ -703,8 +707,7 @@ describe('Dashboard', () => {
     });
 
     it('renders correctly', () => {
-      expect(wrapper.isVueInstance()).toBe(true);
-      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.html()).not.toBe('');
     });
   });
 
diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index 89adbad386f..ef5784183b2 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 
@@ -33,8 +33,8 @@ describe('DashboardsDropdown', () => {
     });
   }
 
-  const findItems = () => wrapper.findAll(GlNewDropdownItem);
-  const findItemAt = i => wrapper.findAll(GlNewDropdownItem).at(i);
+  const findItems = () => wrapper.findAll(GlDropdownItem);
+  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' });
diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
index 29e4c4514fe..29115ffb817 100644
--- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
@@ -50,7 +50,7 @@ describe('DuplicateDashboardForm', () => {
     it('when is empty', () => {
       setValue('fileName', '');
       return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
+        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
         expect(findInvalidFeedback().exists()).toBe(false);
       });
     });
@@ -58,7 +58,7 @@ describe('DuplicateDashboardForm', () => {
     it('when is valid', () => {
       setValue('fileName', 'my_dashboard.yml');
       return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
+        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
         expect(findInvalidFeedback().exists()).toBe(false);
       });
     });
@@ -66,7 +66,7 @@ describe('DuplicateDashboardForm', () => {
     it('when is not valid', () => {
       setValue('fileName', 'my_dashboard.exe');
       return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').is('.is-invalid')).toBe(true);
+        expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid');
         expect(findInvalidFeedback().text()).toBeTruthy();
       });
     });
@@ -144,7 +144,7 @@ describe('DuplicateDashboardForm', () => {
 
       return wrapper.vm.$nextTick().then(() => {
         wrapper.find('form').trigger('change');
-        expect(findByRef('branchName').is(':focus')).toBe(true);
+        expect(document.activeElement).toBe(findByRef('branchName').element);
       });
     });
   });
diff --git a/spec/frontend/monitoring/components/embeds/embed_group_spec.js b/spec/frontend/monitoring/components/embeds/embed_group_spec.js
index 49c10483c45..b63995ec2d4 100644
--- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js
+++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js
@@ -1,6 +1,6 @@
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDeprecatedButton, GlCard } from '@gitlab/ui';
+import { GlButton, GlCard } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
@@ -71,16 +71,16 @@ describe('Embed Group', () => {
 
     it('is expanded by default', () => {
       metricsWithDataGetter.mockReturnValue([1]);
-      mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
+      mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
 
       expect(wrapper.find('.card-body').classes()).not.toContain('d-none');
     });
 
     it('collapses when clicked', done => {
       metricsWithDataGetter.mockReturnValue([1]);
-      mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
+      mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
 
-      wrapper.find(GlDeprecatedButton).trigger('click');
+      wrapper.find(GlButton).trigger('click');
 
       wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.card-body').classes()).toContain('d-none');
@@ -148,16 +148,16 @@ describe('Embed Group', () => {
   describe('button text', () => {
     it('has a singular label when there is one embed', () => {
       metricsWithDataGetter.mockReturnValue([1]);
-      mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
+      mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
 
-      expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide chart');
+      expect(wrapper.find(GlButton).text()).toBe('Hide chart');
     });
 
     it('has a plural label when there are multiple embeds', () => {
       metricsWithDataGetter.mockReturnValue([2]);
-      mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
+      mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
 
-      expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide charts');
+      expect(wrapper.find(GlButton).text()).toBe('Hide charts');
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js
index 86e2523f708..ebcd6c0df3a 100644
--- a/spec/frontend/monitoring/components/graph_group_spec.js
+++ b/spec/frontend/monitoring/components/graph_group_spec.js
@@ -50,7 +50,7 @@ describe('Graph group component', () => {
     it('should contain a tab index for the collapse button', () => {
       const groupToggle = findToggleButton();
 
-      expect(groupToggle.is('[tabindex]')).toBe(true);
+      expect(groupToggle.attributes('tabindex')).toBeDefined();
     });
 
     it('should show the open the group when collapseGroup is set to true', () => {
diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js
index a9b8295f38e..8a478362b5e 100644
--- a/spec/frontend/monitoring/components/refresh_button_spec.js
+++ b/spec/frontend/monitoring/components/refresh_button_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import Visibility from 'visibilityjs';
-import { GlNewDropdown, GlNewDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { createStore } from '~/monitoring/stores';
 import RefreshButton from '~/monitoring/components/refresh_button.vue';
 
@@ -15,8 +15,8 @@ describe('RefreshButton', () => {
   };
 
   const findRefreshBtn = () => wrapper.find(GlButton);
-  const findDropdown = () => wrapper.find(GlNewDropdown);
-  const findOptions = () => findDropdown().findAll(GlNewDropdownItem);
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findOptions = () => findDropdown().findAll(GlDropdownItem);
   const findOptionAt = index => findOptions().at(index);
 
   const expectFetchDataToHaveBeenCalledTimes = times => {
diff --git a/spec/frontend/monitoring/fixture_data.js b/spec/frontend/monitoring/fixture_data.js
index 30040d3f89f..18ec74550b4 100644
--- a/spec/frontend/monitoring/fixture_data.js
+++ b/spec/frontend/monitoring/fixture_data.js
@@ -1,8 +1,7 @@
 import { stateAndPropsFromDataset } from '~/monitoring/utils';
 import { mapToDashboardViewModel } from '~/monitoring/stores/utils';
 import { metricStates } from '~/monitoring/constants';
-import { convertObjectProps } from '~/lib/utils/common_utils';
-import { convertToCamelCase } from '~/lib/utils/text_utility';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 import { metricsResult } from './mock_data';
 
@@ -14,13 +13,7 @@ export const metricsDashboardResponse = getJSONFixture(
 export const metricsDashboardPayload = metricsDashboardResponse.dashboard;
 
 const datasetState = stateAndPropsFromDataset(
-  // It's preferable to have props in snake_case, this will be addressed at:
-  // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33574
-  convertObjectProps(
-    // Some props use kebab-case, convert to snake_case first
-    key => convertToCamelCase(key.replace(/-/g, '_')),
-    metricsDashboardResponse.metrics_data,
-  ),
+  convertObjectPropsToCamelCase(metricsDashboardResponse.metrics_data),
 );
 
 // new properties like addDashboardDocumentationPath prop and alertsEndpoint
diff --git a/spec/frontend/monitoring/graph_data.js b/spec/frontend/monitoring/graph_data.js
index f85351e55d7..494fdb1b159 100644
--- a/spec/frontend/monitoring/graph_data.js
+++ b/spec/frontend/monitoring/graph_data.js
@@ -246,3 +246,29 @@ export const gaugeChartGraphData = (panelOptions = {}) => {
     ],
   });
 };
+
+/**
+ * Generates stacked mock graph data according to options
+ *
+ * @param {Object} panelOptions - Panel options as in YML.
+ * @param {Object} dataOptions
+ */
+export const stackedColumnGraphData = (panelOptions = {}, dataOptions = {}) => {
+  return {
+    ...timeSeriesGraphData(panelOptions, dataOptions),
+    type: panelTypes.STACKED_COLUMN,
+  };
+};
+
+/**
+ * Generates bar mock graph data according to options
+ *
+ * @param {Object} panelOptions - Panel options as in YML.
+ * @param {Object} dataOptions
+ */
+export const barGraphData = (panelOptions = {}, dataOptions = {}) => {
+  return {
+    ...timeSeriesGraphData(panelOptions, dataOptions),
+    type: panelTypes.BAR,
+  };
+};
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index 28a7dd1af4f..aea8815fb10 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -245,51 +245,6 @@ export const metricsResult = [
   },
 ];
 
-export const stackedColumnMockedData = {
-  title: 'memories',
-  type: 'stacked-column',
-  x_label: 'x label',
-  y_label: 'y label',
-  metrics: [
-    {
-      label: 'memory_1024',
-      unit: 'count',
-      series_name: 'group 1',
-      prometheus_endpoint_path:
-        '/root/autodevops-deploy-6/-/environments/24/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024',
-      metricId: 'NO_DB_metric_of_ages_1024',
-      result: [
-        {
-          metric: {},
-          values: [
-            ['2020-01-30T12:00:00.000Z', '5'],
-            ['2020-01-30T12:01:00.000Z', '10'],
-            ['2020-01-30T12:02:00.000Z', '15'],
-          ],
-        },
-      ],
-    },
-    {
-      label: 'memory_1000',
-      unit: 'count',
-      series_name: 'group 2',
-      prometheus_endpoint_path:
-        '/root/autodevops-deploy-6/-/environments/24/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024',
-      metricId: 'NO_DB_metric_of_ages_1000',
-      result: [
-        {
-          metric: {},
-          values: [
-            ['2020-01-30T12:00:00.000Z', '20'],
-            ['2020-01-30T12:01:00.000Z', '25'],
-            ['2020-01-30T12:02:00.000Z', '30'],
-          ],
-        },
-      ],
-    },
-  ],
-};
-
 export const barMockData = {
   title: 'SLA Trends - Primary Services',
   type: 'bar',