Skip the promote label modal when its mount point is absent
What does this MR do and why?
The initLabelIndex function in app/assets/javascripts/labels/index.js unconditionally mounted a Vue app on #js-promote-label-modal. The labels index page renders that element only when the project has labels or an active filter. A project without labels renders an empty state and no such element.
Under Vue 2 a missing el only produced a warning. The labels pages are now migrated to Vue 3 behind the vue3_migrate_labels feature flag. The Vue 3 compat wrapper resolves the selector and appends a container to the element. When the element is absent, this throws Uncaught TypeError: Cannot read properties of null (reading 'appendChild').
In CI, where the flag is enabled, this logged the error in 6 examples across 4 spec files. They all visit the labels page of a project without labels:
spec/features/projects/labels/user_edits_labels_spec.rbspec/features/projects/labels/user_removes_labels_spec.rbspec/features/projects/labels/user_sees_breadcrumb_links_spec.rbspec/features/projects/active_tabs_spec.rb
The fix moves the modal into its own initPromoteLabelModal function and checks whether the mount point exists before mounting the Vue app. When absent, the function returns null. When present, the app mounts exactly as before. The list behaviour and the delete modal still initialize in both cases.
Changes made:
app/assets/javascripts/labels/index.js— move the modal into its owninitPromoteLabelModal, likeinitDeleteLabelModal; look the element up and return early when it is missing
Before and after
A temporary feature spec opened the labels page of a project with no labels, with vue3_migrate_labels enabled. It ran once on the merge-base and once on the MR head and saved the browser console SEVERE log.
| Before | After |
|---|---|
![]() |
![]() |
| Run | appendChild TypeError count |
|---|---|
| merge-base | 2 |
| MR head | 0 |
Console SEVERE entries on the MR head:
https://www.gravatar.com/avatar/...?s=80&d=identicon - Failed to load resource: net::ERR_CONNECTION_RESET
http://localhost/com.snowplowanalytics.snowplow/tp2 - Failed to load resource: net::ERR_CONNECTION_REFUSEDThese two entries are local GDK network noise and appear in both runs.
How to set up and validate locally
- Enable the flag in
gdk rails consolewithFeature.enable(:vue3_migrate_labels). - Open a project that has no labels.
- Go to Manage > Labels.
- Open the browser DevTools console.
- Check there is no
appendChildTypeError. - Create a label and reload.
- Check that the label can be promoted from its actions menu, which uses the modal.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
- I have evaluated the MR acceptance checklist for this MR.
References
- Addresses one entry of #628901 (browser console error catalogue, section B)
- Errors surfaced by !255207 (closed) (feature specs fail on console errors)
- Sibling fixes from the same catalogue: !255305 (merged), !255309 (merged)

