Use gl-sprintf in security reports app

ee/app/assets/javascripts/vue_shared/security_reports/card_security_reports_app.vue

 <script>
 import { isUndefined } from 'underscore';
-import { s__, sprintf } from '~/locale';
-import { GlEmptyState } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { GlEmptyState, GlSprintf } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -10,6 +10,7 @@ import SecurityDashboardApp from 'ee/security_dashboard/components/app.vue';
 export default {
   components: {
     GlEmptyState,
+    GlSprintf,
     UserAvatarLink,
     Icon,
     TimeagoTooltip,
@@ -83,15 +84,6 @@ export default {
     },
   },
   computed: {
-    headline() {
-      return sprintf(
-        s__('SecurityDashboard|Pipeline %{pipelineLink} triggered'),
-        {
-          pipelineLink: `<a href="${this.pipeline.path}">#${this.pipeline.id}</a>`,
-        },
-        false,
-      );
-    },
     emptyStateDescription() {
       return s__(
         `SecurityDashboard|
@@ -108,17 +100,28 @@ export default {
       <div class="card security-dashboard prepend-top-default">
         <div class="card-header border-bottom-0">
           <span class="js-security-dashboard-left">
-            <span v-html="headline"></span>
-            <timeago-tooltip :time="pipeline.created" />
-            {{ __('by') }}
-            <user-avatar-link
-              :link-href="triggeredBy.path"
-              :img-src="triggeredBy.avatarPath"
-              :img-alt="triggeredBy.name"
-              :img-size="24"
-              :username="triggeredBy.name"
-              class="avatar-image-container"
-            />
+            <gl-sprintf
+              :message="
+                s__('SecurityDashboard|Pipeline %{pipelineLink} triggered %{timeago} by %{user}')
+              "
+            >
+              <template #pipelineLink>
+                <a :href="pipeline.path">#{{ pipeline.id }}</a>
+              </template>
+              <template #timeago>
+                <timeago-tooltip :time="pipeline.created" />
+              </template>
+              <template #user>
+                <user-avatar-link
+                  :link-href="triggeredBy.path"
+                  :img-src="triggeredBy.avatarPath"
+                  :img-alt="triggeredBy.name"
+                  :img-size="24"
+                  :username="triggeredBy.name"
+                  class="avatar-image-container"
+                />
+              </template>
+            </gl-sprintf>
           </span>
           <span class="js-security-dashboard-right pull-right">
             <icon name="branch" />

ee/spec/frontend/vue_shared/security_reports/card_security_reports_app_spec.js

@@ -72,16 +72,6 @@ describe('Card security reports app', () => {
     mock.restore();
   });
 
-  describe('computed properties', () => {
-    describe('headline', () => {
-      it('renders `Pipeline <link> triggered`', () => {
-        expect(wrapper.vm.headline).toBe(
-          `Pipeline <a href="${TEST_HOST}/pipeline">#55</a> triggered`,
-        );
-      });
-    });
-  });
-
   describe('Headline renders', () => {
     it('renders pipeline metadata information', () => {
       const element = wrapper.find('.card-header .js-security-dashboard-left');

locale/gitlab.pot

@@ -15291,7 +15291,7 @@ msgstr ""
 msgid "SecurityDashboard|More information"
 msgstr ""
 
-msgid "SecurityDashboard|Pipeline %{pipelineLink} triggered"
+msgid "SecurityDashboard|Pipeline %{pipelineLink} triggered %{timeago} by %{user}"
 msgstr ""
 
 msgid "SecurityDashboard|Project"