Changed JS translation functions

Added context function

19 files changed, 202 insertions, 114 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
index 63e20478e94..72ada943fea 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
@@ -11,7 +11,7 @@ export default {
           aria-hidden="true"
           title="Limited to showing 50 events at most"
           data-placement="top"></i>
-      {{ 'Showing %d event' | translate-plural('Showing %d events', 50) }}
+      {{ n__('Showing %d event', 'Showing %d events', 50) }}
     </span>
   `,
 };
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
index f72882872cd..0bd15ee773d 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
@@ -28,11 +28,11 @@ global.cycleAnalytics.StageCodeComponent = Vue.extend({
             <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
             &middot;
             <span>
-              {{ 'Opened' | translate }}
+              {{ __('Opened') }}
               <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
             </span>
             <span>
-              {{ 'by' | translate }}
+              {{ __('by') }}
               <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
             </span>
           </div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
index bb265c8316f..b6bf9a2572e 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
@@ -28,11 +28,11 @@ global.cycleAnalytics.StageIssueComponent = Vue.extend({
             <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
             &middot;
             <span>
-              {{ 'Opened' | translate }}
+              {{ __('Opened') }}
               <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
             </span>
             <span>
-              {{ 'by' | translate }}
+              {{ __('by') }}
               <a :href="issue.author.webUrl" class="issue-author-link">
                 {{ issue.author.name }}
               </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
index 32b685faece..116c118b824 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
@@ -31,10 +31,10 @@ global.cycleAnalytics.StagePlanComponent = Vue.extend({
               </a>
             </h5>
             <span>
-              {{ 'First' | translate }}
+              {{ __('First') }}
               <span class="commit-icon">${iconCommit}</span>
               <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
-              {{ 'pushed by' | translate }}
+              {{ __('pushed by') }}
               <a :href="commit.author.webUrl" class="commit-author-link">
                 {{ commit.author.name }}
               </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
index 5c9186a2e49..18fb09d6d2f 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
@@ -28,11 +28,11 @@ global.cycleAnalytics.StageProductionComponent = Vue.extend({
             <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
             &middot;
             <span>
-              {{ 'Opened' | translate }}
+              {{ __('Opened') }}
               <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
             </span>
             <span>
-            {{ 'by' | translate }}
+            {{ __('by') }}
             <a :href="issue.author.webUrl" class="issue-author-link">
               {{ issue.author.name }}
             </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
index a047573548d..af5f1b42ea2 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
@@ -28,11 +28,11 @@ global.cycleAnalytics.StageReviewComponent = Vue.extend({
             <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
             &middot;
             <span>
-              {{ 'Opened' | translate }}
+              {{ __('Opened') }}
               <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
             </span>
             <span>
-              {{ 'by' | translate }}
+              {{ __('by') }}
               <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
             </span>
             <template v-if="mergeRequest.state === 'closed'">
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
index e8dfaf4294e..a0bd1bab96e 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
@@ -32,7 +32,7 @@ global.cycleAnalytics.StageStagingComponent = Vue.extend({
             </h5>
             <span>
               <a :href="build.url" class="build-date">{{ build.date }}</a>
-              {{ 'by' | translate }}
+              {{ __('by') }}
               <a :href="build.author.webUrl" class="issue-author-link">
                 {{ build.author.name }}
               </a>
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.js b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
index 47d82bdda90..48cc0a5c58d 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.js
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
@@ -12,9 +12,9 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
   template: `
     <span class="total-time">
       <template v-if="Object.keys(time).length">
-        <template v-if="time.days">{{ time.days }} <span>{{ 'day' | translate-plural('days', time.days) }}</span></template>
-        <template v-if="time.hours">{{ time.hours }} <span>{{ 'hr' | translate }}</span></template>
-        <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ 'min' | translate-plural('mins', time.mins) }}</span></template>
+        <template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template>
+        <template v-if="time.hours">{{ time.hours }} <span>{{ __('hr') }}</span></template>
+        <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('min', 'mins', time.mins) }}</span></template>
         <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
       </template>
       <template v-else>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index 25d5092a1fd..1c574951211 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
-
-import locale from '~/locale';
+import { __ } from '../locale';
 
 require('../lib/utils/text_utility');
 const DEFAULT_EVENT_OBJECTS = require('./default_event_objects');
@@ -9,13 +8,13 @@ const global = window.gl || (window.gl = {});
 global.cycleAnalytics = global.cycleAnalytics || {};
 
 const EMPTY_STAGE_TEXTS = {
-  issue: locale.gettext('The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.'),
-  plan: locale.gettext('The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.'),
-  code: locale.gettext('The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.'),
-  test: locale.gettext('The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.'),
-  review: locale.gettext('The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.'),
-  staging: locale.gettext('The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.'),
-  production: locale.gettext('The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.'),
+  issue: __('The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.'),
+  plan: __('The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.'),
+  code: __('The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.'),
+  test: __('The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.'),
+  review: __('The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.'),
+  staging: __('The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.'),
+  production: __('The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.'),
 };
 
 global.cycleAnalytics.CycleAnalyticsStore = {
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 9f81024ff68..3907b0e2aba 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -10,6 +10,13 @@ const locales = {
 };
 
 const lang = document.querySelector('html').getAttribute('lang') || 'en';
+const locale = new Jed(locales[lang]);
+const gettext = locale.gettext.bind(locale);
+const ngettext = locale.ngettext.bind(locale);
+const pgettext = locale.pgettext.bind(locale);
 
 export { lang };
-export default new Jed(locales[lang]);
+export { gettext as __ };
+export { ngettext as n__ };
+export { pgettext as s__ };
+export default locale;
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
index 7fc6f1ce38a..c2c20ea0853 100644
--- a/app/assets/javascripts/vue_shared/translate.js
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -1,8 +1,17 @@
-import locale from '../locale';
+import {
+  __,
+  n__,
+  s__,
+} from '../locale';
 
 export default (Vue) => {
-  Vue.filter('translate', text => locale.gettext(text));
-
-  Vue.filter('translate-plural', (text, pluralText, count) =>
-    locale.ngettext(text, pluralText, count).replace(/%d/g, count));
+  Vue.mixin({
+    methods: {
+      __(text) { return __(text); },
+      n__(text, pluralText, count) {
+        return n__(text, pluralText, count).replace(/%d/g, count);
+      },
+      s__(context, key) { return s__(context, key); },
+    },
+  });
 };
diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml
index 27190785fff..57e95c4c14f 100644
--- a/app/views/projects/cycle_analytics/_empty_stage.html.haml
+++ b/app/views/projects/cycle_analytics/_empty_stage.html.haml
@@ -2,6 +2,6 @@
   .empty-stage
     .icon-no-data
       = custom_icon ('icon_no_data')
-    %h4 {{ 'We don\'t have enough data to show this stage.' | translate }}
+    %h4 {{ 'We don\'t have enough data to show this stage.' | t }}
     %p
       {{currentStage.emptyStageText}}
diff --git a/app/views/projects/cycle_analytics/_no_access.html.haml b/app/views/projects/cycle_analytics/_no_access.html.haml
index 474d0f410a7..25109bd61cd 100644
--- a/app/views/projects/cycle_analytics/_no_access.html.haml
+++ b/app/views/projects/cycle_analytics/_no_access.html.haml
@@ -2,6 +2,6 @@
   .no-access-stage
     .icon-lock
       = custom_icon ('icon_lock')
-    %h4 {{ 'You need permission.' | translate }}
+    %h4 {{ 'You need permission.' | t }}
     %p
-      {{ 'Want to see the data? Please ask administrator for access.' | translate }}
+      {{ 'Want to see the data? Please ask administrator for access.' | t }}
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index a7783b69588..2e0e4753e68 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -8,7 +8,8 @@
 = render "projects/head"
 
 #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
-  - if @cycle_analytics_no_data
+  - if @cycle_analytics_no_data || true
+    {{ s__('context', 'key') }}
     .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
       = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
       .row
@@ -16,17 +17,17 @@
           = custom_icon('icon_cycle_analytics_splash')
         .col-sm-8.col-xs-12.inner-content
           %h4
-            {{ 'Introducing Cycle Analytics' | translate }}
+            {{ __('Introducing Cycle Analytics') }}
           %p
-            {{ 'Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.' | translate }}
+            {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
 
           = link_to help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn' do
-            {{ 'Read more' | translate }}
+            {{ __('Read more') }}
   = icon("spinner spin", "v-show" => "isLoading")
   .wrapper{ "v-show" => "!isLoading && !hasError" }
     .panel.panel-default
       .panel-heading
-        {{ 'Pipeline Health' | translate }}
+        {{ __('Pipeline Health') }}
       .content-block
         .container-fluid
           .row
@@ -36,15 +37,15 @@
             .col-sm-3.col-xs-12.column
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
-                  %span.dropdown-label {{ 'Last 30 days' | translate }}
+                  %span.dropdown-label {{ __('Last 30 days') }}
                   %i.fa.fa-chevron-down
                 %ul.dropdown-menu.dropdown-menu-align-right
                   %li
                     %a{ "href" => "#", "data-value" => "30" }
-                      {{ 'Last 30 days' | translate }}
+                      {{ __('Last 30 days') }}
                   %li
                     %a{ "href" => "#", "data-value" => "90" }
-                      {{ 'Last 90 days' | translate }}
+                      {{ __('Last 90 days') }}
     .stage-panel-container
       .panel.panel-default.stage-panel
         .panel-heading
@@ -52,19 +53,19 @@
             %ul
               %li.stage-header
                 %span.stage-name
-                  {{ 'Stage' | translate }}
+                  {{ __('Stage') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" }
               %li.median-header
                 %span.stage-name
-                  {{ 'Median' | translate }}
+                  {{ __('Median') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.", "aria-hidden" => "true" }
               %li.event-header
                 %span.stage-name
-                  {{ currentStage ? currentStage.legend : 'Related Issues' | translate }}
+                  {{ __(currentStage ? currentStage.legend : 'Related Issues') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" }
               %li.total-time-header
                 %span.stage-name
-                  {{ 'Total Time' | translate }}
+                  {{ __('Total Time') }}
                 %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" }
         .stage-panel-body
           %nav.stage-nav
@@ -77,10 +78,10 @@
                     %span{ "v-if" => "stage.value" }
                       {{ stage.value }}
                     %span.stage-empty{ "v-else" => true }
-                      {{ 'Not enough data' | translate }}
+                      {{ __('Not enough data') }}
                   %template{ "v-else" => true }
                     %span.not-available
-                      {{ 'Not available' | translate }}
+                      {{ __('Not available') }}
           .section.stage-events
             %template{ "v-if" => "isLoadingStage" }
               = icon("spinner spin")
diff --git a/locale/de/gitlab.po b/locale/de/gitlab.po
index f3b6cb6e905..c291b6adab6 100644
--- a/locale/de/gitlab.po
+++ b/locale/de/gitlab.po
@@ -17,47 +17,65 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=n != 1;\n"
 "\n"
 
-msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
-msgstr ""
-
 msgid "Deutsch"
 msgstr ""
 
 msgid "English"
 msgstr ""
 
-msgid "Introducing Cycle Analytics"
+msgid "First"
 msgstr ""
 
-msgid "Last 30 days"
+msgid "Opened"
 msgstr ""
 
-msgid "Last 90 days"
-msgstr ""
+msgid "Showing %d event"
+msgid_plural "Showing %d events"
+msgstr[0] ""
+msgstr[1] ""
 
-msgid "Median"
+msgid "Spanish"
 msgstr ""
 
-msgid "Not available"
+msgid "The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request."
 msgstr ""
 
-msgid "Not enough data"
+msgid "The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage."
 msgstr ""
 
-msgid "Pipeline Health"
+msgid "The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit."
 msgstr ""
 
-msgid "Read more"
+msgid "The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle."
 msgstr ""
 
-msgid "Spanish"
+msgid "The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request."
 msgstr ""
 
-msgid "Stage"
+msgid "The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time."
 msgstr ""
 
-msgid "Total Time"
+msgid "The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running."
 msgstr ""
 
 msgid "Want to see the data? Please ask administrator for access."
 msgstr ""
+
+msgid "by"
+msgstr ""
+
+msgid "day"
+msgid_plural "days"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "hr"
+msgstr ""
+
+msgid "min"
+msgid_plural "mins"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "pushed by"
+msgstr ""
diff --git a/locale/en/gitlab.po b/locale/en/gitlab.po
index 93029868486..7e13ddb1c18 100644
--- a/locale/en/gitlab.po
+++ b/locale/en/gitlab.po
@@ -17,47 +17,65 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=n != 1;\n"
 "\n"
 
-msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
-msgstr ""
-
 msgid "Deutsch"
 msgstr ""
 
 msgid "English"
 msgstr ""
 
-msgid "Introducing Cycle Analytics"
+msgid "First"
 msgstr ""
 
-msgid "Last 30 days"
+msgid "Opened"
 msgstr ""
 
-msgid "Last 90 days"
-msgstr ""
+msgid "Showing %d event"
+msgid_plural "Showing %d events"
+msgstr[0] ""
+msgstr[1] ""
 
-msgid "Median"
+msgid "Spanish"
 msgstr ""
 
-msgid "Not available"
+msgid "The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request."
 msgstr ""
 
-msgid "Not enough data"
+msgid "The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage."
 msgstr ""
 
-msgid "Pipeline Health"
+msgid "The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit."
 msgstr ""
 
-msgid "Read more"
+msgid "The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle."
 msgstr ""
 
-msgid "Spanish"
+msgid "The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request."
 msgstr ""
 
-msgid "Stage"
+msgid "The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time."
 msgstr ""
 
-msgid "Total Time"
+msgid "The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running."
 msgstr ""
 
 msgid "Want to see the data? Please ask administrator for access."
 msgstr ""
+
+msgid "by"
+msgstr ""
+
+msgid "day"
+msgid_plural "days"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "hr"
+msgstr ""
+
+msgid "min"
+msgid_plural "mins"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "pushed by"
+msgstr ""
diff --git a/locale/es/gitlab.po b/locale/es/gitlab.po
index 23863cbdb92..f5bf45e2cd3 100644
--- a/locale/es/gitlab.po
+++ b/locale/es/gitlab.po
@@ -17,47 +17,65 @@ msgstr ""
 "Last-Translator: \n"
 "X-Generator: Poedit 2.0.1\n"
 
-msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
-msgstr ""
-
 msgid "Deutsch"
 msgstr "Alemán"
 
 msgid "English"
 msgstr "Inglés"
 
-msgid "Introducing Cycle Analytics"
+msgid "First"
 msgstr ""
 
-msgid "Last 30 days"
+msgid "Opened"
 msgstr ""
 
-msgid "Last 90 days"
+msgid "Showing %d event"
+msgid_plural "Showing %d events"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "Spanish"
+msgstr "Español"
+
+msgid "The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request."
 msgstr ""
 
-msgid "Median"
+msgid "The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage."
 msgstr ""
 
-msgid "Not available"
+msgid "The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit."
 msgstr ""
 
-msgid "Not enough data"
+msgid "The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle."
 msgstr ""
 
-msgid "Pipeline Health"
+msgid "The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request."
 msgstr ""
 
-msgid "Read more"
+msgid "The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time."
 msgstr ""
 
-msgid "Spanish"
-msgstr "Español"
+msgid "The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running."
+msgstr ""
 
-msgid "Stage"
+msgid "Want to see the data? Please ask administrator for access."
 msgstr ""
 
-msgid "Total Time"
+msgid "by"
 msgstr ""
 
-msgid "Want to see the data? Please ask administrator for access."
+msgid "day"
+msgid_plural "days"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "hr"
+msgstr ""
+
+msgid "min"
+msgid_plural "mins"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "pushed by"
 msgstr ""
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ada103157d9..372ab3cd3cc 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-04-21 09:01+0100\n"
-"PO-Revision-Date: 2017-04-21 09:01+0100\n"
+"POT-Creation-Date: 2017-04-26 16:26+0100\n"
+"PO-Revision-Date: 2017-04-26 16:26+0100\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -18,47 +18,65 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
-msgid "Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project."
-msgstr ""
-
 msgid "Deutsch"
 msgstr ""
 
 msgid "English"
 msgstr ""
 
-msgid "Introducing Cycle Analytics"
+msgid "First"
 msgstr ""
 
-msgid "Last 30 days"
+msgid "Opened"
 msgstr ""
 
-msgid "Last 90 days"
-msgstr ""
+msgid "Showing %d event"
+msgid_plural "Showing %d events"
+msgstr[0] ""
+msgstr[1] ""
 
-msgid "Median"
+msgid "Spanish"
 msgstr ""
 
-msgid "Not available"
+msgid "The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request."
 msgstr ""
 
-msgid "Not enough data"
+msgid "The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage."
 msgstr ""
 
-msgid "Pipeline Health"
+msgid "The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit."
 msgstr ""
 
-msgid "Read more"
+msgid "The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle."
 msgstr ""
 
-msgid "Spanish"
+msgid "The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request."
 msgstr ""
 
-msgid "Stage"
+msgid "The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time."
 msgstr ""
 
-msgid "Total Time"
+msgid "The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running."
 msgstr ""
 
 msgid "Want to see the data? Please ask administrator for access."
 msgstr ""
+
+msgid "by"
+msgstr ""
+
+msgid "day"
+msgid_plural "days"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "hr"
+msgstr ""
+
+msgid "min"
+msgid_plural "mins"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "pushed by"
+msgstr ""
diff --git a/spec/javascripts/vue_shared/translate_spec.js b/spec/javascripts/vue_shared/translate_spec.js
index 74bd4ff86b1..5dc0be50116 100644
--- a/spec/javascripts/vue_shared/translate_spec.js
+++ b/spec/javascripts/vue_shared/translate_spec.js
@@ -17,7 +17,7 @@ describe('Vue translate filter', () => {
       el,
       template: `
         <span>
-          {{ 'testing' | translate }}
+          {{ 'testing' | t }}
         </span>
       `,
     }).$mount();
@@ -36,7 +36,7 @@ describe('Vue translate filter', () => {
       el,
       template: `
         <span>
-          {{ '%d day' | translate-plural('%d days', 1) }}
+          {{ '%d day' | nt('%d days', 1) }}
         </span>
       `,
     }).$mount();
@@ -55,7 +55,7 @@ describe('Vue translate filter', () => {
       el,
       template: `
         <span>
-          {{ '%d day' | translate-plural('%d days', 2) }}
+          {{ '%d day' | nt('%d days', 2) }}
         </span>
       `,
     }).$mount();
@@ -74,7 +74,7 @@ describe('Vue translate filter', () => {
       el,
       template: `
         <span>
-          {{ 'day' | translate-plural('days', 2) }}
+          {{ 'day' | nt('days', 2) }}
         </span>
       `,
     }).$mount();