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

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

app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

 <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>

app/assets/javascripts/sidebar/components/assignees/assignees.vue

 <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>

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'));
         });
     },
   },

app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue

 <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;

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 '';

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>

app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue

 <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>

locale/gitlab.pot

@@ -118,6 +118,9 @@ msgstr[1] ""
 msgid "%{actionText} & %{openOrClose} %{noteable}"
 msgstr ""
 
+msgid "%{canMergeCount}/%{assigneesCount} can merge"
+msgstr ""
+
 msgid "%{commit_author_link} authored %{commit_timeago}"
 msgstr ""
 
@@ -260,6 +263,9 @@ msgstr ""
 msgid "%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc."
 msgstr ""
 
+msgid "%{userName}'s avatar"
+msgstr ""
+
 msgid "%{user_name} profile page"
 msgstr ""
 
@@ -284,6 +290,9 @@ msgstr ""
 msgid "+ %{moreCount} more"
 msgstr ""
 
+msgid "+ %{numberOfHiddenAssignees} more"
+msgstr ""
+
 msgid ", or "
 msgstr ""
 
@@ -1335,7 +1344,9 @@ msgid "Assigned to me"
 msgstr ""
 
 msgid "Assignee"
-msgstr ""
+msgid_plural "%d Assignees"
+msgstr[0] ""
+msgstr[1] ""
 
 msgid "Assignee(s)"
 msgstr ""
@@ -1906,6 +1917,9 @@ msgstr ""
 msgid "Cannot create the abuse report. This user has been blocked."
 msgstr ""
 
+msgid "Cannot merge"
+msgstr ""
+
 msgid "Cannot modify managed Kubernetes cluster"
 msgstr ""
 
@@ -4244,6 +4258,9 @@ msgstr ""
 msgid "Error occurred when fetching sidebar data"
 msgstr ""
 
+msgid "Error occurred when saving assignees"
+msgstr ""
+
 msgid "Error occurred when toggling the notification subscription"
 msgstr ""
 
@@ -6867,6 +6884,9 @@ msgstr ""
 msgid "No milestones to show"
 msgstr ""
 
+msgid "No one can merge"
+msgstr ""
+
 msgid "No other labels with such name or description"
 msgstr ""
 
@@ -10906,12 +10926,21 @@ msgstr ""
 msgid "TimeTrackingEstimated|Est"
 msgstr ""
 
+msgid "TimeTracking|%{startTag}Spent: %{endTag}%{timeSpentHumanReadable}"
+msgstr ""
+
 msgid "TimeTracking|Estimated:"
 msgstr ""
 
+msgid "TimeTracking|Over by %{timeRemainingHumanReadable}"
+msgstr ""
+
 msgid "TimeTracking|Spent"
 msgstr ""
 
+msgid "TimeTracking|Time remaining: %{timeRemainingHumanReadable}"
+msgstr ""
+
 msgid "Timeago|%s days ago"
 msgstr ""
 
@@ -11177,6 +11206,9 @@ msgstr ""
 msgid "Toggle navigation"
 msgstr ""
 
+msgid "Toggle sidebar"
+msgstr ""
+
 msgid "Toggle thread"
 msgstr ""
 
@@ -11294,6 +11326,12 @@ msgstr ""
 msgid "Tuesday"
 msgstr ""
 
+msgid "Turn Off"
+msgstr ""
+
+msgid "Turn On"
+msgstr ""
+
 msgid "Twitter"
 msgstr ""
 
@@ -12493,6 +12531,9 @@ msgstr ""
 msgid "among other things"
 msgstr ""
 
+msgid "assign yourself"
+msgstr ""
+
 msgid "attach a new file"
 msgstr ""