Address vue/v-on-event-hyphenation offenses

❗ COMMUNITY CONTRIBUTORS, PLEASE DO NOT ASSIGN THIS ISSUE TO YOURSELF. JUST CREATE A MERGE REQUEST. ONLY PICK ONE EVENT AND UPDATE IT ACCROSS ALL FILES (NOT JUST WHERE THE EVENT IS EMITTED) ❗

The vue/on-event-hyphenation ESLint rule was enabled in Adds linting for Vue events formatting (!214221 - merged) and uncovered many offenses

This epic tracks the progress for addressing existing offenses in the files that are currently ignored in .eslint_todo/vue-on-event-hyphenation.mjs.

Example from the docs

<template>
  <!-- ✓ GOOD -->
  <MyComponent v-on:custom-event="handleEvent" />

  <!-- ✗ BAD -->
  <MyComponent v-on:customEvent="handleEvent" />
</template>

Implementation

  1. Pick a directory of files from .eslint_todo/vue-v-on-event-hyphenation.mjs and remove the files from the list

  2. Update all v-on custom events to be kebab-case

    • NOTE: The --fix option on the command line can automatically fix some of the problems reported by this rule.

      yarn eslint path/to/the/directory --fix

    • NOTE: Some GitLab-UI components currently don't support hyphenated actions (e.g. GlAlert). Disable this eslint rule around those components

      <!-- eslint-disable vue/v-on-event-hyphenation -->
...
<!-- eslint-enable vue/v-on-event-hyphenation -->

  3. Update all event consumers and specs, by searching for @customEvent and emit('customEvent') in the whole codebase.

  4. Create a screen recording of the components working as expected in the application

  5. Stage all changes

    git add .

  6. Run Prettier on all staged files

    yarn run lint:prettier:staged:fix

  7. Stage all new changes

    git add .

  8. Run eslint to verify all files were fixed or fix any any issues

    node scripts/frontend/eslint.js --no-warn-ignored --no-error-on-unmatched-pattern --format gitlab .eslint_todo/vue-v-on-event-hyphenation.mjs ./path/to/directory

  9. Open a merge request to update any alt text that doesn't follow the guidelines. For details with how to open a merge request, see Contribute to the GitLab documentation. In the merge request description, include this text:

    Related to: https://gitlab.com/gitlab-org/gitlab/-/issues/583560

Support

Support contact: @aturinske

Edited by 🤖 GitLab Bot 🤖