Vue3: Installed extensions throw unhandled exception

[rak-phillip]

Navigating to the local cluster while an extension is installed can throw an unhandled error, causing Dashboard to stop functioning.

Reproduction steps

In a stable Rancher instance running dashboard with Vue2, install the following extensions from the ui-plugin-examples repository. The following extensions were installed for this test:

• Clock
• Extensions-Api-Demo
• Large Extension

When starting a development server, make sure that you use the stable instance of Rancher as the backend for testing.

In the development version of Rancher running dashboard with Vue3, navigate to the Local Cluster Explorer.

Actual behavior

An error overlay is rendered with the following:

Uncaught (in promise) TypeError: can't access property "extend", c.a is undefined
    eb32 Banner.vue:6
    Webpack 128
[Banner.vue:6:15](webpack://extensions-api-demo-0.1.0//Users/aalves/Desktop/PROJECTS/alex-ui-plugin-examples/node_modules/@rancher/shell/rancher-components/Banner/Banner.vue?ca18)

Other warnings are logged to the console:

[Vue warn]: Invalid VNode type: undefined (undefined) 
  at <Component resource= 
Object { id: "local", type: "management.cattle.io.cluster", links: {…}, actions: {…}, apiVersion: "management.cattle.io/v3", kind: "Cluster", metadata: {…}, spec: {…}, status: {…}, … }
 > 
  at <SimpleBox key="extensionCards0" class="extension-card" style=undefined > 
  at <ClusterExplorerIndexPage class="outlet" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView key="/c/local/explorer" class="outlet" > 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView key=1 > 
  at <App>

Expected behavior

The Local Cluster Explorer renders the same way that it does without extensions installed.

[codyrancher]

I think we should resolve this in a way where we don't load the plugins unless they target rancher 2.10 or greater. @jordojordo do you remember which label/annotation we should use for this?

[jordojordo]

@codyrancher we would use the catalog.cattle.io/rancher-version annotation.

[nwmac]

@codyrancher @jordojordo The answer here I thought was that for Vue 3, we would require the api version annotation to be there (not the rancher version one). If it is not present, then we assume the api version (now = shell version), is <2 (ie. before Vue 3) and we therefore would not load.

So, Vue 3 extensions need to have the annotation that says which version of the extensions API they need. If not present, then API for Vue 2.

So we should not need to add annotations to old Vue 2 extensions.

[codyrancher]

@codyrancher @jordojordo The answer here I thought was that for Vue 3, we would require the api version annotation to be there (not the rancher version one). If it is not present, then we assume the api version (now = shell version), is <2 (ie. before Vue 3) and we therefore would not load.

So, Vue 3 extensions need to have the annotation that says which version of the extensions API they need. If not present, then API for Vue 2.

So we should not need to add annotations to old Vue 2 extensions.

Are you suggesting we add a new version annotation?

From existing documented versioning https://extensions.rancher.io/extensions/advanced/version-compatibility I would think ui-version or rancher-version would be most appropriate. It depends on what "Extension version will be loaded but will appear as disabled" means.

If the js bundle isn't loaded using ui-version I would think we'd go with that, otherwise, rancher-version.