@defra/forms-engine-plugin 0.1.9 → 0.1.11

package/src/server/index.ts

@@ -15,14 +15,13 @@ import { config } from '~/src/config/index.js'
 import { requestLogger } from '~/src/server/common/helpers/logging/request-logger.js'
 import { requestTracing } from '~/src/server/common/helpers/logging/request-tracing.js'
 import { buildRedisClient } from '~/src/server/common/helpers/redis-client.js'
-import { configureBlankiePlugin } from '~/src/server/plugins/blankie.js'
 import { configureCrumbPlugin } from '~/src/server/plugins/crumb.js'
-import { configureEnginePlugin } from '~/src/server/plugins/engine/index.js'
+import { configureEnginePlugin } from '~/src/server/plugins/engine/configureEnginePlugin.js'
 import pluginErrorPages from '~/src/server/plugins/errorPages.js'
 import { plugin as pluginViews } from '~/src/server/plugins/nunjucks/index.js'
 import pluginPulse from '~/src/server/plugins/pulse.js'
-import pluginRouter from '~/src/server/plugins/router.js'
 import pluginSession from '~/src/server/plugins/session.js'
+import { publicRoutes } from '~/src/server/routes/index.js'
 import { prepareSecureContext } from '~/src/server/secure-context.js'
 import { type RouteConfig } from '~/src/server/types.js'
 
@@ -82,15 +81,13 @@ export async function createServer(routeConfig?: RouteConfig) {
     prepareSecureContext(server)
   }
 
-  const pluginEngine = await configureEnginePlugin(routeConfig)
   const pluginCrumb = configureCrumbPlugin(routeConfig)
-  const pluginBlankie = configureBlankiePlugin()
+  const pluginEngine = await configureEnginePlugin(routeConfig)
 
   await server.register(pluginSession)
   await server.register(pluginPulse)
   await server.register(inert)
   await server.register(Scooter)
-  await server.register(pluginBlankie)
   await server.register(pluginCrumb)
 
   server.ext('onPreResponse', (request: Request, h: ResponseToolkit) => {
@@ -117,19 +114,19 @@ export async function createServer(routeConfig?: RouteConfig) {
 
   await server.register(pluginViews)
   await server.register(pluginEngine)
-  await server.register(pluginRouter)
+
+  await server.register({
+    plugin: {
+      name: 'router',
+      register: (server) => {
+        server.route(publicRoutes)
+      }
+    }
+  })
+
   await server.register(pluginErrorPages)
   await server.register(blipp)
   await server.register(requestTracing)
 
-  server.state('cookieConsent', {
-    ttl: 365 * 24 * 60 * 60 * 1000, // 1 year in ms
-    clearInvalid: true,
-    isHttpOnly: false,
-    isSecure: config.get('isProduction'),
-    path: '/',
-    encoding: 'none' // handle this inside the application so we can share frontend/backend cookie modification
-  })
-
   return server
 }

package/src/server/plugins/engine/components/AutocompleteField.test.ts

@@ -172,7 +172,7 @@ describe.each([
 
     describe('State', () => {
       it.each([...options.examples])('returns text from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const answer1 = getAnswer(field, state1)
@@ -183,7 +183,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns payload from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const payload1 = field.getFormDataFromState(state1)
@@ -194,7 +194,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns value from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const value1 = field.getFormValueFromState(state1)
@@ -207,7 +207,7 @@ describe.each([
       it.each([...options.examples])(
         'returns context for conditions and form submission',
         (item) => {
-          const state1 = getFormState(item.state)
+          const state1 = getFormState(item.value)
           const state2 = getFormState(null)
 
           const value1 = field.getContextValueFromState(state1)
@@ -225,7 +225,7 @@ describe.each([
         const value1 = field.getStateFromValidForm(payload1)
         const value2 = field.getStateFromValidForm(payload2)
 
-        expect(value1).toEqual(getFormState(item.state))
+        expect(value1).toEqual(getFormState(item.value))
         expect(value2).toEqual(getFormState(null))
       })
     })

package/src/server/plugins/engine/components/CheckboxesField.test.ts

@@ -240,7 +240,7 @@ describe.each([
       it.each([...options.examples])(
         'returns text from state (single)',
         (item) => {
-          const state1 = getFormState([item.state])
+          const state1 = getFormState([item.value])
           const state2 = getFormState(null)
 
           const answer1 = getAnswer(field, state1)
@@ -260,7 +260,7 @@ describe.each([
         const item1 = options.examples[0]
         const item2 = options.examples[2]
 
-        const state = getFormState([item1.state, item2.state])
+        const state = getFormState([item1.value, item2.value])
         const answer = getAnswer(field, state)
 
         expect(answer).toBe(outdent`
@@ -272,7 +272,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns payload from state', (item) => {
-        const state1 = getFormState([item.state])
+        const state1 = getFormState([item.value])
         const state2 = getFormState(null)
 
         const payload1 = field.getFormDataFromState(state1)
@@ -283,7 +283,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns value from state', (item) => {
-        const state1 = getFormState([item.state])
+        const state1 = getFormState([item.value])
         const state2 = getFormState(null)
 
         const value1 = field.getFormValueFromState(state1)
@@ -296,13 +296,13 @@ describe.each([
       it.each([...options.examples])(
         'returns context for conditions and form submission',
         (item) => {
-          const state1 = getFormState([item.state])
+          const state1 = getFormState([item.value])
           const state2 = getFormState(null)
 
           const value1 = field.getContextValueFromState(state1)
           const value2 = field.getContextValueFromState(state2)
 
-          expect(value1).toEqual([item.state])
+          expect(value1).toEqual([item.value])
           expect(value2).toEqual([])
         }
       )
@@ -314,7 +314,7 @@ describe.each([
         const value1 = field.getStateFromValidForm(payload1)
         const value2 = field.getStateFromValidForm(payload2)
 
-        expect(value1).toEqual(getFormState([item.state]))
+        expect(value1).toEqual(getFormState([item.value]))
         expect(value2).toEqual(getFormState(null))
       })
     })

package/src/server/plugins/engine/components/List.test.ts

@@ -52,18 +52,21 @@ describe('List', () => {
       it('returns list items', () => {
         expect(guidance).toHaveProperty('items', [
           {
+            id: '52fc51fc-c75a-4b08-9c9e-6bd99b9bc49b',
             text: '1 day',
             value: 1,
             description:
               'Valid for 24 hours from the start time that you select'
           },
           {
+            id: '56b7b34f-23b3-4446-ac8e-b2443d18588e',
             text: '8 day',
             value: 8,
             description:
               'Valid for 8 consecutive days from the start time that you select'
           },
           {
+            id: '1af54fbc-eec2-4e1e-bd53-2415abf62677',
             text: '12 months',
             value: 365,
             description:

package/src/server/plugins/engine/components/RadiosField.test.ts

@@ -170,7 +170,7 @@ describe.each([
 
     describe('State', () => {
       it.each([...options.examples])('returns text from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const answer1 = getAnswer(field, state1)
@@ -181,7 +181,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns payload from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const payload1 = field.getFormDataFromState(state1)
@@ -192,7 +192,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns value from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const value1 = field.getFormValueFromState(state1)
@@ -205,7 +205,7 @@ describe.each([
       it.each([...options.examples])(
         'returns context for conditions and form submission',
         (item) => {
-          const state1 = getFormState(item.state)
+          const state1 = getFormState(item.value)
           const state2 = getFormState(null)
 
           const value1 = field.getContextValueFromState(state1)
@@ -223,7 +223,7 @@ describe.each([
         const value1 = field.getStateFromValidForm(payload1)
         const value2 = field.getStateFromValidForm(payload2)
 
-        expect(value1).toEqual(getFormState(item.state))
+        expect(value1).toEqual(getFormState(item.value))
         expect(value2).toEqual(getFormState(null))
       })
     })

package/src/server/plugins/engine/components/SelectField.test.ts

@@ -171,7 +171,7 @@ describe.each([
 
     describe('State', () => {
       it.each([...options.examples])('returns text from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const answer1 = getAnswer(field, state1)
@@ -182,7 +182,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns payload from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const payload1 = field.getFormDataFromState(state1)
@@ -193,7 +193,7 @@ describe.each([
       })
 
       it.each([...options.examples])('returns value from state', (item) => {
-        const state1 = getFormState(item.state)
+        const state1 = getFormState(item.value)
         const state2 = getFormState(null)
 
         const value1 = field.getFormValueFromState(state1)
@@ -206,7 +206,7 @@ describe.each([
       it.each([...options.examples])(
         'returns context for conditions and form submission',
         (item) => {
-          const state1 = getFormState(item.state)
+          const state1 = getFormState(item.value)
           const state2 = getFormState(null)
 
           const value1 = field.getContextValueFromState(state1)
@@ -224,7 +224,7 @@ describe.each([
         const value1 = field.getStateFromValidForm(payload1)
         const value2 = field.getStateFromValidForm(payload2)
 
-        expect(value1).toEqual(getFormState(item.state))
+        expect(value1).toEqual(getFormState(item.value))
         expect(value2).toEqual(getFormState(null))
       })
     })

package/src/server/plugins/engine/configureEnginePlugin.ts

@@ -8,6 +8,10 @@ import {
   plugin,
   type PluginOptions
 } from '~/src/server/plugins/engine/plugin.js'
+import { findPackageRoot } from '~/src/server/plugins/engine/plugin.js'
+import * as defaultServices from '~/src/server/plugins/engine/services/index.js'
+import { formsService } from '~/src/server/plugins/engine/services/localFormsService.js'
+import { devtoolContext } from '~/src/server/plugins/nunjucks/context.js'
 import { type RouteConfig } from '~/src/server/types.js'
 
 export const configureEnginePlugin = async ({
@@ -27,7 +31,21 @@ export const configureEnginePlugin = async ({
 
   return {
     plugin,
-    options: { model, services, controllers }
+    options: {
+      model,
+      services: services ?? {
+        // services for testing, else use the disk loader option for running this service locally
+        ...defaultServices,
+        formsService: await formsService()
+      },
+      controllers,
+      cacheName: 'session',
+      nunjucks: {
+        baseLayoutPath: 'dxt-devtool-baselayout.html',
+        paths: [join(findPackageRoot(), 'src/server/devserver')] // custom layout to make it really clear this is not the same as the runner
+      },
+      viewContext: devtoolContext
+    }
   }
 }
 

package/src/server/plugins/engine/pageControllers/QuestionPageController.test.ts

@@ -443,6 +443,7 @@ describe('QuestionPageController', () => {
       expect(filtered[1].model.label?.text).toBe('Select from the list')
       expect(filtered[1].model.items).toEqual([
         {
+          id: expect.any(String),
           checked: false,
           condition: 'isBarnOwl',
           selected: false,
@@ -450,6 +451,7 @@ describe('QuestionPageController', () => {
           value: '1'
         },
         {
+          id: expect.any(String),
           checked: false,
           condition: 'isBarnOwl',
           selected: false,
@@ -499,6 +501,7 @@ describe('QuestionPageController', () => {
       expect(filtered[1].model.label?.text).toBe('Select from the list')
       expect(filtered[1].model.items).toEqual([
         {
+          id: expect.any(String),
           checked: false,
           condition: 'notBarnOwl',
           selected: false,
@@ -506,6 +509,7 @@ describe('QuestionPageController', () => {
           value: '3'
         },
         {
+          id: expect.any(String),
           checked: false,
           condition: 'notBarnOwl',
           selected: false,

package/src/server/plugins/engine/plugin.ts

@@ -1,3 +1,7 @@
+import { existsSync } from 'fs'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
 import { hasFormComponents, slugSchema } from '@defra/forms-model'
 import Boom from '@hapi/boom'
 import {
@@ -11,6 +15,7 @@ import vision from '@hapi/vision'
 import { isEqual } from 'date-fns'
 import Joi from 'joi'
 import nunjucks, { type Environment } from 'nunjucks'
+import resolvePkg from 'resolve'
 
 import { PREVIEW_PATH_PREFIX } from '~/src/server/constants.js'
 import {
@@ -25,7 +30,6 @@ import {
   redirectPath
 } from '~/src/server/plugins/engine/helpers.js'
 import {
-  PLUGIN_PATH,
   VIEW_PATH,
   context,
   prepareNunjucksEnvironment
@@ -65,6 +69,20 @@ import * as httpService from '~/src/server/services/httpService.js'
 import { CacheService } from '~/src/server/services/index.js'
 import { type Services } from '~/src/server/types.js'
 
+export function findPackageRoot() {
+  const currentFileName = fileURLToPath(import.meta.url)
+  const currentDirectoryName = dirname(currentFileName)
+
+  let dir = currentDirectoryName
+  while (dir !== '/') {
+    if (existsSync(join(dir, 'package.json'))) {
+      return dir
+    }
+    dir = dirname(dir)
+  }
+
+  throw new Error('package.json not found in parent directories')
+}
 export interface PluginOptions {
   model?: FormModel
   services?: Services
@@ -73,6 +91,13 @@ export interface PluginOptions {
   viewPaths?: string[]
   filters?: Record<string, FilterFunction>
   pluginPath?: string
+  nunjucks: {
+    baseLayoutPath: string
+    paths: string[]
+  }
+  viewContext: (
+    request: FormRequest | FormRequestPayload | null
+  ) => Record<string, unknown>
 }
 
 export const plugin = {
@@ -85,23 +110,25 @@ export const plugin = {
       services = defaultServices,
       controllers,
       cacheName,
-      viewPaths,
       filters,
-      pluginPath = PLUGIN_PATH
+      nunjucks: nunjucksOptions,
+      viewContext
     } = options
     const { formsService } = services
     const cacheService = new CacheService(server, cacheName)
 
-    // Paths array to tell `vision` and `nunjucks` where template files are stored.
-    // We need to include `VIEW_PATH` in addition the runtime path (node_modules)
-    // to keep the local tests working
-    const path = [`${pluginPath}/${VIEW_PATH}`, VIEW_PATH]
+    const packageRoot = findPackageRoot()
+    const govukFrontendPath = dirname(
+      resolvePkg.sync('govuk-frontend/package.json')
+    )
 
-    // Include any additional user provided view paths so our internal views engine
-    // can find any files they provide from the consumer side if using custom `page.view`s
-    if (Array.isArray(viewPaths) && viewPaths.length) {
-      path.push(...viewPaths)
-    }
+    const viewPathResolved = join(packageRoot, VIEW_PATH)
+
+    const paths = [
+      ...nunjucksOptions.paths,
+      viewPathResolved,
+      join(govukFrontendPath, 'dist')
+    ]
 
     await server.register({
       plugin: vision,
@@ -127,10 +154,7 @@ export const plugin = {
             ) => {
               // Nunjucks also needs an additional path configuration
               // to use the templates and macros from `govuk-frontend`
-              const environment = nunjucks.configure([
-                ...path,
-                'node_modules/govuk-frontend/dist'
-              ])
+              const environment = nunjucks.configure(paths)
 
               // Applies custom filters and globals for nunjucks
               // that are required by the `forms-engine-plugin`
@@ -142,12 +166,14 @@ export const plugin = {
             }
           }
         },
-        path,
+        path: paths,
         // Provides global context used with all templates
         context
       }
     })
 
+    server.expose('baseLayoutPath', nunjucksOptions.baseLayoutPath)
+    server.expose('viewContext', viewContext)
     server.expose('cacheService', cacheService)
 
     server.app.model = model

package/src/server/plugins/engine/services/formsService.js

@@ -1,46 +1,28 @@
-import { formMetadataSchema } from '@defra/forms-model'
-
-import { config } from '~/src/config/index.js'
-import { FormStatus } from '~/src/server/routes/types.js'
-import { getJson } from '~/src/server/services/httpService.js'
+const error = Error(
+  'Not implemented. Consider setting up a form loader or providing a service implementation.'
+)
 
+// eslint-disable-next-line jsdoc/require-returns-check
 /**
- * Retrieves a form definition from the form manager for a given slug
- * @param {string} slug - the slug of the form
+ * Dummy function to get form metadata.
+ * @param {string} _slug - the slug of the form
+ * @returns {Promise<FormMetadata>}
  */
-export async function getFormMetadata(slug) {
-  const getJsonByType = /** @type {typeof getJson<FormMetadata>} */ (getJson)
-
-  const { payload: metadata } = await getJsonByType(
-    `${config.get('managerUrl')}/forms/slug/${slug}`
-  )
-
-  // Run it through the schema to coerce dates
-  const result = formMetadataSchema.validate(metadata)
-
-  if (result.error) {
-    throw result.error
-  }
-
-  return result.value
+export function getFormMetadata(_slug) {
+  throw error
 }
 
+// eslint-disable-next-line jsdoc/require-returns-check
 /**
- * Retrieves a form definition from the form manager for a given id
- * @param {string} id - the id of the form
- * @param {FormStatus} state - the state of the form
+ * Dummy function to get form metadata.
+ * @param {string} _id - the id of the form
+ * @param {FormStatus} _state - the state of the form
+ * @returns {Promise<FormDefinition | undefined>}
  */
-export async function getFormDefinition(id, state) {
-  const getJsonByType = /** @type {typeof getJson<FormDefinition>} */ (getJson)
-
-  const suffix = state === FormStatus.Draft ? `/${state}` : ''
-  const { payload: definition } = await getJsonByType(
-    `${config.get('managerUrl')}/forms/${id}/definition${suffix}`
-  )
-
-  return definition
+export function getFormDefinition(_id, _state) {
+  throw error
 }
 
 /**
- * @import { FormDefinition, FormMetadata } from '@defra/forms-model'
+ * @import { FormStatus, FormDefinition, FormMetadata } from '@defra/forms-model'
  */

package/src/server/plugins/engine/services/localFormsService.js

@@ -0,0 +1,49 @@
+import { config } from '~/src/config/index.js'
+import { FileFormService } from '~/src/server/utils/file-form-service.js'
+
+// Create shared form metadata
+const now = new Date()
+const user = { id: 'user', displayName: 'Username' }
+const author = {
+  createdAt: now,
+  createdBy: user,
+  updatedAt: now,
+  updatedBy: user
+}
+const metadata = {
+  organisation: 'Defra',
+  teamName: 'Team name',
+  teamEmail: 'team@defra.gov.uk',
+  submissionGuidance: "Thanks for your submission, we'll be in touch",
+  notificationEmail: config.get('submissionEmailAddress'),
+  ...author,
+  live: author
+}
+
+/**
+ * Return an function rather than the service directly. This is to prevent consumer applications
+ * blowing up as they won't have these files on disk. We can defer the execution until when it's
+ * needed, i.e. the createServer function of the devtool.
+ */
+export const formsService = async () => {
+  // Instantiate the file loader form service
+  const loader = new FileFormService()
+
+  // Add a Json form
+  await loader.addForm('src/server/forms/register-as-a-unicorn-breeder.json', {
+    ...metadata,
+    id: '95e92559-968d-44ae-8666-2b1ad3dffd31',
+    title: 'Register as a unicorn breeder',
+    slug: 'register-as-a-unicorn-breeder'
+  })
+
+  // Add a Yaml form
+  await loader.addForm('src/server/forms/register-as-a-unicorn-breeder.yaml', {
+    ...metadata,
+    id: '641aeafd-13dd-40fa-9186-001703800efb',
+    title: 'Register as a unicorn breeder (yaml)',
+    slug: 'register-as-a-unicorn-breeder-yaml' // if we needed to validate any JSON logic, make it available for convenience
+  })
+
+  return loader.toFormsService()
+}

package/src/server/plugins/engine/views/confirmation.html

@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends baseLayoutPath %}
 
 {% from "govuk/components/panel/macro.njk" import govukPanel %}
 

package/src/server/plugins/engine/views/file-upload.html

@@ -35,7 +35,7 @@
 {% block bodyEnd %}
   {{ super() }}
   <script type="module" nonce="{{ cspNonce }}">
-    import { initFileUpload } from '{{ getAssetPath("file-upload.js") }}';
+    import { initFileUpload } from '{{ getDxtAssetPath("file-upload.js") }}';
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initFileUpload);
     } else {

package/src/server/plugins/engine/views/index.html

@@ -1,4 +1,4 @@
-{% extends 'layout.html' %}
+{% extends baseLayoutPath %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "partials/components.html" import componentList with context %}

package/src/server/plugins/engine/views/item-delete.html

@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends baseLayoutPath %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/button/macro.njk" import govukButton %}

package/src/server/plugins/engine/views/repeat-list-summary.html

@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends baseLayoutPath %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/button/macro.njk" import govukButton %}

package/src/server/plugins/engine/views/summary.html

@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends baseLayoutPath %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}