@planning-inspectorate/dynamic-forms 1.8.0 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

package/src/components/text-entry-redact/index.njk

@@ -1,12 +1,12 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/table/macro.njk" import govukTable %}
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
 
 {% block before_content %}
     <div class="govuk-grid-row">
@@ -24,14 +24,9 @@
     {{ super() }}
 {% endblock before_content %}
 
-{% set columnWidth = 'govuk-grid-column-two-thirds' %}
-{% if showSuggestionsUi %}
-    {% set columnWidth = 'govuk-grid-column-one-half' %}
-{% endif %}
-
 {% block content %}
     <div class="govuk-grid-row">
-        <div class="{{ columnWidth }}">
+        <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
                 <input type="hidden" name="_csrf" value="{{ _csrf }}">
 
@@ -53,15 +48,59 @@
                     {% include question.html ignore missing %}
                 {% endif %}
 
-                <label class="govuk-label govuk-label--s govuk-!-margin-top-5" for="{{ question.fieldName }}-unredacted">
-                    Original
-                    <a href="#" class="govuk-link govuk-!-margin-left-2" id="toggle-original">Hide</a>
-                </label>
+                {% if showSuggestionsUi %}
+                    <h2 class="govuk-heading-m">Redaction suggestions</h2>
+                    {% set hasSuggestions = redactionSuggestions.length > 0 %}
+                    {% if hasSuggestions %}
+                        <p class="govuk-body">
+                            We have suggested some common redactions and hidden these for you.
+                            To make these visible again, 'Reject' each suggestion.
+                        </p>
+                        {% set suggestionTableRows = [] %}
+                        {% for s in redactionSuggestions  %}
+                            {% set category = s.category %}
+                            {% if s.subCategory %}
+                                {% set category = category + " (" +  s.subCategory + ")" %}
+                            {% endif %}
+                            {% set action = 'Accept' %}
+                            {% if s.accepted %}
+                                {% set action = 'Reject' %}
+                            {% endif %}
+                            {% set suggestionTableRows = (suggestionTableRows.push([
+                                {text: s.text},
+                                {text: category },
+                                {
+                                    html: '<a href="#" class="govuk-link" data-redact="suggestion-reject-' + loop.index0 + '">' + action + '</a>'
+                                }
+                            ]), suggestionTableRows) %}
+                        {% endfor %}
+                        {{  govukTable({
+                            head: [
+                                {
+                                    text: "Redaction suggestion"
+                                },
+                                {
+                                    text: "Type of information"
+                                },
+                                {
+                                    text: "Action"
+                                }
+                            ],
+                            rows: suggestionTableRows
+                        }) }}
+                    {% else %}
+                        <p class="govuk-body">
+                            No redaction suggestions found.
+                        </p>
+                    {% endif %}
+                {% endif %}
+
+                <h2 class="govuk-heading-m">Redaction preview</h2>
 
-                {{ govukInsetText({
+                {{ govukDetails({
+                    summaryText: question.summaryText or "Original",
                     html: question.value,
-                    id: question.fieldName + "-unredacted",
-                    classes: "govuk-!-margin-top-0"
+                    id: question.fieldName + "-unredacted"
                 }) }}
 
                 {{ govukTextarea({
@@ -75,7 +114,11 @@
                     errorMessage: errors[question.fieldName] and {
                         text: errors[question.fieldName].msg
                     },
-                    classes: question.inputClasses
+                    classes: question.inputClasses,
+                    attributes: {
+                        readonly: true
+                    },
+                    rows: textAreaRows or 8
                 }) }}
 
                 <div class="govuk-button-group">
@@ -108,48 +151,6 @@
                 }) }}
             </form>
         </div>
-        {% if showSuggestionsUi %}
-            <div class="govuk-grid-column-one-half">
-                <h2 class="govuk-heading-m">Redaction suggestions</h2>
-                <p class="govuk-body">
-                    This section includes system suggestions for redactions.
-                    Each row shows the text that is suggested for redaction and the category detected.
-                    They are all redacted by default, you can reject any that should not be redacted by clicking the "Reject" link next to each suggestion.
-                </p>
-                {% set suggestionTableRows = [] %}
-                {% for s in redactionSuggestions  %}
-                    {% set category = s.category %}
-                    {% if s.subCategory %}
-                        {% set category = category + " (" +  s.subCategory + ")" %}
-                    {% endif %}
-                    {% set action = 'Accept' %}
-                    {% if s.accepted %}
-                        {% set action = 'Reject' %}
-                    {% endif %}
-                    {% set suggestionTableRows = (suggestionTableRows.push([
-                        {text: s.text},
-                        {text: category },
-                        {
-                            html: '<a href="#" class="govuk-link" data-redact="suggestion-reject-' + loop.index0 + '">' + action + '</a>'
-                        }
-                    ]), suggestionTableRows) %}
-                {% endfor %}
-                {{  govukTable({
-                    head: [
-                        {
-                            text: "Text"
-                        },
-                        {
-                            text: "Category"
-                        },
-                        {
-                            text: "Action"
-                        }
-                    ],
-                    rows: suggestionTableRows
-                }) }}
-            </div>
-        {% endif %}
 
         <script {% if cspNonce %}nonce={{ cspNonce }}{% endif %}>
           /**
@@ -160,9 +161,8 @@
            * @param {HTMLDivElement} unredactedText
            * @param {HTMLAnchorElement[]} rejectLinks
            * @param {import('@azure/ai-text-analytics').PiiEntity[]} suggestions
-           * @param {HTMLAnchorElement} toggleOriginal
            */
-          function registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions, toggleOriginal}) {
+          function registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions}) {
             const formGroup = textArea.parentElement;
             const errorMessage = document.createElement('p');
             errorMessage.id = '{{ question.fieldName }}-error';
@@ -230,16 +230,6 @@
                 }
               });
             }
-            toggleOriginal.addEventListener('click', (event) => {
-              event.preventDefault();
-              if (unredactedText.classList.contains('govuk-!-display-none')) {
-                unredactedText.classList.remove('govuk-!-display-none');
-                toggleOriginal.text = 'Hide';
-              } else {
-                unredactedText.classList.add('govuk-!-display-none');
-                toggleOriginal.text = 'Show';
-              }
-            });
           }
 
           function initRedact() {
@@ -247,8 +237,7 @@
             const redactSelectedText = document.querySelector('#redact-selected-text');
             const redactUndo = document.querySelector('#redact-undo');
             const redactUndoAll = document.querySelector('#redact-undo-all');
-            const unredactedText = document.querySelector('#{{ question.fieldName }}-unredacted');
-            const toggleOriginal = document.querySelector('#toggle-original');
+            const unredactedText = document.querySelector('#{{ question.fieldName }}-unredacted > div');
             const rejectLinks = document.querySelectorAll('[data-redact]');
               {% if not redactionSuggestions %}
               {% set redactionSuggestions = [] %}
@@ -270,11 +259,8 @@
             if (!unredactedText || !(unredactedText instanceof HTMLDivElement)) {
               return;
             }
-            if (!toggleOriginal || !(toggleOriginal instanceof HTMLAnchorElement)) {
-              return;
-            }
 
-            registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions, toggleOriginal});
+            registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions});
           }
 
           initRedact();

package/src/components/text-entry-redact/question.js

@@ -27,8 +27,18 @@ export default class TextEntryRedactQuestion extends Question {
 	 * @param {string|undefined} [params.label] if defined this show as a label for the input and the question will just be a standard h1
 	 * @param {boolean} [params.onlyShowRedactedValueForSummary] whether to only show redacted value for summary
 	 * @param {boolean} [params.useRedactedFieldNameForSave] whether to use the redacted field name when saving answers
+	 * @param {boolean} [params.showSuggestionsUi] use the suggestions UI for this question
+	 * @param {string} [params.summaryText] summaryText to use with the details component
 	 */
-	constructor({ textEntryCheckbox, label, onlyShowRedactedValueForSummary, useRedactedFieldNameForSave, ...params }) {
+	constructor({
+		textEntryCheckbox,
+		label,
+		onlyShowRedactedValueForSummary,
+		useRedactedFieldNameForSave,
+		showSuggestionsUi,
+		summaryText,
+		...params
+	}) {
 		super({
 			...params,
 			viewFolder: 'text-entry-redact'
@@ -38,6 +48,8 @@ export default class TextEntryRedactQuestion extends Question {
 		this.label = label;
 		this.onlyShowRedactedValueForSummary = onlyShowRedactedValueForSummary;
 		this.useRedactedFieldNameForSave = useRedactedFieldNameForSave;
+		this.showSuggestionsUi = showSuggestionsUi;
+		this.summaryText = summaryText;
 	}
 
 	async getDataToSave(req, journeyResponse) {
@@ -58,6 +70,8 @@ export default class TextEntryRedactQuestion extends Question {
 		viewModel.question.value = payload ? payload[viewModel.question.fieldName] : viewModel.question.value;
 		viewModel.question.valueRedacted =
 			journey.response.answers[this.fieldName + 'Redacted'] || viewModel.question.value;
+		viewModel.question.summaryText = this.summaryText;
+		viewModel.showSuggestionsUi = this.showSuggestionsUi;
 		return viewModel;
 	}
 

package/src/components/text-entry-redact/question.test.js

@@ -12,7 +12,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 	const HINT = 'hint';
 	const LABEL = 'A label';
 
-	function createQuestion() {
+	function createQuestion(showSuggestionsUi = false) {
 		return new TextEntryRedactQuestion({
 			title: TITLE,
 			question: QUESTION,
@@ -20,7 +20,8 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			validators: VALIDATORS,
 			html: HTML,
 			hint: HINT,
-			label: LABEL
+			label: LABEL,
+			showSuggestionsUi
 		});
 	}
 	it('should create', () => {
@@ -72,11 +73,10 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 		const view = mockRes.render.mock.calls[0].result;
 		assert.ok(view);
 		assert.match(view, /Redaction Question/);
-		assert.match(view, /govuk-grid-column-two-thirds">\s+<form/);
 		assert.doesNotMatch(view, /Redaction suggestions/);
 	});
 	it('should render suggestions view', () => {
-		const question = createQuestion();
+		const question = createQuestion(true);
 		const section = {
 			name: 'section-name'
 		};
@@ -94,7 +94,6 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			}
 		};
 		const customViewData = {
-			showSuggestionsUi: true,
 			layoutTemplate: 'lib/test-layout.njk',
 			question: {
 				question: 'Redaction Question',
@@ -113,8 +112,51 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 		const view = mockRes.render.mock.calls[0].result;
 		assert.ok(view);
 		assert.match(view, /Redaction Question/);
-		assert.match(view, /govuk-grid-column-one-half">\s+<form/);
-		assert.doesNotMatch(view, /govuk-grid-column-two-thirds">\s+<form/);
 		assert.match(view, /Redaction suggestions/);
+		assert.match(view, /No redaction suggestions found\./);
+	});
+	it('should render suggestions view with data', () => {
+		const question = createQuestion(true);
+		const section = {
+			name: 'section-name'
+		};
+		const journey = {
+			baseUrl: '',
+			taskListUrl: 'task',
+			journeyTemplate: 'template',
+			journeyTitle: 'title',
+			journeyId: 'manage-representations',
+			getBackLink: () => {
+				return 'back';
+			},
+			response: {
+				answers: {}
+			}
+		};
+		const customViewData = {
+			layoutTemplate: 'lib/test-layout.njk',
+			question: {
+				question: 'Redaction Question',
+				fieldName: 'field-name',
+				value: 'value',
+				valueRedacted: 'value-redacted'
+			},
+			redactionSuggestions: [
+				{ category: 'Person', suggestion: 'Test Person' },
+				{ category: 'Address', suggestion: '123 Fake Street' }
+			]
+		};
+		const nunjucks = configureNunjucks();
+		const mockRes = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		const viewModel = question.prepQuestionForRendering(section, journey, customViewData);
+		question.renderAction(mockRes, viewModel);
+		assert.strictEqual(mockRes.render.mock.callCount(), 1);
+		const view = mockRes.render.mock.calls[0].result;
+		assert.ok(view);
+		assert.match(view, /Redaction Question/);
+		assert.match(view, /Redaction suggestions/);
+		assert.match(view, /We have suggested some common redactions/);
 	});
 });