Merge branch '241862-Replace-v-html' into 'master'

Replace v-html with the gl-icon component in time_ago.vue

See merge request gitlab-org/gitlab!41457

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

 <script>
-/* eslint-disable vue/no-v-html */
-import iconTimerSvg from 'icons/_icon_timer.svg';
+import { GlIcon } from '@gitlab/ui';
 import '~/lib/utils/datetime_utility';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -9,6 +8,7 @@ export default {
   directives: {
     tooltip,
   },
+  components: { GlIcon },
   mixins: [timeagoMixin],
   props: {
     finishedTime: {
@@ -20,11 +20,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      iconTimerSvg,
-    };
-  },
   computed: {
     hasDuration() {
       return this.duration > 0;
@@ -60,11 +55,12 @@ export default {
     <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Duration') }}</div>
     <div class="table-mobile-content">
       <p v-if="hasDuration" class="duration">
-        <span v-html="iconTimerSvg"> </span> {{ durationFormatted }}
+        <gl-icon name="timer" class="gl-vertical-align-baseline!" aria-hidden="true" />
+        {{ durationFormatted }}
       </p>
 
       <p v-if="hasFinishedTime" class="finished-at d-none d-sm-none d-md-block">
-        <i class="fa fa-calendar" aria-hidden="true"> </i>
+        <gl-icon name="calendar" class="gl-vertical-align-baseline!" aria-hidden="true" />
 
         <time
           v-tooltip

changelogs/unreleased/241862-Replace-v-html.yml

+---
+title: Replace v-html with the gl-icon component in time_ago.vue
+merge_request: 41457
+author: Kev @KevSlashNull
+type: other

spec/frontend/pipelines/time_ago_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import TimeAgo from '~/pipelines/components/pipelines_list/time_ago.vue';
 
 describe('Timeago component', () => {
@@ -22,14 +23,19 @@ describe('Timeago component', () => {
     wrapper = null;
   });
 
+  const duration = () => wrapper.find('.duration');
+  const finishedAt = () => wrapper.find('.finished-at');
+
   describe('with duration', () => {
     beforeEach(() => {
       createComponent({ duration: 10, finishedTime: '' });
     });
 
     it('should render duration and timer svg', () => {
-      expect(wrapper.find('.duration').exists()).toBe(true);
-      expect(wrapper.find('.duration svg').exists()).toBe(true);
+      const icon = duration().find(GlIcon);
+
+      expect(duration().exists()).toBe(true);
+      expect(icon.props('name')).toBe('timer');
     });
   });
 
@@ -39,7 +45,7 @@ describe('Timeago component', () => {
     });
 
     it('should not render duration and timer svg', () => {
-      expect(wrapper.find('.duration').exists()).toBe(false);
+      expect(duration().exists()).toBe(false);
     });
   });
 
@@ -49,9 +55,12 @@ describe('Timeago component', () => {
     });
 
     it('should render time and calendar icon', () => {
-      expect(wrapper.find('.finished-at').exists()).toBe(true);
-      expect(wrapper.find('.finished-at i.fa-calendar').exists()).toBe(true);
-      expect(wrapper.find('.finished-at time').exists()).toBe(true);
+      const icon = finishedAt().find(GlIcon);
+      const time = finishedAt().find('time');
+
+      expect(finishedAt().exists()).toBe(true);
+      expect(icon.props('name')).toBe('calendar');
+      expect(time.exists()).toBe(true);
     });
   });
 
@@ -61,7 +70,7 @@ describe('Timeago component', () => {
     });
 
     it('should not render time and calendar icon', () => {
-      expect(wrapper.find('.finished-at').exists()).toBe(false);
+      expect(finishedAt().exists()).toBe(false);
     });
   });
 });