@ministryofjustice/hmpps-connect-dps-components 5.1.0 → 5.2.0

package/README.md

@@ -1,6 +1,9 @@
 # hmpps-connect-dps-components
 
-`hmpps-connect-dps-components` is a Node.js client library to simplify the process of incorporating global components 
+[![repo standards badge](https://img.shields.io/badge/endpoint.svg?&style=flat&logo=github&url=https%3A%2F%2Foperations-engineering-reports.cloud-platform.service.justice.gov.uk%2Fapi%2Fv1%2Fcompliant_public_repositories%2Fhmpps-connect-dps-components)](https://operations-engineering-reports.cloud-platform.service.justice.gov.uk/public-report/hmpps-connect-dps-components "Link to report")
+[![Test, lint & publish](https://github.com/ministryofjustice/hmpps-connect-dps-components/actions/workflows/pipeline.yml/badge.svg?branch=main)](https://github.com/ministryofjustice/hmpps-connect-dps-components/actions/workflows/pipeline.yml)
+
+`hmpps-connect-dps-components` is a Node.js client library to simplify the process of incorporating global components
 within DPS applications. We welcome feedback on this README [here](https://moj.enterprise.slack.com/archives/C04JFG3QJE6)
 in order to improve it.
 
@@ -84,7 +87,7 @@ It may be sufficient for you app to only request components for GET requests for
 may be more appropriate, especially if you use the [PRG pattern](https://en.wikipedia.org/wiki/Post/Redirect/Get) to
 handle form submission. This will help us to reduce the load on the micro frontend components API. You may wish to
 go even further, for example avoiding routes that don't need components - the Prisoner Profile does
-something like this to avoid the component API call for the following routes: `/api` (provides prisoner images) and `/` 
+something like this to avoid the component API call for the following routes: `/api` (provides prisoner images) and `/`
 (a redirect only route).
 
 ```javascript
@@ -152,7 +155,7 @@ Include reference to the components in your layout.njk file:
 
 ### Extra calls
 
-It may be that you need to add some extra requests for the page components for pages that do not fit the normal flow 
+It may be that you need to add some extra requests for the page components for pages that do not fit the normal flow
 of routes. e.g. in `setUpAuthentication.ts` on the `/autherror` path:
 
 ```javascript
@@ -175,13 +178,13 @@ This will provide a stripped down header for if there is no user object on `res.
 
 ### CSP
 
-The package updates the content-security-middleware to include references to the fe-components API. This package should 
+The package updates the content-security-middleware to include references to the fe-components API. This package should
 be run after Helmet to prevent this being overwritten.
 
-### Shared Data 
+### Shared Data
 
-An optional parameter `includeSharedData: true` can be passed into the `get` methods request options. Setting this will result in a 
-`sharedData` object being added to `res.locals.feComponents` containing data the components have collected to render. 
+An optional parameter `includeSharedData: true` can be passed into the `get` methods request options. Setting this will result in a
+`sharedData` object being added to `res.locals.feComponents` containing data the components have collected to render.
 This includes:
 
 - activeCaseLoad (the active caseload of the user)
@@ -189,19 +192,19 @@ This includes:
 - services (information on services the user has access to used for global navigation)
 - allocationJobResponsibilities (the allocation policy codes the user has the associated job responsibility for. Allocation policy codes are: `KEY_WORKER`, meaning the user is a key worker and `PERSONAL_OFFICER`, meaning the user is a personal officer.)
 
-This can be useful e.g. for when your service needs access to activeCaseLoad information to prevent extra calls to the 
+This can be useful e.g. for when your service needs access to activeCaseLoad information to prevent extra calls to the
 api and takes advantage of the caching that the micro frontend api does.
 
 ### Populating res.locals.user with the shared case load data
 
-Many services typically add case load information to the user object on `res.locals`. This library provides some 
+Many services typically add case load information to the user object on `res.locals`. This library provides some
 optional middleware which populates:
 - `res.locals.user.caseLoads` with all case loads the user has access to
 - `res.locals.user.activeCaseLoad` with the active case load of the user
 - `res.locals.user.activeCaseLoadId` with the id of the active case load
 
-It uses the `sharedData` object if it is present and caches in `req.session` so that any subsequent routes that do not 
-use the component middleware can still use the data. If there is no data in the cache, it will fall back to making a 
+It uses the `sharedData` object if it is present and caches in `req.session` so that any subsequent routes that do not
+use the component middleware can still use the data. If there is no data in the cache, it will fall back to making a
 call to Prison API to retrieve the data using the user token.
 
 To enable this, add the middleware after the component middleware as follows:
@@ -216,7 +219,7 @@ app.use(retrieveCaseLoadData({
 )
 ```
 
-This middleware checks the `res.locals.user.authSource` so ensure that any mock auth data used in tests includes 
+This middleware checks the `res.locals.user.authSource` so ensure that any mock auth data used in tests includes
 `auth_source: 'nomis'` in the response.
 
 ### Populating res.locals.user with the shared allocation job responsibilities
@@ -232,7 +235,7 @@ To enable this, add the middleware after the component middleware as follows:
 
 ```javascript
 import { retrieveAllocationJobResponsibilities } from '@ministryofjustice/hmpps-connect-dps-components'
-app.use(retrieveAllocationJobResponsibilities({ 
+app.use(retrieveAllocationJobResponsibilities({
   logger,
   authenticationClient: new AuthenticationClient(config.apis.hmppsAuth, logger, services.dataAccess.tokenStore),
   allocationsApiConfig: config.apis.allocationsApi,
@@ -244,14 +247,14 @@ This should go after `retrieveCaseLoadData` so that `res.locals.user.activeCaseL
 This middleware checks the `res.locals.user.authSource` so ensure that any mock auth data used in tests includes
 `auth_source: 'nomis'` in the response. It also checks the `res.locals.user.activeCaseLoadId`, which is required for retrieving allocation job responsibilities.
 
-Your service will need to be set up with client credentials in order to use this middleware, although it currently 
+Your service will need to be set up with client credentials in order to use this middleware, although it currently
 does not need any specific role.
 
 ### Note
 
 In the event of a failure to retrieve the components, the package will populate the html fields with fallback components.
-The `feComponents.sharedData` will not be populated, but if you use the retrieveCaseLoadData middleware (see above) it 
-will either take case load data from the cache or make a call to the Prison API to retrieve it.  
+The `feComponents.sharedData` will not be populated, but if you use the retrieveCaseLoadData middleware (see above) it
+will either take case load data from the cache or make a call to the Prison API to retrieve it.
 
 
 ## For library developers:

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@ministryofjustice/hmpps-connect-dps-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "A package to allow the inclusion of connect DPS micro frontend components within DPS applications",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "scripts/**/*"
   ],
   "bin": "./scripts/install.ts",
+  "engines": {
+    "node": "20 || 22 || 24"
+  },
   "scripts": {
     "prepare": "hmpps-precommit-hooks-prepare",
     "build": "rollup -c rollup.config.ts --bundleConfigAsCjs && npm run copy:assets",
@@ -44,36 +48,36 @@
   },
   "homepage": "https://github.com/ministryofjustice/hmpps-connect-dps-components#readme",
   "devDependencies": {
-    "@ministryofjustice/eslint-config-hmpps": "^0.0.5",
-    "@ministryofjustice/hmpps-auth-clients": "^0.0.1",
-    "@ministryofjustice/hmpps-precommit-hooks": "^0.0.3",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-multi-entry": "^6.0.1",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@tsconfig/node22": "^22.0.2",
+    "@ministryofjustice/eslint-config-hmpps": "^1.0.0",
+    "@ministryofjustice/hmpps-auth-clients": "^1.0.0",
+    "@ministryofjustice/hmpps-precommit-hooks": "^1.0.2",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-multi-entry": "^7.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@tsconfig/node24": "^24.0.1",
     "@types/bunyan": "^1.8.11",
-    "@types/express": "^4.17.22",
-    "@types/jest": "^29.5.14",
+    "@types/express": "^5.0.5",
+    "@types/jest": "^30.0.0",
     "@types/superagent": "^8.1.9",
     "@types/supertest": "^6.0.3",
     "cheerio": "^1.0.0",
-    "express": "^4.21.2",
-    "govuk-frontend": "^5.10.1",
-    "jest": "^29.7.0",
-    "jest-html-reporter": "^3.10.2",
+    "express": "^5.1.0",
+    "govuk-frontend": "^5.13.0",
+    "jest": "^30.2.0",
+    "jest-html-reporter": "^4.3.0",
     "jest-junit": "^16.0.0",
-    "lint-staged": "^16.1.2",
-    "nock": "^13.5.6",
-    "rollup": "^4.45.1",
-    "rollup-plugin-dts": "^6.2.1",
+    "lint-staged": "^16.2.6",
+    "nock": "^14.0.10",
+    "rollup": "^4.53.2",
+    "rollup-plugin-dts": "^6.2.3",
     "supertest": "^7.1.1",
-    "ts-jest": "^29.3.4",
+    "ts-jest": "^29.4.5",
     "tslib": "^2.8.1"
   },
   "dependencies": {
-    "@ministryofjustice/hmpps-rest-client": "^0.0.3",
-    "@types/node": "22.18.6",
+    "@ministryofjustice/hmpps-rest-client": "^1.0.0",
+    "@types/node": "^24.10.0",
     "@types/nunjucks": "^3.2.6",
     "nunjucks": "^3.2.4",
     "superagent": "^10.2.3"

package/scripts/patch.diff

@@ -0,0 +1,170 @@
+diff --git a/assets/scss/index.scss b/assets/scss/index.scss
+index 70feedd..a7cd9fd 100644
+--- a/assets/scss/index.scss
++++ b/assets/scss/index.scss
+@@ -6,6 +6,8 @@ $govuk-page-width: $moj-page-width;
+
+ @import "govuk-frontend/dist/govuk/index";
+ @import "@ministryofjustice/frontend/moj/all";
++@import "@ministryofjustice/hmpps-connect-dps-components/dist/assets/footer";
++@import "@ministryofjustice/hmpps-connect-dps-components/dist/assets/header-bar";
+
+ @import './components/header-bar';
+ @import './overrides/local';
+diff --git a/feature.env b/feature.env
+index 9a3f344..11b4654 100644
+--- a/feature.env
++++ b/feature.env
+@@ -1,6 +1,8 @@
+ PORT=3007
+ HMPPS_AUTH_URL=http://localhost:9091/auth
+ TOKEN_VERIFICATION_API_URL=http://localhost:9091/verification
++COMPONENT_API_URL=http://localhost:9091/frontend-components
++DPS_HOME_PAGE_URL=http://localhost:9091/dpshomepage
+ EXAMPLE_API_URL=http://localhost:9091/example-api
+ TOKEN_VERIFICATION_ENABLED=true
+ REDIS_ENABLED=false
+diff --git a/helm_deploy/values-dev.yaml b/helm_deploy/values-dev.yaml
+index f40e7d3..52b7431 100644
+--- a/helm_deploy/values-dev.yaml
++++ b/helm_deploy/values-dev.yaml
+@@ -11,6 +11,8 @@ generic-service:
+     INGRESS_URL: "https://template-typescript-dev.hmpps.service.justice.gov.uk"
+     HMPPS_AUTH_URL: "https://sign-in-dev.hmpps.service.justice.gov.uk/auth"
+     TOKEN_VERIFICATION_API_URL: "https://token-verification-api-dev.prison.service.justice.gov.uk"
++    COMPONENT_API_URL: "https://frontend-components-dev.hmpps.service.justice.gov.uk"
++    DPS_HOME_PAGE_URL: "https://digital-dev.prison.service.justice.gov.uk"
+     EXAMPLE_API_URL: 'https://template-kotlin-dev.hmpps.service.justice.gov.uk'
+     ENVIRONMENT_NAME: DEV
+     AUDIT_ENABLED: "false"
+diff --git a/helm_deploy/values-preprod.yaml b/helm_deploy/values-preprod.yaml
+index 554e19a..0d577b2 100644
+--- a/helm_deploy/values-preprod.yaml
++++ b/helm_deploy/values-preprod.yaml
+@@ -11,6 +11,8 @@ generic-service:
+     INGRESS_URL: "https://template-typescript-preprod.hmpps.service.justice.gov.uk"
+     HMPPS_AUTH_URL: "https://sign-in-preprod.hmpps.service.justice.gov.uk/auth"
+     TOKEN_VERIFICATION_API_URL: "https://token-verification-api-preprod.prison.service.justice.gov.uk"
++    COMPONENT_API_URL: "https://frontend-components-preprod.hmpps.service.justice.gov.uk"
++    DPS_HOME_PAGE_URL: "https://digital-preprod.prison.service.justice.gov.uk"
+     EXAMPLE_API_URL: 'https://template-kotlin-preprod.hmpps.service.justice.gov.uk'
+     ENVIRONMENT_NAME: PRE-PRODUCTION
+     AUDIT_ENABLED: "false"
+diff --git a/helm_deploy/values-prod.yaml b/helm_deploy/values-prod.yaml
+index 6bb4e41..3a2ae46 100644
+--- a/helm_deploy/values-prod.yaml
++++ b/helm_deploy/values-prod.yaml
+@@ -9,6 +9,8 @@ generic-service:
+     INGRESS_URL: "https://template-typescript.hmpps.service.justice.gov.uk"
+     HMPPS_AUTH_URL: "https://sign-in.hmpps.service.justice.gov.uk/auth"
+     TOKEN_VERIFICATION_API_URL: "https://token-verification-api.prison.service.justice.gov.uk"
++    COMPONENT_API_URL: "https://frontend-components.hmpps.service.justice.gov.uk"
++    DPS_HOME_PAGE_URL: "https://digital.prison.service.justice.gov.uk"
+     EXAMPLE_API_URL: 'https://template-kotlin.hmpps.service.justice.gov.uk'
+     AUDIT_ENABLED: "false"
+
+diff --git a/server/app.ts b/server/app.ts
+index eddaa67..0dfb1fe 100644
+--- a/server/app.ts
++++ b/server/app.ts
+@@ -1,7 +1,10 @@
+ import express from 'express'
++import { getFrontendComponents } from '@ministryofjustice/hmpps-connect-dps-components'
+
+ import createError from 'http-errors'
+
++import logger from '../logger'
++import config from './config'
+ import nunjucksSetup from './utils/nunjucksSetup'
+ import errorHandler from './errorHandler'
+ import { appInsightsMiddleware } from './utils/azureAppInsights'
+@@ -38,6 +41,15 @@ export default function createApp(services: Services): express.Application {
+   app.use(setUpCsrf())
+   app.use(setUpCurrentUser())
+
++  app.use(
++    getFrontendComponents({
++      logger,
++      componentApiConfig: config.apis.componentApi,
++      dpsUrl: config.serviceUrls.digitalPrison,
++      requestOptions: { includeSharedData: true },
++    }),
++  )
++
+   app.use(routes(services))
+
+   app.use((req, res, next) => next(createError(404, 'Not found')))
+diff --git a/server/config.ts b/server/config.ts
+index e49a07b..9bbba57 100644
+--- a/server/config.ts
++++ b/server/config.ts
+@@ -72,6 +72,15 @@ export default {
+       agent: new AgentConfig(Number(get('TOKEN_VERIFICATION_API_TIMEOUT_RESPONSE', 5000))),
+       enabled: get('TOKEN_VERIFICATION_ENABLED', 'false') === 'true',
+     },
++    componentApi: {
++      url: get('COMPONENT_API_URL', 'http://localhost:8082', requiredInProduction),
++      healthPath: '/ping',
++      timeout: {
++        response: Number(get('COMPONENT_API_TIMEOUT_RESPONSE', 2500)),
++        deadline: Number(get('COMPONENT_API_TIMEOUT_DEADLINE', 2500)),
++      },
++      agent: new AgentConfig(Number(get('COMPONENT_TIMEOUT_DEADLINE', 10000))),
++    },
+     exampleApi: {
+       url: get('EXAMPLE_API_URL', 'http://localhost:8080', requiredInProduction),
+       healthPath: '/health/ping',
+@@ -82,6 +91,7 @@ export default {
+       agent: new AgentConfig(Number(get('EXAMPLE_API_TIMEOUT_RESPONSE', 5000))),
+     },
+   },
++  serviceUrls: { digitalPrison: get('DPS_HOME_PAGE_URL', 'http://localhost:3001', requiredInProduction) },
+   sqs: {
+     audit: auditConfig(),
+   },
+diff --git a/server/utils/nunjucksSetup.ts b/server/utils/nunjucksSetup.ts
+index 1d00293..69a787c 100644
+--- a/server/utils/nunjucksSetup.ts
++++ b/server/utils/nunjucksSetup.ts
+@@ -30,6 +30,7 @@ export default function nunjucksSetup(app: express.Express): void {
+       path.join(__dirname, '../../server/views'),
+       'node_modules/govuk-frontend/dist/',
+       'node_modules/@ministryofjustice/frontend/',
++      'node_modules/@ministryofjustice/hmpps-connect-dps-components/dist/assets/',
+     ],
+     {
+       autoescape: true,
+diff --git a/server/views/partials/layout.njk b/server/views/partials/layout.njk
+index 63653a0..d87b07a 100644
+--- a/server/views/partials/layout.njk
++++ b/server/views/partials/layout.njk
+@@ -2,17 +2,28 @@
+
+ {% block head %}
+   <link href="{{ '/assets/css/index.css' | assetMap }}" rel="stylesheet"/>
++
++  {% for js in feComponents.jsIncludes %}
++    <script src="{{ js }}" nonce="{{ cspNonce }}"></script>
++  {% endfor %}
++  {% for css in feComponents.cssIncludes %}
++    <link href="{{ css }}" nonce="{{ cspNonce }}" rel="stylesheet" />
++  {% endfor %}
+ {% endblock %}
+
+ {% block pageTitle %}{{pageTitle | default(applicationName)}}{% endblock %}
+
+ {% block header %}
+-  {% include "./header.njk" %}
++  {{ feComponents.header | safe }}
+ {% endblock %}
+
+ {% block bodyStart %}
+ {% endblock %}
+
++{% block footer %}
++  {{ feComponents.footer | safe }}
++{% endblock %}
++
+ {% block bodyEnd %}
+   <script type="module" src="{{ '/assets/js/index.js' | assetMap }}"></script>
+ {% endblock %}