Wrap contents of Masthead/latest.vue in a div

[rak-phillip]

Summary

This resolves the warning [Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. by wrapping the contents of shell/components/ResourceDetail/Masthead/latest.vue in a div.

Fixes #16248

Occurred changes and/or fixed issues

• Wrap contents of Masthead/latest.vue in a div

Technical notes summary

The warning appears to be originating from v-if usage in shell/components/ResourceDetail/Masthead/index.vue:

dashboard/shell/components/ResourceDetail/Masthead/index.vue

Lines 47 to 51 in bac4bc1

	<Latest
	v-if="showLatestMasthead"
	:value="props.value"
	:resourceSubtype="props.resourceSubtype"
	/>

The Vue3 docs don't contain any warnings that I could find with regards to v-if/v-show usage on components with multiple root nodes. The best I could find while searching is a reddit thread that explains this behavior¹.

Full contents of the warning:

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. 
  at <Latest key=0 value= 
Object { id: "default/prak-test", type: "apps.deployment", links: {…}, apiVersion: "apps/v1", kind: "Deployment", metadata: {…}, spec: {…}, status: {…}, … }
 resourceSubtype=null > 
  at <Index key=0 resource="apps.deployment" value= 
Object { id: "default/prak-test", type: "apps.deployment", links: {…}, apiVersion: "apps/v1", kind: "Deployment", metadata: {…}, spec: {…}, status: {…}, … }
  ... > 
  at <Index class="outlet" > 
  at <ClusterResourceNamespaceId class="outlet" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView key="/c/local/explorer/apps.deployment/default/prak-test" class="outlet" > 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App>

Areas or cases that should be tested

The masthead will need to render properly with the additional div in place.

Areas which could experience regressions

Rendering of the masthead could change.

Screenshot/Video

NA

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
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

Footnotes

1. https://www.reddit.com/r/vuejs/comments/17036bb/vuejs_bug_with_vshow_and_multiple_root_element/ ↩