Fix v-for keys in MR form hidden inputs
What does this MR do and why?
The merge request edit form on EE has three warnings from Vue keys.
(a) Avoid using non-primitive value as key in BlockingMrInputRoot: when an MR has inaccessible blocking MRs, the code appends an object { text, isHiddenRef: true } to the references list. The template looped over all references with :key="ref" and :value="ref", so the object became a key and was submitted as [object Object]. Fix: add a visibleReferences computed property that filters out the placeholder. Only real references render hidden inputs.
(b) Duplicate keys detected in MrRulesHiddenInputs: the template keyed rules by rule.id, but new rules from ADD_EMPTY_RULE and SET_EMPTY_RULE mutations carry id: null, so two new rules share a key. Fix: key by index instead, matching the sibling mr_rules.vue table that already uses this pattern.
(c) Avoid using non-primitive value as key in RelatedIssuableInput: BlockingMrInputRoot passes the same placeholder object to this shared component, which shows it as a token. The token list used the object as the v-for key. Fix: key by reference.text || reference, which mirrors the existing display-reference binding.
Jest specs updated: blocking_mr_input_root_spec.js now passes the placeholder as the real object shape and verifies no input renders for it; mr_rules_hidden_inputs_spec.js adds a case with two new rules; related_issuable_input_spec.js adds a case with the placeholder object.
Changes made:
ee/app/assets/javascripts/projects/merge_requests/blocking_mr_input.jsee/app/assets/javascripts/projects/merge_requests/blocking_mr_input_root.vueee/app/assets/javascripts/approvals/mr_edit/mr_rules_hidden_inputs.vueapp/assets/javascripts/related_issues/components/related_issuable_input.vuespec/frontend/related_issues/components/related_issuable_input_spec.jsee/spec/frontend/projects/merge_requests/blocking_mr_input_root_spec.jsee/spec/frontend/approvals/mr_edit/mr_rules_hidden_inputs_spec.js
How to set up and validate locally
- Open an MR that has an inaccessible blocking MR and an MR with approval rules.
- Go to the edit form.
- Save the form.
- Blocking MRs and approvers persist on reload.
- Check the browser console shows no
[Vue warn]line for these warnings.
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 C: Vue warnings)
- Warnings surfaced by !255207 (closed) (feature specs fail on console errors)
- Sibling fixes from the same section: !255388 (merged), !255389 (merged), !255391 (closed), !255392 (merged), !255393 (closed), !255394 (merged), !255395 (merged), !255396 (merged), !255397 (merged), !255398 (merged)