Upgrade to Node v22 (#1047)

Close #1040 

## Changes

- [e2e] Update tests for `View Institution Profile` that were missed as
part of #1013
- [fix] [View Institution Profile] Display alert when
`sbl_institution_types` is `null` or `[]`
- Updated `.nvmrc` to use `v22`
- Updated `package.json -> engines` to use Node v22
- Update Github actions to use Node v22
- Updated Dockerfile to use new `node-js-alpine:3.20` base image

## How to test this PR

1. Pull branch
2. `nvm use`
3. `yarn start` to easily launch all backend services
4. `yarn docker-build-and-run` to run the container version of the
Frontend
5. Update your `.env` file to run tests against the container version
   ```
   SBL_PLAYWRIGHT_TEST_TARGET="http://localhost:8085"
   ```
6. `yarn playwright test --workers 4`
7. Verify all tests pass

---------

Co-authored-by: tanner-ricks <182143365+tanner-ricks@users.noreply.github.com>

.nvmrc

@@ -1 +1 @@
-v18
+v22

Dockerfile

@@ -1,10 +1,13 @@
-FROM ghcr.io/cfpb/regtech/sbl/nodejs-alpine:3.20 as build-stage
+FROM ghcr.io/cfpb/regtech/sbl/node-js-alpine:3.20 as build-stage
 WORKDIR /usr/src/app
 ARG DOCKER_TAG="latest"
 
 # build import-meta-env for alpine for later env var injection
 RUN npm i -D @import-meta-env/cli
 RUN npm i -D @import-meta-env/unplugin
+
+# TODO: Find a way to update the target node version for import-meta-env
+# https://github.com/cfpb/sbl-frontend/issues/1061
 RUN npx pkg ./node_modules/@import-meta-env/cli/bin/import-meta-env.js \
   -t node18-alpine-x64 \
   -o import-meta-env-alpine
@@ -27,32 +30,32 @@ COPY --from=build-stage /usr/src/app/dist /usr/share/nginx/html
 
 # copy necessary import-meta-env-alpine files for env var injection
 COPY --from=build-stage \
-    /usr/src/app/import-meta-env-alpine \
-    /usr/src/app/nginx-entrypoint.sh \
-    /usr/src/app/.env.example.public \
-    /usr/share/nginx/html/
+  /usr/src/app/import-meta-env-alpine \
+  /usr/src/app/nginx-entrypoint.sh \
+  /usr/src/app/.env.example.public \
+  /usr/share/nginx/html/
 
 # copy nginx configuration into template folder for env var injection
 COPY nginx/nginx.conf /etc/nginx/templates/nginx.conf.template
-    
+
 # Security Basline - Meets requirement 9
 RUN find /etc/nginx -type d | xargs chmod 750 && \
-    find /etc/nginx -type f | xargs chmod 640
+  find /etc/nginx -type f | xargs chmod 640
 
 # Security Basline - The `sed` was added to meet requirement 17
 RUN sed -i '/Faithfully yours/d' /usr/share/nginx/html/50x.html && \
-    addgroup -S $NGINX_USER && \
-    adduser -S $NGINX_USER -G $NGINX_USER && \
-    # We need to come back and reconcile the multiple pids.
-    touch /run/nginx.pid && \
-    touch /var/run/nginx.pid && \
-    touch /var/run/nginx.pid && \
-    chown -R $NGINX_USER:$NGINX_USER \
-      /etc/nginx \
-      /run/nginx.pid \
-      /var/cache/nginx/ \
-      /var/run/nginx.pid \
-      /usr/share/nginx/html
+  addgroup -S $NGINX_USER && \
+  adduser -S $NGINX_USER -G $NGINX_USER && \
+  # We need to come back and reconcile the multiple pids.
+  touch /run/nginx.pid && \
+  touch /var/run/nginx.pid && \
+  touch /var/run/nginx.pid && \
+  chown -R $NGINX_USER:$NGINX_USER \
+  /etc/nginx \
+  /run/nginx.pid \
+  /var/cache/nginx/ \
+  /var/run/nginx.pid \
+  /usr/share/nginx/html
 EXPOSE 8080
 USER svc_nginx_sbl
 

README.md

@@ -8,9 +8,9 @@ The frontend of the Small Business Lending Data Filing Platform.
 - Write unit and integration tests with [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/).
 - Write e2e tests with [Playwright](https://playwright.dev/).
 
-## Getting started (Updated 12/13/2023)
+## Getting started (Updated 11/08/2024)
 
-1. Install Node v18.2+: `nvm install 18 && nvm use 18`
+1. Install Node v22+: `nvm install 22 && nvm use 22`
 1. Enable [corepack](https://yarnpkg.com/getting-started/install): `corepack enable`.
 1. [Docker](https://docs.docker.com/get-docker/) engine version 1.13.0+ with docker compose version 3.0+ support needs to be installed to run all the containerized support services.
 1. Have the six repos [sbl-frontend](https://github.com/cfpb/sbl-frontend), [sbl-project](https://github.com/cfpb/sbl-project), [regtech-user-fi-management](https://github.com/cfpb/regtech-user-fi-management), [sbl-filing-api](https://github.com/cfpb/sbl-filing-api/), [regtech-mail-api](https://github.com/cfpb/regtech-mail-api), and [regtech-cleanup-api](https://github.com/cfpb/regtech-cleanup-api) as **sibling directories**.

e2e/pages/shared-lending-platform/InstitutionProfile.spec.ts

@@ -143,7 +143,7 @@ test('Institution Profile Page', async ({ page, navigateToFilingHome }) => {
       ).toContainText('Type of financial institution');
       await expect(
         page.locator('#main h3').nth(8).locator('xpath=../p[1]'),
-        'Type is correct',
+        'Type is correct when not provided',
       ).toContainText('Not provided');
       await expect(
         page.getByText(

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "version": "0.0.0",
   "engines": {
-    "node": ">=18.20.4 <19.0.0",
+    "node": ">=22",
     "yarn": ">=3.6.1"
   },
   "scripts": {