Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

5 files changed, 153 insertions, 69 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 a28ecac00fd..645aca0b157 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -52,7 +52,6 @@ exports[`Dashboard template matches the default snapshot 1`] = `
           </gl-dropdown-section-header-stub>
            
           <gl-search-box-by-type-stub
-            class="gl-m-3"
             clearbuttontitle="Clear"
             value=""
           />
diff --git a/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
index c30fb572826..9b2aa3a5b5b 100644
--- a/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
@@ -1,79 +1,146 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`GroupEmptyState Renders an empty state for BAD_QUERY 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  primarybuttonlink="/path/to/settings"
-  primarybuttontext="Verify configuration"
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="Query cannot be processed"
-/>
+exports[`GroupEmptyState given state BAD_QUERY passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": null,
+  "primaryButtonLink": "/path/to/settings",
+  "primaryButtonText": "Verify configuration",
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "Query cannot be processed",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for BAD_QUERY 2`] = `"The Prometheus server responded with \\"bad request\\". Please check your queries are correct and are supported in your Prometheus version. <a href=\\"/path/to/docs\\">More information</a>"`;
+exports[`GroupEmptyState given state BAD_QUERY renders the slotted content 1`] = `
+<div>
+  <div>
+    The Prometheus server responded with "bad request". Please check your queries are correct and are supported in your Prometheus version. 
+    <a
+      href="/path/to/docs"
+    >
+      More information
+    </a>
+  </div>
+</div>
+`;
 
-exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  description="We couldn't reach the Prometheus server. Either the server no longer exists or the configuration details need updating."
-  primarybuttonlink="/path/to/settings"
-  primarybuttontext="Verify configuration"
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="Connection failed"
-/>
+exports[`GroupEmptyState given state CONNECTION_FAILED passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": "We couldn't reach the Prometheus server. Either the server no longer exists or the configuration details need updating.",
+  "primaryButtonLink": "/path/to/settings",
+  "primaryButtonText": "Verify configuration",
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "Connection failed",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 2`] = `undefined`;
+exports[`GroupEmptyState given state CONNECTION_FAILED renders the slotted content 1`] = `<div />`;
 
-exports[`GroupEmptyState Renders an empty state for FOO STATE 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  description="An error occurred while loading the data. Please try again."
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="An error has occurred"
-/>
+exports[`GroupEmptyState given state FOO STATE passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": "An error occurred while loading the data. Please try again.",
+  "primaryButtonLink": null,
+  "primaryButtonText": null,
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "An error has occurred",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for FOO STATE 2`] = `undefined`;
+exports[`GroupEmptyState given state FOO STATE renders the slotted content 1`] = `<div />`;
 
-exports[`GroupEmptyState Renders an empty state for LOADING 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="Waiting for performance data"
-/>
+exports[`GroupEmptyState given state LOADING passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": "Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.",
+  "primaryButtonLink": null,
+  "primaryButtonText": null,
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "Waiting for performance data",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for LOADING 2`] = `undefined`;
+exports[`GroupEmptyState given state LOADING renders the slotted content 1`] = `<div />`;
 
-exports[`GroupEmptyState Renders an empty state for NO_DATA 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="No data to display"
-/>
+exports[`GroupEmptyState given state NO_DATA passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": null,
+  "primaryButtonLink": null,
+  "primaryButtonText": null,
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "No data to display",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for NO_DATA 2`] = `"The data source is connected, but there is no data to display. <a href=\\"/path/to/docs\\">More information</a>"`;
+exports[`GroupEmptyState given state NO_DATA renders the slotted content 1`] = `
+<div>
+  <div>
+    The data source is connected, but there is no data to display. 
+    <a
+      href="/path/to/docs"
+    >
+      More information
+    </a>
+  </div>
+</div>
+`;
 
-exports[`GroupEmptyState Renders an empty state for TIMEOUT 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="Connection timed out"
-/>
+exports[`GroupEmptyState given state TIMEOUT passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": null,
+  "primaryButtonLink": null,
+  "primaryButtonText": null,
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "Connection timed out",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for TIMEOUT 2`] = `"Charts can't be displayed as the request for data has timed out. <a href=\\"/path/to/docs\\">More information</a>"`;
+exports[`GroupEmptyState given state TIMEOUT renders the slotted content 1`] = `
+<div>
+  <div>
+    Charts can't be displayed as the request for data has timed out. 
+    <a
+      href="/path/to/docs"
+    >
+      More information
+    </a>
+  </div>
+</div>
+`;
 
-exports[`GroupEmptyState Renders an empty state for UNKNOWN_ERROR 1`] = `
-<gl-empty-state-stub
-  compact="true"
-  description="An error occurred while loading the data. Please try again."
-  svgpath="/path/to/empty-group-illustration.svg"
-  title="An error has occurred"
-/>
+exports[`GroupEmptyState given state UNKNOWN_ERROR passes the expected props to GlEmptyState 1`] = `
+Object {
+  "compact": true,
+  "description": "An error occurred while loading the data. Please try again.",
+  "primaryButtonLink": null,
+  "primaryButtonText": null,
+  "secondaryButtonLink": null,
+  "secondaryButtonText": null,
+  "svgHeight": null,
+  "svgPath": "/path/to/empty-group-illustration.svg",
+  "title": "An error has occurred",
+}
 `;
 
-exports[`GroupEmptyState Renders an empty state for UNKNOWN_ERROR 2`] = `undefined`;
+exports[`GroupEmptyState given state UNKNOWN_ERROR renders the slotted content 1`] = `<div />`;
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js
index 8947a6c1570..ee0e1fd3176 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js
@@ -38,8 +38,6 @@ import MonitorStackedColumnChart from '~/monitoring/components/charts/stacked_co
 import { createStore, monitoringDashboard } from '~/monitoring/stores';
 import { createStore as createEmbedGroupStore } from '~/monitoring/stores/embed_group';
 
-global.URL.createObjectURL = jest.fn();
-
 const mocks = {
   $toast: {
     show: jest.fn(),
@@ -94,6 +92,8 @@ describe('Dashboard Panel', () => {
     state = store.state.monitoringDashboard;
 
     axiosMock = new AxiosMockAdapter(axios);
+
+    jest.spyOn(URL, 'createObjectURL');
   });
 
   afterEach(() => {
diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js
index 90bd6f67196..3b94c4c6806 100644
--- a/spec/frontend/monitoring/components/group_empty_state_spec.js
+++ b/spec/frontend/monitoring/components/group_empty_state_spec.js
@@ -1,7 +1,13 @@
+import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import { metricStates } from '~/monitoring/constants';
 
+const MockGlEmptyState = {
+  props: GlEmptyState.props,
+  template: '<div><slot name="description"></slot></div>',
+};
+
 function createComponent(props) {
   return shallowMount(GroupEmptyState, {
     propsData: {
@@ -10,11 +16,20 @@ function createComponent(props) {
       settingsPath: '/path/to/settings',
       svgPath: '/path/to/empty-group-illustration.svg',
     },
+    stubs: {
+      GlEmptyState: MockGlEmptyState,
+    },
   });
 }
 
 describe('GroupEmptyState', () => {
-  const supportedStates = [
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each([
     metricStates.NO_DATA,
     metricStates.TIMEOUT,
     metricStates.CONNECTION_FAILED,
@@ -22,13 +37,17 @@ describe('GroupEmptyState', () => {
     metricStates.LOADING,
     metricStates.UNKNOWN_ERROR,
     'FOO STATE', // does not fail with unknown states
-  ];
+  ])('given state %s', selectedState => {
+    beforeEach(() => {
+      wrapper = createComponent({ selectedState });
+    });
 
-  it.each(supportedStates)('Renders an empty state for %s', selectedState => {
-    const wrapper = createComponent({ selectedState });
+    it('renders the slotted content', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
 
-    expect(wrapper.element).toMatchSnapshot();
-    // slot is not rendered by the stub, test it separately
-    expect(wrapper.vm.currentState.slottedDescription).toMatchSnapshot();
+    it('passes the expected props to GlEmptyState', () => {
+      expect(wrapper.find(MockGlEmptyState).props()).toMatchSnapshot();
+    });
   });
 });
diff --git a/spec/frontend/monitoring/router_spec.js b/spec/frontend/monitoring/router_spec.js
index 8b97c8ed125..2bf2065b178 100644
--- a/spec/frontend/monitoring/router_spec.js
+++ b/spec/frontend/monitoring/router_spec.js
@@ -105,8 +105,7 @@ describe('Monitoring router', () => {
       path                                                     | currentDashboard
       ${'/panel/new'}                                          | ${undefined}
       ${'/dashboard.yml/panel/new'}                            | ${'dashboard.yml'}
-      ${'/config/prometheus/common_metrics.yml/panel/new'}     | ${'config/prometheus/common_metrics.yml'}
-      ${'/config%2Fprometheus%2Fcommon_metrics.yml/panel/new'} | ${'config/prometheus/common_metrics.yml'}
+      ${'/config%2Fprometheus%2Fcommon_metrics.yml/panel/new'} | ${'config%2Fprometheus%2Fcommon_metrics.yml'}
     `('"$path" renders page with dashboard "$currentDashboard"', ({ path, currentDashboard }) => {
       const wrapper = createWrapper(BASE_PATH, path);