hmpps-electronic-monitoring-for-probation-officers-ui

Template github repo used for new Typescript based projects.

Instructions

If this is a HMPPS project then the project will be created as part of bootstrapping - see https://github.com/ministryofjustice/hmpps-project-bootstrap. You are able to specify a template application using the github_template_repo attribute to clone without the need to manually do this yourself within GitHub.

This project is community managed by the mojdt #typescript slack channel. Please raise any questions or queries there. Contributions welcome!

Our security policy is located here.

More information about the template project including features can be found here.

Documentation to create new service is located here.

Creating a Cloud Platform namespace

When deploying to a new namespace, you may wish to use the templates project namespace as the basis for your new namespace. This namespace contains both the kotlin and typescript template projects, which is the usual way that projects are setup. This namespace includes an AWS elasticache setup - which is required by this template project.

Copy this folder and update all the existing namespace references. If you only need the typescript configuration then remove all kotlin references. Submit a PR to the Cloud Platform team in #ask-cloud-platform. Further instructions from the Cloud Platform team can be found in the Cloud Platform User Guide

Slack channel for release notifications

By default, release notifications are only enabled for production. The circleci configuration can be amended to send release notifications for deployments to other environments if required. Note that if the configuration is amended, the slack channel should then be amended to your own team's channel as dps-releases is strictly for production release notifications. If the slack channel is set to something other than dps-releases, production release notifications will still automatically go to dps-releases as well. This is configured by releases-slack-channel in .circleci/config.yml.

Slack channel for pipeline security notifications

Ths channel should be specific to your team and is for daily / weekly security scanning job results. It is your team's responsibility to keep up-to-date with security issues and update your application so that these jobs pass. You will only be notified if the jobs fail. The scan results can always be found in circleci for your project. This is configured by alerts-slack-channel in .circleci/config.yml.

Non production kubernetes alerts

By default Prometheus alerts are created in the application namespaces to monitor your application e.g. if your application is crash looping, there are a significant number of errors from the ingress. Since Prometheus runs in cloud platform AlertManager needs to be setup first with your channel. Please see Create your own custom alerts in the Cloud Platform user guide. Once that is setup then the custom severity label can be used for alertSeverity in the helm_deploy/values-*.yaml configuration.

Normally it is worth setting up two separate labels and therefore two separate slack channels - one for your production alerts and one for your non-production alerts. Using the same channel can mean that production alerts are sometimes lost within non-production issues.

Production kubernetes alerts

This is the severity label for production, determined by the custom severity label. See the above #non-production-kubernetes-alerts for more information. This is configured in helm_deploy/values-prod.yaml.

Product ID

This is so that we can link a component to a product and thus provide team and product information in the Developer Portal. Refer to the developer portal at https://developer-portal.hmpps.service.justice.gov.uk/products to find your product id. This is configured in helm_deploy/<project_name>/values.yaml.

Manually branding from template app

Run the rename-project.bash without any arguments. This will prompt for the six required parameters and create a PR. The script requires a recent version of bash to be installed, as well as GNU sed in the path.

Oauth2 Credentials

The template project is set up to run with two sets of credentials, each one support a different oauth2 flows. These need to be requested from the auth team by filling in this template and raising on their slack channel.

Auth Code flow

These are used to allow authenticated users to access the application. After the user is redirected from auth back to the application, the typescript app will use the returned auth code to request a JWT token for that user containing the user's roles. The JWT token will be verified and then stored in the user's session.

These credentials are configured using the following env variables:

• AUTH_CODE_CLIENT_ID
• AUTH_CODE_CLIENT_SECRET

Client Credentials flow

These are used by the application to request tokens to make calls to APIs. These are system accounts that will have their own sets of roles.

Most API calls that occur as part of the request/response cycle will be on behalf of a user. To make a call on behalf of a user, a username should be passed when requesting a system token. The username will then become part of the JWT and can be used downstream for auditing purposes.

These tokens are cached until expiration.

These credentials are configured using the following env variables:

• CLIENT_CREDS_CLIENT_ID
• CLIENT_CREDS_CLIENT_SECRET

Dependencies

REDIS

When deployed to an environment with multiple pods we run applications with an instance of REDIS/Elasticache to provide a distributed cache of sessions. The template app is, by default, configured not to use REDIS when running locally.

Running the app via docker-compose

The easiest way to run the app is to use docker compose to create the service and all dependencies.

docker compose pull

docker compose up

Running the app for development

To start the main services excluding the example typescript template app:

docker compose up --scale=app=0

Create an environment file by copying .env.example -> .env Environment variables set in here will be available when running start:dev

Install dependencies using npm install, ensuring you are using node v20

Note: Using nvm (or fnm), run nvm install --latest-npm within the repository folder to use the correct version of node, and the latest version of npm. This matches the engines config in package.json and the CircleCI build config.

And then, to build the assets and start the app with esbuild:

npm run start:dev

Run linter

• npm run lint runs eslint.
• npm run typecheck runs the TypeScript compiler tsc.

Run unit tests

npm run test

Running integration tests

It's recommended you run the tests against the below e.g. npm run start-feature or npm run start-feature:dev

And on another terminal tab, run tests in headless mode with:

npm run int-test

Or run tests with the cypress UI:

npm run int-test-ui

Testing a page for accessiblity issues with Cypress AXE

You can use Cypress AXE to automate the process of testing a page for accessiblity issues.

You need to follow the three steps below.

1. Navigate to the page you want to test. cy.visit('your-page-url')

2. Inject the Axe-core library into the page. cy.injectAxe()

3. Run accessibility checks on the page with logging cy.checkA11y(null, null, logA11yViolationsWithDescription)

Change log

A changelog for the service is available here