Fix Vue warning in Security inventory breadcrumbs during load
What does this MR do and why?
Removes a Vue [Vue warn]: Invalid prop: custom validator check failed for prop "items" warning that appears in the browser console every time a user opens the Security inventory page.
The warning came from RecursiveBreadcrumbs, which built a crumb from this.group.name before the Apollo GroupAvatarAndParentQuery resolved. During that brief loading window the crumb had text: undefined, which fails GlBreadcrumb's items validator (each item requires a truthy text). The crumbs computed now falls back to the accumulated items prop until group.name is populated, so no invalid item ever reaches GlBreadcrumb.
References
Screenshots or screen recordings
| Before | After |
|---|---|
|
Console warning on every load
|
No warning
|
How to set up and validate locally
- Open a group in the local GDK and navigate to Secure > Security inventory.
- Open the browser DevTools console before or during the initial load.
- Verify no
[Vue warn]: Invalid prop: custom validator check failed for prop "items"message appears. - Navigate into a subgroup via the sidebar; the breadcrumb path should render correctly and no warning should fire.
- Run
yarn jest ee/spec/frontend/security_inventory/components/recursive_breadcrumbs_spec.jsand confirm all three tests pass, including the new "while the group query is still loading" case.
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.