@ministryofjustice/hmpps-connect-dps-components 2.0.0-beta → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -18
- package/dist/componentsService.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
# hmpps-connect-dps-components
|
|
2
2
|
|
|
3
3
|
`hmpps-connect-dps-components` is a Node.js client library to simplify the process of incorporating global components
|
|
4
|
-
within DPS applications.
|
|
4
|
+
within DPS applications. We welcome feedback on this README [here](https://moj.enterprise.slack.com/archives/C04JFG3QJE6)
|
|
5
|
+
in order to improve it.
|
|
5
6
|
|
|
6
7
|
## Contents
|
|
7
8
|
|
|
8
|
-
1. [
|
|
9
|
+
1. [Using the library](#using-the-library)
|
|
10
|
+
2. [For library developers](#for-library-developers)
|
|
9
11
|
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Using the library
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
### Prerequisites
|
|
14
16
|
|
|
15
17
|
The package assumes adherance to the standard [hmpps-template-typescript](https://github.com/ministryofjustice/hmpps-template-typescript) project.
|
|
16
18
|
It requires:
|
|
17
19
|
- a user object to be available on `res.locals` containing a token, displayName, and authSource.
|
|
18
20
|
- nunjucks to be setup
|
|
19
21
|
- an environment variable to be set for the micro frontend components api called `COMPONENT_API_URL`
|
|
20
|
-
- to be run
|
|
22
|
+
- to be run AFTER helmet middleware
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
### Installation
|
|
23
25
|
|
|
24
26
|
To install the package, run the following command:
|
|
25
27
|
|
|
@@ -27,13 +29,17 @@ To install the package, run the following command:
|
|
|
27
29
|
npm install @ministryofjustice/hmpps-connect-dps-components
|
|
28
30
|
```
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
### Usage
|
|
31
33
|
|
|
32
34
|
Currently, the package provides the header and the footer component.
|
|
33
35
|
|
|
34
|
-
To incorporate use
|
|
36
|
+
To incorporate use the middleware for appropriate routes within your Express application:
|
|
35
37
|
|
|
36
38
|
```javascript
|
|
39
|
+
import dpsComponents from '@ministryofjustice/hmpps-connect-dps-components'
|
|
40
|
+
|
|
41
|
+
...
|
|
42
|
+
|
|
37
43
|
app.use(dpsComponents.getPageComponents({
|
|
38
44
|
dpsUrl: config.serviceUrls.digitalPrison,
|
|
39
45
|
logger,
|
|
@@ -55,8 +61,9 @@ It may be sufficient for you app to only request components for GET requests for
|
|
|
55
61
|
|
|
56
62
|
may be more appropriate, especially if you use the [PRG pattern](https://en.wikipedia.org/wiki/Post/Redirect/Get) to
|
|
57
63
|
handle form submission. This will help us to reduce the load on the micro frontend components API. You may wish to
|
|
58
|
-
go even further, for example avoiding
|
|
59
|
-
something like this:
|
|
64
|
+
go even further, for example avoiding routes that don't need components - the Prisoner Profile does
|
|
65
|
+
something like this to avoid the component API call for the following routes: `/api` (provides prisoner images) and `/`
|
|
66
|
+
(a redirect only route).
|
|
60
67
|
|
|
61
68
|
```javascript
|
|
62
69
|
app.get(
|
|
@@ -71,8 +78,6 @@ something like this:
|
|
|
71
78
|
)
|
|
72
79
|
```
|
|
73
80
|
|
|
74
|
-
require the components, in which case you should be more specific about which to apply the middleware to.
|
|
75
|
-
|
|
76
81
|
There are a [number of options](./src/index.ts) available depending on your requirements.
|
|
77
82
|
|
|
78
83
|
Add the `hmpps-connect-dps-components` path to the nunjucksSetup.ts file to enable css to be loaded:
|
|
@@ -122,7 +127,7 @@ Include reference to the components in your layout.njk file:
|
|
|
122
127
|
{% endblock %}
|
|
123
128
|
```
|
|
124
129
|
|
|
125
|
-
|
|
130
|
+
### Extra calls
|
|
126
131
|
|
|
127
132
|
It may be that you need to add some extra requests for the page components for pages that do not fit the normal flow
|
|
128
133
|
of routes. e.g. in `setUpAuthentication.ts` on the `/autherror` path:
|
|
@@ -140,12 +145,12 @@ of routes. e.g. in `setUpAuthentication.ts` on the `/autherror` path:
|
|
|
140
145
|
|
|
141
146
|
This will provide a stripped down header for if there is no user object on `res.locals`.
|
|
142
147
|
|
|
143
|
-
|
|
148
|
+
### CSP
|
|
144
149
|
|
|
145
150
|
The package updates the content-security-middleware to include references to the fe-components API. This package should
|
|
146
151
|
be run after Helmet to prevent this being overwritten.
|
|
147
152
|
|
|
148
|
-
|
|
153
|
+
### Shared Data
|
|
149
154
|
|
|
150
155
|
An optional parameter `includeSharedData: true` can be passed into the `get` method. Setting this will result in a
|
|
151
156
|
`sharedData` object being added to `res.locals.feComponents` containing data the components have collected to render.
|
|
@@ -158,7 +163,7 @@ This includes:
|
|
|
158
163
|
This can be useful e.g. for when your service needs access to activeCaseLoad information to prevent extra calls to the
|
|
159
164
|
api and takes advantage of the caching that the micro frontend api does.
|
|
160
165
|
|
|
161
|
-
|
|
166
|
+
### Populating res.locals.user with the shared case load data
|
|
162
167
|
|
|
163
168
|
Many services typically add case load information to the user object on `res.locals`. This library provides some
|
|
164
169
|
optional middleware which populates:
|
|
@@ -178,8 +183,16 @@ app.use(dpsComponents.retrieveCaseLoadData({ logger }))
|
|
|
178
183
|
|
|
179
184
|
Again there are a [number of options](./src/index.ts) available depending on your requirements.
|
|
180
185
|
|
|
181
|
-
|
|
186
|
+
This middleware checks the `res.locals.user.authSource` so ensure that any mock auth data used in tests includes
|
|
187
|
+
`auth_source: 'nomis'` in the response.
|
|
188
|
+
|
|
189
|
+
### Note
|
|
182
190
|
|
|
183
191
|
In the event of a failure to retrieve the components, the package will populate the html fields with fallback components.
|
|
184
192
|
The `feComponents.sharedData` will not be populated, but if you use the retrieveCaseLoadData middleware (see above) it
|
|
185
|
-
will either take case load data from the cache or make a call to the Prison API to retrieve it.
|
|
193
|
+
will either take case load data from the cache or make a call to the Prison API to retrieve it.
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
## For library developers:
|
|
197
|
+
|
|
198
|
+
1. [Publishing to NPM](readme/publishing.md)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentsService.js","sourceRoot":"","sources":["../src/componentsService.ts"],"names":[],"mappings":";;;;;AACA,gGAAuE;AACvE,iDAAwE;AAExE,kEAAyC;
|
|
1
|
+
{"version":3,"file":"componentsService.js","sourceRoot":"","sources":["../src/componentsService.ts"],"names":[],"mappings":";;;;;AACA,gGAAuE;AACvE,iDAAwE;AAExE,kEAAyC;AAEzC,MAAM,cAAc,GAA4B;IAC9C,MAAM,EAAE,OAAO;IACf,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;IAClD,iBAAiB,EAAE,KAAK;CACzB,CAAA;AAED,SAAwB,qBAAqB,CAAC,cAA+B;IAC3E,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG;QACpD,GAAG,cAAc;QACjB,GAAG,cAAc;KAClB,CAAA;IAED,OAAO,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;QAC/B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAA;YAC3C,GAAG,CAAC,MAAM,CAAC,YAAY,GAAG;gBACxB,MAAM,EAAE,IAAA,6BAAiB,EAAC,IAAI,EAAE,cAAc,CAAC;gBAC/C,MAAM,EAAE,IAAA,6BAAiB,EAAC,IAAI,EAAE,cAAc,CAAC;gBAC/C,WAAW,EAAE,EAAE;gBACf,UAAU,EAAE,EAAE;aACf,CAAA;YACD,OAAO,IAAI,EAAE,CAAA;QACf,CAAC;QAED,IAAI,CAAC;YACH,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,4BAAkB,CAAC,aAAa,CACrE,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EACrB,cAAc,EACd,MAAM,CACP,CAAA;YAED,GAAG,CAAC,MAAM,CAAC,YAAY,GAAG;gBACxB,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,WAAW,EAAE,CAAC,GAAG,MAAM,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC;gBAC3C,UAAU,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC;aACzD,CAAA;YAED,IAAI,iBAAiB,EAAE,CAAC;gBACtB,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,GAAG,IAAI,CAAA;YAC3C,CAAC;YAED,IAAA,mBAAS,EAAC,GAAG,CAAC,CAAA;YAEd,OAAO,IAAI,EAAE,CAAA;QACf,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAA;YAExE,GAAG,CAAC,MAAM,CAAC,YAAY,GAAG;gBACxB,MAAM,EAAE,IAAA,6BAAiB,EAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC;gBAC1D,MAAM,EAAE,IAAA,6BAAiB,EAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC;gBAC1D,WAAW,EAAE,EAAE;gBACf,UAAU,EAAE,EAAE;aACf,CAAA;YAED,OAAO,IAAI,EAAE,CAAA;QACf,CAAC;IACH,CAAC,CAAA;AACH,CAAC;AApDD,wCAoDC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ministryofjustice/hmpps-connect-dps-components",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A package to allow the inclusion of connect dps micro frontend components within dps applications",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|