[MR-886] Upgrade react-scripts to v5

.envrc

@@ -13,7 +13,7 @@ export CT_AWS_ROLE='ct-ado-managedcare-developer-admin'
 export CT_IDMS='2'
 
 # values formerly in .env (required)
-export SASS_PATH='node_modules:src'
+export SASS_PATH='src:../../node_modules'
 export REACT_APP_AUTH_MODE='LOCAL'
 export REACT_APP_STAGE_NAME='local'
 export REACT_APP_API_URL='http://localhost:3030/local'

.github/workflows/deploy-app-to-env.yml

@@ -82,11 +82,21 @@ jobs:
           name: lambda-layers-prisma-client-migration
           path: ./services/app-api/lambda-layers-prisma-client-migration
 
-      - name: Unzip prisma layer
+      - name: Unzip prisma migration layer
         run: |
           tar -C ./services/app-api/lambda-layers-prisma-client-migration -xf ./services/app-api/lambda-layers-prisma-client-migration/nodejs.tar.gz
           rm -rf ./services/app-api/lambda-layers-prisma-client-migration/nodejs.tar.gz
 
+      - uses: actions/download-artifact@v3
+        with:
+          name: lambda-layers-prisma-client-engine
+          path: ./services/app-api/lambda-layers-prisma-client-engine
+
+      - name: Unzip prisma engine layer
+        run: |
+          tar -C ./services/app-api/lambda-layers-prisma-client-engine -xf ./services/app-api/lambda-layers-prisma-client-engine/nodejs.tar.gz
+          rm -rf ./services/app-api/lambda-layers-prisma-client-engine/nodejs.tar.gz
+
       - name: deploy app-api
         id: deploy-app-api
         env:

.github/workflows/deploy.yml

@@ -135,6 +135,7 @@ jobs:
 
       - name: API Unit Tests
         env:
+          NODE_OPTIONS: --max_old_space_size=6000
           REACT_APP_AUTH_MODE: AWS_COGNITO
           DATABASE_URL: postgresql://postgres:shhhsecret@localhost:5432/postgres?schema=public&connection_limit=5 #pragma: allowlist secret
         run: ./dev test api --unit
@@ -184,6 +185,11 @@ jobs:
           name: lambda-layers-prisma-client-migration
           path: ./services/app-api/lambda-layers-prisma-client-migration
 
+      - uses: actions/upload-artifact@v3
+        with:
+          name: lambda-layers-prisma-client-engine
+          path: ./services/app-api/lambda-layers-prisma-client-engine
+
   deploy-infra:
     needs: [begin-deployment]
     uses: CMSgov/managed-care-review/.github/workflows/deploy-infra-to-env.yml@main
@@ -213,7 +219,7 @@ jobs:
       always() &&
       (needs.deploy-infra.result == 'success' || needs.deploy-infra.result == 'skipped')
 
-    uses: CMSgov/managed-care-review/.github/workflows/deploy-app-to-env.yml@main
+    uses: CMSgov/managed-care-review/.github/workflows/deploy-app-to-env.yml@hw-upgrade-react-scripts
     with:
       stage_name: ${{ needs.begin-deployment.outputs.stage-name }}
       app_version: ${{ needs.begin-deployment.outputs.app-version }}

.gitignore

@@ -42,3 +42,4 @@ lambda_response.json
 services/app-api/lambda-layers-prisma-client
 services/app-api/lambda-layers-prisma-client-migration
 services/app-api/lambda-layers-prisma-client-query
+services/app-api/lambda-layers-prisma-client-engine

package.json

@@ -35,7 +35,7 @@
     },
     "homepage": "https://github.com/CMSgov/managed-care-review#readme",
     "devDependencies": {
-        "@cypress-audit/pa11y": "^1.1.0",
+        "@cypress-audit/pa11y": "^1.3.0",
         "chromedriver": "^96.0.0",
         "cypress": "^9.1.1",
         "cypress-pipe": "^2.0.0",
@@ -48,9 +48,5 @@
         "aws-sdk": "^2.1018.0",
         "cypress-file-upload": "^5.0.8",
         "path-browserify": "^1.0.1"
-    },
-    "resolutions": {
-        "babel-loader": "8.1.0",
-        "jest": "26.6.0"
     }
 }

services/app-api/.eslintrc

@@ -23,7 +23,10 @@
         "jest/no-identical-title": "error",
         "@typescript-eslint/no-floating-promises": "error",
         "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_*" }]
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            { "argsIgnorePattern": "^_*" }
+        ]
     },
     "overrides": []
 }

services/app-api/handlers/postgres_migrate.ts

@@ -10,7 +10,7 @@ export const main: APIGatewayProxyHandler = async () => {
         throw new Error('Init Error: DATABASE_URL is required to run app-api')
     }
 
-    let dbConnResult = await getPostgresURL(dbURL, secretsManagerSecret)
+    const dbConnResult = await getPostgresURL(dbURL, secretsManagerSecret)
     if (dbConnResult instanceof Error) {
         console.error('Init Error: failed to get pg URL', dbConnResult)
         throw dbConnResult

services/app-api/package.json

@@ -9,7 +9,8 @@
         "test": "jest --watch",
         "test:once": "jest --runInBand --ci",
         "lint": "tsc --noEmit && eslint . --max-warnings=0",
-        "clean": "rm -rf node_modules && yarn cache clean"
+        "clean": "rm -rf node_modules && yarn cache clean",
+        "generate-code": "yarn prisma generate"
     },
     "lint-staged": {
         "*.{js,ts}": [
@@ -31,21 +32,20 @@
         "@opentelemetry/sdk-trace-base": "^1.0.1",
         "@opentelemetry/sdk-trace-node": "^1.0.1",
         "@opentelemetry/semantic-conventions": "^1.0.1",
-        "@prisma/client": "^3.10.0",
         "apollo-server-lambda": "^3.5.0",
         "archiver": "^5.3.0",
         "axios": "^0.26.1",
         "graphql": "^16.2.0",
         "graphql-scalars": "^1.11.1",
         "launchdarkly-node-server-sdk": "5.14.6",
         "neverthrow": "^4.2.2",
-        "prisma": "^3.11.1",
         "protobufjs": "^6.11.2",
         "request": "^2.88.2",
         "uuid": "^8.3.2",
         "zod": "^3.11.6"
     },
     "devDependencies": {
+        "@prisma/client": "^3.10.0",
         "@types/archiver": "^5.1.1",
         "@types/aws-lambda": "^8.10.83",
         "@types/glob": "^7.2.0",
@@ -55,33 +55,35 @@
         "@typescript-eslint/eslint-plugin": "^5.6.0",
         "@typescript-eslint/parser": "^5.6.0",
         "aws-sdk": "^2.991.0",
-        "copy-webpack-plugin": "6.4.1",
+        "copy-webpack-plugin": "^10.2.4",
         "csv-parser": "^3.0.0",
         "eslint": "^8.3.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-jest": "^25.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "graphql-tag": "^2.12.5",
-        "jest": "^27.4.7",
+        "jest": "^27.5.1",
         "jest-raw-loader": "^1.0.1",
         "lint-staged": "^12.1.2",
         "prettier": "^2.4.1",
+        "prisma": "^3.11.1",
         "serverless": "^2.65.0",
         "serverless-associate-waf": "^1.2.1",
         "serverless-dotenv-plugin": "^3.10.0",
         "serverless-iam-helper": "CMSgov/serverless-iam-helper",
         "serverless-idempotency-helper": "CMSgov/serverless-idempotency-helper",
         "serverless-offline": "^8.0.0",
         "serverless-online": "CMSgov/serverless-online",
+        "serverless-plugin-monorepo": "^0.11.0",
         "serverless-s3-bucket-helper": "CMSgov/serverless-s3-bucket-helper",
         "serverless-stack-termination-protection": "^1.0.4",
-        "serverless-webpack": "^5.5.4",
+        "serverless-webpack": "^5.7.0",
         "slugify": "^1.6.5",
-        "ts-jest": "^26.4.4",
-        "ts-loader": "~8.3.0",
+        "ts-jest": "^27.1.4",
+        "ts-loader": "^9.2.8",
         "tsconfig-paths-webpack-plugin": "^3.5.1",
         "typescript": "4.5.3",
-        "webpack": "4.44.2",
+        "webpack": "^5.72.0",
         "webpack-node-externals": "^3.0.0"
     }
 }

services/app-api/scripts/prepare-prisma-layer.sh

@@ -3,13 +3,20 @@ function preparePrismaLayer() {
     echo pwd
     echo "Cleaning up workspace ..."
     rm -rf lambda-layers-prisma-client-migration
+    rm -rf lambda-layers-prisma-client-engine
 
     echo "Creating migration layer ..."
     mkdir -p lambda-layers-prisma-client-migration/nodejs/node_modules/.prisma
     mkdir -p lambda-layers-prisma-client-migration/nodejs/node_modules/@prisma/engines
     mkdir -p lambda-layers-prisma-client-migration/nodejs/node_modules/prisma
     mkdir -p lambda-layers-prisma-client-migration/nodejs/prisma
 
+    echo "Creating engine layer ..."
+    mkdir -p lambda-layers-prisma-client-engine/nodejs/node_modules/.prisma
+    mkdir -p lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/engines
+    mkdir -p lambda-layers-prisma-client-engine/nodejs/node_modules/prisma
+    mkdir -p lambda-layers-prisma-client-engine/nodejs/prisma
+
     echo "Generate RHEL client..."
     PRISMA_CLI_BINARY_TARGETS=rhel-openssl-1.0.x yarn prisma generate
 
@@ -22,11 +29,21 @@ function preparePrismaLayer() {
     cp ../../node_modules/@prisma/engines/package.json lambda-layers-prisma-client-migration/nodejs/node_modules/@prisma/engines/package.json
     rsync -av ../../node_modules/@prisma/engines/dist/ lambda-layers-prisma-client-migration/nodejs/node_modules/@prisma/engines/dist
 
+    echo "Prepare Prisma Client Engine lambda layer"
+    rsync -av ../../node_modules/@prisma/client/ lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/client
+    rsync -av ../../node_modules/prisma/ lambda-layers-prisma-client-engine/nodejs/node_modules/prisma
+    rsync -av ../../node_modules/.prisma/ lambda-layers-prisma-client-engine/nodejs/node_modules/.prisma
+    cp ../../node_modules/@prisma/engines/libquery_engine-rhel-openssl-1.0.x.so.node lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/engines/
+    cp ../../node_modules/@prisma/engines/package.json lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/engines/package.json
+    rsync -av ../../node_modules/@prisma/engines/dist/ lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/engines/dist
+
     echo "Copy migration files to layer..."
     rsync -av prisma/ lambda-layers-prisma-client-migration/nodejs/prisma
+    rsync -av prisma/ lambda-layers-prisma-client-engine/nodejs/prisma
 
     echo "Remove Prisma CLI ..."
     rm -rf lambda-layers-prisma-client-migration/nodejs/node_modules/@prisma/cli
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/cli
 
     echo "Remove non-RHEL bins to save space ..."
     rm -rf lambda-layers-prisma-client-migration/nodejs/node_modules/.prisma/client/libquery_engine-debian-openssl-1.1.x.so.node
@@ -38,10 +55,25 @@ function preparePrismaLayer() {
     rm -rf lambda-layers-prisma-client-migration/nodejs/node_modules/@prisma/migration-engine-debian-openssl-1.1.x
     rm -rf lambda-layers-prisma-client-migration/nodejs/node_modules/@prisma/prisma-fmt-debian-openssl-1.1.x
 
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/.prisma/client/libquery_engine-debian-openssl-1.1.x.so.node
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/prisma/engines
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/prisma/libquery_engine-debian-openssl-1.1.x.so.node
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/introspection-engine-debian-openssl-1.1.x 
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/libquery_engine-debian-openssl-1.1.x.so.node 
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/migration-engine-debian-openssl-1.1.x
+    rm -rf lambda-layers-prisma-client-engine/nodejs/node_modules/@prisma/prisma-fmt-debian-openssl-1.1.x
+
+
     echo "Compressing and cleaning migration engine..."
     pushd lambda-layers-prisma-client-migration && tar -zcf /tmp/nodejs.tar.gz . && mv /tmp/nodejs.tar.gz ./nodejs.tar.gz
     rm -rf nodejs
     ls -lh nodejs.tar.gz
     popd || exit
+
+    echo "Compressing and cleaning prisma engine..."
+    pushd lambda-layers-prisma-client-engine && tar -zcf /tmp/nodejs.tar.gz . && mv /tmp/nodejs.tar.gz ./nodejs.tar.gz
+    rm -rf nodejs
+    ls -lh nodejs.tar.gz
+    popd || exit
 }
 preparePrismaLayer

services/app-api/serverless.yml

@@ -11,6 +11,7 @@ package:
 
 plugins:
   - serverless-webpack
+  - serverless-plugin-monorepo
   - serverless-offline
   - serverless-online
   - serverless-stack-termination-protection
@@ -41,6 +42,8 @@ custom:
     webpackConfig: 'webpack.config.js'
     packager: 'yarn'
     includeModules:
+      forceExclude:
+        - '@prisma/client'
       nodeModulesRelativeDir: '../../'
     excludeRegex: 'darwin|debian'
   serverlessTerminationProtection:
@@ -125,6 +128,8 @@ provider:
 layers:
   prismaClientMigration:
     path: lambda-layers-prisma-client-migration
+  prismaClientEngine:
+    path: lambda-layers-prisma-client-engine
 
 functions:
   email_submit:
@@ -216,6 +221,9 @@ functions:
       securityGroupIds:
         - ${self:custom.sgId}
       subnetIds: ${self:custom.privateSubnets}
+    layers:
+      - !Ref PrismaClientEngineLambdaLayer
+      - arn:aws:lambda:us-east-1:901920570463:layer:aws-otel-nodejs-amd64-ver-1-0-1:1
 
   hello:
     handler: handlers/hello.main

services/app-api/webpack.config.js

@@ -16,11 +16,10 @@ const extensions = [
     '.graphql',
     '.gql',
 ];
-const servicePath = '';
 
 module.exports = {
     entry: slsw.lib.entries,
-    target: 'node',
+    externalsPresets: { node: true },
     context: __dirname,
     mode: isLocal ? 'development' : 'production',
     performance: {
@@ -31,7 +30,8 @@ module.exports = {
         nodeExternals({
             modulesDir: path.resolve(__dirname, '../../node_modules'),
         }),
-        'aws-sdk',
+        'prisma',
+        '@prisma/client',
     ],
     devtool: 'source-map',
     resolve: {
@@ -55,7 +55,6 @@ module.exports = {
                         options: {
                             projectReferences: true,
                             configFile: tsConfigPath,
-                            experimentalWatchApi: true,
                         },
                     },
                 ],

services/app-web/.storybook/main.js

@@ -1,19 +1,16 @@
 module.exports = {
-    stories: ['../src/**/*.stories.@(ts|tsx)'],
-    addons: [
-        '@storybook/addon-a11y',
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/preset-create-react-app',
-    ],
-    typescript: {
-        check: false,
-        checkOptions: {},
-        reactDocgen: 'react-docgen-typescript',
-        reactDocgenTypescriptOptions: {
-            shouldExtractLiteralValuesFromEnum: true,
-            propFilter: (prop) =>
-                prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
-        },
-    },
-};
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
+  },
+  core: {
+    builder: 'webpack5'
+  }
+};

services/app-web/README.md

@@ -61,7 +61,7 @@ Open [http://localhost:6000](http://localhost:6000) to view in the browser.
 -   Use modular styles. This means creating`<component>.module.scss` or `<component>.module.css` files in your component folders.
 -   Learn about [Sass](https://sass-lang.com/documentation/file.SASS_REFERENCE.html) and [CSS modules](https://github.com/css-modules/css-modules) as well [uswds scss classes, tokens, and mixins](https://designsystem.digital.gov/design-tokens/).
 -   Syntax: Sass styles should be written in camelCase. Import styles from a component's stylesheet using something like `import styles from 'InvoicePanel.module.scss'`. Access the styles with dot notation `styles.myclassname`. If fewer than 50% of the styles are used from a stylesheet, import only the styles used (ex. `import { myclassname } from 'MyComponent.module.scss'`).
--   To reference sass variables, bring in uswds scss or project/cms scss as `@import '../../styles/uswdsImports.scss';` and `@import '../../styles/custom'` accordingly.
+- To reference sass variables, bring in uswds scss or project/cms scss as `@import 'styles/uswdsImports.scss';` and `@import 'styles/custom.scss'` accordingly.
 
 ### `/gen`