Added constants and missing i18n

2 files changed, 15 insertions, 14 deletions

diff --git a/app/assets/javascripts/issues/components/issue.vue b/app/assets/javascripts/issues/components/issue.vue
index 020015617f5..1ce8ac64223 100644
--- a/app/assets/javascripts/issues/components/issue.vue
+++ b/app/assets/javascripts/issues/components/issue.vue
@@ -5,7 +5,8 @@ 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';
 import { getDayDifference } from '~/lib/utils/datetime_utility';
-import { ISSUE_STATES } from '../constants';
+import { ISSUE_STATES, MAX_ASSIGNEES_RENDER } from '../constants';
+import { sprintf, __ } from '~/locale';
 
 export default {
   components: {
@@ -30,12 +31,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      maxRender: 3,
-      maxCounter: 99,
-    };
-  },
   computed: {
     issueClassesList() {
       const classList = ['issue'];
@@ -58,13 +53,15 @@ export default {
       return getDayDifference(new Date(), new Date(this.issue.due_date)) < 0;
     },
     shouldAssigneeRenderCounter() {
-      return this.issue.assignees.length - this.maxRender > 0;
+      return this.issue.assignees.length - MAX_ASSIGNEES_RENDER > 0;
     },
     moreAssigneesCount() {
-      return this.issue.assignees.length - this.maxRender;
+      return this.issue.assignees.length - MAX_ASSIGNEES_RENDER;
     },
     assigneeCounterTooltip() {
-      return `+${this.moreAssigneesCount} more assignees`;
+      return sprintf('+%{moreAssigneesCount} more assignees', {
+        moreAssigneesCount: this.moreAssigneesCount,
+      });
     },
     issueCommentsURL() {
       return `${this.issue.web_url}#notes`;
@@ -76,12 +73,12 @@ export default {
       return this.issue.state === ISSUE_STATES.CLOSED;
     },
     assigneesToRender() {
-      return this.issue.assignees.filter((assignee, index) => index < this.maxRender);
+      return this.issue.assignees.filter((assignee, index) => index < MAX_ASSIGNEES_RENDER);
     },
   },
   methods: {
     getAvatarTitle(assignee) {
-      return `Assigned to ${assignee.name}`;
+      return sprintf('Assigned to %{name}', { name: assignee.name });
     },
     labelStyle(label) {
       return {
@@ -90,6 +87,7 @@ export default {
       };
     },
   },
+  confidentialText: __('Confidential'),
 };
 </script>
 <template>
@@ -111,8 +109,8 @@ export default {
               <span
                 v-if="issue.confidential"
                 v-gl-tooltip
-                :title="__('Confidential')"
-                :aria-label="__('Confidential')"
+                :title="$options.confidentialText"
+                :aria-label="$options.confidentialText"
               >
                 <icon name="eye-slash" class="align-text-bottom js-issue-confidential-icon" />
               </span>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 88e8b581ea5..1da12cd9d18 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1343,6 +1343,9 @@ msgstr ""
 msgid "Assigned to me"
 msgstr ""
 
+msgid "Assigned to %{assignee}"
+msgstr ""
+
 msgid "Assignee"
 msgid_plural "%d Assignees"
 msgstr[0] ""