Switch to use breadcrumb trail

- Replace backlink with breadcrumb trail
- Update drugs section page titles

app/controllers/saveAndContinueController.ts

@@ -53,13 +53,7 @@ class SaveAndContinueController extends BaseController {
           req.form.persistedAnswers,
         ).getPageNavigation()
 
-        const getBackLinkFromTrail = (currentStep: string, stepsTaken: string[]) => {
-          const currentStepIndex = stepsTaken.indexOf(currentStep)
-
-          return currentStepIndex > 0 ? stepsTaken[currentStepIndex - 1] : null
-        }
-
-        res.locals.generatedBackLink = getBackLinkFromTrail(req.url.slice(1), pageNavigation.stepsTaken)
+        res.locals.stepsTaken = pageNavigation.stepsTaken
 
         if (req.query.action === 'resume') {
           const currentPageToComplete = pageNavigation.url

app/form/v1_0/steps/drugs.ts

@@ -18,6 +18,7 @@ const sectionConfig: SectionConfig = {
   section,
   steps: [
     {
+      pageTitle: 'Drug use',
       url: stepUrls.drugs,
       fields: [
         drugsFields.drugUseGroup,
@@ -32,6 +33,7 @@ const sectionConfig: SectionConfig = {
       sectionProgressRules: [setFieldToIncomplete(section.sectionCompleteField)],
     },
     {
+      pageTitle: 'Drug use details',
       url: stepUrls.drugUse,
       fields: [
         drugsFields.drugUsageDetailsGroup,
@@ -42,6 +44,7 @@ const sectionConfig: SectionConfig = {
       sectionProgressRules: [setFieldToIncomplete(section.sectionCompleteField)],
     },
     {
+      pageTitle: 'Select drugs',
       url: stepUrls.selectDrugs,
       fields: [
         drugsFields.drugUseTypeGroup,
@@ -53,6 +56,7 @@ const sectionConfig: SectionConfig = {
       sectionProgressRules: [setFieldToIncomplete(section.sectionCompleteField)],
     },
     {
+      pageTitle: 'Drug usage details',
       url: stepUrls.drugUsageDetails,
       fields: [
         drugsFields.drugUseTypeDetailsGroup,
@@ -64,6 +68,7 @@ const sectionConfig: SectionConfig = {
       sectionProgressRules: [setFieldToIncomplete(section.sectionCompleteField)],
     },
     {
+      pageTitle: 'Drug use changes',
       url: stepUrls.drugUseChanges,
       fields: [
         drugsFields.wantToMakeChanges(),
@@ -74,6 +79,7 @@ const sectionConfig: SectionConfig = {
       sectionProgressRules: [setFieldToIncomplete(section.sectionCompleteField)],
     },
     {
+      pageTitle: 'Summary',
       url: stepUrls.summary,
       fields: [
         drugsFields.practitionerAnalysis(),

app/utils/fieldDependencyTreeBuilder.test.ts

@@ -641,7 +641,10 @@ describe('app/utils/fieldDependencyTreeBuilder', () => {
 
       expect(result).toEqual({
         url: 'step-2',
-        stepsTaken: ['step-1', 'step-2'],
+        stepsTaken: [
+          { href: 'step-1', pageTitle: 'Step 1' },
+          { href: 'step-2', text: 'Step 2' },
+        ],
         isSectionComplete: false,
       })
     })

app/utils/fieldDependencyTreeBuilder.ts

@@ -229,7 +229,7 @@ export class FieldDependencyTreeBuilder {
     )
   }
 
-  getPageNavigation(): { url: string; stepsTaken: string[]; isSectionComplete: boolean } {
+  getPageNavigation(): { url: string; stepsTaken: Array<{ href: string; text: string }>; isSectionComplete: boolean } {
     const [initialStepPath, initialStep] = this.getInitialStep()
 
     let nextStep = initialStepPath
@@ -241,7 +241,7 @@ export class FieldDependencyTreeBuilder {
 
     for (const [stepUrl, step] of steps) {
       nextStep = stepUrl
-      stepsTaken.push(stepUrl)
+      stepsTaken.push({ href: stepUrl, text: step.pageTitle })
 
       const hasErrors = Object.values(step.fields)
         .filter(it => dependencyMet(it, this.answers))

server/views/forms/default.njk

@@ -1,15 +1,12 @@
 {% extends "./layout.njk" %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "components/question/macro.njk" import renderQuestion %}
+{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
 
 {% block backLink %}
-  {%- if generatedBackLink -%}
-    {{ govukBackLink({
-      text: "Back",
-      href: generatedBackLink
-    }) }}
+  {%- if stepsTaken -%}
+    {{ govukBreadcrumbs({ items: stepsTaken }) }}
   {%- endif -%}
 {% endblock %}