Bump Vue to 3.5.13 #13085

rak-phillip · 2025-01-13T19:57:54Z

Summary

This bumps Vue and related project dependencies to versions that are compatible with 3.5.13.

Fixes #13084

Occurred changes and/or fixed issues

Bump Vue and related dependencies to versions compatible with 3.5.13
Resolve error in routes as a result of the bump
Resolve issues with Vue type augments as a result of the bump

Areas or cases that should be tested

Basic regression testing of existing features and build processes

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

rak-phillip · 2025-01-13T19:59:36Z

creators/extension/pkg/vue-shim.ts

-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+export {}


This empty export is in line with guidance from the Vue docs¹ on the topic of augmenting vue types.

Footnotes

https://vuejs.org/guide/typescript/options-api#type-augmentation-placement ↩

rak-phillip · 2025-01-13T20:01:01Z

pkg/rancher-components/src/shim-vue.d.ts

-}
-
-declare module '@vue/runtime-core' {
+declare module 'vue' {


It appears that we want to provide type augments for vue rather than @vue/runtime-core¹²

Footnotes

https://vuejs.org/guide/typescript/options-api#type-augmentation-placement ↩

https://github.com/lovetingyuan/router/blob/97be7c3462b1d44bf7767a76b7290b6764150895/packages/router/src/globalExtensions.ts#L11 ↩

rak-phillip · 2025-01-13T20:02:41Z

shell/config/router/routes.js

The duplicated/nested index name was causing errors in vue-router:

Error: A route named "index" has been added as a child of a route with the same name. Route names must be unique and a nested route cannot use the same name as an ancestor.

I understand that the child with with the same name of index is the default route, so removing this parent name should be safe.

Oh I was wondering that part.

cnotv

I see some version downgraded, mismatching or not pinned, is that intended?

package.json

pkg/rancher-components/package.json

shell/package.json

rak-phillip · 2025-01-13T21:50:36Z

Marking this as draft as I work through the remaining issues with this PR.

Several e2e tests failing - confirming that the failures are related to this change
a. Confirmed failing e2e tests are directly related to a backend change Pin Rancher version to v2.11-2053ce644a31cd8053d1f58e2487154b0b8513b6-head for e2e tests #13111
A unit test fails and needs to be fixed
a. Confirmed failing unit test is a legitimate failure AKS network dropdown contains invalid entries & styling issues when "None" is selected #13122

There are eleven new compiler warnings that appear to be related to table structure
a. These compiler warnings are legitimate - the issues described are pre-existing in Dashboard and can be addressed separately Resolve vue compiler warnings after bump to Vue 3.5 #13124

 WARNING  Compiled with 11 warnings                                           2:25:39 PM

  warning  in ./pkg/aks/components/AksNodePool.vue?vue&type=template&id=65907345&scoped=true&ts=true
 
 Module Warning (from ./node_modules/vue-loader/dist/templateLoader.js):
 <tr> cannot be child of <table>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
 388|            class="taints"
 389|          >
 390|            <tr>
    |            ^^^^
 391|              <th>
    |  ^^^^^^^^^^^^^^^^
 392|                <label class="text-label">
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 393|                  {{ t('aks.nodePools.taints.key') }}
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 394|                  <span class="text-error">*</span>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 395|                </label>
    |  ^^^^^^^^^^^^^^^^^^^^^^
 396|              </th>
    |  ^^^^^^^^^^^^^^^^^
 397|              <th>
    |  ^^^^^^^^^^^^^^^^
 398|                <label class="text-label">
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 399|                  {{ t('aks.nodePools.taints.value') }}
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 400|                  <span class="text-error">*</span>
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 401|                </label>
    |  ^^^^^^^^^^^^^^^^^^^^^^
 402|              </th>
    |  ^^^^^^^^^^^^^^^^^
 403|              <th>
    |  ^^^^^^^^^^^^^^^^
 404|                <label class="text-label">
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 405|                  {{ t('aks.nodePools.taints.effect') }}
    |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 406|                </label>
    |  ^^^^^^^^^^^^^^^^^^^^^^
 407|              </th>
    |  ^^^^^^^^^^^^^^^^^
 408|              <th />
    |  ^^^^^^^^^^^^^^^^^^
 409|            </tr>
    |  ^^^^^^^^^^^^^^^

rak-phillip · 2025-01-14T16:54:28Z

Regarding the failing e2e tests, these are the test results when running locally on my workstation:

✅ explorer/apps/repositories.spec.ts: Repo Refresh results in correct api requests
✅ workloads/daemonsets.spec.ts: modifying "Scaling and Upgrade Policy" to "On Delete" should use the correct property "OnDelete"
✅ workloads/deployments.spec.ts
- ✅ Should be able to scale the number of pods
- ✅ Should be able to view and edit configuration of pod volumes with no custom component
- ✅ should be able to add and remove container volume mounts
✅ machine-deployments.spec.ts: can edit a MachineDeployments
✅ machine-sets.spec.ts: can edit a MachineSet
machines.spec.ts: can edit a Machine
✅ repositories.spec.ts
- ✅ can edit a repository
- ✅ can clone a repository
- ✅ can download YAML
- ✅ can refresh a repository
- ✅ can delete a repository
- ✅ can create a repository with basic auth
- ✅ can create a repository with SSH key
- ✅ can delete repositories via bulk actions
- ✅ can create an oci repository with basic auth

⚠️ NOTE: The first run of this test failed. Subsequent runs pass

⚠️ pages/explorer2/workloads/deployments.spec.ts
- ⚠️ Should be able to scale the number of pods
- ✅ Should be able to view and edit configuration of pod volumes with no custom component
- ✅ should be able to add and remove container volume mounts

🗒️ Edit

Confirmed that the failing e2e tests are caused by the Rancher backend version in #13111

rak-phillip · 2025-01-15T18:25:52Z

@cnotv @codyrancher @aalves08 I think that this vue bump is in a state that is ready for review.

@aalves08 there is an issue related to dayjs and the NeuVector extension. I can't say that I understand how this change could cause the failure.. Are you able to provide any insight on this?

aalves08 · 2025-01-16T10:27:04Z

@cnotv @codyrancher @aalves08 I think that this vue bump is in a state that is ready for review.

@aalves08 there is an issue related to dayjs and the NeuVector extension. I can't say that I understand how this change could cause the failure.. Are you able to provide any insight on this?

So, I did a bit of investigation and turns out that neuvector is using dayjs coming from shell (meaning that there is no mention on their package.json), as per https://github.com/neuvector/manager-ext/blob/main/package.json

their yarn.lock have several mentions on dayjs but they are mainly as subdependencies: https://github.com/neuvector/manager-ext/blob/main/yarn.lock

I tried to replicate this issue locally by yarn linking shell from this PR to neuvector (don't forget to run ./shell/scripts/typegen.sh first on dashboard before yarn linking shell!) but I couldn't reproduce it.

neuvector's version in branch main, when doing yarn install, uses dayjs 1.11.13.

from a "normal" shell (from dashboard's current master), it installs dayjs 1.8.29. From this PR, we also get dayjs 1.8.29, so that doesn't seem to be the problem.

All in all, I don't really understand where the problem really lies. I think that adding a resolution to neuvector might go a long way to fix this, but I've also noted another problem: neuvector's main branch is not their latest code 😱

They do it a bit differently, where they create branches per version, meaning that branch 2.1.1 might have the most updated code on their repo. That subverts what we do in the check-plugins-build check 😩

I would just say to open an issue on their repo, talking about adding a resolution to their extension, but also mentioning that they need to keep main up-to-date, otherwise the tests that we have for extensions are meaningless on their context. We can't change the branch we use every time they update their extension... No other "official" extension does that. They all keep main as the latest code. After that, ping me with the issue number, so that I can put on slack on a channel specific for the neuvector extension.

For now I would just comment out the test for their extension (also create an issue with label area/extensions in dashboard so that we can re-enable it in the future - we don't forget about it) https://github.com/rancher/dashboard/blob/master/shell/scripts/test-plugins-build.sh#L239 and move forward if it's important for this change to go in.

cnotv · 2025-01-16T11:01:22Z

Maybe they can do what we proposed for Rancher a time ago, to have another branch for bookkeeping as stable.
A common configuration is development, release-x.x.x, and master, where this last one is stable.
Since we do not want to mess with their branching, maybe you can ask them to use another branch and call it as they want (qa, stable, or whatever) so you could add the fixed name there.

cnotv · 2025-01-16T11:03:38Z

Could we not just install dayjs version 1.11.13 and fix it in the shell? I think it is better to have the latest version, which is also the goal of this PR.

Signed-off-by: Phillip Rak <[email protected]>

``` Error: A route named "index" has been added as a child of a route with the same name. Route names must be unique and a nested route cannot use the same name as an ancestor. ``` Signed-off-by: Phillip Rak <[email protected]>

This updates the augment from `@vue/runtime core` to `vue`. See: vuejs/router#2295 Signed-off-by: Phillip Rak <[email protected]>

Signed-off-by: Phillip Rak <[email protected]>

The test failure associated with the test "should display subnets grouped by network in the virtual network dropdown" is legitimate and reproducible in master - it is just that the unit test was not detecting this error. I suspect that bumping Vue and related dependencies has patched a bug in test utils. Signed-off-by: Phillip Rak <[email protected]>

Neuvector builds currently fail with the error ``` ERROR Failed to compile with 1 error5:49:49 PM error in utils/common.ts:85:23 TS2694: Namespace 'dayjs' has no exported member 'ManipulateType'. 83 | base: string, 84 | interval: number, > 85 | intervalUnit: dayjs.ManipulateType, | ^^^^^^^^^^^^^^ 86 | pattern = "YYYYMMDDHHmmss" 87 | ) { 88 | // base format: "YYYYMMDDHHmmss" ``` It appears that neuvector might require some updates that are unrelated to bumping Vue to 3.5.x. We will disable this test until neuvector can be patched. Signed-off-by: Phillip Rak <[email protected]>

rak-phillip · 2025-01-16T21:50:28Z

@aalves08 I commented out the neuvector plugin test, and now capi fails with the following error

ERROR  Failed to compile with 1 error9:38:42 PM

 error  in ./index.ts

Syntax Error: Thread Loader (Worker 0)
[BABEL] /home/runner/work/dashboard/dashboard/capi-ui-extension/pkg/capi/index.ts: decode_js.EntityDecoder is not a constructor (While processing: "/home/runner/work/dashboard/dashboard/capi-ui-extension/node_modules/@vue/cli-plugin-babel/preset.js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)

decode_js.EntityDecoder is not a constructor leads me to believe that there are two different versions of Vue present in node_modules during the test. Can we schedule some time to sync to work through this? The relationship between plugins and changes in the current PR for these tests isn't 100% clear to me.

edit: see also

rak-phillip · 2025-01-16T21:51:57Z

Could we not just install dayjs version 1.11.13 and fix it in the shell? I think it is better to have the latest version, which is also the goal of this PR.

This could be an option as well. I would prefer to keep this change as focused on Vue as possible, but I'm willing to bump other dependencies if we find that to be required.

rak-phillip added this to the v2.11.0 milestone Jan 13, 2025

rak-phillip requested review from codyrancher, aalves08 and cnotv January 13, 2025 19:58

rancher-ui-project-bot bot assigned rak-phillip Jan 13, 2025

rak-phillip commented Jan 13, 2025

View reviewed changes

rak-phillip force-pushed the chore/bump-vue branch from e30d8e2 to ea0ae50 Compare January 13, 2025 20:32

cnotv reviewed Jan 13, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

pkg/rancher-components/package.json Outdated Show resolved Hide resolved

pkg/rancher-components/package.json Show resolved Hide resolved

shell/package.json Outdated Show resolved Hide resolved

rak-phillip force-pushed the chore/bump-vue branch from ea0ae50 to 48a33b7 Compare January 13, 2025 21:07

rak-phillip marked this pull request as draft January 13, 2025 21:51

rak-phillip force-pushed the chore/bump-vue branch 3 times, most recently from 34813bb to 7423367 Compare January 15, 2025 17:38

rak-phillip changed the title ~~Chore/bump vue~~ Bump Vue to 3.5.13 Jan 15, 2025

rak-phillip requested a review from cnotv January 15, 2025 18:23

rak-phillip marked this pull request as ready for review January 15, 2025 18:23

rak-phillip mentioned this pull request Jan 16, 2025

Enable Neuvector in test-plugins-build #13141

Open

1 task

rak-phillip added 5 commits January 16, 2025 14:28

Bump Vue to 3.5.13

8df329e

Signed-off-by: Phillip Rak <[email protected]>

Resolve vue-router error

bea6fda

``` Error: A route named "index" has been added as a child of a route with the same name. Route names must be unique and a nested route cannot use the same name as an ancestor. ``` Signed-off-by: Phillip Rak <[email protected]>

Update vue shims

a47c507

This updates the augment from `@vue/runtime core` to `vue`. See: vuejs/router#2295 Signed-off-by: Phillip Rak <[email protected]>

Remove missing standard/no-callback-literal eslint rule

921cbfc

Signed-off-by: Phillip Rak <[email protected]>

Resolve lint warning

9dbbe65

Signed-off-by: Phillip Rak <[email protected]>

rak-phillip added 2 commits January 16, 2025 14:28

rak-phillip force-pushed the chore/bump-vue branch from 7423367 to 2bb17c8 Compare January 16, 2025 21:28

rak-phillip mentioned this pull request Jan 16, 2025

Add resolution for dayjs neuvector/manager-ext#104

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump Vue to 3.5.13 #13085

Bump Vue to 3.5.13 #13085

rak-phillip commented Jan 13, 2025 •

edited

Loading

rak-phillip Jan 13, 2025

rak-phillip Jan 13, 2025

rak-phillip Jan 13, 2025

cnotv Jan 13, 2025

cnotv left a comment

rak-phillip commented Jan 13, 2025 •

edited

Loading

rak-phillip commented Jan 14, 2025 •

edited

Loading

🗒️ Edit

rak-phillip commented Jan 15, 2025 •

edited

Loading

aalves08 commented Jan 16, 2025 •

edited

Loading

cnotv commented Jan 16, 2025

cnotv commented Jan 16, 2025

rak-phillip commented Jan 16, 2025 •

edited

Loading

rak-phillip commented Jan 16, 2025

Bump Vue to 3.5.13 #13085

Are you sure you want to change the base?

Bump Vue to 3.5.13 #13085

Conversation

rak-phillip commented Jan 13, 2025 • edited Loading

Summary

Occurred changes and/or fixed issues

Areas or cases that should be tested

Checklist

rak-phillip Jan 13, 2025

Choose a reason for hiding this comment

Footnotes

rak-phillip Jan 13, 2025

Choose a reason for hiding this comment

Footnotes

rak-phillip Jan 13, 2025

Choose a reason for hiding this comment

cnotv Jan 13, 2025

Choose a reason for hiding this comment

cnotv left a comment

Choose a reason for hiding this comment

rak-phillip commented Jan 13, 2025 • edited Loading

rak-phillip commented Jan 14, 2025 • edited Loading

🗒️ Edit

rak-phillip commented Jan 15, 2025 • edited Loading

aalves08 commented Jan 16, 2025 • edited Loading

cnotv commented Jan 16, 2025

cnotv commented Jan 16, 2025

rak-phillip commented Jan 16, 2025 • edited Loading

rak-phillip commented Jan 16, 2025

rak-phillip commented Jan 13, 2025 •

edited

Loading

rak-phillip commented Jan 13, 2025 •

edited

Loading

rak-phillip commented Jan 14, 2025 •

edited

Loading

rak-phillip commented Jan 15, 2025 •

edited

Loading

aalves08 commented Jan 16, 2025 •

edited

Loading

rak-phillip commented Jan 16, 2025 •

edited

Loading