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

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

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import { formatTime } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
@@ -28,7 +28,7 @@ export default {
   },
   computed: {
     title() {
-      return 'Deploy to...';
+      return __('Deploy to...');
     },
   },
   methods: {
@@ -80,7 +80,8 @@ export default {
       data-toggle="dropdown"
     >
       <span>
-        <icon name="play" /> <icon name="chevron-down" />
+        <icon name="play" />
+        <icon name="chevron-down" />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>
@@ -94,9 +95,10 @@ export default {
           class="js-manual-action-link no-btn btn d-flex align-items-center"
           @click="onClickAction(action)"
         >
-          <span class="flex-fill"> {{ action.name }} </span>
+          <span class="flex-fill">{{ action.name }}</span>
           <span v-if="action.scheduledAt" class="text-secondary">
-            <icon name="clock" /> {{ remainingTime(action) }}
+            <icon name="clock" />
+            {{ remainingTime(action) }}
           </span>
         </button>
       </li>

app/assets/javascripts/environments/components/environment_item.vue

 <script>
+import { __, sprintf } from '~/locale';
 import Timeago from 'timeago.js';
 import _ from 'underscore';
 import { GlTooltipDirective } from '@gitlab/ui';
@@ -172,7 +173,9 @@ export default {
         this.model.last_deployment.user &&
         this.model.last_deployment.user.username
       ) {
-        return `${this.model.last_deployment.user.username}'s avatar'`;
+        return sprintf(__("%{username}'s avatar"), {
+          username: this.model.last_deployment.user.username,
+        });
       }
       return '';
     },
@@ -293,6 +296,9 @@ export default {
      * @returns {Boolean|Undefined}
      */
     isLastDeployment() {
+      // TODO: when the vue i18n rules are merged need to disable @gitlab/i18n/no-non-i18n-strings
+      // name: 'last?' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
+      // Vue i18n ESLint rules issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/63560
       return this.model && this.model.last_deployment && this.model.last_deployment['last?'];
     },
 

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
+import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
@@ -21,7 +22,7 @@ export default {
   },
   computed: {
     title() {
-      return 'Monitoring';
+      return __('Monitoring');
     },
   },
 };

app/assets/javascripts/environments/components/environment_terminal_button.vue

@@ -5,6 +5,7 @@
  */
 import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -27,7 +28,7 @@ export default {
   },
   computed: {
     title() {
-      return 'Terminal';
+      return __('Terminal');
     },
   },
 };

locale/gitlab.pot

@@ -3485,6 +3485,9 @@ msgstr ""
 msgid "Deploy key was successfully updated."
 msgstr ""
 
+msgid "Deploy to..."
+msgstr ""
+
 msgid "DeployKeys|+%{count} others"
 msgstr ""
 
@@ -10163,6 +10166,9 @@ msgstr ""
 msgid "Templates"
 msgstr ""
 
+msgid "Terminal"
+msgstr ""
+
 msgid "Terminal for environment"
 msgstr ""