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

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

7 files changed, 57 insertions, 28 deletions

diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index 0ad2b3a73a2..fa6b6bfaef1 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -1,4 +1,6 @@
 <script>
+import { n__ } from '~/locale';
+
 export default {
   name: 'AssigneeTitle',
   props: {
@@ -24,7 +26,7 @@ export default {
   computed: {
     assigneeTitle() {
       const assignees = this.numberOfAssignees;
-      return assignees > 1 ? `${assignees} Assignees` : 'Assignee';
+      return n__('Assignee', `%d Assignees`, assignees);
     },
   },
 };
@@ -32,18 +34,18 @@ export default {
 <template>
   <div class="title hide-collapsed">
     {{ assigneeTitle }}
-    <i v-if="loading" aria-hidden="true" class="fa fa-spinner fa-spin block-loading"> </i>
+    <i v-if="loading" aria-hidden="true" class="fa fa-spinner fa-spin block-loading"></i>
     <a v-if="editable" class="js-sidebar-dropdown-toggle edit-link float-right" href="#">
       {{ __('Edit') }}
     </a>
     <a
       v-if="showToggle"
-      aria-label="Toggle sidebar"
+      :aria-label="__('Toggle sidebar')"
       class="gutter-toggle float-right js-sidebar-toggle"
       href="#"
       role="button"
     >
-      <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"> </i>
+      <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
index 0074d7099dc..805c21d0965 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue
@@ -1,5 +1,5 @@
 <script>
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -62,7 +62,8 @@ export default {
       return this.numberOfHiddenAssignees > 0;
     },
     hiddenAssigneesLabel() {
-      return `+ ${this.numberOfHiddenAssignees} more`;
+      const { numberOfHiddenAssignees } = this;
+      return sprintf(__('+ %{numberOfHiddenAssignees} more'), { numberOfHiddenAssignees });
     },
     collapsedTooltipTitle() {
       const maxRender = Math.min(this.defaultRenderCount, this.users.length);
@@ -103,12 +104,15 @@ export default {
         // Everyone can merge
         return null;
       } else if (cannotMergeCount === assigneesCount && assigneesCount > 1) {
-        return 'No one can merge';
+        return __('No one can merge');
       } else if (assigneesCount === 1) {
-        return 'Cannot merge';
+        return __('Cannot merge');
       }
 
-      return `${canMergeCount}/${assigneesCount} can merge`;
+      return sprintf(__('%{canMergeCount}/%{assigneesCount} can merge'), {
+        canMergeCount,
+        assigneesCount,
+      });
     },
   },
   methods: {
@@ -128,7 +132,7 @@ export default {
       return `${this.rootPath}${user.username}`;
     },
     assigneeAlt(user) {
-      return `${user.name}'s avatar`;
+      return sprintf(__("%{userName}'s avatar"), { userName: user.name });
     },
     assigneeUsername(user) {
       return `@${user.username}`;
@@ -153,7 +157,7 @@ export default {
       data-placement="left"
       data-boundary="viewport"
     >
-      <i v-if="hasNoUsers" aria-label="None" class="fa fa-user"> </i>
+      <i v-if="hasNoUsers" :aria-label="__('None')" class="fa fa-user"> </i>
       <button
         v-for="(user, index) in users"
         v-if="shouldRenderCollapsedAssignee(index)"
@@ -185,9 +189,12 @@ export default {
       </span>
       <template v-if="hasNoUsers">
         <span class="assign-yourself no-value qa-assign-yourself">
-          None
+          {{ __('None') }}
           <template v-if="editable">
-            - <button type="button" class="btn-link" @click="assignSelf">assign yourself</button>
+            -
+            <button type="button" class="btn-link" @click="assignSelf">
+              {{ __('assign yourself') }}
+            </button>
           </template>
         </span>
       </template>
@@ -232,9 +239,7 @@ export default {
             <template v-if="showLess">
               {{ hiddenAssigneesLabel }}
             </template>
-            <template v-else>
-              - show less
-            </template>
+            <template v-else>{{ __('- show less') }}</template>
           </button>
         </div>
       </template>
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index cfa7029b388..70dc3d2cdfa 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -4,6 +4,7 @@ import eventHub from '~/sidebar/event_hub';
 import Store from '~/sidebar/stores/sidebar_store';
 import AssigneeTitle from './assignee_title.vue';
 import Assignees from './assignees.vue';
+import { __ } from '~/locale';
 
 export default {
   name: 'SidebarAssignees',
@@ -74,7 +75,7 @@ export default {
         .then(setLoadingFalse.bind(this))
         .catch(() => {
           setLoadingFalse();
-          return new Flash('Error occurred when saving assignees');
+          return new Flash(__('Error occurred when saving assignees'));
         });
     },
   },
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 4b9bb5c7b0e..5d0e39e8195 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -1,6 +1,7 @@
 <script>
 import $ from 'jquery';
 import eventHub from '../../event_hub';
+import { __ } from '~/locale';
 
 export default {
   props: {
@@ -15,7 +16,7 @@ export default {
   },
   computed: {
     toggleButtonText() {
-      return this.isConfidential ? 'Turn Off' : 'Turn On';
+      return this.isConfidential ? __('Turn Off') : __('Turn On');
     },
     updateConfidentialBool() {
       return !this.isConfidential;
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
index 657ac837baf..24d5b14ded9 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -79,7 +79,7 @@ export default {
       } else if (this.showSpentOnlyState) {
         return `${this.timeSpent} / --`;
       } else if (this.showNoTimeTrackingState) {
-        return 'None';
+        return __('None');
       }
 
       return '';
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index bc263bc36e4..06aca547183 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -2,6 +2,7 @@
 import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import { GlProgressBar } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
 
 export default {
   name: 'TimeTrackingComparisonPane',
@@ -43,8 +44,14 @@ export default {
       return stringifyTime(this.parsedTimeRemaining);
     },
     timeRemainingTooltip() {
-      const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
-      return `${prefix} ${this.timeRemainingHumanReadable}`;
+      const { timeRemainingHumanReadable, timeRemainingMinutes } = this;
+      return timeRemainingMinutes < 0
+        ? sprintf(s__('TimeTracking|Over by %{timeRemainingHumanReadable}'), {
+            timeRemainingHumanReadable,
+          })
+        : sprintf(s__('TimeTracking|Time remaining: %{timeRemainingHumanReadable}'), {
+            timeRemainingHumanReadable,
+          });
     },
     /* Diff values for comparison meter */
     timeRemainingMinutes() {
@@ -74,12 +81,12 @@ export default {
       <gl-progress-bar :value="timeRemainingPercent" :variant="progressBarVariant" />
       <div class="compare-display-container">
         <div class="compare-display float-left">
-          <span class="compare-label"> {{ s__('TimeTracking|Spent') }} </span>
-          <span class="compare-value spent"> {{ timeSpentHumanReadable }} </span>
+          <span class="compare-label">{{ s__('TimeTracking|Spent') }}</span>
+          <span class="compare-value spent">{{ timeSpentHumanReadable }}</span>
         </div>
         <div class="compare-display estimated float-right">
-          <span class="compare-label"> {{ s__('TimeTrackingEstimated|Est') }} </span>
-          <span class="compare-value"> {{ timeEstimateHumanReadable }} </span>
+          <span class="compare-label">{{ s__('TimeTrackingEstimated|Est') }}</span>
+          <span class="compare-value">{{ timeEstimateHumanReadable }}</span>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
index 7c7356e2afa..c2f30310e2e 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue
@@ -1,4 +1,6 @@
 <script>
+import { sprintf, s__ } from '~/locale';
+
 export default {
   name: 'TimeTrackingSpentOnlyPane',
   props: {
@@ -7,11 +9,22 @@ export default {
       required: true,
     },
   },
+  computed: {
+    timeSpent() {
+      return sprintf(
+        s__('TimeTracking|%{startTag}Spent: %{endTag}%{timeSpentHumanReadable}'),
+        {
+          startTag: '<span class="bold">',
+          endTag: '</span>',
+          timeSpentHumanReadable: this.timeSpentHumanReadable,
+        },
+        false,
+      );
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="time-tracking-spend-only-pane">
-    <span class="bold">Spent:</span> {{ timeSpentHumanReadable }}
-  </div>
+  <div class="time-tracking-spend-only-pane" v-html="timeSpent"></div>
 </template>