Merge pull request #320 from ONSdigital/BLAIS5-3513

Promote from BLAIS5-3513 to main

.eslintrc.json

@@ -1,5 +1,9 @@
 {
-    "ignorePatterns": ["node_modules/*","dist/*","build/*"],
+    "ignorePatterns": [
+        "node_modules/*",
+        "dist/*",
+        "build/*"
+    ],
     "env": {
         "browser": true,
         "es2021": true,
@@ -20,10 +24,16 @@
     },
     "plugins": [
         "react",
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "import"
     ],
     "rules": {
-        "no-multiple-empty-lines": ["error", { "max": 1 }],
+        "no-multiple-empty-lines": [
+            "error",
+            {
+                "max": 1
+            }
+        ],
         "no-trailing-spaces": "error",
         "no-mixed-spaces-and-tabs": "error",
         "linebreak-style": [
@@ -39,11 +49,32 @@
             "always"
         ],
         "no-undef": "off",
-        "comma-dangle": ["error", "never"]
+        "comma-dangle": [
+            "error",
+            "never"
+        ],
+        "@typescript-eslint/no-explicit-any": "error",
+        "react/react-in-jsx-scope": "off",
+        "react/require-default-props": "off",
+        "no-spaced-func": "off",
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": true
+            }
+        ],
+        "max-len": [
+            "error",
+            {
+                "code": 200
+            }
+        ]
     },
     "overrides": [
         {
-            "files": ["*.js"],
+            "files": [
+                "*.js"
+            ],
             "rules": {
                 "@typescript-eslint/no-var-requires": "off"
             }
@@ -53,13 +84,13 @@
         "react": {
             "createClass": "createReactClass", // Regex for Component Factory to use,
             // default to "createReactClass"
-            "pragma": "React",  // Pragma to use, default to "React"
-            "fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
+            "pragma": "React", // Pragma to use, default to "React"
+            "fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
             "version": "detect", // React version. "detect" automatically picks the version you have installed.
             // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
             // default to latest and warns if missing
             // It will default to "detect" in the future
             "flowVersion": "0.53" // Flow version
         }
     }
-}
+}

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,65 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main, preprod, prod ]
+  schedule:
+    - cron: '30 3 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/test.js.yml

@@ -7,6 +7,19 @@ on:
     branches: [ main ]
 
 jobs:
+  lint:
+      runs-on: ubuntu-latest
+      strategy:
+        matrix:
+          node-version: [ 16.x ]
+      steps:
+        - uses: actions/checkout@v2
+        - name: Use Node.js ${{ matrix.node-version }}
+          uses: actions/setup-node@v1
+          with:
+            node-version: ${{ matrix.node-version }}
+        - run: yarn install
+        - run: yarn run lint
   build:
     runs-on: ubuntu-latest
     strategy:

Interfaces/index.ts

@@ -11,3 +11,29 @@ export interface ImportUser {
     warnings: string[]
 }
 
+type JSONValue =
+    | string
+    | { [x: string]: JSONValue };
+
+export interface JSONObject {
+    [x: string]: JSONValue;
+}
+
+export interface UserForm {
+    username?: string
+    password?: string
+    confirm_password?: string
+}
+
+export interface ValidatorType { name: string, validators: ((val: string, name: string, formData: { [key: string]: string }) => string[])[] }
+
+export interface ContextProviderType {
+    errors: {
+        [key: string]: string[];
+    };
+    data: {
+        [key: string]: string;
+    };
+    setFieldValue: (name: string, value: string) => void;
+    registerInput: ({ name, validators }: ValidatorType) => () => void;
+}

jest.config.js

@@ -6,6 +6,6 @@ process.env = Object.assign(process.env, {
 
 module.exports = {
     moduleNameMapper: {
-        axios: 'axios/dist/node/axios.cjs',
-    },
+        axios: "axios/dist/node/axios.cjs"
+    }
 };

package.json

@@ -42,17 +42,20 @@
     "@types/react-dom": "^17.0.0",
     "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-design-system-react-components": "git+https://github.com/ONSdigital/blaise-design-system-react-components#0.13.2",
     "dotenv": "^10.0.0",
     "ejs": "^3.1.7",
     "express": "^4.17.3",
+    "history": "^4.9.0",
     "jest-cucumber": "^3.0.0",
     "lodash": "^4.17.21",
     "multer": "^1.4.2",
     "number-to-words": "^1.2.4",
+    "pino": "^8.17.2",
     "pino-http": "^5.5.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-csv-reader": "^3.3.0",
     "react-dom": "^17.0.2",
@@ -83,6 +86,9 @@
     "pino-pretty": "^4.7.1",
     "supertest": "^6.1.3"
   },
+  "peerDependencies": {
+    "react-router": "^6.21.1"
+  },
   "browserslist": {
     "production": [
       ">0.2%",

server/pino/index.ts

@@ -26,15 +26,15 @@ const defaultPinoConf = {
         }
     },
     serializers: {
-        req: (req: any) => ({
+        req: (req) => ({
             method: req.method,
             url: req.url,
             user: req.raw.user
         })
     }
 };
 
-export default function createLogger(options: any = {autoLogging: false})  {
+export default function createLogger(options = {autoLogging: false}): logger.HttpLogger  {
     let pinoConfig = {};
     if (process.env.NODE_ENV === "production") {
         pinoConfig = defaultPinoConf;

server/server.ts

@@ -1,19 +1,19 @@
-import express, {NextFunction, Request, Response} from "express";
+import express, { NextFunction, Request, Response } from "express";
 import axios from "axios";
 import path from "path";
 import ejs from "ejs";
 import dotenv from "dotenv";
-import {loadConfigFromEnv} from "./Config";
+import { loadConfigFromEnv } from "./Config";
 import createLogger from "./pino";
 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-server";
 import pino from "pino";
 
 const pinoLogger = pino();
-profiler.start({logLevel: 4}).catch((err: unknown) => {
+profiler.start({ logLevel: 4 }).catch((err: unknown) => {
     pinoLogger.error(`Failed to start profiler: ${err}`);
 });
 
@@ -45,7 +45,7 @@ const loginHandler = newLoginHandler(auth, blaiseApiClient);
 // Health Check endpoint
 server.get("/bam-ui/:version/health", async function (req: Request, res: Response) {
     pinoLogger.info("Heath Check endpoint called");
-    res.status(200).json({healthy: true});
+    res.status(200).json({ healthy: true });
 });
 
 server.use("/", loginHandler);
@@ -62,7 +62,7 @@ server.use(
 );
 
 server.get("*", function (req: Request, res: Response) {
-    res.render("index.html",{});
+    res.render("index.html", {});
 });
 
 server.use(function (err: Error, req: Request, res: Response, next: NextFunction) {

src/form/FormValidators.ts

@@ -1,17 +1,19 @@
-const requiredValidator = (val: string, name: string) => {
+import { UserForm } from "../../Interfaces";
+
+const requiredValidator = (val: string, name: string): string[] => {
     if (!val) {
         return [`Enter ${name.replace("_", " ")}`];
     }
 
     return [];
 };
 
-const passwordMatchedValidator = (val: string, name: string, formData: any) => {
+const passwordMatchedValidator = (val: string, name: string, formData: UserForm): string[] => {
     if (val !== formData.password) {
         return ["Must match password"];
     }
 
     return [];
 };
 
-export {requiredValidator, passwordMatchedValidator};
+export { requiredValidator, passwordMatchedValidator };

src/form/TextInput.tsx

@@ -1,5 +1,6 @@
-import React, {ChangeEvent, ReactElement, useState} from "react";
-import {isEmpty} from "lodash";
+import React, { ChangeEvent, ReactElement, useState } from "react";
+import { UserForm } from "../../Interfaces";
+import { isEmpty } from "lodash";
 import withForm from "./WithForm";
 
 export interface TextInputProps {
@@ -9,8 +10,8 @@ export interface TextInputProps {
     label: string
     type?: string
     errors?: string[]
-    onChange?: (val: string) => any
-    validators: ((val: string, name: string, formData: any) => string[])[]
+    onChange?: (val: string) => void
+    validators: ((val: string, name: string, formData: UserForm) => string[])[]
     password?: boolean
 }
 
@@ -43,25 +44,25 @@ const TextInput = (props: TextInputProps): ReactElement => {
                 {
                     props.password &&
                     <span className="ons-checkbox ons-checkbox--toggle">
-                    <input
-                        type="checkbox"
-                        id={`${props.name}-password-toggle`}
-                        className="ons-checkbox__input"
-                        name="show-password"
-                        onClick={() => setShowPassword(!showPassword)}
-                    />
-                    <label id="password-toggle-label" className="ons-checkbox__label"
-                           htmlFor={`${props.name}-password-toggle`}>
-                        Show password
-                    </label>
-                </span>
+                        <input
+                            type="checkbox"
+                            id={`${props.name}-password-toggle`}
+                            className="ons-checkbox__input"
+                            name="show-password"
+                            onClick={() => setShowPassword(!showPassword)}
+                        />
+                        <label id="password-toggle-label" className="ons-checkbox__label"
+                            htmlFor={`${props.name}-password-toggle`}>
+                            Show password
+                        </label>
+                    </span>
                 }
                 <input id={props.name} className="ons-input ons-input--text ons-input-type__input ons-u-mt-xs"
-                       name={props.name}
-                       autoComplete={props.password ? "current-password" : undefined}
-                       type={props.password ? showPassword ? "text" : "password" : "text"}
-                       placeholder={props.placeholder}
-                       onChange={onChange}
+                    name={props.name}
+                    autoComplete={props.password ? "current-password" : undefined}
+                    type={props.password ? showPassword ? "text" : "password" : "text"}
+                    placeholder={props.placeholder}
+                    onChange={onChange}
                 />
             </>
         );
@@ -87,5 +88,5 @@ const TextInput = (props: TextInputProps): ReactElement => {
 
 const FormTextInput = withForm(TextInput);
 
-export {TextInput};
+export { TextInput };
 export default FormTextInput;