Read the click-label listener with glListener in LabelItem

What does this MR do and why?

LabelItem in the legacy labels dropdown (sidebar/components/labels/labels_select_vue/) was a functional component. On click, it called listeners['click-label'](label).

That key exists only when the parent template is compiled by the Vue 2 template compiler, which keeps @click-label as written. The Vue 3 compiler binds onClickLabel, and @vue/compat exposes it to functional components as clickLabel. So with the Vue 3 compiler, a click on a label throws listeners.click-label is not a function, and the label is not selected.

Today no build uses the Vue 3 compiler, so users are not affected yet. The Vue 2 removal proof of concept !263207 uses it, and this bug failed 8 feature specs there (iteration report "group by label", test case creation) and dropdown_contents_labels_view_spec.js.

This MR makes LabelItem a stateful component and reads the listener with glListener('click-label') from glListenersMixin. glListener checks both spellings, so it works with both compilers and on plain Vue 3. The rendered markup does not change.

References

• Found in the Vue 2 removal proof of concept: !263207
• Plan to remove Vue 2: #634491

Screenshots or screen recordings

Not applicable. The markup does not change.

How to set up and validate locally

1. Open an issue that uses the legacy labels dropdown, for example on a test case (/-/quality/test_cases/new).
2. Open the labels dropdown and click a label. The label is selected.

spec/frontend/sidebar/components/labels/labels_select_vue/ passes with VUE_VERSION=2, with VUE_VERSION=3, and with VUE_VERSION=3 VUE_COMPILER_VERSION=3. On master, dropdown_contents_labels_view_spec.js fails with the Vue 3 compiler.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.