Loading
Skip the registry details crumb until its name loads
What does this MR do and why?
The registry breadcrumb shows a details crumb using detailsRouteName. The Google Artifact Registry router resolves that name from a breadCrumbState that starts empty and fills after the GraphQL query. The fallback to $route.params.id does not help because that router has no id param. GlBreadcrumb has a validator that requires a truthy text, so the first render with an empty name fails validation.
The warning is Invalid prop: custom validator check failed for prop "items" from GlBreadcrumb. This occurs on the artifact registry details page.
Fix: do not push the details crumb while detailsRouteName is empty. Add a spec case for when the name is empty.
Changes made:
app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vuespec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
How to set up and validate locally
-
Go to a Google Artifact Registry image details page in a project with Google Cloud integration.
-
The breadcrumb should show the image name once loaded.
-
Check the browser console shows no
[Vue warn]line for this warning.
Screenshots
The shots show the fix preventing the empty trailing crumb on the Google Artifact Registry details page while the name loads. Container Registry and Package Registry details are unaffected.
| Page | Before | After |
|---|---|---|
| Google Artifact Registry, while the query loads. Before shows a trailing separator with no text. |  |
 |
| Google Artifact Registry, loaded |  |
 |
| Container Registry image details |  |
 |
| Package Registry package details |  |
 |
The id number in the Container Registry and Package Registry crumbs differs between the two shots because the spec creates fresh records for each run.
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), !255390 (merged), !255391 (closed), !255393 (closed), !255394 (merged), !255395 (merged), !255396 (merged), !255397 (merged), !255398 (merged)
Edited by Miguel Rincon