Merge branch...

Merge branch '241954-remove-v-html-from-app-assets-javascripts-pages-projects-pipeline_schedules-shared' into 'master'

Remove v-html from app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

Closes #241954

See merge request gitlab-org/gitlab!41479

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import { GlIcon } from '@gitlab/ui';
 import Translate from '../../../../../vue_shared/translate';
-// Full path is needed for Jest to be able to correctly mock this file
-import illustrationSvg from '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
 Vue.use(Translate);
@@ -20,12 +17,10 @@ export default {
   data() {
     return {
       docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
+      imageUrl: document.getElementById('pipeline-schedules-callout').dataset.imageUrl,
       calloutDismissed: parseBoolean(Cookies.get(cookieKey)),
     };
   },
-  created() {
-    this.illustrationSvg = illustrationSvg;
-  },
   methods: {
     dismissCallout() {
       this.calloutDismissed = true;
@@ -40,7 +35,9 @@ export default {
       <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout">
         <gl-icon name="close" aria-hidden="true" />
       </button>
-      <div class="svg-container" v-html="illustrationSvg"></div>
+      <div class="svg-container">
+        <img :src="imageUrl" />
+      </div>
       <div class="user-callout-copy">
         <h4>{{ __('Scheduling Pipelines') }}</h4>
         <p>

app/views/projects/pipeline_schedules/index.html.haml

@@ -2,7 +2,7 @@
 
 - page_title _("Pipeline Schedules")
 
-#pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules') } }
+#pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules'), image_url: image_path('pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg') } }
 .top-area
   - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
   = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope

spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js

 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import PipelineSchedulesCallout from '~/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue';
-import '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
-
-jest.mock(
-  '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg',
-  () => '<svg></svg>',
-);
 
 const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
 const cookieKey = 'pipeline_schedules_callout_dismissed';
 const docsUrl = 'help/ci/scheduled_pipelines';
+const imageUrl = 'pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
 
 describe('Pipeline Schedule Callout', () => {
   let calloutComponent;
 
   beforeEach(() => {
     setFixtures(`
-      <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div>
+      <div id='pipeline-schedules-callout' data-docs-url=${docsUrl} data-image-url=${imageUrl}></div>
     `);
   });
 
@@ -30,13 +25,13 @@ describe('Pipeline Schedule Callout', () => {
       expect(calloutComponent).toBeDefined();
     });
 
-    it('correctly sets illustrationSvg', () => {
-      expect(calloutComponent.illustrationSvg).toContain('<svg');
-    });
-
     it('correctly sets docsUrl', () => {
       expect(calloutComponent.docsUrl).toContain(docsUrl);
     });
+
+    it('correctly sets imageUrl', () => {
+      expect(calloutComponent.imageUrl).toContain(imageUrl);
+    });
   });
 
   describe(`when ${cookieKey} cookie is set`, () => {
@@ -68,8 +63,8 @@ describe('Pipeline Schedule Callout', () => {
       expect(calloutComponent.$el.querySelector('.bordered-box')).not.toBeNull();
     });
 
-    it('renders the callout svg', () => {
-      expect(calloutComponent.$el.outerHTML).toContain('<svg');
+    it('renders the callout img', () => {
+      expect(calloutComponent.$el.outerHTML).toContain('<img');
     });
 
     it('renders the callout title', () => {