chore: Migrate maas-ui from CRA to Vite

[ndv99]

This PR is work in progress, and will break a lot of things.

Done

• Removed react-scripts
• Installed Vite
• Resolve absolute file paths with "@/"
• Replaced process.env with import.meta.env
• Replaced REACT_ in env vars with VITE_
• Updated scripts in package to use vite
• Replaced jest with vitest

To do

• Migrate to Vitest from Jest
• Fix any failing tests
• Update GitHub and Usabilla env var keys
• Build the UI, ask someone from core very nicely for some help using it with MAAS
• Fix the show-ready script so that dotrun can pass
• Fix font asset resolution at build time (Variable-width fonts not resolving during Vite build vitejs/vite#15109)
• Resolve merge conflicts with test: use single testing-library/dom #5209
• Find out why those lint errors are happening
• Get dotrun to use NodeJS v20 , OR create a working "build" check

QA steps

• [ ]

Fixes

Fixes:

Screenshots

Notes

[webteam-app]

Demo starting at https://maas-ui-5207.demos.haus

[ndv99]

I've finally created a successful build check!

[petermakowski]

I've finally created a successful build check!

OK, I'll update and remove run-dotrun from merge requirements for now.

[petermakowski]

@ndv99 Running yarn start results in an error:

[0] [nodemon] starting `node ./scripts/proxy.js`
[0] require("dotenv-flow").config();
[0] ^
[0]
[0] ReferenceError: require is not defined in ES module scope, you can use import instead
[0] This file is being treated as an ES module because it has a '.js' file extension and 'maas-ui/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

We should refactor both proxy.js and proxy-ready.js to use import.

[ndv99]

@ndv99 Running yarn start results in an error:

[0] [nodemon] starting `node ./scripts/proxy.js`
[0] require("dotenv-flow").config();
[0] ^
[0]
[0] ReferenceError: require is not defined in ES module scope, you can use import instead
[0] This file is being treated as an ES module because it has a '.js' file extension and 'maas-ui/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

We should refactor both proxy.js and proxy-ready.js to use import.

Fixed!

[petermakowski]

There's a bunch of warnings around the basename when running tests: Warning: You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "/" to begin with "/MAAS/r".

We're also getting a virsh memoised selector error on this PR which does not seem to happen on main (it might just be that it only surfaced now that we changed the build pipeline, but still worth investigating).

src/app/base/components/AppSideNavigation/AppSideNavigation.test.tsx > GlobalSideNav > persists collapsed state
Selector virsh returned a different result when called with the same parameters. This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization {

[ndv99]

There's a bunch of warnings around the basename when running tests: Warning: You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "/" to begin with "/MAAS/r".

We're also getting a virsh memoised selector error on this PR which does not seem to happen on main (it might just be that it only surfaced now that we changed the build pipeline, but still worth investigating).

src/app/base/components/AppSideNavigation/AppSideNavigation.test.tsx > GlobalSideNav > persists collapsed state
Selector virsh returned a different result when called with the same parameters. This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization {

I've seen both of these - the first one, I'm fairly confident can be fixed pretty easily by setting "base" to "/" in vite.config.ts, but the second one I'm much less sure about

[petermakowski]

Great work @ndv99 👏
This is ready to go to main. Let's monitor for any issues closely in the following days.

[ndv99]

Great work @ndv99 👏 This is ready to go to main. Let's monitor for any issues closely in the following days.

Thank you so much!