Fix Model Selection tooltips not rendering in Vue 3
What does this MR do and why?
- Fix the "Apply to all" tooltip not rendering in Vue 3 on the instance-level and namespace-level Model Selection pages.
- Fix the
warningtooltip not rendering in Vue 3 when no model is selected for a feature in the instance-level Model Selection page (offline mode)
Root cause: batch_update_button.vue and batch_settings_updater.vue used the GlTooltip component with :target="() => $refs.someRef". In Vue 3, $refs are not populated during the initial render when the tooltip component evaluates its target function, so the tooltip received a null target and rendered an empty container. Since there is a company wide effort to migrate to Vue 3 right now, this is important to fix.
Fix: Replace the GlTooltip component with the v-gl-tooltip directive, which is the Vue 3-compatible approach already used by sibling components in the same directory (available_models_row.vue, model_select_dropdown.vue, etc.).
Closes #624686 (closed)
References
- Issue: #624686 (closed)
- Related MR: !248438 (merged)
- Related discussion: !248438 (comment 3750436663)
Screenshots or screen recordings
SaaS (Vue3)
| Before | After |
|---|---|
![]() |
![]() |
Self-managed online (Vue3)
| Before | After |
|---|---|
![]() |
![]() |
Self-managed offline (Vue3)
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Switch GDK to Vue 3:
gdk config set vite.vue_version 3 gdk reconfigure gdk restart
Validating instance-level model selection
- Go to
/admin/gitlab_duo/model_selection/features. - Hover over the Apply to all button — tooltip should now render with helper text.
- Hover over the warning icon when no model is assigned (for offline mode only) — tooltip should now render with helper text.
Validating namespace-level model selection
- Go to
/groups/gitlab-duo/-/settings/gitlab_duo/model_selection(wheregitlab-duois the group ID) - Hover over the Apply to all button — tooltip should now render with helper text.
Validating no regressions in Vue2
- Repeat steps above with GDK in Vue 2
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.





