Merge branch '63560-add-vue-i18n-eslint-ee' into 'master'

EE Port - 63560 add vue i18n eslint EE

See merge request gitlab-org/gitlab-ee!14929

.eslintrc.yml

@@ -10,12 +10,15 @@ plugins:
   - import
   - html
   - "@gitlab/i18n"
+  - "@gitlab/vue-i18n"
 settings:
   import/resolver:
     webpack:
       config: './config/webpack.config.js'
 rules:
   "@gitlab/i18n/no-non-i18n-strings": error
+  "@gitlab/vue-i18n/no-bare-strings": error
+  "@gitlab/vue-i18n/no-bare-attribute-strings": error
   import/no-commonjs: error
   no-underscore-dangle:
     - error
@@ -36,9 +39,6 @@ rules:
   vue/use-v-on-exact: off
 overrides:
   files:
-    # Vue is temporarily being disabled until the autofix errors are resolved
-    # Follow up issue https://gitlab.com/gitlab-org/gitlab-ce/issues/57969
-    - '*.vue'
     - '**/spec/**/*'
   rules:
     "@gitlab/i18n/no-non-i18n-strings": off

app/assets/javascripts/badges/components/badge.vue

@@ -3,6 +3,8 @@ import Icon from '~/vue_shared/components/icon.vue';
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
+  // name: 'Badge' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Badge',
   components: {
     Icon,

app/assets/javascripts/boards/components/board_list.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import Sortable from 'sortablejs';
 import { GlLoadingIcon } from '@gitlab/ui';
 import boardNewIssue from './board_new_issue.vue';

app/assets/javascripts/boards/components/modal/header.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { __ } from '~/locale';
 import ModalFilters from './filters';
 import ModalTabs from './tabs.vue';

app/assets/javascripts/boards/components/modal/tabs.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 

app/assets/javascripts/clusters/components/application_row.vue

 <script>
 /* eslint-disable vue/require-default-prop */
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLink, GlModalDirective } from '@gitlab/ui';
 import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 import { s__, __, sprintf } from '~/locale';

app/assets/javascripts/diffs/components/commit_item.vue

@@ -49,8 +49,8 @@ export default {
       return this.author.id ? this.author.id : '';
     },
     authorUrl() {
-      // TODO: when the vue i18n rules are merged need to disable @gitlab/i18n/no-non-i18n-strings
       // name: 'mailto:' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return this.author.web_url || `mailto:${this.commit.author_email}`;
     },
     authorAvatar() {

app/assets/javascripts/diffs/components/compare_versions.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';

app/assets/javascripts/diffs/components/hidden_files_warning.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 export default {
   props: {
     total: {

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

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { __, sprintf } from '~/locale';
 import Timeago from 'timeago.js';
 import _ from 'underscore';
@@ -286,9 +287,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
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return this.model && this.model.last_deployment && this.model.last_deployment['last?'];
     },
 

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

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlTooltipDirective } from '@gitlab/ui';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { s__, sprintf } from '~/locale';

app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue

@@ -36,12 +36,14 @@ export default {
       <label class="label-bold" for="error-tracking-api-host">{{ __('Sentry API URL') }}</label>
       <div class="row">
         <div class="col-8 col-md-9 gl-pr-0">
+          <!-- eslint-disable @gitlab/vue-i18n/no-bare-attribute-strings -->
           <gl-form-input
             id="error-tracking-api-host"
             :value="apiHost"
             placeholder="https://mysentryserver.com"
             @input="$emit('update-api-host', $event)"
           />
+          <!-- eslint-enable @gitlab/vue-i18n/no-bare-attribute-strings -->
         </div>
       </div>
       <p class="form-text text-muted">

app/assets/javascripts/ide/components/branches/item.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import Icon from '~/vue_shared/components/icon.vue';
 import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import router from '../../ide_router';

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -45,6 +45,8 @@ export default {
   },
   computed: {
     iconName() {
+      // name: '-solid' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       const suffix = this.stagedList ? '-solid' : '';
 
       return `${getCommitIconMap(this.file).icon}${suffix}`;

app/assets/javascripts/ide/components/ide_status_bar.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { mapActions, mapState, mapGetters } from 'vuex';
 import IdeStatusList from 'ee_else_ce/ide/components/ide_status_list.vue';
 import icon from '~/vue_shared/components/icon.vue';

app/assets/javascripts/issuable_suggestions/components/item.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import _ from 'underscore';
 import { GlLink, GlTooltip, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';

app/assets/javascripts/issue_show/components/edit_actions.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { __, sprintf } from '~/locale';
 import updateMixin from '../mixins/update';
 import eventHub from '../event_hub';

app/assets/javascripts/issue_show/components/edited.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 
 export default {

app/assets/javascripts/issue_show/components/fields/description_template.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import $ from 'jquery';
 import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
 

app/assets/javascripts/jobs/components/commit_block.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLink } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 

app/assets/javascripts/mr_popover/components/mr_popover.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlPopover, GlSkeletonLoading } from '@gitlab/ui';
 import Icon from '../../vue_shared/components/icon.vue';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
@@ -7,7 +8,8 @@ import query from '../queries/merge_request.query.graphql';
 import { mrStates, humanMRStates } from '../constants';
 
 export default {
-  name: 'MRPopover',
+  // name: 'MRPopover' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
+  name: 'MRPopover', // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
   components: {
     GlPopover,
     GlSkeletonLoading,
@@ -102,9 +104,11 @@ export default {
         <ci-icon v-if="detailedStatus" :status="detailedStatus" />
       </div>
       <h5 class="my-2">{{ mergeRequestTitle }}</h5>
+      <!-- eslint-disable @gitlab/vue-i18n/no-bare-strings -->
       <div class="text-secondary">
         {{ `${projectPath}!${mergeRequestIID}` }}
       </div>
+      <!-- eslint-enable @gitlab/vue-i18n/no-bare-strings -->
     </div>
   </gl-popover>
 </template>

app/assets/javascripts/notebook/cells/markdown.vue

@@ -43,7 +43,7 @@ renderer.paragraph = t => {
   if (typeof katex !== 'undefined') {
     const katexString = text
       .replace(/&/g, '&')
-      .replace(/&=&/g, '\\space=\\space')
+      .replace(/&=&/g, '\\space=\\space') // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
       .replace(/<(\/?)em>/g, '_');
     const regex = new RegExp(katexRegexString, 'gi');
     const matchLocation = katexString.search(regex);

app/assets/javascripts/notebook/cells/output/image.vue

@@ -25,7 +25,7 @@ export default {
   },
   computed: {
     imgSrc() {
-      return `data:${this.outputType};base64,${this.rawCode}`;
+      return `data:${this.outputType};base64,${this.rawCode}`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
     },
     showOutput() {
       return this.index === 0;

app/assets/javascripts/notebook/index.vue

@@ -39,7 +39,7 @@ export default {
   },
   methods: {
     cellType(type) {
-      return `${type}-cell`;
+      return `${type}-cell`; // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
     },
   },
 };

app/assets/javascripts/notes/components/diff_with_note.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { mapState, mapActions } from 'vuex';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';

app/assets/javascripts/notes/components/note_edited_text.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 
 export default {

app/assets/javascripts/operation_settings/components/external_dashboard.vue

@@ -53,12 +53,15 @@ export default {
           label-for="full-dashboard-url"
           :description="s__('ExternalMetrics|Enter the URL of the dashboard you want to link to')"
         >
+          <!-- placeholder with a url is a false positive  -->
+          <!-- eslint-disable @gitlab/vue-i18n/no-bare-attribute-strings -->
           <gl-form-input
             id="full-dashboard-url"
             v-model="userDashboardUrl"
             placeholder="https://my-org.gitlab.io/my-dashboards"
             @keydown.enter.native.prevent="updateExternalDashboardUrl"
           />
+          <!-- eslint-enable @gitlab/vue-i18n/no-bare-attribute-strings -->
         </gl-form-group>
         <gl-button variant="success" @click="updateExternalDashboardUrl">
           {{ __('Save Changes') }}

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
 import { __ } from '~/locale';
 import projectFeatureSetting from './project_feature_setting.vue';

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -66,7 +66,7 @@ export default {
         <template v-if="detailsList.length">
           <tr v-for="(item, index) in detailsList" :key="index">
             <td>
-              <span>{{ item.duration }}ms</span>
+              <span>{{ sprintf(__('%{duration}ms'), { duration: item.duration }) }}</span>
             </td>
             <td>
               <div class="js-toggle-container">

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

@@ -76,7 +76,6 @@ export default {
       if (this.hasHost && this.currentRequest.details.host.canary) {
         return glEmojiTag('baby_chick');
       }
-
       return '';
     },
   },

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 

app/assets/javascripts/registry/components/app.vue

@@ -81,9 +81,11 @@ export default {
       );
     },
     dockerBuildCommand() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `docker build -t ${this.repositoryUrl} .`;
     },
     dockerPushCommand() {
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `docker push ${this.repositoryUrl}`;
     },
   },

app/assets/javascripts/releases/components/release_block.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import _ from 'underscore';
 import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';

app/assets/javascripts/reports/components/modal.vue

 <script>
+// import { sprintf, __ } from '~/locale';
 import Modal from '~/vue_shared/components/gl_modal.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CodeBlock from '~/vue_shared/components/code_block.vue';
@@ -47,9 +48,9 @@ export default {
             </a>
           </template>
 
-          <template v-else-if="field.type === $options.fieldTypes.miliseconds">
-            {{ field.value }} ms
-          </template>
+          <template v-else-if="field.type === $options.fieldTypes.miliseconds">{{
+            sprintf(__('%{value} ms'), { value: field.value })
+          }}</template>
 
           <template v-else-if="field.type === $options.fieldTypes.text">
             {{ field.value }}

app/assets/javascripts/reports/components/report_link.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 export default {
   name: 'ReportIssueLink',
   props: {

app/assets/javascripts/repository/components/last_commit.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import Icon from '../../vue_shared/components/icon.vue';

app/assets/javascripts/repository/components/table/row.vue

@@ -115,6 +115,7 @@ export default {
       <component :is="linkComponent" :to="routerLinkTo" :href="url" class="str-truncated">
         {{ fullPath }}
       </component>
+      <!-- eslint-disable-next-line @gitlab/vue-i18n/no-bare-strings -->
       <gl-badge v-if="lfsOid" variant="default" class="label-lfs ml-1">LFS</gl-badge>
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>

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

@@ -3,6 +3,8 @@ import { __, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
+  // name: 'Assignees' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Assignees',
   directives: {
     tooltip,

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

@@ -14,6 +14,8 @@ import ReviewAppLink from './review_app_link.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {
+  // name: 'Deployment' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Deployment',
   components: {
     LoadingButton,

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import Flash from '~/flash';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { s__, __ } from '~/locale';
@@ -84,6 +85,8 @@ export default {
         .removeSourceBranch()
         .then(res => res.data)
         .then(data => {
+          // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+          // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
           if (data.message === 'Branch was deleted') {
             eventHub.$emit('MRWidgetUpdateRequested', () => {
               this.isMakingRequest = false;

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -40,6 +40,8 @@ import { setFaviconOverlay } from '../lib/utils/common_utils';
 
 export default {
   el: '#js-vue-mr-widget',
+  // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'MRWidget',
   components: {
     'mr-widget-header': WidgetHeader,

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

@@ -44,6 +44,8 @@ export default {
   },
   computed: {
     changedIcon() {
+      // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       const suffix = !this.file.changed && this.file.staged && !this.showStagedIcon ? '-solid' : '';
 
       if (this.forceModifiedIcon) return `file-modified${suffix}`;

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -38,10 +38,11 @@ export default {
   computed: {
     mdTable() {
       return [
-        '| header | header |',
+        // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+        '| header | header |', // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
         '| ------ | ------ |',
-        '| cell | cell |',
-        '| cell | cell |',
+        '| cell | cell |', // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
+        '| cell | cell |', // eslint-disable-line @gitlab/i18n/no-non-i18n-strings
       ].join('\n');
     },
     mdSuggestion() {

app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLink } from '@gitlab/ui';
 
 export default {

app/assets/javascripts/vue_shared/components/select2_select.vue

@@ -3,6 +3,8 @@ import $ from 'jquery';
 import 'select2';
 
 export default {
+  // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Select2Select',
   props: {
     options: {

app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue

@@ -78,6 +78,8 @@ export default {
       return percent;
     },
     barStyle(percent) {
+      // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `width: ${percent}%;`;
     },
     getTooltip(label, count) {

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { __ } from '~/locale';
 import Flash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';

ee/app/assets/javascripts/batch_comments/components/preview_item.vue

@@ -45,6 +45,7 @@ export default {
     },
     linePosition() {
       if (this.draft.position && this.draft.position.position_type === IMAGE_DIFF_POSITION_TYPE) {
+        // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
         return `${this.draft.position.x}x ${this.draft.position.y}y`;
       }
 

ee/app/assets/javascripts/boards/components/milestone_select.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import MilestoneSelect from '~/milestone_select';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
@@ -6,12 +7,14 @@ import { __ } from '~/locale';
 const ANY_MILESTONE = {
   title: __('Any Milestone'),
   titleClass: 'text-secondary',
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Any',
   id: null,
 };
 
 const NO_MILESTONE = {
   title: __('No Milestone'),
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'None',
   id: -1,
 };

ee/app/assets/javascripts/boards/components/weight_select.vue

 <script>
 /* eslint-disable vue/require-default-prop */
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 
 import WeightSelect from 'ee/weight_select';
 import { GlLoadingIcon } from '@gitlab/ui';

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -118,6 +118,8 @@ export default {
             const newDiscussion = {
               __typename: 'DiscussionEdge',
               node: {
+                // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+                // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
                 __typename: 'Discussion',
                 id: createImageDiffNote.note.discussion.id,
                 replyId: createImageDiffNote.note.discussion.replyId,

ee/app/assets/javascripts/design_management/pages/index.vue

@@ -89,6 +89,8 @@ export default {
       }
 
       const optimisticResponse = Array.from(files).map(file => ({
+        // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+        // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
         __typename: 'Design',
         id: -_.uniqueId(),
         image: '',
@@ -158,9 +160,13 @@ export default {
 
             const newQueryData = {
               project: {
+                // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+                // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
                 __typename: 'Project',
                 id: '',
                 issue: {
+                  // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+                  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
                   __typename: 'Issue',
                   designs: {
                     __typename: 'DesignCollection',
@@ -187,6 +193,8 @@ export default {
             });
           },
           optimisticResponse: {
+            // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
+            // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
             __typename: 'Mutation',
             designManagementUpload: {
               __typename: 'DesignManagementUploadPayload',

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 /**
  * Renders a deploy board.
  *

ee/app/assets/javascripts/epic/components/epic_header.vue

@@ -43,6 +43,7 @@ export default {
     actionButtonClass() {
       // False positive css classes
       // https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/24
+      // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
       return `btn btn-grouped js-btn-epic-action qa-close-reopen-epic-button ${
         this.isEpicOpen ? 'btn-close' : 'btn-open'
       }`;

ee/app/assets/javascripts/ide/components/ide.vue

@@ -3,6 +3,8 @@ import Ide from '~/ide/components/ide.vue';
 import EERightPane from './panes/right.vue';
 
 export default {
+  // name: 'EEIde' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'EEIde',
   components: {
     Ide,

ee/app/assets/javascripts/jobs/components/shared_runner_limit_block.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 export default {
   props: {
     quotaUsed: {

ee/app/assets/javascripts/licenses/components/cells/cell.vue

@@ -3,6 +3,8 @@ import _ from 'underscore';
 import { GlSkeletonLoading } from '@gitlab/ui';
 
 export default {
+  // name: 'Cell' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'Cell',
   components: {
     GlSkeletonLoading,

ee/app/assets/javascripts/monitoring/components/alert_widget_form.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { __, s__ } from '~/locale';
 import _ from 'underscore';
 import Vue from 'vue';

ee/app/assets/javascripts/related_issues/components/add_issuable_form.vue

 <script>
+/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
 import { GlLoadingIcon } from '@gitlab/ui';
 import RelatedIssuableInput from './related_issuable_input.vue';
 import { issuableTypesMap } from '../constants';

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -98,10 +98,14 @@ export default {
     renderTimelineBar() {
       if (this.hasStartDate()) {
         if (this.presetType === PRESET_TYPES.QUARTERS) {
+          // CSS properties are a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/24
+          // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
           this.timelineBarStyles = `width: ${this.getTimelineBarWidthForQuarters()}px; ${this.getTimelineBarStartOffsetForQuarters()}`;
         } else if (this.presetType === PRESET_TYPES.MONTHS) {
+          // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
           this.timelineBarStyles = `width: ${this.getTimelineBarWidthForMonths()}px; ${this.getTimelineBarStartOffsetForMonths()}`;
         } else if (this.presetType === PRESET_TYPES.WEEKS) {
+          // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
           this.timelineBarStyles = `width: ${this.getTimelineBarWidthForWeeks()}px; ${this.getTimelineBarStartOffsetForWeeks()}`;
         }
         this.timelineBarReady = true;

locale/gitlab.pot

@@ -215,6 +215,9 @@ msgid_plural "%{count} pending comments"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{duration}ms"
+msgstr ""
+
 msgid "%{edit_in_new_fork_notice} Try to cherry-pick this commit again."
 msgstr ""
 
@@ -370,6 +373,9 @@ msgstr ""
 msgid "%{username}'s avatar"
 msgstr ""
 
+msgid "%{value} ms"
+msgstr ""
+
 msgid "%{verb} %{time_spent_value} spent time."
 msgstr ""
 

package.json

@@ -147,6 +147,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "@gitlab/eslint-config": "^1.6.0",
     "@gitlab/eslint-plugin-i18n": "^1.1.0",
+    "@gitlab/eslint-plugin-vue-i18n": "^1.2.0",
     "@vue/test-utils": "^1.0.0-beta.25",
     "axios-mock-adapter": "^1.15.0",
     "babel-jest": "^24.1.0",

yarn.lock

@@ -991,6 +991,13 @@
   dependencies:
     requireindex "~1.1.0"
 
+"@gitlab/eslint-plugin-vue-i18n@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin-vue-i18n/-/eslint-plugin-vue-i18n-1.2.0.tgz#6dcd8bf6bdd7a31c1c4c2c4114762508af435836"
+  integrity sha512-lROk643/C3tBORIJeXNQlPutjAdSkjA43rpNHVxugU5OcpIOfc7oVXDZ23GwiHMZp8bE3QpP/91PEvEY9ywAVQ==
+  dependencies:
+    vue-eslint-parser "^6.0.4"
+
 "@gitlab/svgs@^1.67.0":
   version "1.67.0"
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.67.0.tgz#c7b94eca13b99fd3aaa737fb6dcc0abc41d3c579"
@@ -4745,6 +4752,15 @@ espree@^4.0.0, espree@^4.1.0:
     acorn-jsx "^5.0.0"
     eslint-visitor-keys "^1.0.0"
 
+espree@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
+  integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
+  dependencies:
+    acorn "^6.0.7"
+    acorn-jsx "^5.0.0"
+    eslint-visitor-keys "^1.0.0"
+
 esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -12646,6 +12662,18 @@ vue-eslint-parser@^4.0.2:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
+vue-eslint-parser@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-6.0.4.tgz#56ff47e2c2644bff39951d5a284982c7ecd6f7fa"
+  integrity sha512-GYsDsDWwKaGtnkW4nGUxr01wqIO2FB9/QHQTW1Gl5SUr5OyQvpnR90/D+Gq2cIxURX7aJ7+VyD+37Yx9eFwTgw==
+  dependencies:
+    debug "^4.1.1"
+    eslint-scope "^4.0.0"
+    eslint-visitor-keys "^1.0.0"
+    espree "^5.0.0"
+    esquery "^1.0.1"
+    lodash "^4.17.11"
+
 vue-functional-data-merge@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"