22541 consolidate remaining inline Link breadcrumb patterns

This commit is contained in:
2026-04-09 09:41:33 +01:00
parent d576987fcf
commit 30bc729c70
2 changed files with 108 additions and 157 deletions
+79 -157
View File
@@ -140,16 +140,11 @@ const Breadcrumbs = (props) => {
>
<div className="govuk-breadcrumbs ">
<ol className="govuk-breadcrumbs__list">
{shouldShowServiceName && (
<li className="govuk-breadcrumbs__list-item">
<Link
href={"/"}
className="govuk-breadcrumbs__link"
>
{t("common:service-name-breadcrumb")}
</Link>
</li>
)}
{shouldShowServiceName &&
renderLinkCrumb(
"/",
t("common:service-name-breadcrumb")
)}
{isPath("/myportal") && (
<li className="govuk-breadcrumbs__list-item">
@@ -359,22 +354,14 @@ const Breadcrumbs = (props) => {
)}
{isPath("/newappeal/selectappeal") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("newappeal:parent-page-title")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("newappeal:page-title")}
</Link>
</li>
{renderLinkCrumb(
myPortalHref,
t("newappeal:parent-page-title")
)}
{renderLinkCrumb(
myPortalHref,
t("newappeal:page-title")
)}
<li className="govuk-breadcrumbs__list-item">
Select Appeal
</li>
@@ -401,70 +388,46 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/case") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? "/" +
router.locale +
"/fymhorth"
: "/myportal"
}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderLinkCrumb(
isWelsh
? "/" + router.locale + "/fymhorth"
: "/myportal",
t("common:breadcrumb-my-portal")
)}
{renderCaseReferenceCrumb(currentReference)}
</>
)}
{isPath("/case/[ticketnumber]") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={caseResultsHref}
className="govuk-breadcrumbs__link"
>
{breadcrumbLabel}
</Link>
</li>
{renderLinkCrumb(
caseResultsHref,
breadcrumbLabel
)}
{renderCaseReferenceCrumb(fallbackSearchTitle)}
</>
)}
{isPath("/case/id/[incident]") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? "/" +
router.locale +
"/chwiliadcyfeiriadau"
: "/addresssearch"
}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-address-search")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? "/" +
router.locale +
"/canlyniadaucyfeiriadau?" +
nestedSearchString
: "/addresssearchresults?" +
nestedSearchString
}
className="govuk-breadcrumbs__link"
>
{t(
"common:breadcrumb-address-search-results"
)}
</Link>
</li>
{renderLinkCrumb(
isWelsh
? "/" +
router.locale +
"/chwiliadcyfeiriadau"
: "/addresssearch",
t("common:breadcrumb-address-search")
)}
{renderLinkCrumb(
isWelsh
? "/" +
router.locale +
"/canlyniadaucyfeiriadau?" +
nestedSearchString
: "/addresssearchresults?" +
nestedSearchString,
t(
"common:breadcrumb-address-search-results"
)
)}
{renderCaseReferenceCrumb(currentReference)}
</>
)}
@@ -502,14 +465,10 @@ const Breadcrumbs = (props) => {
{isPath("/myportal/case/[ticketnumber]") && (
<>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
<Link
href={breadcrumbHref}
className="govuk-breadcrumbs__link"
>
{breadcrumbLabel}
</Link>
</li>
{renderLinkCrumb(
breadcrumbHref,
breadcrumbLabel
)}
{renderCaseReferenceCrumb(caseReferenceDisplay)}
</>
)}
@@ -532,18 +491,12 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/dns/[developmentName]") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? router.locale + "/fymhorth"
: "/myportal"
}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderLinkCrumb(
isWelsh
? router.locale + "/fymhorth"
: "/myportal",
t("common:breadcrumb-my-portal")
)}
{renderLinkCrumb(
"/myportal/dnsapplications",
t("dnsCommon:service-name")
@@ -643,14 +596,10 @@ const Breadcrumbs = (props) => {
)}
{isPath("/account/personaldetails") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={cyMyPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderLinkCrumb(
cyMyPortalHref,
t("common:breadcrumb-my-portal")
)}
<li className="govuk-breadcrumbs__list-item">
{t("account:account-title")}
</li>
@@ -665,14 +614,10 @@ const Breadcrumbs = (props) => {
)}
{isPath("/account/changepassword") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={cyMyPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderLinkCrumb(
cyMyPortalHref,
t("common:breadcrumb-my-portal")
)}
<li className="govuk-breadcrumbs__list-item">
Update your password
</li>
@@ -695,37 +640,23 @@ const Breadcrumbs = (props) => {
)}
{isPath("/dnsdetails") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? router.locale +
"/dnsapplications"
: "/dnsapplications"
}
className="govuk-breadcrumbs__link"
>
{t("dnsCommon:service-name")}
</Link>
</li>
{renderLinkCrumb(
isWelsh
? router.locale + "/dnsapplications"
: "/dnsapplications",
t("dnsCommon:service-name")
)}
{renderCaseReferenceCrumb(currentReference)}
</>
)}
{isPath("/dns/[developmentName]") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? router.locale +
"/dnsapplications"
: "/dnsapplications"
}
className="govuk-breadcrumbs__link"
>
{t("dnsCommon:service-name")}
</Link>
</li>
{renderLinkCrumb(
isWelsh
? router.locale + "/dnsapplications"
: "/dnsapplications",
t("dnsCommon:service-name")
)}
{renderCaseReferenceCrumb(caseReferenceDisplay)}
</>
)}
@@ -759,21 +690,12 @@ const Breadcrumbs = (props) => {
)}
{isPath("/dns/application-view") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={
isWelsh
? router.locale +
"/dns/applications"
: "/dns/applications"
}
className="govuk-breadcrumbs__link"
>
{t(
"dnsApplicationView:page-parent-title"
)}
</Link>
</li>
{renderLinkCrumb(
isWelsh
? router.locale + "/dns/applications"
: "/dns/applications",
t("dnsApplicationView:page-parent-title")
)}
<li className="govuk-breadcrumbs__list-item">
TWA - Morlais Demonstration Zone
</li>
+29
View File
@@ -190,6 +190,35 @@ Follow-ups:
- Next slice recommendation: extract remaining repeated inline link crumbs for case/DNS branches that still hardcode `<li><Link ...>` (e.g., `/myportal/case`, `/myportal/case/[ticketnumber]`, `/dnsdetails`, `/dns/[developmentName]`) to complete link-pattern consolidation.
### CL-22541-G: breadcrumbs inline Link-crumb consolidation bundle
date: 2026-04-09
author: Cline
scope: `components/breadcrumbs.js`
type: change
rationale: Continue the larger bounded breadcrumb refactor cadence by replacing the next batch of repeated inline `<li><Link ...>` crumbs with the shared link helper.
impact: Refactor-only JSX deduplication and consistency improvement in breadcrumb rendering; no intended route/auth/session/API/EN-CY/a11y behavior change.
status: completed
Summary:
- Reused `renderLinkCrumb(href, label, onClick)` for another broad set of previously inline Link crumbs, including:
- service-name crumb in the shared shell
- new appeal select-appeal parent/title crumbs
- case and ticketnumber branches (`/myportal/case`, `/case/[ticketnumber]`, `/case/id/[incident]`, `/myportal/case/[ticketnumber]`)
- additional myportal/dns/account branches (`/myportal/dns/[developmentName]`, `/dnsdetails`, `/dns/[developmentName]`, `/dns/application-view`, account crumbs)
- Kept special behavior intact where needed (e.g., existing callback-based crumbs that already use helper `onClick`).
- Increased consistency of crumb rendering style by routing most link crumbs through one helper.
Validation:
- `npx eslint components/breadcrumbs.js` -> pass.
- `node tests/phase22/index.test.cjs` -> pass (combined suite).
Follow-ups:
- Next slice recommendation: target remaining anchor/back-link duplication (`<a href="#">` and occasional `<a href={...}>`) by introducing a bounded helper for action/back crumbs while preserving existing non-Link semantics.
### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
date: 2026-04-07