Vue-i18n: app/assets/javascripts/vue_shared directory

i18n linting for .vue files under the
app/assets/javascripts/vue_shared directory

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import { pluralize } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
 import { getCommitIconMap } from '~/ide/utils';
@@ -69,7 +68,7 @@ export default {
         });
       } else if (this.file.changed && this.file.staged) {
         return sprintf(__('Unstaged and staged %{type}'), {
-          type: pluralize(type),
+          type,
         });
       }

app/assets/javascripts/vue_shared/components/commit.vue

 <script>
 import _ from 'underscore';
 import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import UserAvatarLink from './user_avatar/user_avatar_link.vue';
 import Icon from '../../vue_shared/components/icon.vue';
@@ -129,7 +130,9 @@ export default {
      * @returns {String}
      */
     userImageAltDescription() {
-      return this.author && this.author.username ? `${this.author.username}'s avatar` : null;
+      return this.author && this.author.username
+        ? sprintf(__("%{username}'s avatar"), { username: this.author.username })
+        : null;
     },
   },
 };
@@ -180,7 +183,7 @@ export default {
           {{ title }}
         </gl-link>
       </tooltip-on-truncate>
-      <span v-else> Can't find HEAD commit for this branch </span>
+      <span v-else>{{ __("Can't find HEAD commit for this branch") }}</span>
     </div>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue

@@ -91,7 +91,9 @@ export default {
         |
       </template>
       <template v-if="hasDimensions">
-        <strong>W</strong>: {{ width }} | <strong>H</strong>: {{ height }}
+        <strong>{{ s__('ImageViewerDimensions|W') }}</strong
+        >: {{ width }} | <strong>{{ s__('ImageViewerDimensions|H') }}</strong
+        >: {{ height }}
       </template>
     </p>
   </div>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue

@@ -40,7 +40,7 @@ export default {
     this.fetchMarkdownPreview();
   },
   destroyed() {
-    if (this.isLoading) axiosSource.cancel('Cancelling Preview');
+    if (this.isLoading) axiosSource.cancel(__('Cancelling Preview'));
   },
   methods: {
     fetchMarkdownPreview() {

app/assets/javascripts/vue_shared/components/deprecated_modal.vue

 <script>
 /* eslint-disable vue/require-default-prop */
+import { __ } from '~/locale';
+
 export default {
   name: 'DeprecatedModal', // use GlModal instead
@@ -39,7 +41,7 @@ export default {
     closeButtonLabel: {
       type: String,
       required: false,
-      default: 'Cancel',
+      default: __('Cancel'),
     },
     primaryButtonLabel: {
       type: String,
@@ -94,7 +96,7 @@ export default {
                 type="button"
                 class="close float-right"
                 data-dismiss="modal"
-                aria-label="Close"
+                :aria-label="__('Close')"
                 @click="emitCancel($event)"
               >
                 <span aria-hidden="true">&times;</span>

app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue

@@ -69,7 +69,7 @@ export default {
       data-display="static"
       data-toggle="dropdown"
     >
-      <icon name="arrow-down" aria-label="toggle dropdown" />
+      <icon name="arrow-down" :aria-label="__('toggle dropdown')" />
     </button>
     <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top">
       <template v-for="(action, index) in actions">

app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue

@@ -115,7 +115,7 @@ export default {
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
-        aria-label="Expand dropdown"
+        :aria-label="__('Expand dropdown')"
       >
         <icon name="angle-down" :size="12" />
       </button>
@@ -125,7 +125,7 @@ export default {
             ref="searchInput"
             v-model="filter"
             type="search"
-            placeholder="Filter"
+            :placeholder="__('Filter')"
             class="js-filtered-dropdown-input dropdown-input-field"
           />
           <icon class="dropdown-input-search" name="search" />

app/assets/javascripts/vue_shared/components/header_ci_component.vue

 <script>
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
 import UserAvatarImage from './user_avatar/user_avatar_image.vue';
@@ -65,7 +66,7 @@ export default {
   computed: {
     userAvatarAltText() {
-      return `${this.user.name}'s avatar`;
+      return sprintf(__(`%{username}'s avatar`), { username: this.user.name });
     },
   },
@@ -87,16 +88,12 @@ export default {
       <strong> {{ itemName }} #{{ itemId }} </strong>
-      <template v-if="shouldRenderTriggeredLabel">
-        triggered
-      </template>
-      <template v-else>
-        created
-      </template>
+      <template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template>
+      <template v-else>{{ __('created') }}</template>
       <timeago-tooltip :time="time" />
-      by
+      {{ __('by') }}
       <template v-if="user">
         <gl-link

app/assets/javascripts/vue_shared/components/issue/issue_warning.vue

 <script>
 import { GlLink } from '@gitlab/ui';
 import _ from 'underscore';
-import { sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import icon from '../../../vue_shared/components/icon.vue';
 function buildDocsLinkStart(path) {
@@ -47,7 +47,9 @@ export default {
     },
     confidentialAndLockedDiscussionText() {
       return sprintf(
-        'This issue is %{confidentialLinkStart}confidential%{linkEnd} and %{lockedLinkStart}locked%{linkEnd}.',
+        __(
+          'This issue is %{confidentialLinkStart}confidential%{linkEnd} and %{lockedLinkStart}locked%{linkEnd}.',
+        ),
         {
           confidentialLinkStart: buildDocsLinkStart(this.confidentialIssueDocsPath),
           lockedLinkStart: buildDocsLinkStart(this.lockedIssueDocsPath),
@@ -66,7 +68,7 @@ export default {
     <span v-if="isLockedAndConfidential">
       <span v-html="confidentialAndLockedDiscussionText"></span>
       {{
-        __(`People without permission will never get a notification and won't be able to comment.`)
+        __("People without permission will never get a notification and won't be able to comment.")
       }}
     </span>

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -160,8 +160,8 @@ export default {
       :disabled="removeDisabled"
       type="button"
       class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button mr-xl-0 align-self-xl-center"
-      title="Remove"
-      aria-label="Remove"
+      :title="__('Remove')"
+      :aria-label="__('Remove')"
       @click="onRemoveRequest"
     >
       <icon :size="16" class="btn-item-remove-icon" name="close" />

app/assets/javascripts/vue_shared/components/markdown/field.vue

 <script>
 import $ from 'jquery';
 import _ from 'underscore';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
 import Flash from '../../../flash';
 import GLForm from '../../../gl_form';
@@ -118,6 +118,18 @@ export default {
     lineType() {
       return this.line ? this.line.type : '';
     },
+    addMultipleToDiscussionWarning() {
+      return sprintf(
+        __(
+          '%{icon}You are about to add %{usersTag} people to the discussion. Proceed with caution.',
+        ),
+        {
+          icon: '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>',
+          usersTag: `<strong><span class="js-referenced-users-count">${this.referencedUsers.length}</span></strong>`,
+        },
+        false,
+      );
+    },
   },
   mounted() {
     /*
@@ -172,7 +184,7 @@ export default {
     renderMarkdown(data = {}) {
       this.markdownPreviewLoading = false;
-      this.markdownPreview = data.body || 'Nothing to preview.';
+      this.markdownPreview = data.body || __('Nothing to preview.');
       if (data.references) {
         this.referencedCommands = data.references.commands;
@@ -207,7 +219,11 @@ export default {
     <div v-show="!previewMarkdown" class="md-write-holder">
       <div class="zen-backdrop">
         <slot name="textarea"></slot>
-        <a class="zen-control zen-control-leave js-zen-leave" href="#" aria-label="Enter zen mode">
+        <a
+          class="zen-control zen-control-leave js-zen-leave"
+          href="#"
+          :aria-label="__('Enter zen mode')"
+        >
           <icon :size="32" name="screen-normal" />
         </a>
         <markdown-toolbar
@@ -246,13 +262,7 @@ export default {
     <template v-if="previewMarkdown && !markdownPreviewLoading">
       <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
       <div v-if="shouldShowReferencedUsers" class="referenced-users">
-        <span>
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> You are about to add
-          <strong>
-            <span class="js-referenced-users-count">{{ referencedUsers.length }}</span>
-          </strong>
-          people to the discussion. Proceed with caution.
-        </span>
+        <span v-html="addMultipleToDiscussionWarning"></span>
       </div>
     </template>
   </div>

app/assets/javascripts/vue_shared/components/markdown/suggestions.vue

 <script>
 import Vue from 'vue';
+import { __ } from '~/locale';
 import SuggestionDiff from './suggestion_diff.vue';
 import Flash from '~/flash';
@@ -56,7 +57,7 @@ export default {
       const suggestionElements = container.querySelectorAll('.js-render-suggestion');
       if (this.lineType === 'old') {
-        Flash('Unable to apply suggestions to a deleted line.', 'alert', this.$el);
+        Flash(__('Unable to apply suggestions to a deleted line.'), 'alert', this.$el);
       }
       suggestionElements.forEach((suggestionEl, i) => {

app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

@@ -33,13 +33,18 @@ export default {
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1"
-          >Markdown is supported</gl-link
-        >
+        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">{{
+          __('Markdown is supported')
+        }}</gl-link>
       </template>
       <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">Markdown</gl-link> and
-        <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">quick actions</gl-link>
+        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">{{
+          __('Markdown')
+        }}</gl-link>
+        and
+        <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">{{
+          __('quick actions')
+        }}</gl-link>
         are supported
       </template>
     </div>
@@ -57,15 +62,17 @@ export default {
           <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
         </span>
         <span class="uploading-error-message"></span>
-        <button class="retry-uploading-link" type="button">Try again</button> or
-        <button class="attach-new-file markdown-selector" type="button">attach a new file</button>
+        <button class="retry-uploading-link" type="button">{{ __('Try again') }}</button> or
+        <button class="attach-new-file markdown-selector" type="button">
+          {{ __('attach a new file') }}
+        </button>
       </span>
       <button class="markdown-selector button-attach-file btn-link" tabindex="-1" type="button">
         <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i
-        ><span class="text-attach-file">Attach a file</span>
+        ><span class="text-attach-file">{{ __('Attach a file') }}</span>
       </button>
       <button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button">
-        Cancel
+        {{ __('Cancel') }}
       </button>
     </span>
   </div>

app/assets/javascripts/vue_shared/components/memory_graph.vue

 <script>
+import { __, sprintf } from '~/locale';
 import { getTimeago } from '../../lib/utils/datetime_utility';
 export default {
@@ -20,7 +21,7 @@ export default {
   computed: {
     getFormattedMedian() {
       const deployedSince = getTimeago().format(this.deploymentTime * 1000);
-      return `Deployed ${deployedSince}`;
+      return sprintf(__('Deployed %{deployedSince}'), { deployedSince });
     },
   },
   mounted() {

app/assets/javascripts/vue_shared/components/notes/system_note.vue

@@ -103,7 +103,7 @@ export default {
         <div v-if="hasMoreCommits" class="flex-list">
           <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded">
             <icon :name="toggleIcon" :size="8" class="append-right-5" />
-            <span>Toggle commit list</span>
+            <span>{{ __('Toggle commit list') }}</span>
           </div>
         </div>
       </div>

app/assets/javascripts/vue_shared/components/project_avatar/image.vue

@@ -14,7 +14,7 @@
     />
   */
-
+import { __ } from '~/locale';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { placeholderImage } from '../../../lazy_loader';
@@ -39,7 +39,7 @@ export default {
     imgAlt: {
       type: String,
       required: false,
-      default: 'project avatar',
+      default: __('project avatar'),
     },
     size: {
       type: Number,

app/assets/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue

@@ -85,7 +85,7 @@ export default {
       @click="toggleSidebar"
     >
       <span class="sidebar-collapsed-value">
-        <span v-if="showFromText">From</span> <span>{{ dateText('min') }}</span>
+        <span v-if="showFromText">{{ __('From') }}</span> <span>{{ dateText('min') }}</span>
       </span>
     </collapsed-calendar-icon>
     <div v-if="hasMinAndMaxDates" class="text-center sidebar-collapsed-divider">-</div>
@@ -96,7 +96,7 @@ export default {
       @click="toggleSidebar"
     >
       <span class="sidebar-collapsed-value">
-        <span v-if="!minDate">Until</span> <span>{{ dateText('max') }}</span>
+        <span v-if="!minDate">{{ __('Until') }}</span> <span>{{ dateText('max') }}</span>
       </span>
     </collapsed-calendar-icon>
   </div>

app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue

@@ -74,7 +74,7 @@ export default {
       return dateInWords(this.selectedDate, true);
     },
     collapsedText() {
-      return this.selectedDateWords ? this.selectedDateWords : 'None';
+      return this.selectedDateWords ? this.selectedDateWords : __('None');
     },
   },
   methods: {
@@ -112,7 +112,7 @@ export default {
           class="btn-blank btn-link btn-primary-hover-link btn-sidebar-action"
           @click="toggleDatePicker"
         >
-          Edit
+          {{ __('Edit') }}
         </button>
         <toggle-sidebar v-if="showToggleSidebar" :collapsed="collapsed" @toggle="toggleSidebar" />
       </div>
@@ -137,11 +137,11 @@ export default {
               class="btn-blank btn-link btn-secondary-hover-link"
               @click="newDateSelected(null)"
             >
-              remove
+              {{ __('remove') }}
             </button>
           </span>
         </template>
-        <span v-else class="no-value"> None </span>
+        <span v-else class="no-value">{{ __('None') }}</span>
       </span>
     </div>
   </div>

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

@@ -48,7 +48,7 @@ export default {
         'fa-angle-double-right': !collapsed,
         'fa-angle-double-left': collapsed,
       }"
-      aria-label="toggle collapse"
+      :aria-label="__('toggle collapse')"
       class="fa"
     >
     </i>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue

@@ -17,6 +17,7 @@
 import { GlTooltip } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
+import { __ } from '~/locale';
 import { placeholderImage } from '../../../lazy_loader';
 export default {
@@ -43,7 +44,7 @@ export default {
     imgAlt: {
       type: String,
       required: false,
-      default: 'user avatar',
+      default: __('user avatar'),
     },
     size: {
       type: Number,