Add latest changes from gitlab-org/gitlab@master

8 files changed, 518 insertions, 320 deletions

diff --git a/spec/frontend/blob/pipeline_tour_success_mock_data.js b/spec/frontend/blob/pipeline_tour_success_mock_data.js
index 7819fcce85d..9dea3969d63 100644
--- a/spec/frontend/blob/pipeline_tour_success_mock_data.js
+++ b/spec/frontend/blob/pipeline_tour_success_mock_data.js
@@ -1,5 +1,6 @@
 const modalProps = {
   goToPipelinesPath: 'some_pipeline_path',
+  projectMergeRequestsPath: 'some_mr_path',
   commitCookie: 'some_cookie',
   humanAccess: 'maintainer',
 };
diff --git a/spec/frontend/blob/pipeline_tour_success_modal_spec.js b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
index 9998cd7f91c..50db1675e13 100644
--- a/spec/frontend/blob/pipeline_tour_success_modal_spec.js
+++ b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
@@ -10,10 +10,7 @@ describe('PipelineTourSuccessModal', () => {
   let cookieSpy;
   let trackingSpy;
 
-  beforeEach(() => {
-    document.body.dataset.page = 'projects:blob:show';
-    trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
-
+  const createComponent = () => {
     wrapper = shallowMount(pipelineTourSuccess, {
       propsData: modalProps,
       stubs: {
@@ -21,13 +18,49 @@ describe('PipelineTourSuccessModal', () => {
         GlSprintf,
       },
     });
+  };
 
+  beforeEach(() => {
+    document.body.dataset.page = 'projects:blob:show';
+    trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
     cookieSpy = jest.spyOn(Cookies, 'remove');
+    createComponent();
   });
 
   afterEach(() => {
     wrapper.destroy();
     unmockTracking();
+    Cookies.remove(modalProps.commitCookie);
+  });
+
+  describe('when the commitCookie contains the mr path', () => {
+    const expectedMrPath = 'expected_mr_path';
+
+    beforeEach(() => {
+      Cookies.set(modalProps.commitCookie, expectedMrPath);
+      createComponent();
+    });
+
+    it('renders the path from the commit cookie for back to the merge request button', () => {
+      const goToMrBtn = wrapper.find({ ref: 'goToMergeRequest' });
+
+      expect(goToMrBtn.attributes('href')).toBe(expectedMrPath);
+    });
+  });
+
+  describe('when the commitCookie does not contain mr path', () => {
+    const expectedMrPath = modalProps.projectMergeRequestsPath;
+
+    beforeEach(() => {
+      Cookies.set(modalProps.commitCookie, true);
+      createComponent();
+    });
+
+    it('renders the path from projectMergeRequestsPath for back to the merge request button', () => {
+      const goToMrBtn = wrapper.find({ ref: 'goToMergeRequest' });
+
+      expect(goToMrBtn.attributes('href')).toBe(expectedMrPath);
+    });
   });
 
   it('has expected structure', () => {
@@ -58,7 +91,7 @@ describe('PipelineTourSuccessModal', () => {
 
     it('send an event when go to pipelines is clicked', () => {
       trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
-      const goToBtn = wrapper.find({ ref: 'goto' });
+      const goToBtn = wrapper.find({ ref: 'goToPipelines' });
       triggerEvent(goToBtn.element);
 
       expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
@@ -67,5 +100,17 @@ describe('PipelineTourSuccessModal', () => {
         value: '10',
       });
     });
+
+    it('sends an event when back to the merge request is clicked', () => {
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+      const goToBtn = wrapper.find({ ref: 'goToMergeRequest' });
+      triggerEvent(goToBtn.element);
+
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
+        label: 'congratulate_first_pipeline',
+        property: modalProps.humanAccess,
+        value: '20',
+      });
+    });
   });
 });
diff --git a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
index 4714d34dbec..6569fe11507 100644
--- a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
+++ b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
@@ -16,6 +16,7 @@ const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
 
 const dismissCookie = 'suggest_gitlab_ci_yml_99';
 const humanAccess = 'owner';
+const mergeRequestPath = '/some/path';
 
 describe('Suggest gitlab-ci.yml Popover', () => {
   let wrapper;
@@ -26,6 +27,7 @@ describe('Suggest gitlab-ci.yml Popover', () => {
         target,
         trackLabel,
         dismissKey,
+        mergeRequestPath,
         humanAccess,
       },
       stubs: {
diff --git a/spec/frontend/blob_edit/blob_bundle_spec.js b/spec/frontend/blob_edit/blob_bundle_spec.js
index 98fa96de124..a105b62586b 100644
--- a/spec/frontend/blob_edit/blob_bundle_spec.js
+++ b/spec/frontend/blob_edit/blob_bundle_spec.js
@@ -43,7 +43,8 @@ describe('BlobBundle', () => {
           data-target="#target"
           data-track-label="suggest_gitlab_ci_yml"
           data-dismiss-key="1"
-          data-human-access="owner">
+          data-human-access="owner"
+          data-merge-request-path="path/to/mr">
           <button id='commit-changes' class="js-commit-button"></button>
           <a class="btn btn-cancel" href="#"></a>
         </div>
diff --git a/spec/frontend/logs/mock_data.js b/spec/frontend/logs/mock_data.js
index f4c567a2ea3..3fabab4bc59 100644
--- a/spec/frontend/logs/mock_data.js
+++ b/spec/frontend/logs/mock_data.js
@@ -35,6 +35,7 @@ export const mockManagedApps = [
     status: 'connected',
     path: '/root/autodevops-deploy/-/clusters/15',
     gitlab_managed_apps_logs_path: '/root/autodevops-deploy/-/logs?cluster_id=15',
+    enable_advanced_logs_querying: true,
   },
   {
     cluster_type: 'project_type',
@@ -45,6 +46,7 @@ export const mockManagedApps = [
     status: 'connected',
     path: '/root/autodevops-deploy/-/clusters/16',
     gitlab_managed_apps_logs_path: null,
+    enable_advanced_logs_querying: false,
   },
 ];
 
diff --git a/spec/frontend/logs/stores/getters_spec.js b/spec/frontend/logs/stores/getters_spec.js
index 9d213d8c01f..bca1ce4ca92 100644
--- a/spec/frontend/logs/stores/getters_spec.js
+++ b/spec/frontend/logs/stores/getters_spec.js
@@ -1,7 +1,14 @@
 import { trace, showAdvancedFilters } from '~/logs/stores/getters';
 import logsPageState from '~/logs/stores/state';
 
-import { mockLogsResult, mockTrace, mockEnvName, mockEnvironments } from '../mock_data';
+import {
+  mockLogsResult,
+  mockTrace,
+  mockEnvName,
+  mockEnvironments,
+  mockManagedApps,
+  mockManagedAppName,
+} from '../mock_data';
 
 describe('Logs Store getters', () => {
   let state;
@@ -72,4 +79,43 @@ describe('Logs Store getters', () => {
       });
     });
   });
+
+  describe('when no managedApps are set', () => {
+    beforeEach(() => {
+      state.environments.current = null;
+      state.environments.options = [];
+      state.managedApps.current = mockManagedAppName;
+      state.managedApps.options = [];
+    });
+
+    it('returns false', () => {
+      expect(showAdvancedFilters(state)).toBe(false);
+    });
+  });
+
+  describe('when the managedApp supports filters', () => {
+    beforeEach(() => {
+      state.environments.current = null;
+      state.environments.options = mockEnvironments;
+      state.managedApps.current = mockManagedAppName;
+      state.managedApps.options = mockManagedApps;
+    });
+
+    it('returns true', () => {
+      expect(showAdvancedFilters(state)).toBe(true);
+    });
+  });
+
+  describe('when the managedApp does not support filters', () => {
+    beforeEach(() => {
+      state.environments.current = null;
+      state.environments.options = mockEnvironments;
+      state.managedApps.options = mockManagedApps;
+      state.managedApps.current = mockManagedApps[1].name;
+    });
+
+    it('returns false', () => {
+      expect(showAdvancedFilters(state)).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap b/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap
index 103b53cb280..70a60a2f746 100644
--- a/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap
+++ b/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap
@@ -1,324 +1,425 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Resizable Skeleton Loader default setup renders the bars, labels, and grid with correct position, size, and rx percentages 1`] = `
-<gl-skeleton-loader-stub
-  baseurl=""
-  height="130"
-  preserveaspectratio="xMidYMid meet"
-  width="400"
+<svg
+  class="gl-skeleton-loader"
+  preserveAspectRatio="xMidYMid meet"
+  version="1.1"
+  viewBox="0 0 400 130"
 >
   <rect
-    data-testid="skeleton-chart-grid"
-    height="1px"
-    width="100%"
+    clip-path="url(#null-idClip)"
+    height="130"
+    style="fill: url(#null-idGradient);"
+    width="400"
     x="0"
-    y="30%"
-  />
-  <rect
-    data-testid="skeleton-chart-grid"
-    height="1px"
-    width="100%"
-    x="0"
-    y="60%"
-  />
-  <rect
-    data-testid="skeleton-chart-grid"
-    height="1px"
-    width="100%"
-    x="0"
-    y="90%"
-  />
-   
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="5%"
-    rx="0.4%"
-    width="6%"
-    x="5.875%"
-    y="85%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="7%"
-    rx="0.4%"
-    width="6%"
-    x="17.625%"
-    y="83%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="9%"
-    rx="0.4%"
-    width="6%"
-    x="29.375%"
-    y="81%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="14%"
-    rx="0.4%"
-    width="6%"
-    x="41.125%"
-    y="76%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="21%"
-    rx="0.4%"
-    width="6%"
-    x="52.875%"
-    y="69%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="35%"
-    rx="0.4%"
-    width="6%"
-    x="64.625%"
-    y="55%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="50%"
-    rx="0.4%"
-    width="6%"
-    x="76.375%"
-    y="40%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="80%"
-    rx="0.4%"
-    width="6%"
-    x="88.125%"
-    y="10%"
-  />
-   
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="6.875%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="18.625%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="30.375%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="42.125%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="53.875%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="65.625%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="77.375%"
-    y="95%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="5%"
-    rx="0.4%"
-    width="4%"
-    x="89.125%"
-    y="95%"
-  />
-</gl-skeleton-loader-stub>
+    y="0"
+  />
+  <defs>
+    <clippath
+      id="null-idClip"
+    >
+      <rect
+        data-testid="skeleton-chart-grid"
+        height="1px"
+        width="100%"
+        x="0"
+        y="30%"
+      />
+      <rect
+        data-testid="skeleton-chart-grid"
+        height="1px"
+        width="100%"
+        x="0"
+        y="60%"
+      />
+      <rect
+        data-testid="skeleton-chart-grid"
+        height="1px"
+        width="100%"
+        x="0"
+        y="90%"
+      />
+       
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="5%"
+        rx="0.4%"
+        width="6%"
+        x="5.875%"
+        y="85%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="7%"
+        rx="0.4%"
+        width="6%"
+        x="17.625%"
+        y="83%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="9%"
+        rx="0.4%"
+        width="6%"
+        x="29.375%"
+        y="81%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="14%"
+        rx="0.4%"
+        width="6%"
+        x="41.125%"
+        y="76%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="21%"
+        rx="0.4%"
+        width="6%"
+        x="52.875%"
+        y="69%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="35%"
+        rx="0.4%"
+        width="6%"
+        x="64.625%"
+        y="55%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="50%"
+        rx="0.4%"
+        width="6%"
+        x="76.375%"
+        y="40%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="80%"
+        rx="0.4%"
+        width="6%"
+        x="88.125%"
+        y="10%"
+      />
+       
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="6.875%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="18.625%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="30.375%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="42.125%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="53.875%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="65.625%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="77.375%"
+        y="95%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="5%"
+        rx="0.4%"
+        width="4%"
+        x="89.125%"
+        y="95%"
+      />
+    </clippath>
+    <lineargradient
+      id="null-idGradient"
+    >
+      <stop
+        class="primary-stop"
+        offset="0%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-2; 1"
+        />
+      </stop>
+      <stop
+        class="secondary-stop"
+        offset="50%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1.5; 1.5"
+        />
+      </stop>
+      <stop
+        class="primary-stop"
+        offset="100%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1; 2"
+        />
+      </stop>
+    </lineargradient>
+  </defs>
+</svg>
 `;
 
 exports[`Resizable Skeleton Loader with custom settings renders the correct position, and size percentages for bars and labels with different settings 1`] = `
-<gl-skeleton-loader-stub
-  baseurl=""
-  height="130"
-  preserveaspectratio="xMidYMid meet"
-  uniquekey=""
-  width="400"
+<svg
+  class="gl-skeleton-loader"
+  preserveAspectRatio="xMidYMid meet"
+  version="1.1"
+  viewBox="0 0 400 130"
 >
   <rect
-    data-testid="skeleton-chart-grid"
-    height="1px"
-    width="100%"
+    clip-path="url(#-idClip)"
+    height="130"
+    style="fill: url(#-idGradient);"
+    width="400"
     x="0"
-    y="30%"
-  />
-  <rect
-    data-testid="skeleton-chart-grid"
-    height="1px"
-    width="100%"
-    x="0"
-    y="60%"
-  />
-  <rect
-    data-testid="skeleton-chart-grid"
-    height="1px"
-    width="100%"
-    x="0"
-    y="90%"
-  />
-   
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="5%"
-    rx="0.6%"
-    width="3%"
-    x="6.0625%"
-    y="85%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="7%"
-    rx="0.6%"
-    width="3%"
-    x="18.1875%"
-    y="83%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="9%"
-    rx="0.6%"
-    width="3%"
-    x="30.3125%"
-    y="81%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="14%"
-    rx="0.6%"
-    width="3%"
-    x="42.4375%"
-    y="76%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="21%"
-    rx="0.6%"
-    width="3%"
-    x="54.5625%"
-    y="69%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="35%"
-    rx="0.6%"
-    width="3%"
-    x="66.6875%"
-    y="55%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="50%"
-    rx="0.6%"
-    width="3%"
-    x="78.8125%"
-    y="40%"
-  />
-  <rect
-    data-testid="skeleton-chart-bar"
-    height="80%"
-    rx="0.6%"
-    width="3%"
-    x="90.9375%"
-    y="10%"
-  />
-   
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="4.0625%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="16.1875%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="28.3125%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="40.4375%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="52.5625%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="64.6875%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="76.8125%"
-    y="98%"
-  />
-  <rect
-    data-testid="skeleton-chart-label"
-    height="2%"
-    rx="0.6%"
-    width="7%"
-    x="88.9375%"
-    y="98%"
-  />
-</gl-skeleton-loader-stub>
+    y="0"
+  />
+  <defs>
+    <clippath
+      id="-idClip"
+    >
+      <rect
+        data-testid="skeleton-chart-grid"
+        height="1px"
+        width="100%"
+        x="0"
+        y="30%"
+      />
+      <rect
+        data-testid="skeleton-chart-grid"
+        height="1px"
+        width="100%"
+        x="0"
+        y="60%"
+      />
+      <rect
+        data-testid="skeleton-chart-grid"
+        height="1px"
+        width="100%"
+        x="0"
+        y="90%"
+      />
+       
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="5%"
+        rx="0.6%"
+        width="3%"
+        x="6.0625%"
+        y="85%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="7%"
+        rx="0.6%"
+        width="3%"
+        x="18.1875%"
+        y="83%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="9%"
+        rx="0.6%"
+        width="3%"
+        x="30.3125%"
+        y="81%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="14%"
+        rx="0.6%"
+        width="3%"
+        x="42.4375%"
+        y="76%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="21%"
+        rx="0.6%"
+        width="3%"
+        x="54.5625%"
+        y="69%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="35%"
+        rx="0.6%"
+        width="3%"
+        x="66.6875%"
+        y="55%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="50%"
+        rx="0.6%"
+        width="3%"
+        x="78.8125%"
+        y="40%"
+      />
+      <rect
+        data-testid="skeleton-chart-bar"
+        height="80%"
+        rx="0.6%"
+        width="3%"
+        x="90.9375%"
+        y="10%"
+      />
+       
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="4.0625%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="16.1875%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="28.3125%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="40.4375%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="52.5625%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="64.6875%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="76.8125%"
+        y="98%"
+      />
+      <rect
+        data-testid="skeleton-chart-label"
+        height="2%"
+        rx="0.6%"
+        width="7%"
+        x="88.9375%"
+        y="98%"
+      />
+    </clippath>
+    <lineargradient
+      id="-idGradient"
+    >
+      <stop
+        class="primary-stop"
+        offset="0%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-2; 1"
+        />
+      </stop>
+      <stop
+        class="secondary-stop"
+        offset="50%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1.5; 1.5"
+        />
+      </stop>
+      <stop
+        class="primary-stop"
+        offset="100%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1; 2"
+        />
+      </stop>
+    </lineargradient>
+  </defs>
+</svg>
 `;
diff --git a/spec/frontend/vue_shared/components/resizable_chart/skeleton_loader_spec.js b/spec/frontend/vue_shared/components/resizable_chart/skeleton_loader_spec.js
index 7facd02e596..bfc3aeb0303 100644
--- a/spec/frontend/vue_shared/components/resizable_chart/skeleton_loader_spec.js
+++ b/spec/frontend/vue_shared/components/resizable_chart/skeleton_loader_spec.js
@@ -1,11 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 
 describe('Resizable Skeleton Loader', () => {
   let wrapper;
 
   const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(ChartSkeletonLoader, {
+    wrapper = mount(ChartSkeletonLoader, {
       propsData,
     });
   };