@planning-inspectorate/dynamic-forms 2.4.0 → 3.0.0

package/src/controller.test.js

@@ -178,6 +178,7 @@ const sampleQuestionObj = {
 	getDataToSave: mock.fn(),
 	checkForValidationErrors: mock.fn(),
 	checkForSavingErrors: mock.fn(),
+	toViewModel: mock.fn(),
 	prepQuestionForRendering: mock.fn(),
 	formatAnswerForSummary: mock.fn(() => [mockAnswer]),
 	viewFolder: 'sampleType'
@@ -325,13 +326,13 @@ describe('dynamic-form/controller', () => {
 
 		it('should render the question template', async () => {
 			sampleQuestionObj.renderAction.mock.resetCalls();
-			sampleQuestionObj.prepQuestionForRendering.mock.resetCalls();
+			sampleQuestionObj.toViewModel.mock.resetCalls();
 			req.params.referenceId = mockRef;
 			const mockAnswer = 'sampleAnswer';
 			const mockBackLink = 'back';
 			const mockQuestionRendering = 'test';
 
-			sampleQuestionObj.prepQuestionForRendering.mock.mockImplementationOnce(() => mockQuestionRendering);
+			sampleQuestionObj.toViewModel.mock.mockImplementationOnce(() => mockQuestionRendering);
 
 			mockJourney.getQuestionByParams = mock.fn();
 			mockJourney.getQuestionByParams.mock.mockImplementationOnce(() => sampleQuestionObj);
@@ -343,13 +344,11 @@ describe('dynamic-form/controller', () => {
 
 			assert.strictEqual(sampleQuestionObj.renderAction.mock.callCount(), 1);
 			assert.deepStrictEqual(sampleQuestionObj.renderAction.mock.calls[0].arguments, [res, mockQuestionRendering]);
-			assert.strictEqual(sampleQuestionObj.prepQuestionForRendering.mock.callCount(), 1);
-			assert.ok(sampleQuestionObj.prepQuestionForRendering.mock.calls[0].arguments[2]);
-			assert.ok(sampleQuestionObj.prepQuestionForRendering.mock.calls[0].arguments[2].originalUrl);
-			assert.strictEqual(
-				sampleQuestionObj.prepQuestionForRendering.mock.calls[0].arguments[2].originalUrl,
-				req.originalUrl
-			);
+			assert.strictEqual(sampleQuestionObj.toViewModel.mock.callCount(), 1);
+			const args = sampleQuestionObj.toViewModel.mock.calls[0].arguments[0];
+			assert.ok(args);
+			assert.ok(args?.customViewData?.originalUrl);
+			assert.strictEqual(args?.customViewData?.originalUrl, req.originalUrl);
 		});
 	});
 
@@ -394,7 +393,9 @@ describe('dynamic-form/controller', () => {
 			const mocks = [sampleQuestionObj.checkForValidationErrors.mock, sampleQuestionObj.checkForSavingErrors.mock];
 			for (const mockFn of mocks) {
 				assert.strictEqual(mockFn.callCount(), 1);
-				assert.deepStrictEqual(mockFn.calls[0].arguments, [req, sections[0], mockJourney]);
+				assert.deepStrictEqual(mockFn.calls[0].arguments[0], req);
+				assert.deepStrictEqual(mockFn.calls[0].arguments[1], sections[0]);
+				assert.deepStrictEqual(mockFn.calls[0].arguments[2], mockJourney);
 			}
 		});
 
@@ -404,7 +405,7 @@ describe('dynamic-form/controller', () => {
 			const sampleQuestionObjWithActions = {
 				...sampleQuestionObj,
 				saveAction: mock.fn(),
-				prepQuestionForRendering: mock.fn(() => expectedViewModel),
+				toViewModel: mock.fn(() => expectedViewModel),
 				renderAction: mock.fn()
 			};
 
@@ -434,20 +435,25 @@ describe('dynamic-form/controller', () => {
 			await buildSave(saveData)(req, res, journeyId);
 
 			assert.strictEqual(saveData.mock.callCount(), 1);
-			assert.deepStrictEqual(saveData.mock.calls[0].arguments, [
-				{
-					req,
-					res,
-					journeyId: journeyParams.journeyId,
-					referenceId: journeyParams.referenceId,
-					data: undefined
-				}
-			]);
+			assert.deepStrictEqual(
+				saveData.mock.calls[0].arguments,
+				[
+					{
+						req,
+						res,
+						journeyId: journeyParams.journeyId,
+						referenceId: journeyParams.referenceId,
+						data: undefined
+					}
+				],
+				'save data args'
+			);
 
-			assert.deepStrictEqual(sampleQuestionObjWithActions.renderAction.mock.calls[0].arguments, [
-				res,
-				expectedViewModel
-			]);
+			assert.deepStrictEqual(
+				sampleQuestionObjWithActions.renderAction.mock.calls[0].arguments,
+				[res, expectedViewModel],
+				'render args'
+			);
 		});
 
 		it('should handle validation errors', async () => {
@@ -546,6 +552,66 @@ describe('dynamic-form/controller', () => {
 			assert.match(res.redirect.mock.calls[0].arguments[0], /\/task-list$/);
 			assert.strictEqual(mockJourney.getNextQuestionUrl.mock.callCount(), 0);
 		});
+
+		describe('manageListQuestions', () => {
+			const setupJourney = () => {
+				const q = {
+					fieldName: 'question-2',
+					get isInManageListSection() {
+						return true;
+					},
+					checkForValidationErrors: mock.fn(),
+					getDataToSave: mock.fn(),
+					checkForSavingErrors: mock.fn()
+				};
+				const manageListQ = {
+					get isManageListQuestion() {
+						return true;
+					}
+				};
+				const req = {
+					params: {
+						section: 'section-1',
+						question: 'question-1',
+						manageListAction: 'add',
+						manageListItemId: 'item-id-1',
+						manageListQuestion: 'question-6'
+					}
+				};
+				const journey = {
+					getSection: mock.fn(() => ({ segment: 'section-1' })),
+					getQuestionByParams: mock.fn(),
+					redirectToNextQuestion: mock.fn()
+				};
+				const res = {
+					locals: {
+						journey,
+						journeyResponse: { answers: {} }
+					},
+					redirect: mock.fn()
+				};
+				journey.getQuestionByParams.mock.mockImplementationOnce(() => q, 0);
+				journey.getQuestionByParams.mock.mockImplementationOnce(() => manageListQ, 1);
+				return { journey, manageListQ, req, res, q };
+			};
+			it('should find the parent manage list question', async () => {
+				const { journey, manageListQ, req, res } = setupJourney();
+				const saveData = mock.fn();
+				await buildSave(saveData)(req, res, 'journey-1');
+				assert.strictEqual(journey.getSection.mock.callCount(), 1);
+				assert.strictEqual(journey.getQuestionByParams.mock.callCount(), 2);
+				assert.strictEqual(journey.redirectToNextQuestion.mock.callCount(), 1);
+				assert.strictEqual(journey.redirectToNextQuestion.mock.calls[0].arguments[2], manageListQ);
+			});
+			it('should preserve request route params', async () => {
+				const { journey, req, res } = setupJourney();
+				const saveData = mock.fn();
+				await buildSave(saveData)(req, res, 'journey-1');
+				assert.strictEqual(journey.redirectToNextQuestion.mock.callCount(), 1);
+				const params = journey.redirectToNextQuestion.mock.calls[0].arguments[1];
+				assert.deepStrictEqual(params, req.params);
+			});
+		});
 	});
 });
 

package/src/index.js

@@ -3,7 +3,7 @@
  */
 
 /**
- * @type {Readonly<{CHECKBOX: QuestionTypes, BOOLEAN: QuestionTypes, RADIO: QuestionTypes, DATE: QuestionTypes, DATE_PERIOD: QuestionTypes, TEXT_ENTRY: QuestionTypes, TEXT_ENTRY_REDACT: QuestionTypes, SELECT: QuestionTypes, SINGLE_LINE_INPUT: QuestionTypes, MULTI_FIELD_INPUT: QuestionTypes, NUMBER: QuestionTypes, ADDRESS: QuestionTypes, UNIT_OPTION: QuestionTypes, EMAIL: QuestionTypes}>}
+ * @type {Readonly<{CHECKBOX: QuestionTypes, BOOLEAN: QuestionTypes, RADIO: QuestionTypes, DATE: QuestionTypes, DATE_PERIOD: QuestionTypes, TEXT_ENTRY: QuestionTypes, TEXT_ENTRY_REDACT: QuestionTypes, SELECT: QuestionTypes, SINGLE_LINE_INPUT: QuestionTypes, MULTI_FIELD_INPUT: QuestionTypes, NUMBER: QuestionTypes, ADDRESS: QuestionTypes, UNIT_OPTION: QuestionTypes, EMAIL: QuestionTypes, MANAGE_LIST: QuestionTypes}>}
  */
 export const COMPONENT_TYPES = Object.freeze({
 	CHECKBOX: 'checkbox',
@@ -20,5 +20,6 @@ export const COMPONENT_TYPES = Object.freeze({
 	NUMBER: 'number',
 	ADDRESS: 'site-address',
 	UNIT_OPTION: 'unit-option',
-	EMAIL: 'email'
+	EMAIL: 'email',
+	MANAGE_LIST: 'manage-list'
 });

package/src/journey/journey-types.d.ts

@@ -1,8 +1,18 @@
 /**
  * Express route parameters used for journey routes
  */
-export type RouteParams = {
+export type RouteParams = CoreRouteParams & ManageListRouteParams;
+
+export type CoreRouteParams = {
 	section: string;
 	question: string;
 	[key: string]: string;
 };
+
+export type ManageListRouteParams =
+	| {
+			manageListAction: string;
+			manageListItemId: string;
+			manageListQuestion: string;
+	  }
+	| {};

package/src/journey/journey.js

@@ -140,7 +140,11 @@ export class Journey {
 	 * @returns {string} url for a question
 	 */
 	#buildQuestionUrl(params) {
-		return this.#prependPathToUrl(this.baseUrl, `${params.section}/${params.question}`);
+		const parts = [params.section, params.question];
+		if (params.manageListAction) {
+			parts.push(params.manageListAction, params.manageListItemId, params.manageListQuestion);
+		}
+		return this.#prependPathToUrl(this.baseUrl, parts.join('/'));
 	}
 
 	/**
@@ -158,12 +162,21 @@ export class Journey {
 	 * Get question within a section
 	 * @param {Section} section
 	 * @param {string} questionSegment
+	 * @param {{action: string, itemId: string, question: string}} [manageListParams]
 	 * @returns {Question | undefined} question if it belongs in the given section
 	 */
-	#getQuestion(section, questionSegment) {
-		return section?.questions.find((q) => {
-			return q.fieldName === questionSegment || q.url === questionSegment;
-		});
+	#getQuestion(section, questionSegment, manageListParams) {
+		const matchQuestion = (q, toMatch) => {
+			return q.fieldName === toMatch || q.url === toMatch;
+		};
+		const question = section?.questions.find((q) => matchQuestion(q, questionSegment));
+		if (!question) {
+			return undefined;
+		}
+		if (manageListParams && question.isManageListQuestion) {
+			return question.section.questions.find((q) => matchQuestion(q, manageListParams.question));
+		}
+		return question;
 	}
 
 	/**
@@ -177,19 +190,30 @@ export class Journey {
 		if (!section) {
 			return undefined;
 		}
-
-		return this.#getQuestion(section, params.question);
+		let manageListParams;
+		if (params.manageListAction && params.manageListItemId && params.manageListQuestion) {
+			manageListParams = {
+				action: params.manageListAction,
+				itemId: params.manageListItemId,
+				question: params.manageListQuestion
+			};
+		}
+		return this.#getQuestion(section, params.question, manageListParams);
 	}
 
 	/**
 	 * Get the back link for the journey - e.g. the previous question
 	 *
-	 * @param {string} sectionSegment - section segment
-	 * @param {string} questionSegment - question segment
+	 * @param {Object} options
+	 * @param {import('./journey-types.d.ts').RouteParams} options.params
+	 * @param {import('#src/components/manage-list/question.js')} [options.manageListQuestion]
 	 * @returns {string|null} url for the next question, or null if unmatched
 	 */
-	getBackLink(sectionSegment, questionSegment) {
-		const previousQuestion = this.getNextQuestionUrl({ section: sectionSegment, question: questionSegment }, true);
+	getBackLink({ params, manageListQuestion }) {
+		const previousQuestion = this.getNextQuestionUrl(params, {
+			manageListQuestion,
+			reverse: true
+		});
 		if (!previousQuestion) {
 			return this.initialBackLink;
 		}
@@ -202,10 +226,11 @@ export class Journey {
 	 *
 	 * @param {import('express').Response} res
 	 * @param {import('./journey-types.d.ts').RouteParams} params
+	 * @param {import('#src/components/manage-list/question.js')} [manageListQuestion]
 	 * @returns {void}
 	 */
-	redirectToNextQuestion(res, params) {
-		const next = this.getNextQuestionUrl(params) ?? this.taskListUrl;
+	redirectToNextQuestion(res, params, manageListQuestion) {
+		const next = this.getNextQuestionUrl(params, { manageListQuestion }) ?? this.taskListUrl;
 		return res.redirect(next);
 	}
 
@@ -213,12 +238,15 @@ export class Journey {
 	 * Get url for the next question in the journey
 	 *
 	 * @param {import('./journey-types.d.ts').RouteParams} params
-	 * @param {boolean} [reverse] - if passed in this will get the previous question
+	 * @param {Object} options
+	 * @param {boolean} [options.reverse] - if passed in this will get the previous question
+	 * @param {import('#src/components/manage-list/question.js')} [options.manageListQuestion]
 	 * @returns {string|null} url for the next question, or null if unmatched
 	 */
-	getNextQuestionUrl(params, reverse = false) {
+	getNextQuestionUrl(params, { reverse = false, manageListQuestion } = {}) {
 		const numberOfSections = this.sections.length;
 		const sectionsStart = reverse ? numberOfSections - 1 : 0;
+		const questionFieldName = manageListQuestion ? params.manageListQuestion : params.question;
 
 		let currentSectionIndex;
 		let foundSection = false;
@@ -237,19 +265,37 @@ export class Journey {
 					return null;
 				}
 				const question = currentSection.getNextQuestion({
-					questionFieldName: params.question,
+					questionFieldName,
 					response: this.response,
+					manageListQuestion,
 					takeNextQuestion,
 					reverse
 				});
 				if (question === END_OF_SECTION) {
 					takeNextQuestion = true; // get the first question from the following section
 				} else if (question) {
-					const newParams = {
-						...params,
+					/**
+					 * if this is a regular question, then only section and question params are required
+					 * don't include other params which may be set (e.g. manageList* params), as we may now be
+					 * redirecting to a non-manage list question, having previously been on a manage list question
+					 *
+					 * @type {import('./journey-types.d.ts').RouteParams}
+					 */
+					let newParams = {
 						section: currentSection.segment,
 						question: question.url || question.fieldName
 					};
+					if (question.isInManageListSection && manageListQuestion) {
+						// if this is in a manage list section, then the manage list params will be set
+						// we need to retain the manageListAction and manageListItemId params
+						newParams = {
+							...params,
+							// the question param is for the 'parent' manageListQuestion
+							question: manageListQuestion.url,
+							// the manageListQuestion param is for the next question
+							manageListQuestion: question.url || question.fieldName
+						};
+					}
 					return this.#buildQuestionUrl(newParams);
 				}
 			}

package/src/journey/journey.test.js

@@ -241,7 +241,7 @@ describe('Journey class', () => {
 			journey.sections = mockSections;
 			journey.returnToListing = false;
 
-			const backLinks = journey.getBackLink(section.segment, name);
+			const backLinks = journey.getBackLink({ params: { section: section.segment, question: name } });
 
 			assert.strictEqual(backLinks, `${constructorArgs.makeBaseUrl()}/${section.segment}/${prevQuestionName}`);
 		});
@@ -257,7 +257,7 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = false;
 
-				const backLink = journey.getBackLink(section.segment, name, true);
+				const backLink = journey.getBackLink({ params: { section: section.segment, question: name } });
 
 				assert.strictEqual(backLink, `${constructorArgs.makeBaseUrl()}/${prevSection.segment}/${prevQuestionName}`);
 			});
@@ -271,7 +271,7 @@ describe('Journey class', () => {
 			journey.sections = mockSections;
 			journey.returnToListing = false;
 
-			const backLink = journey.getBackLink(section.segment, name, true);
+			const backLink = journey.getBackLink({ params: { section: section.segment, question: name } });
 
 			assert.strictEqual(backLink, null);
 		});
@@ -284,7 +284,7 @@ describe('Journey class', () => {
 			journey.sections = mockSections;
 			journey.returnToListing = false;
 
-			const backLink = journey.getBackLink(section.segment, name, true);
+			const backLink = journey.getBackLink({ params: { section: section.segment, question: name } });
 
 			assert.strictEqual(backLink, '/some/back/link');
 		});
@@ -300,7 +300,7 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section, question: name }, false);
+				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section, question: name }, { reverse: false });
 
 				assert.strictEqual(nextQuestionUrl, null);
 			});
@@ -315,7 +315,7 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section, question: name }, false);
+				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section, question: name }, { reverse: false });
 
 				assert.strictEqual(nextQuestionUrl, null);
 			});
@@ -331,7 +331,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, false);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: false }
+				);
 
 				assert.strictEqual(nextQuestionUrl, `${constructorArgs.makeBaseUrl()}/${section.segment}/${nextQuestionName}`);
 			});
@@ -356,7 +359,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, false);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: false }
+				);
 
 				assert.strictEqual(nextQuestionUrl, `${constructorArgs.makeBaseUrl()}/${section.segment}/${nextQuestionName}`);
 			});
@@ -372,7 +378,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, true);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: true }
+				);
 
 				assert.strictEqual(nextQuestionUrl, `${constructorArgs.makeBaseUrl()}/${section.segment}/${prevQuestionName}`);
 			});
@@ -387,7 +396,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, false);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: false }
+				);
 
 				assert.strictEqual(nextQuestionUrl, null);
 			});
@@ -404,7 +416,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = false;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, true);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: true }
+				);
 
 				assert.strictEqual(
 					nextQuestionUrl,
@@ -422,7 +437,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = returnToListing;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, true);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: true }
+				);
 
 				assert.strictEqual(nextQuestionUrl, null);
 			});
@@ -437,7 +455,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = true;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, false);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: false }
+				);
 				assert.strictEqual(nextQuestionUrl, null);
 			});
 		}
@@ -451,7 +472,10 @@ describe('Journey class', () => {
 				journey.sections = mockSections;
 				journey.returnToListing = true;
 
-				const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, true);
+				const nextQuestionUrl = journey.getNextQuestionUrl(
+					{ section: section.segment, question: name },
+					{ reverse: true }
+				);
 
 				assert.strictEqual(nextQuestionUrl, null);
 			});
@@ -466,10 +490,51 @@ describe('Journey class', () => {
 			const journey = new Journey(constructorArgs);
 			journey.sections = mockSections;
 
-			const nextQuestionUrl = journey.getNextQuestionUrl({ section: section.segment, question: name }, false);
+			const nextQuestionUrl = journey.getNextQuestionUrl(
+				{ section: section.segment, question: name },
+				{ reverse: false }
+			);
 
 			assert.strictEqual(nextQuestionUrl, `base/${section.segment}/${nextQuestionName}?id=1`);
 		});
+
+		describe('manageListQuestions', () => {
+			it('should pass manageListQuestion to getNextQuestion', () => {
+				const getNextQuestion = mock.fn();
+				const journey = new Journey(constructorArgs);
+				journey.sections = [{ getNextQuestion }];
+				const manageListQuestion = { isManageListQuestion: true };
+				journey.getNextQuestionUrl({}, { manageListQuestion });
+				assert.strictEqual(getNextQuestion.mock.callCount(), 1);
+				assert.strictEqual(getNextQuestion.mock.calls[0].arguments[0].manageListQuestion, manageListQuestion);
+			});
+			it('should preserve params for manage list question', () => {
+				const question = {
+					url: 'question-3',
+					isInManageListSection: true
+				};
+				const manageListQuestion = {
+					url: 'manage-list-question',
+					isManageListQuestion: true
+				};
+				const params = {
+					section: 'section-1',
+					question: 'question-1,',
+					manageListAction: 'add',
+					manageListItemId: 'item-id-1',
+					manageListQuestion: 'question-2'
+				};
+				const getNextQuestion = mock.fn(() => question);
+				const section = {
+					segment: 'section-1',
+					getNextQuestion
+				};
+				const journey = new Journey(constructorArgs);
+				journey.sections = [section];
+				const url = journey.getNextQuestionUrl(params, { manageListQuestion });
+				assert.strictEqual(url, 'base/section-1/manage-list-question/add/item-id-1/question-3');
+			});
+		});
 	});
 
 	describe('getCurrentQuestionUrl', () => {

package/src/questions/question-props.d.ts

@@ -16,7 +16,8 @@ type QuestionTypes =
 	| 'multi-field-input'
 	| 'number'
 	| 'site-address'
-	| 'unit-option';
+	| 'unit-option'
+	| 'manage-list';
 
 interface CommonQuestionProps {
 	type: QuestionTypes;

package/src/questions/question.js

@@ -30,7 +30,6 @@ import MultiFieldInputValidator from '../validator/multi-field-input-validator.j
  * @property {string} layoutTemplate
  * @property {string} pageCaption
  * @property {string} [continueButtonText]
- * @property {Array.<string>} navigation
  * @property {string} backLink
  * @property {boolean} showBackToListLink
  * @property {string} listLink
@@ -91,6 +90,7 @@ export class Question {
 		title: '',
 		text: ''
 	};
+	#isInManageListSection = false;
 
 	/**
 	 * @param {import('#question-types').QuestionParameters} params
@@ -150,8 +150,57 @@ export class Question {
 		});
 	}
 
+	/**
+	 * Is this question a manage list question?
+	 * Implemented as a getter so manage list question implementations can override it,
+	 * but it cannot be changed at runtime.
+	 *
+	 * @returns {boolean}
+	 */
+	get isManageListQuestion() {
+		return false;
+	}
+
+	/**
+	 * Is this question added to a ManageListSection?
+	 *
+	 * @returns {boolean}
+	 */
+	get isInManageListSection() {
+		return this.#isInManageListSection;
+	}
+
+	set isInManageListSection(value) {
+		if (!value) {
+			throw new Error('Question isInManageListSection is false by default');
+		}
+		this.#isInManageListSection = value;
+	}
+
 	/**
 	 * gets the view model for this question
+	 *
+	 * Wraps prepQuestionForRendering to add the back link - which requires more parameters
+	 * that prepQuestionForRendering doesn't need
+	 *
+	 * @param {Object} options
+	 * @param {import('#src/journey/journey-types.d.ts').RouteParams} options.params
+	 * @param {import('#src/components/manage-list/question.js')} [options.manageListQuestion]
+	 * @param {Section} section - the current section
+	 * @param {Journey} journey - the journey we are in
+	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
+	 * @param {unknown} [payload]
+	 * @returns {QuestionViewModel}
+	 */
+	toViewModel({ params, manageListQuestion, section, journey, customViewData, payload }) {
+		const viewModel = this.prepQuestionForRendering(section, journey, customViewData, payload);
+		viewModel.backLink = journey.getBackLink({ params, manageListQuestion });
+		return viewModel;
+	}
+
+	/**
+	 * gets the base view model for this question
+	 *
 	 * @param {Section} section - the current section
 	 * @param {Journey} journey - the journey we are in
 	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
@@ -160,8 +209,6 @@ export class Question {
 	 */
 	prepQuestionForRendering(section, journey, customViewData, payload) {
 		const answer = journey.response.answers[this.fieldName] || '';
-		const backLink = journey.getBackLink(section.segment, this.fieldName);
-
 		return {
 			question: {
 				value: answer,
@@ -179,8 +226,6 @@ export class Question {
 			layoutTemplate: journey.journeyTemplate,
 			pageCaption: section?.name,
 
-			navigation: ['', backLink],
-			backLink,
 			showBackToListLink: this.showBackToListLink,
 			listLink: journey.taskListUrl,
 			journeyTitle: journey.journeyTitle,
@@ -212,23 +257,26 @@ export class Question {
 	 * check for validation errors
 	 * @param {import('express').Request} req
 	 * @param {Journey} journey
-	 * @param {Section} sectionObj
+	 * @param {Section} section
+	 * @param {import('#src/components/manage-list/question.js')} [manageListQuestion]
 	 * @returns {QuestionViewModel|undefined} returns the view model for displaying the error or undefined if there are no errors
 	 */
-	checkForValidationErrors(req, sectionObj, journey) {
+	checkForValidationErrors(req, section, journey, manageListQuestion) {
 		const { body = {} } = req;
 		const { errors = {}, errorSummary = [] } = body;
 
 		if (Object.keys(errors).length > 0) {
-			return this.prepQuestionForRendering(
-				sectionObj,
+			return this.toViewModel({
+				params: req.params,
+				section,
 				journey,
-				{
+				customViewData: {
 					errors,
 					errorSummary
 				},
-				body
-			);
+				payload: body,
+				manageListQuestion
+			});
 		}
 	}