Address vue/v-on-event-hyphenation offenses

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

❗ COMMUNITY CONTRIBUTORS, PLEASE ONLY PICK UP ONE DIRECTORY OF <20 FILES AT A TIME TO KEEP MERGE REQUESTS MANAGEABLE ❗

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
  2. Update all v-on custom events to be kebab-case
  3. Create a screen recording of the components working as expected in the application
  4. Remove the modified files from .eslint_todo/vue-v-on-event-hyphenation.mjs
  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 Alexander Turinske