Vue-i18n: javascripts/boards directory

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

app/assets/javascripts/boards/components/board_blank_state.vue

 <script>
+import { __ } from '~/locale';
 /* global ListLabel */
 import Cookies from 'js-cookie';
 import boardsStore from '../stores/boards_store';
@@ -7,8 +8,8 @@ export default {
   data() {
     return {
       predefinedLabels: [
-        new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
-        new ListLabel({ title: 'Doing', color: '#5CB85C' }),
+        new ListLabel({ title: __('To Do'), color: '#F0AD4E' }),
+        new ListLabel({ title: __('Doing'), color: '#5CB85C' }),
       ],
     };
   },
@@ -58,7 +59,11 @@ export default {
 
 <template>
   <div class="board-blank-state p-3">
-    <p>Add the following default lists to your Issue Board with one click:</p>
+    <p>
+      {{
+        __('BoardBlankState|Add the following default lists to your Issue Board with one click:')
+      }}
+    </p>
     <ul class="list-unstyled board-blank-state-list">
       <li v-for="(label, index) in predefinedLabels" :key="index">
         <span
@@ -70,18 +75,21 @@ export default {
       </li>
     </ul>
     <p>
-      Starting out with the default set of lists will get you right on the way to making the most of
-      your board.
+      {{
+        __(
+          'BoardBlankState|Starting out with the default set of lists will get you right on the way to making the most of your board.',
+        )
+      }}
     </p>
     <button
       class="btn btn-success btn-inverted btn-block"
       type="button"
       @click.stop="addDefaultLists"
     >
-      Add default lists
+      {{ __('BoardBlankState|Add default lists') }}
     </button>
     <button class="btn btn-default btn-block" type="button" @click.stop="clearBlankState">
-      Nevermind, I'll use my own
+      {{ __("BoardBlankState|Nevermind, I'll use my own") }}
     </button>
   </div>
 </template>

app/assets/javascripts/boards/components/board_list.vue

@@ -227,7 +227,7 @@ export default {
     :class="{ 'd-none': !list.isExpanded, 'd-flex flex-column': list.isExpanded }"
     class="board-list-component position-relative h-100"
   >
-    <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
+    <div v-if="loading" class="board-list-loading text-center" :aria-label="__('Loading issues')">
       <gl-loading-icon />
     </div>
     <board-new-issue
@@ -257,7 +257,7 @@ export default {
       />
       <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
         <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
-        <span v-if="list.issues.length === list.issuesSize"> Showing all issues </span>
+        <span v-if="list.issues.length === list.issuesSize">{{ __('Showing all issues') }}</span>
         <span v-else> Showing {{ list.issues.length }} of {{ list.issuesSize }} issues </span>
       </li>
     </ul>

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -102,9 +102,9 @@ export default {
     <div class="board-card position-relative p-3 rounded">
       <form @submit="submit($event)">
         <div v-if="error" class="flash-container">
-          <div class="flash-alert">An error occurred. Please try again.</div>
+          <div class="flash-alert">{{ __('An error occurred. Please try again.') }}</div>
         </div>
-        <label :for="list.id + '-title'" class="label-bold"> Title </label>
+        <label :for="list.id + '-title'" class="label-bold">{{ __('Title') }}</label>
         <input
           :id="list.id + '-title'"
           ref="input"
@@ -122,12 +122,11 @@ export default {
             class="float-left"
             variant="success"
             type="submit"
+            >{{ __('Submit issue') }}</gl-button
           >
-            Submit issue
-          </gl-button>
-          <gl-button class="float-right" type="button" variant="default" @click="cancel">
-            Cancel
-          </gl-button>
+          <gl-button class="float-right" type="button" variant="default" @click="cancel">{{
+            __('Cancel')
+          }}</gl-button>
         </div>
       </form>
     </div>

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -124,7 +124,7 @@ export default {
       return `${this.rootPath}${assignee.username}`;
     },
     avatarUrlTitle(assignee) {
-      return `Avatar for ${assignee.name}`;
+      return sprintf(__(`Avatar for %{assigneeName}`), { assigneeName: assignee.name });
     },
     showLabel(label) {
       if (!label.id) return false;
@@ -160,9 +160,10 @@ export default {
           :title="__('Confidential')"
           class="confidential-icon append-right-4"
           :aria-label="__('Confidential')"
-        /><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
-          issue.title
-        }}</a>
+        />
+        <a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>
+          {{ issue.title }}
+        </a>
       </h4>
     </div>
     <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
@@ -204,13 +205,13 @@ export default {
             placement="bottom"
             class="board-issue-path block-truncated bold"
             >{{ issueReferencePath }}</tooltip-on-truncate
-          >#{{ issue.iid }}
+          >
+          #{{ issue.iid }}
         </span>
         <span class="board-info-items prepend-top-8 d-inline-block">
-          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate
-            v-if="issue.timeEstimate"
-            :estimate="issue.timeEstimate"
-          /><issue-card-weight
+          <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" />
+          <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
+          <issue-card-weight
             v-if="issue.weight"
             :weight="issue.weight"
             @click="filterByWeight(issue.weight)"
@@ -230,7 +231,8 @@ export default {
           tooltip-placement="bottom"
         >
           <span class="js-assignee-tooltip">
-            <span class="bold d-block">Assignee</span> {{ assignee.name }}
+            <span class="bold d-block">{{ __('Assignee') }}</span>
+            {{ assignee.name }}
             <span class="text-white-50">@{{ assignee.username }}</span>
           </span>
         </user-avatar-link>
@@ -240,9 +242,8 @@ export default {
           :title="assigneeCounterTooltip"
           class="avatar-counter"
           data-placement="bottom"
+          >{{ assigneeCounterLabel }}</span
         >
-          {{ assigneeCounterLabel }}
-        </span>
       </div>
     </div>
   </div>

app/assets/javascripts/boards/components/modal/empty_state.vue

 <script>
+import { __, sprintf } from '~/locale';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
@@ -20,19 +21,20 @@ export default {
   computed: {
     contents() {
       const obj = {
-        title: "You haven't added any issues to your project yet",
-        content: `
-          An issue can be a bug, a todo or a feature request that needs to be
-          discussed in a project. Besides, issues are searchable and filterable.
-        `,
+        title: __("You haven't added any issues to your project yet"),
+        content: __(
+          'An issue can be a bug, a todo or a feature request that needs to be discussed in a project. Besides, issues are searchable and filterable.',
+        ),
       };
 
       if (this.activeTab === 'selected') {
-        obj.title = "You haven't selected any issues yet";
-        obj.content = `
-          Go back to <strong>Open issues</strong> and select some issues
-          to add to your board.
-        `;
+        obj.title = __("You haven't selected any issues yet");
+        obj.content = sprintf(
+          __(
+            'Go back to %{startTag}Open issues%{endTag} and select some issues to add to your board.',
+          ),
+          { startTag: '<strong>', endTag: '</strong>' },
+        );
       }
 
       return obj;
@@ -51,16 +53,16 @@ export default {
         <div class="text-content">
           <h4>{{ contents.title }}</h4>
           <p v-html="contents.content"></p>
-          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">
-            New issue
-          </a>
+          <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">{{
+            __('New issue')
+          }}</a>
           <button
             v-if="activeTab === 'selected'"
             class="btn btn-default"
             type="button"
             @click="changeTab('all')"
           >
-            Open issues
+            {{ __('Open issues') }}
           </button>
         </div>
       </div>

app/assets/javascripts/boards/components/modal/footer.vue

 <script>
 import Flash from '../../../flash';
-import { __ } from '../../../locale';
+import { __, n__ } from '../../../locale';
 import ListsDropdown from './lists_dropdown.vue';
-import { pluralize } from '../../../lib/utils/text_utility';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 import boardsStore from '../../stores/boards_store';
@@ -24,8 +23,8 @@ export default {
     },
     submitText() {
       const count = ModalStore.selectedCount();
-
-      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
+      if (!count) return __('Add issues');
+      return n__(`Add %d issue`, `Add %d issues`, count);
     },
   },
   methods: {
@@ -68,11 +67,11 @@ export default {
       <button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues">
         {{ submitText }}
       </button>
-      <span class="inline add-issues-footer-to-list"> to list </span>
+      <span class="inline add-issues-footer-to-list">{{ __('to list') }}</span>
       <lists-dropdown />
     </div>
     <button class="btn btn-default float-right" type="button" @click="toggleModal(false)">
-      Cancel
+      {{ __('Cancel') }}
     </button>
   </footer>
 </template>

app/assets/javascripts/boards/components/modal/header.vue

 <script>
+import { __ } from '~/locale';
 import ModalFilters from './filters';
 import ModalTabs from './tabs.vue';
 import ModalStore from '../../stores/modal_store';
@@ -30,10 +31,10 @@ export default {
   computed: {
     selectAllText() {
       if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
-        return 'Select all';
+        return __('Select all');
       }
 
-      return 'Deselect all';
+      return __('Deselect all');
     },
     showSearch() {
       return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
@@ -57,7 +58,7 @@ export default {
           type="button"
           class="close"
           data-dismiss="modal"
-          aria-label="Close"
+          :aria-label="__('Close')"
           @click="toggleModal(false)"
         >
           <span aria-hidden="true">×</span>

app/assets/javascripts/boards/components/modal/list.vue

@@ -123,7 +123,9 @@ export default {
       class="empty-state add-issues-empty-state-filter text-center"
     >
       <div class="svg-content"><img :src="emptyStateSvg" /></div>
-      <div class="text-content"><h4>There are no issues to show.</h4></div>
+      <div class="text-content">
+        <h4>{{ __('There are no issues to show.') }}</h4>
+      </div>
     </div>
     <div v-for="(group, index) in groupedIssues" :key="index" class="add-issues-list-column">
       <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">

app/assets/javascripts/boards/components/project_select.vue

 <script>
+import { __ } from '~/locale';
 import $ from 'jquery';
 import _ from 'underscore';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -27,7 +28,7 @@ export default {
   },
   computed: {
     selectedProjectName() {
-      return this.selectedProject.name || 'Select a project';
+      return this.selectedProject.name || __('Select a project');
     },
   },
   mounted() {
@@ -81,7 +82,7 @@ export default {
 
 <template>
   <div>
-    <label class="label-bold prepend-top-10"> Project </label>
+    <label class="label-bold prepend-top-10">{{ __('Project') }}</label>
     <div ref="projectsDropdown" class="dropdown dropdown-projects">
       <button
         class="dropdown-menu-toggle wide"
@@ -92,9 +93,9 @@ export default {
         {{ selectedProjectName }} <icon name="chevron-down" />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
-        <div class="dropdown-title">Projects</div>
+        <div class="dropdown-title">{{ __('Projects') }}</div>
         <div class="dropdown-input">
-          <input class="dropdown-input-field" type="search" placeholder="Search projects" />
+          <input class="dropdown-input-field" type="search" :placeholder="__('Search projects')" />
           <icon name="search" class="dropdown-input-search" data-hidden="true" />
         </div>
         <div class="dropdown-content"></div>

app/assets/javascripts/boards/components/sidebar/remove_issue.vue

@@ -76,7 +76,7 @@ export default Vue.extend({
 <template>
   <div class="block list">
     <button class="btn btn-default btn-block" type="button" @click="removeIssue">
-      Remove from board
+      {{ __('Remove from board') }}
     </button>
   </div>
 </template>

locale/gitlab.pot

@@ -579,6 +579,11 @@ msgstr ""
 msgid "Activity"
 msgstr ""
 
+msgid "Add %d issue"
+msgid_plural "Add %d issues"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Add CHANGELOG"
 msgstr ""
 
@@ -639,6 +644,9 @@ msgstr ""
 msgid "Add image comment"
 msgstr ""
 
+msgid "Add issues"
+msgstr ""
+
 msgid "Add italic text"
 msgstr ""
 
@@ -1071,6 +1079,9 @@ msgstr ""
 msgid "An error occurred. Please try again."
 msgstr ""
 
+msgid "An issue can be a bug, a todo or a feature request that needs to be discussed in a project. Besides, issues are searchable and filterable."
+msgstr ""
+
 msgid "Anonymous"
 msgstr ""
 
@@ -1580,6 +1591,18 @@ msgstr ""
 msgid "Blog"
 msgstr ""
 
+msgid "BoardBlankState|Add default lists"
+msgstr ""
+
+msgid "BoardBlankState|Add the following default lists to your Issue Board with one click:"
+msgstr ""
+
+msgid "BoardBlankState|Nevermind, I'll use my own"
+msgstr ""
+
+msgid "BoardBlankState|Starting out with the default set of lists will get you right on the way to making the most of your board."
+msgstr ""
+
 msgid "Boards"
 msgstr ""
 
@@ -3582,6 +3605,9 @@ msgstr ""
 msgid "Description:"
 msgstr ""
 
+msgid "Deselect all"
+msgstr ""
+
 msgid "Destroy"
 msgstr ""
 
@@ -3684,6 +3710,9 @@ msgstr ""
 msgid "Dockerfile"
 msgstr ""
 
+msgid "Doing"
+msgstr ""
+
 msgid "Domain"
 msgstr ""
 
@@ -4829,6 +4858,9 @@ msgstr ""
 msgid "Go back"
 msgstr ""
 
+msgid "Go back to %{startTag}Open issues%{endTag} and select some issues to add to your board."
+msgstr ""
+
 msgid "Go full screen"
 msgstr ""
 
@@ -5972,6 +6004,9 @@ msgstr ""
 msgid "Loading functions timed out. Please reload the page to try again."
 msgstr ""
 
+msgid "Loading issues"
+msgstr ""
+
 msgid "Loading the GitLab IDE..."
 msgstr ""
 
@@ -6969,6 +7004,9 @@ msgstr ""
 msgid "Open in Xcode"
 msgstr ""
 
+msgid "Open issues"
+msgstr ""
+
 msgid "Open raw"
 msgstr ""
 
@@ -8525,6 +8563,9 @@ msgstr ""
 msgid "Remove fork relationship"
 msgstr ""
 
+msgid "Remove from board"
+msgstr ""
+
 msgid "Remove group"
 msgstr ""
 
@@ -9049,9 +9090,15 @@ msgstr ""
 msgid "Select a new namespace"
 msgstr ""
 
+msgid "Select a project"
+msgstr ""
+
 msgid "Select a timezone"
 msgstr ""
 
+msgid "Select all"
+msgstr ""
+
 msgid "Select an existing Kubernetes cluster or create a new one"
 msgstr ""
 
@@ -9339,6 +9386,9 @@ msgid_plural "Showing %d events"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Showing all issues"
+msgstr ""
+
 msgid "Showing last %{size} of log -"
 msgstr ""
 
@@ -9789,6 +9839,9 @@ msgstr ""
 msgid "Submit feedback"
 msgstr ""
 
+msgid "Submit issue"
+msgstr ""
+
 msgid "Submit search"
 msgstr ""
 
@@ -10361,6 +10414,9 @@ msgstr ""
 msgid "There are no issues to show"
 msgstr ""
 
+msgid "There are no issues to show."
+msgstr ""
+
 msgid "There are no labels yet"
 msgstr ""
 
@@ -10863,6 +10919,9 @@ msgstr ""
 msgid "To %{link_to_help} of your domain, add the above key to a TXT record within to your DNS configuration."
 msgstr ""
 
+msgid "To Do"
+msgstr ""
+
 msgid "To GitLab"
 msgstr ""
 
@@ -12026,6 +12085,12 @@ msgstr ""
 msgid "You have reached your project limit"
 msgstr ""
 
+msgid "You haven't added any issues to your project yet"
+msgstr ""
+
+msgid "You haven't selected any issues yet"
+msgstr ""
+
 msgid "You left the \"%{membershipable_human_name}\" %{source_type}."
 msgstr ""
 
@@ -12797,6 +12862,9 @@ msgstr ""
 msgid "this document"
 msgstr ""
 
+msgid "to list"
+msgstr ""
+
 msgid "triggered"
 msgstr ""