Promote from BLAIS5-4132 to main

.eslintrc.json

@@ -28,6 +28,7 @@
         "import"
     ],
     "rules": {
+        "object-curly-spacing": ["error", "always"],
         "no-multiple-empty-lines": [
             "error",
             {
@@ -54,6 +55,7 @@
             "never"
         ],
         "@typescript-eslint/no-explicit-any": "error",
+        "@typescript-eslint/no-unused-vars": "off",
         "react/react-in-jsx-scope": "off",
         "react/require-default-props": "off",
         "no-spaced-func": "off",
@@ -68,6 +70,27 @@
             {
                 "code": 200
             }
+        ],
+        "@typescript-eslint/no-empty-function": "off",
+        "indent": [
+            "error",
+            4
+        ],
+        "space-in-parens": [
+            "error",
+            "never"
+        ],
+        "no-multi-spaces": "error",
+        "comma-spacing": [
+            "error",
+            {
+                "before": false,
+                "after": true
+            }
+        ],
+        "template-curly-spacing": [
+            "error",
+            "never"
         ]
     },
     "overrides": [

.github/workflows/test.js.yml

@@ -11,7 +11,7 @@ jobs:
       runs-on: ubuntu-latest
       strategy:
         matrix:
-          node-version: [ 18.x ]
+          node-version: [ 20.x ]
       steps:
         - uses: actions/checkout@v2
         - name: Use Node.js ${{ matrix.node-version }}
@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 18.x ]
+        node-version: [ 20.x ]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}

appengine_templates/app.yaml.tpl

@@ -1,5 +1,5 @@
 service: bam-ui
-runtime: nodejs18
+runtime: nodejs20
 
 vpc_access_connector:
   name: projects/_PROJECT_ID/locations/europe-west2/connectors/vpcconnect

jest.config.js

@@ -1,11 +1,18 @@
 process.env = Object.assign(process.env, {
-    BLAISE_API_URL: "mock",
+    BLAISE_API_URL: "http://mock",
     PROJECT_ID: "mock-project",
     SERVER_PARK: "mock-server-park"
 });
 
 module.exports = {
     moduleNameMapper: {
         axios: "axios/dist/node/axios.cjs"
-    }
+    },
+    coveragePathIgnorePatterns: [
+        "/node_modules/"
+    ],
+    testPathIgnorePatterns: [
+        "/resources/"
+    ],
+    testEnvironment: "jsdom"
 };

package.json

@@ -8,8 +8,8 @@
     "start-server": "tsc --project tsconfig.server.json && node ./dist/index.js | pino-pretty -c -t",
     "start-react": "react-scripts start",
     "build-react": "react-scripts --openssl-legacy-provider build",
-    "test": "jest --coverage --watchAll=false",
-    "gcp-build": "react-scripts --openssl-legacy-provider build && tsc --project tsconfig.server.json",
+    "test": "yarn build-react && tsc --project tsconfig.server.json && jest --coverage --watchAll=false",
+    "gcp-build": "yarn build-react && tsc --project tsconfig.server.json",
     "lint-fix": "node_modules/.bin/eslint . --fix",
     "lint": "yarn eslint .",
     "dev": "concurrently --kill-others-on-fail \"yarn start-server\" \"yarn start-react\""
@@ -18,33 +18,28 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "jest": {
-    "coveragePathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "testPathIgnorePatterns": [
-      "/resources/"
-    ]
-  },
   "pre-commit": [
     "lint-fix"
   ],
+  "resolutions": {
+    "formik": "2.4.2"
+  },
   "dependencies": {
+    "formik": "2.4.2",
     "@google-cloud/profiler": "^4.1.1",
-    "@testing-library/dom": "^7.30.4",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/dom": "^8.3.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/express": "^4.17.8",
     "@types/jest": "26.0.20",
-    "@types/node": "^14.14.41",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "^15.12.2",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
     "axios": "^1.6.0",
-    "blaise-api-node-client": "https://github.com/ONSdigital/blaise-api-node-client",
-    "blaise-design-system-react-components": "git+https://github.com/ONSdigital/blaise-design-system-react-components#0.13.2",
-    "blaise-login-react-client": "https://gitpkg.now.sh/ONSdigital/blaise-login-react/blaise-login-react-client?ced09846ac3be3ebd9c5cc9ee75986187214695b",
-    "blaise-login-react-server": "https://gitpkg.now.sh/ONSdigital/blaise-login-react/blaise-login-react-server?ced09846ac3be3ebd9c5cc9ee75986187214695b",
+    "blaise-api-node-client": "https://github.com/ONSdigital/blaise-api-node-client#v1.1.0",
+    "blaise-design-system-react-components": "git+https://github.com/ONSdigital/blaise-design-system-react-components#0.14.0",
+    "blaise-login-react": "git+https://github.com/ONSdigital/blaise-login-react#1.1.0",
     "dotenv": "^10.0.0",
     "ejs": "^3.1.7",
     "express": "^4.17.3",
@@ -56,16 +51,16 @@
     "pino": "^8.17.2",
     "pino-http": "^5.5.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-csv-reader": "^3.3.0",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "~4.2.4"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "react-scripts": "5.0.0",
+    "typescript": "~5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.1",
-    "@babel/plugin-transform-react-jsx": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
     "@types/ejs": "^3.0.5",
@@ -74,17 +69,18 @@
     "@types/number-to-words": "^1.2.0",
     "@types/pino-http": "^5.4.0",
     "@types/pino-pretty": "^4.7.1",
-    "@types/react-router-dom": "^5.1.8",
-    "@typescript-eslint/eslint-plugin": "^4.26.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/supertest": "^6.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "axios-mock-adapter": "^1.19.0",
     "concurrently": "^7.0.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "pino-pretty": "^4.7.1",
-    "supertest": "^6.1.3"
+    "supertest": "^6.1.6"
   },
   "peerDependencies": {
     "react-router": "^6.21.1"
@@ -100,9 +96,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "resolutions": {
-    "@types/react": "17.0.14",
-    "@types/react-dom": "17.0.14"
   }
-}
+}

server/BlaiseAPI/index.ts

@@ -1,9 +1,9 @@
-import express, {Request, Response, Router} from "express";
-import {Config} from "../Config";
-import {Auth} from "blaise-login-react-server";
+import express, { Request, Response, Router } from "express";
+import { CustomConfig } from "../interfaces/server";
+import { Auth } from "blaise-login-react/blaise-login-react-server";
 import BlaiseApiClient from "blaise-api-node-client";
 
-export default function BlaiseAPIRouter(config: Config, auth: Auth, blaiseApiClient: BlaiseApiClient): Router {
+export default function BlaiseAPIRouter(config: CustomConfig, auth: Auth, blaiseApiClient: BlaiseApiClient): Router {
     const router = express.Router();
 
     router.get("/api/roles", auth.Middleware, async function (req: Request, res: Response) {
@@ -15,7 +15,7 @@ export default function BlaiseAPIRouter(config: Config, auth: Auth, blaiseApiCli
     });
 
     router.get("/api/change_password/:user", auth.Middleware, async function (req: Request, res: Response) {
-        let {password} = req.headers;
+        let { password } = req.headers;
 
         if (Array.isArray(password)) {
             password = password.join("");
@@ -34,7 +34,7 @@ export default function BlaiseAPIRouter(config: Config, auth: Auth, blaiseApiCli
     });
 
     router.delete("/api/users", auth.Middleware, async function (req: Request, res: Response) {
-        let {user} = req.headers;
+        let { user } = req.headers;
 
         if (Array.isArray(user)) {
             user = user.join("");

server/Config.ts

@@ -1,16 +1,10 @@
 import crypto from "crypto";
-import {AuthConfig} from "blaise-login-react-server";
 import pino from "pino";
+import { CustomConfig } from "./interfaces/server";
 
-export interface Config extends AuthConfig {
-    BlaiseApiUrl: string
-    ProjectId: string
-    ServerPark: string
-}
-
-export function loadConfigFromEnv(): Config {
-    let {PROJECT_ID, BLAISE_API_URL, SERVER_PARK, SESSION_TIMEOUT} = process.env;
-    const {ROLES, SESSION_SECRET} = process.env;
+export function loadConfigFromEnv(): CustomConfig {
+    let { PROJECT_ID, BLAISE_API_URL, SERVER_PARK, SESSION_TIMEOUT } = process.env;
+    const { ROLES, SESSION_SECRET } = process.env;
     const logger = pino();
 
     if (BLAISE_API_URL === undefined) {

server/interfaces/server.ts

@@ -0,0 +1,7 @@
+import { AuthConfig } from "blaise-login-react/blaise-login-react-server";
+
+export interface CustomConfig extends AuthConfig {
+    BlaiseApiUrl: string
+    ProjectId: string
+    ServerPark: string
+}

server/pino/index.ts

@@ -22,7 +22,7 @@ const defaultPinoConf = {
             };
         },
         log(info: never) {
-            return {info};
+            return { info };
         }
     },
     serializers: {
@@ -34,7 +34,7 @@ const defaultPinoConf = {
     }
 };
 
-export default function createLogger(options = {autoLogging: false}): logger.HttpLogger  {
+export default function createLogger(options = { autoLogging: false }): logger.HttpLogger {
     let pinoConfig = {};
     if (process.env.NODE_ENV === "production") {
         pinoConfig = defaultPinoConf;

server/server.ts

@@ -1,4 +1,4 @@
-import express, { NextFunction, Request, Response } from "express";
+import express, { Request, Response } from "express";
 import axios from "axios";
 import path from "path";
 import ejs from "ejs";
@@ -9,7 +9,7 @@ import BlaiseAPIRouter from "./BlaiseAPI";
 import multer from "multer";
 import * as profiler from "@google-cloud/profiler";
 import BlaiseApiClient from "blaise-api-node-client";
-import { newLoginHandler, Auth } from "blaise-login-react-server";
+import { newLoginHandler, Auth } from "blaise-login-react/blaise-login-react-server";
 import pino from "pino";
 
 const pinoLogger = pino();
@@ -54,18 +54,18 @@ server.use("/", loginHandler);
 server.use("/", BlaiseAPIRouter(config, auth, blaiseApiClient));
 
 // treat the index.html as a template and substitute the values at runtime
-server.set("views", path.join(__dirname, buildFolder));
+server.set("views", path.join(__dirname, "/views"));
 server.engine("html", ejs.renderFile);
 server.use(
     "/static",
     express.static(path.join(__dirname, `${buildFolder}/static`))
 );
 
-server.get("*", function (req: Request, res: Response) {
-    res.render("index.html", {});
+server.get("*", function (_req: Request, res: Response) {
+    res.render(path.join(__dirname, `${buildFolder}/index.html`));
 });
 
-server.use(function (err: Error, req: Request, res: Response, next: NextFunction) {
+server.use(function (err: Error, _req: Request, res: Response) {
     console.error(err.stack);
     res.render("../views/500.html", {});
 });

server/tests/config.test.ts

@@ -1,4 +1,8 @@
-import {loadConfigFromEnv} from "../Config";
+/**
+ * @jest-environment node
+ */
+
+import { loadConfigFromEnv } from "../Config";
 
 describe("Config setup", () => {
     afterEach(() => {

server/tests/index.test.ts

@@ -1,18 +1,35 @@
+/**
+ * @jest-environment node
+ */
+
 import app from "../server"; // Link to your server file
 import supertest from "supertest";
+
+// Temporary fix for Jest open handle issue (gcp profiler TCPWRAP error)
+jest.mock("@google-cloud/profiler", () => ({
+    start: jest.fn().mockReturnValue(Promise.resolve())
+}));
+
 const request = supertest(app);
 
 describe("Test Heath Endpoint", () => {
     it("should return a 200 status and json message", async () => {
         const response = await request.get("/bam-ui/version/health");
 
         expect(response.statusCode).toEqual(200);
-        expect(response.body).toStrictEqual({healthy: true});
+        expect(response.body).toStrictEqual({ healthy: true });
     });
 });
 
 describe("app engine start", () => {
     it("should return a 200 status and json message", async () => {
+        process.env = Object.assign({
+            PROJECT_ID: "mock",
+            BLAISE_API_URL: "http://mock",
+            SERVER_PARK: "mock",
+            SESSION_TIMEOUT: "12h"
+        });
+
         const response = await request.get("/_ah/start");
 
         expect(response.statusCode).toEqual(200);