Add ESLint vue rules to detect vue i18n offences

What does this MR do?

Adds eslint-plugin-vue-i18n to provide i18n linting for .vue files.

• Files with eslint-disable directives will have their outstanding lints addressed in https://gitlab.com/gitlab-org/gitlab-ce/issues/63458, at which point the eslint-disables can be removed.

New Rules

• Introduces 2 new rules
  • no-bare-strings: providing an error on bare strings

<template>
<div>
 <h1>This is a translatable string</h1> // Error: Content should be marked for translation
</div>
</template>

• no-bare-attribute-strings: providing an error on bare attributes

<template>
<div>
 <h1 title="This is translatable">{{ __('This is a translatable string') }}</h1> // Error: Attribute should be marked for translation
</div>
</template>

• Provides autofixing for simple offences
• Disables the rules for files that will need to be manually fixed

EE Port

EE Port

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry for user-facing changes, or community contribution. Check the link for other scenarios.
• Documentation created/updated or follow-up review issue created
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Performance and testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Closes #63560 (closed)

changed milestone to %12.2

added Category:Internationalization Deliverable Manage [DEPRECATED] backstage [DEPRECATED] devopsmanage frontend missed-deliverable missed:12.1 priority1 workflowin review labels

marked the checklist item Changelog entry for user-facing changes, or community contribution. Check the link for other scenarios. as completed

marked the checklist item Separation of EE specific content as completed

added 1 commit

• 7919a732 - Disable vue-i18n for non-autofix files

Compare with previous version

	1 Warning
	This merge request changed files with disabled eslint rules. Please consider fixing them.

	1 Message
	This merge request includes changes to Vue files that have both CE and EE versions.

Disabled eslint rules

The following files have disabled eslint rules. Please consider fixing them:

• app/assets/javascripts/boards/components/board_list.vue
• app/assets/javascripts/boards/components/modal/header.vue
• app/assets/javascripts/boards/components/modal/tabs.vue
• app/assets/javascripts/clusters/components/application_row.vue
• app/assets/javascripts/diffs/components/compare_versions.vue
• app/assets/javascripts/diffs/components/hidden_files_warning.vue
• app/assets/javascripts/environments/components/environment_item.vue
• app/assets/javascripts/environments/components/stop_environment_modal.vue
• app/assets/javascripts/ide/components/branches/item.vue
• app/assets/javascripts/ide/components/ide_status_bar.vue
• app/assets/javascripts/issuable_suggestions/components/item.vue
• app/assets/javascripts/issue_show/components/edit_actions.vue
• app/assets/javascripts/issue_show/components/edited.vue
• app/assets/javascripts/issue_show/components/fields/description_template.vue
• app/assets/javascripts/jobs/components/commit_block.vue
• app/assets/javascripts/mr_popover/components/mr_popover.vue
• app/assets/javascripts/notes/components/diff_with_note.vue
• app/assets/javascripts/notes/components/note_edited_text.vue
• app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
• app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
• app/assets/javascripts/releases/components/release_block.vue
• app/assets/javascripts/reports/components/report_link.vue
• app/assets/javascripts/repository/components/last_commit.vue
• app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
• app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

Run the following command for more details

node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
  'app/assets/javascripts/boards/components/board_list.vue' \
  'app/assets/javascripts/boards/components/modal/header.vue' \
  'app/assets/javascripts/boards/components/modal/tabs.vue' \
  'app/assets/javascripts/clusters/components/application_row.vue' \
  'app/assets/javascripts/diffs/components/compare_versions.vue' \
  'app/assets/javascripts/diffs/components/hidden_files_warning.vue' \
  'app/assets/javascripts/environments/components/environment_item.vue' \
  'app/assets/javascripts/environments/components/stop_environment_modal.vue' \
  'app/assets/javascripts/ide/components/branches/item.vue' \
  'app/assets/javascripts/ide/components/ide_status_bar.vue' \
  'app/assets/javascripts/issuable_suggestions/components/item.vue' \
  'app/assets/javascripts/issue_show/components/edit_actions.vue' \
  'app/assets/javascripts/issue_show/components/edited.vue' \
  'app/assets/javascripts/issue_show/components/fields/description_template.vue' \
  'app/assets/javascripts/jobs/components/commit_block.vue' \
  'app/assets/javascripts/mr_popover/components/mr_popover.vue' \
  'app/assets/javascripts/notes/components/diff_with_note.vue' \
  'app/assets/javascripts/notes/components/note_edited_text.vue' \
  'app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue' \
  'app/assets/javascripts/pipelines/components/pipelines_artifacts.vue' \
  'app/assets/javascripts/releases/components/release_block.vue' \
  'app/assets/javascripts/reports/components/report_link.vue' \
  'app/assets/javascripts/repository/components/last_commit.vue' \
  'app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue' \
  'app/assets/javascripts/vue_shared/components/markdown/toolbar.vue'

Reviewer roulette

Changes that require review have been detected! A merge request is normally reviewed by both a reviewer and a maintainer in its primary category (e.g. frontend or backend), and by a maintainer in all other categories.

To spread load more evenly across eligible reviewers, Danger has randomly picked a candidate for each review slot. Feel free to override this selection if you think someone else would be better-suited, or the chosen person is unavailable.

Once you've decided who will review this merge request, mention them as you normally would! Danger does not (yet?) automatically notify them for you.

Category	Reviewer	Maintainer
frontend	Martin Wortschack (@wortschi)	Filipa Lacerda (@filipa)

Vue <template> in CE and EE

Some Vue files in CE have a counterpart in EE. (For example, path/to/file.vue and ee/path/to/file.vue.)

When run in the context of CE, the <template> of the CE Vue file is used. When run in the context of EE, the <template> of the EE Vue file is used.

It's easy to accidentally make a change to a CE <template> that should appear in both CE and EE without making the change in both places. When this happens, the change only takes effect in CE.

The following Vue files were changed as part of this merge request that include both a CE and EE version of the file:

• app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

If you made a change to the <template> of any of these Vue files that should be visible in both CE and EE, please ensure you have made your change to both versions of the file.

A better alternative

An even better alternative is to refactor this component to only use a single template for both CE and EE. More info on this approach here: https://docs.gitlab.com/ee/development/ee_features.html#template-tag

Generated by Danger

added 1 commit

• 86ad2219 - Disable vue-i18n for non-autofix files

Compare with previous version

added 2 commits

• d46af03e - Add @gitlab/eslint-plugin-vue-i18n plugin
• f418214d - Disable vue-i18n for non-autofix files

Compare with previous version

mentioned in merge request !31125 (merged)

Hey @nfriend mind reviewing this MR for me? Apologies its a little long, luckily its mostly disabling eslint rules until they can be fixed.

unmarked as a Work In Progress

assigned to @nfriend and unassigned @ekigbo

mentioned in merge request !29589 (closed)

mentioned in issue #57969 (moved)

added 1 commit

• fb9aa4e5 - Remove extra whitespace

Compare with previous version

mentioned in issue #63458 (moved)

added 28 commits

• fb9aa4e5...0674d127 - 25 commits from branch master
• e6533924 - Add @gitlab/eslint-plugin-vue-i18n plugin
• f35af8b9 - Disable vue-i18n for non-autofix files
• fea914cf - Remove extra whitespace

Compare with previous version

added 28 commits

• fb9aa4e5...0674d127 - 25 commits from branch master
• e6533924 - Add @gitlab/eslint-plugin-vue-i18n plugin
• f35af8b9 - Disable vue-i18n for non-autofix files
• fea914cf - Remove extra whitespace

Compare with previous version

added 28 commits

• fb9aa4e5...0674d127 - 25 commits from branch master
• e6533924 - Add @gitlab/eslint-plugin-vue-i18n plugin
• f35af8b9 - Disable vue-i18n for non-autofix files
• fea914cf - Remove extra whitespace

Compare with previous version

added 28 commits

• fb9aa4e5...0674d127 - 25 commits from branch master
• e6533924 - Add @gitlab/eslint-plugin-vue-i18n plugin
• f35af8b9 - Disable vue-i18n for non-autofix files
• fea914cf - Remove extra whitespace

Compare with previous version

resolved all threads

approved this merge request

@ekigbo I really like the idea of this rule! I'm assuming this rule is something we developed ourselves?

My main concern is that it seems like this rule will generate a lot of false positives going forward. I don't think it's healthy to get us into the habit of frequently disabling ESLint rules, and this rule seems like it will need to be disabled at least once per Vue file (on the name property, and potentially elsewhere in the file).

I'll defer to a maintainer as to whether we want to enable this rule or not (and maybe this discussion has already happened elsewhere). Assuming we do want to enable this rule, I think this merge request looks good . I'll go ahead and approve this merge request with this assumption. Back to you!

assigned to @ekigbo and unassigned @nfriend

added 60 commits

• fea914cf...760f7c62 - 56 commits from branch master
• e7f27970 - Add @gitlab/eslint-plugin-vue-i18n plugin
• 6d181466 - Disable vue-i18n for non-autofix files
• 4cae4594 - Remove extra whitespace
• 72385e7f - Added link to component name issue

Compare with previous version

added 1 commit

• c9319db6 - Added link to component name issue

Compare with previous version

resolved all threads

resolved all threads

Hey @timzallmann are you able to Maintainer review this for me?

assigned to @timzallmann and unassigned @ekigbo

added 201 commits

• c9319db6...534f8fc7 - 197 commits from branch master
• 769b963e - Add @gitlab/eslint-plugin-vue-i18n plugin
• 01d1a16a - Disable vue-i18n for non-autofix files
• ed427571 - Remove extra whitespace
• fafae7ad - Added link to component name issue

Compare with previous version

assigned to @mikegreiling and unassigned @timzallmann

I think this looks good to me. Just a couple of comments above regarding the proliferation of eslint-disable comments. I'm curious what alternatives have been considered.

assigned to @ekigbo

@ekigbo can you please create an EE branch with these changes to ensure we will not introduce any linter violations with these rule additions? I see gitlab-ee!14837 has already done an auto-fix pass against EE, but I'm not sure that accounts for any lines where we need to disable some rules.

added 67 commits

• fafae7ad...ed85fcfa - 63 commits from branch master
• f9091a68 - Add @gitlab/eslint-plugin-vue-i18n plugin
• 5084deba - Disable vue-i18n for non-autofix files
• 5fb7ab88 - Remove extra whitespace
• 57e94e18 - Added link to component name issue

Compare with previous version

added 1 commit

• 30fd4d01 - Remove unused eslint-disable

Compare with previous version

changed the description

unassigned @mikegreiling

added 173 commits

• 30fd4d01...407de041 - 168 commits from branch master
• f6fbd369 - Add @gitlab/eslint-plugin-vue-i18n plugin
• bfbc5482 - Disable vue-i18n for non-autofix files
• 2f46595a - Remove extra whitespace
• b8790427 - Added link to component name issue
• 57f09209 - Remove unused eslint-disable

Compare with previous version

added 11 commits

• 57f09209...1e7aafdc - 6 commits from branch master
• 4223eb28 - Add @gitlab/eslint-plugin-vue-i18n plugin
• 77133963 - Disable vue-i18n for non-autofix files
• d2f4a62f - Remove extra whitespace
• eb415889 - Added link to component name issue
• 2981f202 - Remove unused eslint-disable

Compare with previous version

added 48 commits

• 2981f202...46467de8 - 43 commits from branch master
• 1438e2ef - Add @gitlab/eslint-plugin-vue-i18n plugin
• 7a085809 - Disable vue-i18n for non-autofix files
• d866a965 - Remove extra whitespace
• e9d004bd - Added link to component name issue
• 5f676916 - Remove unused eslint-disable

Compare with previous version

changed the description

added 138 commits

• 5f676916...5847d0d3 - 132 commits from branch master
• da0fc52c - Add @gitlab/eslint-plugin-vue-i18n plugin
• b2634da3 - Disable vue-i18n for non-autofix files
• 2ee40a3e - Remove extra whitespace
• 0905780f - Added link to component name issue
• 26b6fee2 - Remove unused eslint-disable
• 07385956 - Remove extra whitespace

Compare with previous version

added 65 commits

• 07385956...2fd73269 - 60 commits from branch master
• 0a0d0f75 - Add @gitlab/eslint-plugin-vue-i18n plugin
• 596d41fa - Disable vue-i18n for non-autofix files
• 610156eb - Remove extra whitespace
• 127ecd13 - Added link to component name issue
• afd71c58 - Remove unused eslint-disable

Compare with previous version

added 1 commit

• 8f8ec5c2 - Remove unused eslint-disable

Compare with previous version

assigned to @mikegreiling and unassigned @ekigbo

added 73 commits

• 8f8ec5c2...eec1ed52 - 68 commits from branch master
• c9961270 - Add @gitlab/eslint-plugin-vue-i18n plugin
• 90f48742 - Disable vue-i18n for non-autofix files
• a353fdec - Remove extra whitespace
• e9693b67 - Added link to component name issue
• aceed414 - Remove unused eslint-disable

Compare with previous version

approved this merge request

resolved all threads

merged

mentioned in merge request !30760 (merged)

mentioned in issue #65856 (moved)