[WIP] Consumer views (#53)

* Accept a base page layout path in plugin options

* remove non-engine pages, leaving just a development UI

* allow plugin consumer to provide viewContext props

* Export engine dir

* take nunjucks paths and view context from consumer

* add local devtool UI

* Drop redundant configureEnginePlugin

* make DXT devtool layout more obvious

* update docs

* fix circular reference error when stringifying error

* an example of custom styling

* remove unused type

* Remove service banner text

* Remove cookies + blankie

* Revert "Drop redundant configureEnginePlugin"

This reverts commit a8a59a7.

* remove runner responsibilities: health, cookies tests

* remove runner responsibility: feedback tests

* Remove consumer responsibility: phase banner

* fix linting issues

* Remove runner responsibility: help page tests

* Move devtool view context into separate function

* Load engine forms from disk

* Only load file-based forms when running the devserver

* Resolve form mocking issue when running tests

* Move base layout into nunjucks options

* clarify when localFormsService returns a function, not the serviec

* patch context test for new required plugin

Author: alexluckett

docs/GETTING_STARTED.md

@@ -92,16 +92,44 @@ await server.register({
   }
 })
 
+const viewPaths = [join(config.get('appDir'), 'views')]
+
 // Register the `forms-engine-plugin`
 await server.register({
-  plugin
+  plugin,
+  options: {
+    cacheName: 'session', // must match a session you've instantiated in your hapi server config
+    /**
+     * Options that DXT uses to render Nunjucks templates
+     */
+    nunjucks: {
+      basePageLayout: 'your-base-layout.html', // the base page layout. Usually based off https://design-system.service.gov.uk/styles/page-template/
+      viewPaths // list of directories DXT should use to render your views. Must contain basePageLayout.
+    },
+    /**
+     * Services is what DXT uses to interact with external APIs
+     */
+    services: {
+      formsService, // where your forms should be downloaded from.
+      formSubmissionService, // handles temporary storage of file uploads
+      outputService // where your form should be submitted to
+    },
+    /**
+     * View context attributes made available to your pages. Returns an object containing an arbitrary set of key-value pairs.
+     */
+    viewContext: (request) => {
+      "example": "hello world" // available to render on a nunjucks page as {{ example }}
+    }
+  }
 })
 
 await server.start()
 ```
 
 ## Step 3: Handling static assets
 
+TODO: CSS will be updated with a proper build process using SASS.
+
 1. [Update webpack to bundle the DXT application assets (CSS, JavaScript, etc)](https://github.com/DEFRA/forms-engine-plugin-example-ui/pull/1/files#diff-1fb26bc12ac780c7ad7325730ed09fc4c2c3d757c276c3dacc44bfe20faf166f)
 2. [Serve the newly bundled assets from your web server](https://github.com/DEFRA/forms-engine-plugin-example-ui/pull/1/files#diff-e5b183306056f90c7f606b526dbc0d0b7e17bccd703945703a0811b6e6bb3503)
 
@@ -116,8 +144,7 @@ Blocks marked with `# FEATURE: <name>` are optional and can be omitted if the fe
 FEEDBACK_LINK=http://test.com
 # END FEATURE: Phase banner
 
-# START FEATURE: DXT -- used if using DXT's infrastructure to store your forms and file uploads
-MANAGER_URL=http://localhost:3001
+# START FEATURE: DXT -- used if using DXT's infrastructure for file uploads
 DESIGNER_URL=http://localhost:3000
 SUBMISSION_URL=http://localhost:3002
 

jest.setup.cjs

@@ -1,4 +1,3 @@
-process.env.MANAGER_URL = 'http://localhost:3001'
 process.env.REDIS_HOST = 'dummy'
 process.env.REDIS_KEY_PREFIX = 'forms-designer'
 process.env.REDIS_PASSWORD = 'dummy'

package.json

@@ -24,6 +24,7 @@
     "./file-form-service.js": "./.server/server/utils/file-form-service.js",
     "./controllers/*": "./.server/server/plugins/engine/pageControllers/*",
     "./services/*": "./.server/server/plugins/engine/services/*",
+    "./engine/*": "./.server/server/plugins/engine/*",
     "./package.json": "./package.json"
   },
   "scripts": {

src/client/stylesheets/application.scss

@@ -12,3 +12,13 @@
 .autocomplete__option {
   @include govuk-typography-common;
 }
+
+//  An example of some user-supplied styling
+//  Not great practice but it illustrates the point
+.govuk-header {
+  background: #008531;
+}
+
+.govuk-header__container {
+  border-bottom: 10px solid #003d16;
+}

src/common/cookies.js

@@ -179,12 +179,6 @@ export const config = convict({
   /**
    * API integrations
    */
-  managerUrl: {
-    format: String,
-    default: 'http://localhost:3001',
-    env: 'MANAGER_URL'
-  } as SchemaObj<string>,
-
   designerUrl: {
     format: String,
     default: 'http://localhost:3000',
@@ -253,19 +247,12 @@ export const config = convict({
     env: 'STAGING_PREFIX'
   },
 
-  serviceBannerText: {
-    doc: 'Service banner text used to show a maintenance message on all pages when set',
-    format: String,
-    default: '',
-    env: 'SERVICE_BANNER_TEXT'
-  },
-
-  googleAnalyticsTrackingId: {
-    doc: 'Google analytics tracking ID to be used when a user has opted in to additional cookies',
+  submissionEmailAddress: {
+    doc: 'Email address to send the form to (local devtool only)',
     format: String,
     default: '',
-    env: 'GOOGLE_ANALYTICS_TRACKING_ID'
-  }
+    env: 'SUBMISSION_EMAIL_ADDRESS'
+  } as SchemaObj<string>
 })
 
 config.validate({ allowed: 'strict' })

src/common/cookies.test.js

@@ -0,0 +1,71 @@
+{% extends "govuk/template.njk" %}
+
+{% from "govuk/components/back-link/macro.njk" import govukBackLink -%}
+{% from "govuk/components/footer/macro.njk" import govukFooter -%}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner -%}
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "govuk/macros/attributes.njk" import govukAttributes -%}
+{% from "components/service-banner/macro.njk" import appServiceBanner -%}
+{% from "components/tag-env/macro.njk" import appTagEnv -%}
+{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner -%}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner -%}
+
+{% set productName %}
+  {{ appTagEnv({ env: "devtool" }) }}
+{% endset %}
+
+{% block head %}
+  <link rel="preload" as="font" href="{{ assetPath }}/fonts/bold-b542beb274-v2.woff2" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="{{ assetPath }}/fonts/light-94a07e06a1-v2.woff2" type="font/woff2" crossorigin="anonymous">
+  <link rel="stylesheet" href="{{ getDxtAssetPath("stylesheets/application.scss") }}">
+{% endblock %}
+
+{% block pageTitle -%}
+  {{ "Error: " if errors | length }}{{ pageTitle | evaluate }} - {{ name if name else config.serviceName }} - GOV.UK
+{%- endblock %}
+
+{% block skipLink %}
+  {{ govukSkipLink({
+    href: '#main-content',
+    text: 'Skip to main content'
+  }) }}
+{% endblock %}
+
+{% block header %}
+  {{ govukHeader({
+    homepageUrl: currentPath if context.isForceAccess else "https://defra.github.io/forms-engine-plugin/",
+    containerClasses: "govuk-width-container",
+    productName: productName | safe | trim,
+    serviceName: "Digital Express Toolkit",
+    serviceUrl: currentPath if context.isForceAccess else serviceUrl
+  }) }}
+{% endblock %}
+
+{% block beforeContent %}
+  {% if backLink %}
+    {{ govukBackLink(backLink) }}
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+  <h1 class="govuk-heading-l">Default page template</h1>
+{% endblock %}
+
+{% block bodyEnd %}
+  <script type="module" nonce="{{ cspNonce }}" src="{{ getDxtAssetPath("application.js") }}"></script>
+{% endblock %}
+
+{% block footer %}
+  {% set meta = {
+    items: [
+      {
+        href: 'https://defra.github.io/forms-engine-plugin/',
+        text: 'DXT documentation'
+      }
+    ]
+  } if slug %}
+
+  {% if not context.isForceAccess %}
+    {{ govukFooter({ meta: meta }) }}
+  {% endif %}
+{% endblock %}