feat: migrate from CRA4 to Vite, Storybook to v8, jest to Vitest

.github/workflows/chromatic.yml

@@ -42,7 +42,9 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
@@ -64,7 +66,13 @@ jobs:
           exitOnceUploaded: true
           onlyChanged: true
           storybookBaseDir: frontend
+          allowConsoleErrors: true
+          logFile: 'chromatic.log'
           # Skip running Chromatic on dependabot PRs
           skip: dependabot/**
           # Only run when the frontend directory has changes
           untraced: '!(frontend)/**'
+          # temp debug options
+          # debug: true
+          # diagnosticsFile: true
+          # logFile: true

.github/workflows/deploy-eb.yml

@@ -42,21 +42,21 @@ jobs:
           echo "APP_VERSION=$(jq -r .version package.json)-$(echo ${GITHUB_REF##*/})-$(echo ${GITHUB_SHA} | cut -c1-8)" >> $GITHUB_ENV
       - name: Inject frontend build env vars
         env:
-          REACT_APP_DD_RUM_APP_ID: ${{ secrets.DD_RUM_APP_ID }}
-          REACT_APP_DD_RUM_CLIENT_TOKEN: ${{ secrets.DD_RUM_CLIENT_TOKEN }}
-          REACT_APP_DD_RUM_ENV: ${{ secrets.DD_ENV }}
-          REACT_APP_DD_SAMPLE_RATE: ${{ secrets.DD_SAMPLE_RATE }}
-          REACT_APP_GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
-          REACT_APP_FORMSG_SDK_MODE: ${{ secrets.REACT_APP_FORMSG_SDK_MODE }}
-          REACT_APP_URL: ${{ secrets.APP_URL }}
+          VITE_APP_DD_RUM_APP_ID: ${{ secrets.DD_RUM_APP_ID }}
+          VITE_APP_DD_RUM_CLIENT_TOKEN: ${{ secrets.DD_RUM_CLIENT_TOKEN }}
+          VITE_APP_DD_RUM_ENV: ${{ secrets.DD_ENV }}
+          VITE_APP_DD_SAMPLE_RATE: ${{ secrets.DD_SAMPLE_RATE }}
+          VITE_APP_GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
+          VITE_APP_FORMSG_SDK_MODE: ${{ secrets.REACT_APP_FORMSG_SDK_MODE }}
+          VITE_APP_URL: ${{ secrets.APP_URL }}
         run: |
-          sed -i -e "s|@REACT_APP_URL|${{secrets.APP_URL}}|g" -e "s/@REACT_APP_DD_RUM_APP_ID/$REACT_APP_DD_RUM_APP_ID/g" -e "s/@REACT_APP_DD_RUM_CLIENT_TOKEN/$REACT_APP_DD_RUM_CLIENT_TOKEN/g" -e "s/@REACT_APP_DD_RUM_ENV/$REACT_APP_DD_RUM_ENV/g" -e "s/@REACT_APP_VERSION/${{env.APP_VERSION}}/g" -e "s/@REACT_APP_DD_SAMPLE_RATE/$REACT_APP_DD_SAMPLE_RATE/g" frontend/datadog-chunk.ts
-          echo REACT_APP_VERSION=${{env.APP_VERSION}} > frontend/.env
-          echo REACT_APP_URL=$REACT_APP_URL > frontend/.env
-          echo REACT_APP_GA_TRACKING_ID=$REACT_APP_GA_TRACKING_ID >> frontend/.env
-          echo REACT_APP_FORMSG_SDK_MODE=$REACT_APP_FORMSG_SDK_MODE >> frontend/.env
-          echo REACT_APP_DD_RUM_CLIENT_TOKEN=$REACT_APP_DD_RUM_CLIENT_TOKEN >> frontend/.env
-          echo REACT_APP_DD_RUM_ENV=$REACT_APP_DD_RUM_ENV >> frontend/.env
+          sed -i -e "s|@VITE_APP_URL|${{secrets.APP_URL}}|g" -e "s/@VITE_APP_DD_RUM_APP_ID/$VITE_APP_DD_RUM_APP_ID/g" -e "s/@VITE_APP_DD_RUM_CLIENT_TOKEN/$VITE_APP_DD_RUM_CLIENT_TOKEN/g" -e "s/@VITE_APP_DD_RUM_ENV/$VITE_APP_DD_RUM_ENV/g" -e "s/@VITE_APP_VERSION/${{env.APP_VERSION}}/g" -e "s/@VITE_APP_DD_SAMPLE_RATE/$VITE_APP_DD_SAMPLE_RATE/g" frontend/datadog-chunk.ts
+          echo VITE_APP_VERSION=${{env.APP_VERSION}} > frontend/.env
+          echo VITE_APP_URL=$VITE_APP_URL > frontend/.env
+          echo VITE_APP_GA_TRACKING_ID=$VITE_APP_GA_TRACKING_ID >> frontend/.env
+          echo VITE_APP_FORMSG_SDK_MODE=$VITE_APP_FORMSG_SDK_MODE >> frontend/.env
+          echo VITE_APP_DD_RUM_CLIENT_TOKEN=$VITE_APP_DD_RUM_CLIENT_TOKEN >> frontend/.env
+          echo VITE_APP_DD_RUM_ENV=$VITE_APP_DD_RUM_ENV >> frontend/.env
 
       - name: Configure AWS credentials
         uses: aws-actions/[email protected]

.github/workflows/playwright.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Build
         env:
           NODE_OPTIONS: --max-old-space-size=4096 --openssl-legacy-provider -r ${{ env.DD_TRACE_PACKAGE }}
-          REACT_APP_FORMSG_SDK_MODE: 'test'
+          VITE_APP_FORMSG_SDK_MODE: 'test'
         run: npm run build
       - name: Run Playwright tests (login)
         env:

Dockerfile.production

@@ -13,7 +13,6 @@ WORKDIR /build
 COPY package.json package-lock.json ./
 COPY shared/package.json shared/package-lock.json ./shared/
 COPY frontend/package.json frontend/package-lock.json ./frontend/
-COPY frontend/patches ./frontend/patches
 
 # Allow running of postinstall scripts
 # RUN npm config set unsafe-perm true

__tests__/e2e/email-submission.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable playwright/expect-expect -- assertions are in helper */
 import mongoose from 'mongoose'
 import {
   BasicField,
@@ -55,6 +56,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with all fields', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -71,6 +73,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with all fields optional', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS.map((ff) =>
       createBlankVersion(createOptionalVersion(ff)),
@@ -148,6 +151,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with Singpass authentication', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -166,6 +170,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with Corppass authentication', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -184,6 +189,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with SGID authentication', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -231,6 +237,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with all fields shown by logic', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const { formFields, formLogics } = TEST_ALL_FIELDS_SHOWN_BY_LOGIC
     const formSettings = getEmailSettings()

__tests__/e2e/encrypt-submission.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable playwright/expect-expect -- assertions are in helper */
 import mongoose from 'mongoose'
 import {
   BasicField,
@@ -58,6 +59,7 @@ test.describe('Storage form submission', () => {
   test('Create and submit storage mode form with all fields', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -74,6 +76,7 @@ test.describe('Storage form submission', () => {
   test('Create and submit storage mode form with all fields optional', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS.map((ff) =>
       createBlankVersion(createOptionalVersion(ff)),
@@ -92,6 +95,7 @@ test.describe('Storage form submission', () => {
   test('Create and submit storage mode form with all fields shown by logic', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const { formFields, formLogics } = TEST_ALL_FIELDS_SHOWN_BY_LOGIC
     const formSettings = getEncryptSettings()

__tests__/e2e/helpers/createForm.ts

@@ -178,7 +178,7 @@ const addSettings = async (
   // Open the form as the last thing to do!
   if (formSettings.status === FormStatus.Public) {
     // Go back to general settings, to open the form if necessary!
-    await page.getByRole('tab', { name: 'General' }).click()
+    await page.getByRole('tab', { name: 'General' }).dispatchEvent('click')
 
     // Ensure that we are on the general settings page
     await expect(

__tests__/e2e/helpers/submitForm.ts

@@ -111,8 +111,8 @@ const authForm = async (
         formSettings.authType === FormAuthType.CP
           ? ' (Corporate)'
           : formSettings.authType === FormAuthType.SGID
-          ? ' app'
-          : ''
+            ? ' app'
+            : ''
       }`,
     })
     .click()
@@ -235,7 +235,7 @@ const fillFields = async (
         for (let i = 0; i < vals.length; i++) {
           if (optionNums[i] === -1) {
             // Click and fill "Others", which is always the last element.
-            await options.last().click()
+            await options.last().dispatchEvent('click')
             await page
               .locator(`[name="${field._id}.othersInput"]`)
               .fill(vals[i])

docker-compose.yml

@@ -122,7 +122,7 @@ services:
       # Bearer token API key format
       - API_KEY_VERSION=v1
       # env vars for growthbook
-      - GROWTHBOOK_CLIENT_KEY
+      - GROWTHBOOK_CLIENT_KEY=growthbook_client_key
       # env vars for virus scanner
       - VIRUS_SCANNER_LAMBDA_FUNCTION_NAME=function
       - WOGAA_SECRET_KEY

docs/DEPLOYMENT_SETUP.md

@@ -265,9 +265,9 @@ Forms can be protected with [recaptcha](https://www.google.com/recaptcha/about/)
 
 [Google Analytics](https://analytics.google.com/analytics/web) is used to track website traffic. Examples of events include number of visits to various forms, number of successful submissions and number of submission failures.
 
-| Variable                   | Description                   |
-| :------------------------- | ----------------------------- |
-| `REACT_APP_GA_TRACKING_ID` | Google Analytics tracking ID. |
+| Variable                  | Description                   |
+| :------------------------ | ----------------------------- |
+| `VITE_APP_GA_TRACKING_ID` | Google Analytics tracking ID. |
 
 #### SMS with Twilio
 

frontend/.eslintignore

@@ -6,4 +6,6 @@
 
 node_modules
 
-CREDITS.md
+CREDITS.md
+
+!.storybook