Vue-i18n: javascripts/boards directory

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

4 files changed, 28 insertions, 24 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
index 091700de93f..66f59009714 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.vue
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -1,4 +1,5 @@
 <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>
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
index d4afd9d59da..a1d634c8f19 100644
--- a/app/assets/javascripts/boards/components/modal/footer.vue
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -1,8 +1,7 @@
 <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>
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
index 1cfa6d39362..7a696035dc8 100644
--- a/app/assets/javascripts/boards/components/modal/header.vue
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -1,4 +1,5 @@
 <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>
diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue
index 28d2019af2f..1802b543687 100644
--- a/app/assets/javascripts/boards/components/modal/list.vue
+++ b/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">