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}.',
+        ),
         {
           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,

locale/gitlab.pot

@@ -156,6 +156,9 @@ msgstr ""
 msgid "%{group_docs_link_start}Groups%{group_docs_link_end} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects."
 msgstr ""
 
+msgid "%{icon}You are about to add %{usersTag} people to the discussion. Proceed with caution."
+msgstr ""
+
 msgid "%{issuableType} will be removed! Are you sure?"
 msgstr ""
 
@@ -1905,6 +1908,9 @@ msgstr ""
 msgid "Cancel this job"
 msgstr ""
 
+msgid "Cancelling Preview"
+msgstr ""
+
 msgid "Cannot be merged automatically"
 msgstr ""
 
@@ -3646,6 +3652,9 @@ msgstr ""
 msgid "Deployed"
 msgstr ""
 
+msgid "Deployed %{deployedSince}"
+msgstr ""
+
 msgid "Deployed to"
 msgstr ""
 
@@ -4054,6 +4063,9 @@ msgstr ""
 msgid "Enter the merge request title"
 msgstr ""
 
+msgid "Enter zen mode"
+msgstr ""
+
 msgid "Environment variables are applied to environments via the runner. They can be protected by only exposing them to protected branches or tags. Additionally, they can be masked so they are hidden in job logs, though they must match certain regexp requirements to do so. You can use environment variables for passwords, secret keys, or whatever you want."
 msgstr ""
 
@@ -4423,6 +4435,9 @@ msgstr ""
 msgid "Expand all"
 msgstr ""
 
+msgid "Expand dropdown"
+msgstr ""
+
 msgid "Expand sidebar"
 msgstr ""
 
@@ -4803,6 +4818,9 @@ msgstr ""
 msgid "Friday"
 msgstr ""
 
+msgid "From"
+msgstr ""
+
 msgid "From %{providerTitle}"
 msgstr ""
 
@@ -5375,6 +5393,12 @@ msgstr ""
 msgid "ImageDiffViewer|Swipe"
 msgstr ""
 
+msgid "ImageViewerDimensions|H"
+msgstr ""
+
+msgid "ImageViewerDimensions|W"
+msgstr ""
+
 msgid "Impersonation has been disabled"
 msgstr ""
 
@@ -6282,6 +6306,9 @@ msgstr ""
 msgid "Markdown enabled"
 msgstr ""
 
+msgid "Markdown is supported"
+msgstr ""
+
 msgid "Marks this issue as a duplicate of %{duplicate_reference}."
 msgstr ""
 
@@ -10785,6 +10812,9 @@ msgstr ""
 msgid "This is your current session"
 msgstr ""
 
+msgid "This issue is %{confidentialLinkStart}confidential%{linkEnd} and %{lockedLinkStart}locked%{linkEnd}."
+msgstr ""
+
 msgid "This issue is confidential"
 msgstr ""
 
@@ -11404,6 +11434,9 @@ msgstr ""
 msgid "U2F only works with HTTPS-enabled websites. Contact your administrator for more details."
 msgstr ""
 
+msgid "Unable to apply suggestions to a deleted line."
+msgstr ""
+
 msgid "Unable to connect to Prometheus server"
 msgstr ""
 
@@ -11512,6 +11545,9 @@ msgstr ""
 msgid "Unsubscribe from %{type}"
 msgstr ""
 
+msgid "Until"
+msgstr ""
+
 msgid "Unverified"
 msgstr ""
 
@@ -12588,6 +12624,9 @@ msgstr ""
 msgid "branch name"
 msgstr ""
 
+msgid "by"
+msgstr ""
+
 msgid "cannot be changed if a personal project has container registry tags."
 msgstr ""
 
@@ -12618,6 +12657,9 @@ msgstr ""
 msgid "could not read private key, is the passphrase correct?"
 msgstr ""
 
+msgid "created"
+msgstr ""
+
 msgid "customize"
 msgstr ""
 
@@ -13058,6 +13100,9 @@ msgstr ""
 msgid "project"
 msgstr ""
 
+msgid "project avatar"
+msgstr ""
+
 msgid "quick actions"
 msgstr ""
 
@@ -13070,6 +13115,9 @@ msgstr ""
 msgid "remaining"
 msgstr ""
 
+msgid "remove"
+msgstr ""
+
 msgid "remove due date"
 msgstr ""
 
@@ -13140,12 +13188,21 @@ msgstr[1] ""
 msgid "to list"
 msgstr ""
 
+msgid "toggle collapse"
+msgstr ""
+
+msgid "toggle dropdown"
+msgstr ""
+
 msgid "triggered"
 msgstr ""
 
 msgid "updated"
 msgstr ""
 
+msgid "user avatar"
+msgstr ""
+
 msgid "username"
 msgstr ""