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.rb
  • spec/features/projects/labels/user_removes_labels_spec.rb
  • spec/features/projects/labels/user_sees_breadcrumb_links_spec.rb
  • spec/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 own initPromoteLabelModal, like initDeleteLabelModal; 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
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_REFUSED

These two entries are local GDK network noise and appear in both runs.

How to set up and validate locally

  1. Enable the flag in gdk rails console with Feature.enable(:vue3_migrate_labels).
  2. Open a project that has no labels.
  3. Go to Manage > Labels.
  4. Open the browser DevTools console.
  5. Check there is no appendChild TypeError.
  6. Create a label and reload.
  7. 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.

References

🤖 Generated with Claude Code

Edited by Miguel Rincon

Merge request reports

Loading
Loading