1 files changed, 24 insertions, 9 deletions

diff --git a/app/assets/javascripts/issues/show/components/edited.vue b/app/assets/javascripts/issues/show/components/edited.vue
index 4c5f783cd66..5138a4530e9 100644
--- a/app/assets/javascripts/issues/show/components/edited.vue
+++ b/app/assets/javascripts/issues/show/components/edited.vue
@@ -1,10 +1,11 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
+import { GlSprintf } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   components: {
     TimeAgoTooltip,
+    GlSprintf,
   },
   props: {
     updatedAt: {
@@ -33,13 +34,27 @@ export default {
 
 <template>
   <small class="edited-text js-issue-widgets">
-    Edited
-    <time-ago-tooltip v-if="updatedAt" :time="updatedAt" tooltip-placement="bottom" />
-    <span v-if="hasUpdatedBy">
-      by
-      <a :href="updatedByPath" class="author-link">
-        <span>{{ updatedByName }}</span>
-      </a>
-    </span>
+    <gl-sprintf v-if="!hasUpdatedBy" :message="__('Edited %{timeago}')">
+      <template #timeago>
+        <time-ago-tooltip :time="updatedAt" tooltip-placement="bottom" />
+      </template>
+    </gl-sprintf>
+    <gl-sprintf v-else-if="!updatedAt" :message="__('Edited by %{author}')">
+      <template #author>
+        <a :href="updatedByPath" class="author-link gl-hover-text-decoration-underline">
+          <span>{{ updatedByName }}</span>
+        </a>
+      </template>
+    </gl-sprintf>
+    <gl-sprintf v-else :message="__('Edited %{timeago} by %{author}')">
+      <template #timeago>
+        <time-ago-tooltip :time="updatedAt" tooltip-placement="bottom" />
+      </template>
+      <template #author>
+        <a :href="updatedByPath" class="author-link gl-hover-text-decoration-underline">
+          <span>{{ updatedByName }}</span>
+        </a>
+      </template>
+    </gl-sprintf>
   </small>
 </template>