chore: Migrate maas-ui from CRA to Vite

.env

@@ -2,8 +2,8 @@ MAAS_URL = "http://bolla.internal:5240/"
 MAAS_WEBSOCKET_HOST=
 MAAS_WEBSOCKET_PORT=
 BASENAME="/MAAS"
-REACT_BASENAME="/r"
-REACT_APP_BASENAME=${BASENAME}
-REACT_APP_REACT_BASENAME=${REACT_BASENAME}
-REACT_APP_WEBSOCKET_DEBUG=false
-REACT_APP_USABILLA_ID=5735097911c0
+VITE_BASENAME="/r"
+VITE_APP_BASENAME=${BASENAME}
+VITE_APP_VITE_BASENAME=${VITE_BASENAME}
+VITE_APP_WEBSOCKET_DEBUG=false
+VITE_APP_USABILLA_ID=5735097911c0

.env.development

@@ -1,2 +1,2 @@
-REACT_APP_CHECK_MIDDLEWARE=true
-REACT_APP_WEBSOCKET_DEBUG=true
+VITE_APP_CHECK_MIDDLEWARE=true
+VITE_APP_WEBSOCKET_DEBUG=true

.env.production

@@ -1,2 +1,2 @@
 PUBLIC_URL="/MAAS/r/"
-REACT_APP_SENTRY_DSN="https://901f18f8af164718b5cb34c869e6885d@sentry.is.canonical.com//22"
+VITE_APP_SENTRY_DSN="https://901f18f8af164718b5cb34c869e6885d@sentry.is.canonical.com//22"

.eslintrc.js → .eslintrc.cjs

@@ -1,3 +1,5 @@
+const path = require("path");
+
 module.exports = {
   root: true,
   plugins: ["unused-imports", "prettier"],
@@ -20,6 +22,11 @@ module.exports = {
     react: {
       version: "detect",
     },
+    "import/resolver": {
+      typescript: {
+        alias: { "@": path.resolve(__dirname, "src") },
+      },
+    },
   },
   globals: {
     usabilla_live: false,

.github/workflows/test.yml

@@ -46,18 +46,28 @@ jobs:
         run: CYPRESS_INSTALL_BINARY=0 yarn install
       - run: yarn test:ci
 
-  run-dotrun:
+  build:
+    name: Build
     timeout-minutes: 15
     runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
-      - name: Install dotrun
-        uses: canonical/install-dotrun@main
-      - name: Install dependencies
-        run: dotrun install
+      - name: Restore node_modules
+        id: yarn-cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Use Node.js from .nvmrc
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: CYPRESS_INSTALL_BINARY=0 yarn install
       - name: Build assets
-        run: dotrun --env CI=false build
-      - name: Run dotrun
-        run: dotrun &
-      - name: Wait for MAAS UI to be ready
-        run: dotrun wait-on-ui
+        run: yarn build
+      - name: Serve build
+        run: yarn serve --host --port=8400 --base=/ &
+      - name: Wait for UI to be ready
+        run: yarn wait-on-ui

.github/workflows/upload.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-22.04
     env:
       PACKAGE_NAME: maas-ui-${{ github.sha }}.tar.gz
-      REACT_APP_GIT_SHA: ${{ github.sha }}
+      VITE_APP_GIT_SHA: ${{ github.sha }}
     steps:
       - uses: actions/checkout@v4
       - name: Get branch name
@@ -30,7 +30,7 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: CYPRESS_INSTALL_BINARY=0 yarn install
       - name: Build
-        run: REACT_APP_GIT_SHA=${{env.REACT_APP_GIT_SHA}} yarn build
+        run: VITE_APP_GIT_SHA=${{env.VITE_APP_GIT_SHA}} yarn build
         env:
           CI: false
       - name: Compress

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

__mocks__/styleMock.js.js

@@ -0,0 +1 @@
+module.exports = {}

cypress.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
   },
   env: {
     BASENAME: "/MAAS",
-    REACT_BASENAME: "/r",
+    VITE_BASENAME: "/r",
     nonAdminPassword: "test",
     nonAdminUsername: "user",
     password: "test",

cypress/e2e/utils.ts

@@ -19,4 +19,4 @@ export const generateName = (name?: string) =>
   `cy-${name ? `${name}-` : ""}${generateId()}`;
 
 export const generateMAASURL = (route?: string): string =>
-  `${Cypress.env("BASENAME")}${Cypress.env("REACT_BASENAME")}${route || ""}`;
+  `${Cypress.env("BASENAME")}${Cypress.env("VITE_BASENAME")}${route || ""}`;

docs/RELEASE.md

@@ -65,8 +65,8 @@ Create new branch protection rules for the new version branch, copying the rules
 
 Usabilla button IDs can be found in the Usabilla dashboard.
 
-Update the `REACT_APP_USABILLA_ID` on the new release branch with a Usabilla button ID that matches the new version (e.g. "MAAS 3.4").
+Update the `VITE_APP_USABILLA_ID` on the new release branch with a Usabilla button ID that matches the new version (e.g. "MAAS 3.4").
 
-Update the `REACT_APP_USABILLA_ID` on the main branch with a Usabilla button ID that matches the next expected version, e.g. "MAAS 3.5" button id.
+Update the `VITE_APP_USABILLA_ID` on the main branch with a Usabilla button ID that matches the next expected version, e.g. "MAAS 3.5" button id.
 
 You may need to create new buttons in Usabilla if they don't yet exist.

public/index.html → index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>MAAS</title>
-    <link rel="shortcut icon" href="%PUBLIC_URL%/maas-favicon-32px.png" />
+    <link rel="shortcut icon" href="/maas-favicon-32px.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -46,5 +46,6 @@
         </div>
       </header>
     </div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -1,5 +1,6 @@
 {
   "name": "maas-ui",
+  "type": "module",
   "version": "3.5.0",
   "homepage": "/MAAS/r/",
   "license": "AGPL-3.0",
@@ -11,7 +12,7 @@
   "scripts": {
     "analyze": "npx -y source-map-explorer 'build/static/js/*.js'",
     "build-all": "yarn build",
-    "build": "CYPRESS_INSTALL_BINARY=0 yarn install && react-scripts build",
+    "build": "CYPRESS_INSTALL_BINARY=0 yarn install && vite build",
     "clean-all": "yarn clean",
     "clean": "rm -rf node_modules build",
     "cleanbuild": "yarn clean-all && yarn build",
@@ -24,18 +25,18 @@
     "percy": "./cypress/percy.sh",
     "release": "yarn clean && yarn install && CI=true yarn test && yarn build && yarn version --new-version",
     "serve-proxy": "nodemon ./scripts/proxy.js",
-    "serve-react": "BROWSER=none PORT=8401 react-scripts start",
+    "serve-react": "vite --host",
     "serve-static-demo": "STATIC_DEMO=true PROXY_PORT=80 nodemon ./scripts/proxy.js",
-    "serve": "yarn start",
+    "serve": "vite preview",
     "show-ready": "wait-on http-get://0.0.0.0:8401 && nodemon ./scripts/proxy-ready.js",
     "sitespeed:ci": "docker run -v \"$(pwd)/sitespeed.io:/sitespeed.io\" --network=host sitespeedio/sitespeed.io:25.2.1 --config /sitespeed.io/config.json /sitespeed.io/scripts/machines.js --multi --spa",
     "sitespeed": "docker run -v \"$(pwd)/sitespeed.io:/sitespeed.io\" --add-host=host.docker.internal:host-gateway sitespeedio/sitespeed.io:25.2.1 --config /sitespeed.io/config.json /sitespeed.io/scripts/machines.js --multi --spa --browsertime.domain=host.docker.internal --browsertime.port=8400 --browsertime.iterations=1",
     "start": "concurrently \"yarn serve-proxy\" \"yarn serve-react\" \"yarn show-ready\"",
     "test-cypress": "start-server-and-test start '8401' serve-base 'tcp:8400' cypress-run",
-    "test-ui": "TZ=UTC react-scripts test --testURL http://example.com/MAAS/r --watchAll=false",
-    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache  --testTimeout=100000000",
+    "test-ui": "TZ=UTC vitest",
+    "test:debug": "vitest --inspect-brk test --runInBand --no-cache  --testTimeout=100000000",
     "test": "yarn test-ui",
-    "test:ci": "yarn test-ui --runInBand",
+    "test:ci": "yarn test-ui",
     "unlink-components": "yarn unlink react && yarn unlink \"@canonical/react-components\"",
     "wait-on-ui": "wait-on http-get://0.0.0.0:8400/MAAS/r",
     "storybook": "storybook dev -p 6006",
@@ -47,6 +48,7 @@
     "@canonical/react-components": "0.46.0",
     "@reduxjs/toolkit": "1.9.3",
     "@sentry/browser": "5.30.0",
+    "@vitejs/plugin-react-swc": "3.4.1",
     "classnames": "2.3.2",
     "clone-deep": "4.0.1",
     "date-fns": "2.29.3",
@@ -62,10 +64,9 @@
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
     "react-portal": "4.2.2",
-    "react-redux": "8.0.5",
+    "react-redux": "9.0.4",
     "react-router-dom": "5.3.4",
     "react-router-dom-v5-compat": "6.8.1",
-    "react-scripts": "5.0.1",
     "react-storage-hooks": "4.0.1",
     "react-useportal": "1.0.18",
     "reconnecting-websocket": "4.4.0",
@@ -77,6 +78,9 @@
     "typed-redux-saga": "1.5.0",
     "typescript": "5.1.3",
     "vanilla-framework": "4.0.0",
+    "vite": "5.0.8",
+    "vite-plugin-svgr": "4.1.0",
+    "vite-tsconfig-paths": "4.2.1",
     "yup": "0.32.11"
   },
   "devDependencies": {
@@ -100,11 +104,11 @@
     "@testing-library/user-event": "14.4.3",
     "@types/classnames": "2.3.0",
     "@types/clone-deep": "4.0.1",
-    "@types/jest": "27.5.2",
     "@types/node": "20.10.3",
     "@types/path-parse": "1.0.19",
     "@types/pluralize": "0.0.29",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "18.2.17",
     "@types/react-portal": "4.0.4",
     "@types/react-redux": "7.1.25",
     "@types/react-router": "5.1.20",
@@ -121,7 +125,10 @@
     "cypress-axe": "1.4.0",
     "cypress-wait-until": "2.0.1",
     "dotenv-flow": "3.2.0",
+    "eslint": "8.53.0",
     "eslint-config-prettier": "9.0.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-playwright": "0.15.3",
@@ -131,7 +138,7 @@
     "formik-devtools-extension": "0.1.8",
     "http-proxy-middleware": "2.0.6",
     "immer": "10.0.2",
-    "jest-fetch-mock": "3.0.3",
+    "jsdom": "22.1.0",
     "mock-socket": "9.2.1",
     "mockdate": "3.0.5",
     "nanoid": "4.0.1",
@@ -145,16 +152,19 @@
     "start-server-and-test": "2.0.0",
     "storybook": "7.4.1",
     "timezone-mock": "1.3.6",
+    "vite-plugin-eslint": "1.8.1",
+    "vitest": "0.34.6",
+    "vitest-fetch-mock": "0.2.2",
     "wait-on": "7.0.1",
     "webpack": "5.88.2"
   },
   "resolutions": {
-    "node_modules/@types/react-router-dom/@types/react": "^18.0.0",
-    "@types/react": "*",
+    "node_modules/@types/react-router-dom/@types/react": "18.2.14",
+    "@types/react": "18.2.45",
     "@types/react-dom": "*"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.0"
+    "@types/react": "18.2.45"
   },
   "browserslist": {
     "production": [
@@ -173,9 +183,6 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "jest": {
-    "resetMocks": false
-  },
   "npmpackagejsonlint": {
     "rules": {
       "prefer-absolute-version-dependencies": "error",

scripts/proxy-ready.js

@@ -1,5 +1,5 @@
-const address = require("address");
-require("colors");
+import * as address from "address";
+import "colors";
 
 console.log("");
 console.log("*****************");

scripts/proxy.js

@@ -1,19 +1,21 @@
-require("dotenv-flow").config();
-var express = require("express");
-var { createProxyMiddleware } = require("http-proxy-middleware");
+import express from "express";
+import { createProxyMiddleware } from "http-proxy-middleware";
+import { config } from "dotenv-flow";
+
+config();
 
 const BASENAME = process.env.BASENAME;
-const REACT_BASENAME = process.env.REACT_BASENAME;
+const VITE_BASENAME = process.env.VITE_BASENAME;
 
 var app = express();
 
 const PROXY_PORT = process.env.PROXY_PORT || 8400;
-const REACT_PORT = 8401;
+const VITE_PORT = 8401;
 
-app.get(BASENAME, (req, res) => res.redirect(`${BASENAME}${REACT_BASENAME}`));
-app.get("/", (req, res) => res.redirect(`${BASENAME}${REACT_BASENAME}`));
+app.get(BASENAME, (req, res) => res.redirect(`${BASENAME}${VITE_BASENAME}`));
+app.get("/", (req, res) => res.redirect(`${BASENAME}${VITE_BASENAME}`));
 app.get(`${BASENAME}/`, (req, res) =>
-  res.redirect(`${BASENAME}${REACT_BASENAME}`)
+  res.redirect(`${BASENAME}${VITE_BASENAME}`)
 );
 
 const DOCS = `${BASENAME}/docs`;
@@ -50,7 +52,7 @@ app.use(
 // Proxy the HMR endpoint to the React client.
 app.use(
   createProxyMiddleware("/sockjs-node", {
-    target: `http://localhost:${REACT_PORT}/`,
+    target: `http://localhost:${VITE_PORT}/`,
     ws: true,
   })
 );
@@ -59,13 +61,13 @@ app.use(
 if (process.env.STATIC_DEMO !== "true") {
   app.use(
     createProxyMiddleware("/", {
-      target: `http://localhost:${REACT_PORT}/`,
+      target: `http://localhost:${VITE_PORT}/`,
     })
   );
 }
 
 if (process.env.STATIC_DEMO === "true") {
-  app.use(`${BASENAME}${REACT_BASENAME}`, express.static("./build"));
+  app.use(`${BASENAME}${VITE_BASENAME}`, express.static("./build"));
   app.use(`*`, express.static("./build"));
 }
 

src/__mocks__/@reduxjs/toolkit.ts

@@ -1,4 +1,6 @@
-const toolkit = jest.requireActual("@reduxjs/toolkit");
+import { vi } from "vitest";
+
+const toolkit = vi.importActual("@reduxjs/toolkit");
 
 let id = 0;