bcgov · conbrad · Sep 9, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 18, 2024
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
@@ -191,8 +191,6 @@ jobs:
         with:
           # For sonar-scanner to work properly we can't use a shallow fetch.
           fetch-depth: 0
-      - name: Setup kernel for react, increase watchers
-        run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
@@ -207,19 +205,13 @@ jobs:
         run: corepack enable
       - name: use new yarn
         run: yarn set version berry
-      - name: Setup yarn for scoped artifactory packages
-        working-directory: ./web
-        run: yarn config set npmScopes.psu.npmRegistryServer https://artifacts.developer.gov.bc.ca/artifactory/api/npm/pe1e-psu-npm-local/ && yarn config set npmScopes.psu.npmAlwaysAuth true && yarn config set npmScopes.psu.npmAuthToken ${{ secrets.ARTIFACTORY_SVCACCT_TOKEN }}
       - name: Install node dependencies (web)
         working-directory: ./web
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install
       - name: Lint (web)
         working-directory: ./web
         run: yarn run lint
-      # "Error: ENOSPC: System limit for number of file watchers reached" can be addressed
-      # with this: https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details
-      # It seems unnecessary at the moment because tests pass anyway
       - name: Cypress tests with coverage (web)
         working-directory: ./web
         run: yarn run cypress:ci
@@ -229,7 +221,6 @@ jobs:
       - name: Merge and finalize test coverage (web)
         working-directory: ./web
         run: yarn run finalizeCoverage
-
       - name: Archive coverage report
         uses: actions/upload-artifact@v4
         with:

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,7 +8,6 @@
         ".github": false,
         "**/.pytest_cache": true,
         "**/__pycache__**": true,
-        "web/node_modules": true,
         "api/python_cache": true,
         "api/.venv": true
     },

diff --git a/Dockerfile.web b/Dockerfile.web
@@ -6,30 +6,23 @@
 ARG NODE_OPTIONS="--v8-pool-size=4"
 
 # PHASE 1 - build frontend.
-# Pull from local registry - we can't pull from docker due to limits.
-# see https://catalog.redhat.com/software/containers/ubi9/nodejs-20/64770ac7a835530172eee6a9 for
-# details
-FROM registry.access.redhat.com/ubi9/nodejs-20 as static
-
+FROM node:20-alpine AS static
 # Switch to root user for package installs
 USER 0
+WORKDIR /app
 
 COPY web/package.json .
 COPY web/yarn.lock . 
 COPY web/.yarnrc.yml .
 # do install first so it will be cached
-RUN npm install -g --ignore-scripts corepack
-RUN corepack enable
-RUN yarn set version berry
-RUN yarn config set npmScopes.psu.npmRegistryServer https://artifacts.developer.gov.bc.ca/artifactory/api/npm/pe1e-psu-npm-local/
-RUN yarn config set npmScopes.psu.npmAlwaysAuth true 
-RUN yarn config set npmScopes.psu.npmAuthToken ${ARTIFACTORY_SVCACCT_TOKEN}
-RUN CYPRESS_INSTALL_BINARY=0 yarn install --immutable
+RUN corepack enable \
+    && yarn set version berry \
+    && CYPRESS_INSTALL_BINARY=0 yarn install --immutable
 COPY web .
-RUN yarn run build:prod
 
 # Remove sourcemaps after they've been uploaded to sentry
-RUN rm build/static/js/**.map
+RUN yarn run build:prod && \
+    rm build/assets/**.map
 
 # Switch back to default user
 USER 1001
@@ -42,7 +35,7 @@ FROM registry.access.redhat.com/ubi8/nginx-120
 ADD ./openshift/nginx.conf "${NGINX_CONF_PATH}"
 
 # Copy the static content:
-COPY --from=static /opt/app-root/src/build .
+COPY --from=static /app/build .
 
 EXPOSE 3000
 CMD nginx -g "daemon off;"
diff --git a/web/.babelrc b/web/.babelrc
diff --git a/web/.env.cypress b/web/.env.cypress
@@ -1,9 +1,9 @@
 BROWSER=none
 PORT=3030
-REACT_APP_API_BASE_URL=http://localhost:8080/api
-REACT_APP_HIDE_DISCLAIMER=false
-REACT_APP_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
-REACT_APP_SM_LOGOUT_URL=https://sm-logout-url.ca
-REACT_APP_KEYCLOAK_REALM=8wl6x4cp
-REACT_APP_KEYCLOAK_CLIENT=wps-web
-REACT_APP_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/
+VITE_API_BASE_URL=http://localhost:8080/api
+VITE_HIDE_DISCLAIMER=false
+VITE_KEYCLOAK_AUTH_URL=https://keycloak-auth-url.ca
+VITE_SM_LOGOUT_URL=https://sm-logout-url.ca
+VITE_KEYCLOAK_REALM=8wl6x4cp
+VITE_KEYCLOAK_CLIENT=wps-web
+VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/
diff --git a/web/.env.example b/web/.env.example
@@ -1,12 +1,11 @@
-REACT_APP_API_BASE_URL=http://localhost:8080/api
-REACT_APP_HIDE_DISCLAIMER=true
-REACT_APP_KEYCLOAK_AUTH_URL=https://dev.loginproxy.gov.bc.ca/auth
-REACT_APP_SM_LOGOUT_URL=https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi?retnow=1&returl=
-REACT_APP_KEYCLOAK_REALM=standard
-REACT_APP_KEYCLOAK_CLIENT=wps-web
-REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
-REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
-REACT_APP_PMTILES_BUCKET=https://My_S3_Bucket
-REACT_APP_SENTRY_DSN=123
-REACT_APP_SENTRY_ENV=development
-REACT_APP_MUI_LICENSE_KEY=mui
+VITE_API_BASE_URL=http://localhost:8080/api
+VITE_HIDE_DISCLAIMER=true
+VITE_KEYCLOAK_AUTH_URL=https://dev.loginproxy.gov.bc.ca/auth
+VITE_KEYCLOAK_REALM=standard
+VITE_KEYCLOAK_CLIENT=wps-web
+VITE_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
+VITE_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
+VITE_PMTILES_BUCKET=https://My_S3_Bucket
+VITE_SENTRY_DSN=123
+VITE_SENTRY_ENV=development
+VITE_MUI_LICENSE_KEY=mui
diff --git a/web/.gitignore b/web/.gitignore
@@ -7,4 +7,5 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+cypress/downloads
diff --git a/web/README.md b/web/README.md
@@ -67,9 +67,9 @@ It correctly bundles React in production mode and optimizes the build for the be
 
 ## Config
 
-In `openshift/templates/global.config.yaml` there is a template for a global ConfigMap. This template can be applied to the Openshift project from the command line. For example, to apply the global.config template and pass a value for the REACT_APP_KEYCLOAK_REALM parameter, run
+In `openshift/templates/global.config.yaml` there is a template for a global ConfigMap. This template can be applied to the Openshift project from the command line. For example, to apply the global.config template and pass a value for the VITE_KEYCLOAK_REALM parameter, run
 
-`oc -n <openshift-project-name> process -f openshift/templates/global.config.yaml -p REACT_APP_KEYCLOAK_REALM=<realm-name> | oc create -f -`
+`oc -n <openshift-project-name> process -f openshift/templates/global.config.yaml -p VITE_KEYCLOAK_REALM=<realm-name> | oc create -f -`
 
 ## License
 

diff --git a/web/craco.config.js b/web/craco.config.js
diff --git a/web/cypress.config.cjs b/web/cypress.config.cjs
@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  screenshotOnRunFailure: false,
+  retries: 1,
+  video: false,
+  defaultCommandTimeout: 10000,
+  e2e: {
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config)
+      return config
+
+    },
+    baseUrl: 'http://localhost:3030',
+  },
+});
diff --git a/web/cypress.config.ts b/web/cypress.config.ts
diff --git a/web/cypress/plugins/index.js b/web/cypress/plugins/index.js
diff --git a/web/eslint.config.js → web/eslint.config.cjs b/web/eslint.config.js → web/eslint.config.cjs
diff --git a/web/public/index.html → web/index.html b/web/public/index.html → web/index.html
@@ -2,10 +2,6 @@
 <html lang="en">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="config.js"></script>
-    <script type="text/javascript">
-      window.env = config
-    </script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -21,15 +17,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/web/public/manifest.json → web/manifest.json b/web/public/manifest.json → web/manifest.json
diff --git a/web/mergeCoverage.js → web/mergeCoverage.cjs b/web/mergeCoverage.js → web/mergeCoverage.cjs
diff --git a/web/package.json b/web/package.json
@@ -5,6 +5,7 @@
     "node": ">=20",
     "npm": ">=10.7.0"
   },
+  "type": "module",
   "license": "Apache-2.0",
   "licenses": [
     {
@@ -34,13 +35,15 @@
     "@types/webpack-env": "^1.15.1",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/coverage-istanbul": "^2.0.5",
     "axios": "1.7.4",
     "date-fns": "^3.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.4",
     "esri-leaflet": "3.0.12",
     "filefy": "^0.1.11",
+    "jsdom": "^24.1.1",
     "jwt-decode": "^4.0.0",
     "keycloak-js": "^25.0.0",
     "leaflet": "^1.7.1",
@@ -51,73 +54,54 @@
     "ol": "10.0.0",
     "ol-pmtiles": "^0.5.0",
     "prettier": "^3.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^8.0.0",
     "react-router-dom": "^6.22.3",
     "recharts": "^2.1.8",
-    "typescript": "^5.0.0"
+    "typescript": "^5.2.2",
+    "vitest": "^2.0.5",
+    "whatwg-fetch": "^3.6.20"
   },
   "scripts": {
-    "start": "CI=true craco start",
-    "start:cypress": "export $(cat .env.cypress | xargs) && craco --max_old_space_size=4096 -r @cypress/instrument-cra start",
-    "build": "craco --max_old_space_size=2048 build",
-    "build:prod": "craco --max_old_space_size=2048 build && yarn sentry:sourcemaps",
-    "test": "craco test --transformIgnorePatterns \"node_modules/(?!ol)/\"",
+    "start": "vite",
+    "start:cypress": "export $(cat .env.cypress | xargs) && yarn start",
+    "build": "tsc -b && vite build",
+    "build:prod": "tsc -b && vite build && yarn sentry:sourcemaps",
+    "test": "VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/ vitest",
     "test:ci": "CI=true npm test",
     "coverage": "npm test -- --coverage --watchAll=false",
-    "coverage:ci": "CI=true REACT_APP_KEYCLOAK_CLIENT=wps-web npm test -- --coverage --watchAll=false",
+    "coverage:ci": "CI=true VITE_KEYCLOAK_CLIENT=wps-web VITE_PMTILES_BUCKET=https://nrs.objectstore.gov.bc.ca/gpdqha/psu/pmtiles/ vitest run --coverage",
     "cy:open": "cypress open",
     "cy:run": "cypress run --browser chrome --config watchForFileChanges=false",
-    "cypress": "start-server-and-test start:cypress 3030 cy:open",
-    "cypress:ci": "start-server-and-test start:cypress 3030 cy:run",
-    "eject": "react-scripts eject",
+    "cypress:ci": "start-server-and-test start:cypress http://localhost:3030 'cy:run'",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md)\"",
-    "finalizeCoverage": "node mergeCoverage.js",
-    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org bcps-wps --project frontend ./build && sentry-cli sourcemaps upload --org bcps-wps --project frontend ./build"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "finalizeCoverage": "yarn node mergeCoverage.cjs",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org bcps-wps --project frontend ./build && sentry-cli sourcemaps upload --org bcps-wps --project frontend ./build",
+    "preview": "vite preview"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@craco/craco": "^7.1.0",
     "@cypress/code-coverage": "^3.10.0",
-    "@cypress/instrument-cra": "^1.4.0",
     "@eslint/compat": "^1.1.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/recharts": "^1.8.23",
-    "cypress": "^13.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "cypress": "^13.13.3",
     "eslint": "^9.7.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "globals": "^15.8.0",
-    "react-scripts": "^5.0.1",
     "start-server-and-test": "^2.0.0",
-    "ts-sinon": "^2.0.2"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{ts,tsx}",
-      "!src/**/*.d.ts",
-      "!src/index.tsx",
-      "!src/serviceWorker.ts",
-      "!src/app/*.{ts,tsx}"
-    ]
+    "ts-sinon": "^2.0.2",
+    "vite": "^5.3.4",
+    "vite-plugin-istanbul": "^6.0.2",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "nyc": {
     "report-dir": "coverage-cypress",
@@ -128,4 +112,4 @@
     ]
   },
   "packageManager": "yarn@4.3.1"
-}
+}