FIX: Vue3 => Error info when creating NavLink is not shown to user

[aalves08]

Summary

Fixes #11937

Occurred changes and/or fixed issues

• Add top-level non-custom element in order to fix error information when creating NavLink is not shown to user

Technical notes summary

Although the changes look bigger, what was needed to make it work was just adding a div as the outermost container to wrap the CruResource component. No errors were being thrown, so I don't know the root cause for this.
Also, it may be important to cover all of the CruResource usages to check if it's a general problem or not and act accordingly.

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Screen.Recording.2024-09-18.at.14.35.40.mov

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

[aalves08]

@richard-cox added you as a reviewer not only because I couldn't find the exact root cause but because of the implications this might have on other areas and potencial checks to be done. Let me know if you want to get together to look into this

[rak-phillip]

This looks like another instance where inheritAttrs: false would resolve the issue. I'm currently testing #11971 to see if there's a broader approach that we can take address this.

[aalves08]

This looks like another instance where inheritAttrs: false would resolve the issue. I'm currently testing #11971 to see if there's a broader approach that we can take address this.

@rak-phillip I am interested in knowing more about the root cause of this.... I never understood why adding a root element would fix this 😛

[rak-phillip]

@aalves08 this all has to do with how Vue3 manages fallthrough attributes¹ for root-level ancestor components - I've created a minimal repro to demonstrate the behavior:

https://play.vuejs.org/#eNqVUk1v2kAQ/SujvdBKEVbTnpCLRCkhVBQqWvW0F8ceg6nZ3e5HQmTx3zO7xjYoKCKSZXtm3uy+N/MqNlKq/+iQDVhsUl0oO+Si2CmpLYw3RZlBruUOev0oRB7a44IL3AdIhnniSgsVFwCppD6BwpoBVMfuw42vZIlNPnysUQAardOiiXxspNMpDqB3N5rN6XyfPfgPveiJo5YaBRZ3qkwsUgQQ19cMmjO+ctb8cgYRYeKobWA3zJpUirxY97dGChIdSHDmqRcl6qWyhRSGM1JQ0+AsKUv59CPkrHYYBIWeDab/LuS3Zu9znP0iJqgfiUhbs4leo63Lk98L3NN/W9zJzJWEfqO4Im2l8xxr2DcnMqJ9ggtsZ2GBhVj/MZO9RWEaUZ5omGvAc0brHL8hvaP7uf+l2QdNsfXCJdtMdSKyc+90qXcY6OSczkVwjY3aFEAuJdnqIdG944SOxrraXycsrjMZFzSgc8FnU7okXGmpvOZG2Csh9llRuHzYYmpbIRr/u0Jj1q31alWbT8P7yXy+hLvV8idMV6PF9/H9bDGNI6rUiNvh36R0CDLvCFH5NpSrqk3CIdx1qv/wAoIebws=

App.vue supplies :resource to Child.vue; since Child.vue doesn't declare a resource prop, resource is applied as an attribute to the root-level element (GrandChild), overwriting the :resource="resource" declaration.

This can be fixed in several ways:

• Adding a div wrapper to the child component, causing the resource attribute to be applied to the div instead (the change in this PR)
• Applying inheritAttrs: false to the child component, this will signal that we don't want to automatically apply fallthrough attributes to the root-level element
• Changing the name of the conflicting attribute (Rename resource to resourceType in ResourceDetail #11971); this will still apply a fallthrough attribute to the root-level element, but in a way that will avoid conflicts
• Use either v-bind.attr="$data" or v-bind.prop="$data" to prevent the fallthrough behavior²; this can allow us to define how we want fallthrough attributes to be applied from the parent

Footnotes

1. https://vuejs.org/guide/components/attrs.html ↩

2. https://vuejs.org/api/built-in-directives.html#v-bind ↩

[richard-cox]

@aalves08 can you double check if adding inheritAttrs: false instead of a div wrapper fixes the issue? If so we should wait on the conclusion of #11971 and re-test after that merges