Fix missing link in the Observability feedback popover

Dakota Duxrequested to merge
634928-observability-feedback-link into master

What does this MR do and why?

Fixes the feedback link in the Observability "Give feedback" popover, which never rendered for some GitLab.com users.

  • Missing link: use a plain <a class="gl-link"> instead of GlLink. For users with Duo access and vue3_migrate_duo_panel off, the Vue 2 duo_panel bundle installs VueRouter after the page app mounts. GlLink then throws while reading $router, and Vue renders <!----> in its place. The cause is tracked in #634928 (closed); this MR only works around it here.
  • Translation: the link sentence and its period are now one string (%{linkStart}Give feedback on this experience%{linkEnd}.) in GlSprintf. Before, the period was hardcoded outside the translatable string.
  • Closing the popover: clicking the link now closes the popover. The old this.$refs.popover?.$emit('close') only emitted an event to the parent, so nothing happened. It now emits BV_HIDE_POPOVER on $root, like ee/app/assets/javascripts/boards/components/board_card_session_badge.vue.
Why GlLink throws, and how the regression test works

Vue 2 resolves a component's constructor options when it creates the vnode. GlPopover renders its slot when the page mounts, so the GlLink vnode exists before duo_panel runs Vue.use(VueRouter). bootstrap-vue patches the stored vnodes into BVPopoverTemplate only when the popover opens. The GlLink instance created then has no router beforeCreate hook, so _routerRoot is undefined, while the $router getter on Vue.prototype exists. Reading it throws Cannot read properties of undefined (reading '_router').

The global Jest mock for GlPopover (spec/frontend/__mocks__/@gitlab/ui.js) renders slots inline and hides this. The regression test uses the real GlPopover through jest.requireActual, installs VueRouter after mounting, and opens the popover. It fails with GlLink (same error as production) and passes with this change. It's skipped under Vue 3, where the bug doesn't apply.

References

  • #634928 (closed)
  • !252293 (merged) (the change that moved Vue.use(VueRouter) after page bundles)
  • Out of scope, same $emit('close') pattern: ee/app/assets/javascripts/compliance_dashboard/components/shared/filters.vue:125

Screenshots or screen recordings

Before After
Popover text ends with a lone "." Popover text ends with the "Give feedback on this experience." link

Screenshots to follow.

How to set up and validate locally

  1. Sign in as a user with Duo access, and disable vue3_migrate_duo_panel for them: 
    Feature.disable(:vue3_migrate_duo_panel)
  2. Open a group or project Observability page and select Give feedback.
  3. The popover ends with the Give feedback on this experience link. On master, the link is missing.
  4. Select the link. It opens the feedback issue in a new tab and the popover closes.

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.

Merge request reports