Use custom layout for DXT form pages (#66)

- Use layouts/form.njk as the base for DXT form pages

- Update DXT to 0.1.14

- Fix blank string

- Import DXT SCSS

- Rename form.njk to dxt-forms.njk

- Add Error: prefix to page title if errors exist

- Include form views on viewpaths


Co-authored-by: Alistair Laing <aliuk2012@users.noreply.github.com>

Author: alexluckett

package-lock.json

@@ -39,7 +39,7 @@
   "license": "OGL-UK-3.0",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@defra/forms-engine-plugin": "^0.1.8",
+    "@defra/forms-engine-plugin": "^0.1.15",
     "@defra/hapi-tracing": "^1.0.0",
     "@elastic/ecs-pino-format": "^1.5.0",
     "@hapi/bell": "^13.1.0",
@@ -123,7 +123,7 @@
     "tsx": "^4.19.2",
     "typescript": "^5.6.3",
     "webpack": "^5.96.1",
-    "webpack-assets-manifest": "^5.2.1",
+    "webpack-assets-manifest": "^6.0.2",
     "webpack-cli": "^5.1.4"
   }
 }

package.json

@@ -1,4 +1,5 @@
-@use 'govuk-frontend';
+@use 'pkg:@defra/forms-engine-plugin';
+@use 'pkg:govuk-frontend';
 
 @use 'variables';
 @use 'helpers';

src/client/stylesheets/application.scss

@@ -9,12 +9,12 @@ import * as filters from './filters/filters.js'
 import * as globals from './globals.js'
 
 const dirname = path.dirname(fileURLToPath(import.meta.url))
+export const grantsUiPaths = [
+  path.resolve(dirname, '../../server/common/templates'),
+  path.resolve(dirname, '../../server/common/components')
+]
 const nunjucksEnvironment = nunjucks.configure(
-  [
-    'node_modules/govuk-frontend/dist/',
-    path.resolve(dirname, '../../server/common/templates'),
-    path.resolve(dirname, '../../server/common/components')
-  ],
+  ['node_modules/govuk-frontend/dist/', ...grantsUiPaths],
   {
     autoescape: true,
     throwOnUndefined: false,

src/config/nunjucks/nunjucks.js

@@ -457,7 +457,7 @@
         {
           "type": "YesNoField",
           "name": "remainingCostsYesNoField",
-          "title": " ",
+          "title": "Can you pay the remaining costs?",
           "options": {
             "customValidationMessages": {
               "any.required": "Select yes if you can pay the remaining costs"

src/server/common/forms/definitions/adding-value.json

@@ -17,14 +17,6 @@ export const serveStaticFiles = {
     name: 'staticFiles',
     register(server) {
       server.route([
-        {
-          method: 'GET',
-          path: '/stylesheets/application.min.css',
-          handler: {
-            file: './stylesheets/dxt-application.min.css'
-          },
-          options
-        },
         {
           method: 'GET',
           path: '/javascripts/application.min.js',

src/server/common/helpers/serve-static-files.js

@@ -0,0 +1,14 @@
+{% extends "layouts/page.njk" %}
+
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{% block pageTitle %}
+  {{ "Error: " if errors | length }}{{ pageTitle | evaluate }} | {{ serviceName }}
+{% endblock %}
+
+{% block beforeContent %}
+  {{ super() }}
+  {% if backLink %}
+    {{ govukBackLink(backLink) }}
+  {% endif %}
+{% endblock %}

src/server/common/templates/layouts/dxt-form.njk

@@ -43,7 +43,7 @@
 {% endblock %}
 
 {% block pageTitle %}
-  {{ pageTitle }} | {{ serviceName }}
+  {{ "Error: " if errors | length }}{{ pageTitle }} | {{ serviceName }}
 {% endblock %}
 
 {% block beforeContent %}

src/server/common/templates/layouts/page.njk

@@ -9,7 +9,11 @@ import Scooter from '@hapi/scooter'
 import path from 'path'
 import { fileURLToPath } from 'url'
 import { config } from '~/src/config/config.js'
-import { nunjucksConfig } from '~/src/config/nunjucks/nunjucks.js'
+import {
+  nunjucksConfig,
+  grantsUiPaths
+} from '~/src/config/nunjucks/nunjucks.js'
+import { context } from '~/src/config/nunjucks/context/context.js'
 // import auth from '~/src/plugins/auth.js'
 import csp from '~/src/plugins/content-security-policy.js'
 import sso from '~/src/plugins/sso.js'
@@ -43,7 +47,7 @@ const getViewPaths = () => {
     `${basePath}/land-grants/parcel`,
     `${basePath}/land-grants/submission`,
     `${basePath}/views`,
-    `${basePath}/common/templates`
+    ...grantsUiPaths
   ]
 }
 
@@ -104,7 +108,11 @@ const registerFormsPlugin = async (server) => {
       filters: {
         formatCurrency
       },
-      viewPaths: getViewPaths(),
+      nunjucks: {
+        baseLayoutPath: 'layouts/dxt-form.njk',
+        paths: getViewPaths()
+      },
+      viewContext: context,
       controllers: {
         ConfirmationPageController,
         DeclarationPageController,

src/server/index.js

@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends baseLayoutPath %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
@@ -42,11 +42,11 @@
               checked: actions and actions.includes(action.code)
             }]) %}
           {% endfor %}
-          
+
           {% if actionList.length > 0 %}
           <div class="govuk-form-group">
             <fieldset class="govuk-fieldset" aria-describedby="action-hint">
-              
+
               <table class="govuk-table">
                 <caption class="govuk-table__caption govuk-table__caption--l">Available actions for selected parcel</caption>
                 <thead class="govuk-table__head">
@@ -84,7 +84,7 @@
 
             </fieldset>
           </div>
-            
+
           <div class="govuk-button-group">
             <input type="hidden" name="crumb" value="{{ crumb }}">
             {% block form %}