Move callout to vue file and remove svg from data function to improve performance

app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.js → app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue

-import Vue from 'vue';
-import Cookies from 'js-cookie';
-import Translate from '../../vue_shared/translate';
-import illustrationSvg from '../icons/intro_illustration.svg';
+<script>
+  import Vue from 'vue';
+  import Cookies from 'js-cookie';
+  import Translate from '../../vue_shared/translate';
+  import illustrationSvg from '../icons/intro_illustration.svg';
 
-Vue.use(Translate);
+  Vue.use(Translate);
 
-const cookieKey = 'pipeline_schedules_callout_dismissed';
+  const cookieKey = 'pipeline_schedules_callout_dismissed';
 
-export default {
+  export default {
     name: 'PipelineSchedulesCallout',
     data() {
       return {
         docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
-      illustrationSvg,
         calloutDismissed: Cookies.get(cookieKey) === 'true',
       };
     },
@@ -22,14 +22,24 @@ export default {
         Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
       },
     },
-  template: `
-    <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
+    created() {
+      this.illustrationSvg = illustrationSvg;
+    },
+  };
+</script>
+<template>
+  <div
+    v-if="!calloutDismissed"
+    class="pipeline-schedules-user-callout user-callout">
     <div class="bordered-box landing content-block">
       <button
         id="dismiss-callout-btn"
         class="btn btn-default close"
         @click="dismissCallout">
-          <i class="fa fa-times"></i>
+        <i
+          aria-hidden="true"
+          class="fa fa-times">
+        </i>
       </button>
       <div class="svg-container" v-html="illustrationSvg"></div>
       <div class="user-callout-copy">
@@ -46,5 +56,4 @@ export default {
       </div>
     </div>
   </div>
-  `,
-};
+</template>
\ No newline at end of file

app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js

 import Vue from 'vue';
-import PipelineSchedulesCallout from './components/pipeline_schedules_callout';
+import PipelineSchedulesCallout from './components/pipeline_schedules_callout.vue';
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#pipeline-schedules-callout',

changelogs/unreleased/34371-pipeline-schedule-vue-files.yml

+---
+title: Improves performance of vue code by using vue files and moving svg out of data
+  function in pipeline schedule callout
+merge_request:
+author:
+type: other

spec/javascripts/pipeline_schedules/pipeline_schedule_callout_spec.js

 import Vue from 'vue';
 import Cookies from 'js-cookie';
-import PipelineSchedulesCallout from '~/pipeline_schedules/components/pipeline_schedules_callout';
+import PipelineSchedulesCallout from '~/pipeline_schedules/components/pipeline_schedules_callout.vue';
 
 const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
 const cookieKey = 'pipeline_schedules_callout_dismissed';