22541 extract shared text and link breadcrumb render helpers
This commit is contained in:
+94
-126
@@ -106,6 +106,22 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
);
|
||||
|
||||
const renderTextCrumb = (label) => (
|
||||
<li className="govuk-breadcrumbs__list-item">{label}</li>
|
||||
);
|
||||
|
||||
const renderLinkCrumb = (href, label, onClick) => (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
|
||||
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
|
||||
resolveCaseBreadcrumbState({
|
||||
query: router.query,
|
||||
@@ -157,147 +173,121 @@ const Breadcrumbs = (props) => {
|
||||
)}
|
||||
{isPath("/searchresults") && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-search-results")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-search-results")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/advancedsearch") && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-advanced-search")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-advanced-search")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/addresssearch") && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-address-search")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/addresssearch") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-address-search")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/advancedsearch") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-advanced-search")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-advanced-search")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/contactus") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:footer-contact-us-link-label")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:footer-contact-us-link-label")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/contactus") && (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:footer-contact-us-link-label")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:footer-contact-us-link-label")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/addresssearchresults") && (
|
||||
<>
|
||||
{" "}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale +
|
||||
"/chwiliadcyfeiriadau"
|
||||
: "/addresssearch"
|
||||
}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:breadcrumb-address-search")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
? router.locale + "/chwiliadcyfeiriadau"
|
||||
: "/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderTextCrumb(
|
||||
t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
)
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{isPath("/advancedsearchresults") && (
|
||||
<>
|
||||
{" "}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale +
|
||||
"/advancedsearch"
|
||||
: "/advancedsearch"
|
||||
}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:breadcrumb-advanced-search")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t(
|
||||
"common:breadcrumb-advanced-search-results"
|
||||
? router.locale + "/advancedsearch"
|
||||
: "/advancedsearch",
|
||||
t("common:breadcrumb-advanced-search")
|
||||
)}
|
||||
{renderTextCrumb(
|
||||
t(
|
||||
"common:breadcrumb-advanced-search-results"
|
||||
)
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/advancedsearchresults") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale +
|
||||
"/myportal/advancedsearch"
|
||||
: "/myportal/advancedsearch"
|
||||
}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:breadcrumb-advanced-search")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t(
|
||||
"common:breadcrumb-advanced-search-results"
|
||||
: "/myportal/advancedsearch",
|
||||
t("common:breadcrumb-advanced-search")
|
||||
)}
|
||||
{renderTextCrumb(
|
||||
t(
|
||||
"common:breadcrumb-advanced-search-results"
|
||||
)
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/addresssearchresults") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/fymhorth/chwiliadcyfeiriadau"
|
||||
: "/myportal/addresssearch"
|
||||
}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:breadcrumb-address-search")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
: "/myportal/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderTextCrumb(
|
||||
t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
)
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{isPath("/newappeal") && <></>}
|
||||
@@ -393,9 +383,9 @@ const Breadcrumbs = (props) => {
|
||||
{isPath("/viewall") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("common:breadcrumb-your-cases")}
|
||||
</li>
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-your-cases")
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/viewall") && (
|
||||
@@ -482,42 +472,30 @@ const Breadcrumbs = (props) => {
|
||||
<>
|
||||
{" "}
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/fymhorth/chwiliadcyfeiriadau"
|
||||
: "/myportal/addresssearch"
|
||||
}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("common:breadcrumb-address-search")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
: "/myportal/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/fymhorth/canlyniadaucyfeiriadau?" +
|
||||
nestedSearchString
|
||||
: "/myportal/addresssearchresults?" +
|
||||
nestedSearchString
|
||||
}
|
||||
onClick={() => {
|
||||
nestedSearchString,
|
||||
t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
),
|
||||
() => {
|
||||
// spinnerState();
|
||||
router.back();
|
||||
}}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
}
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
@@ -539,22 +517,16 @@ const Breadcrumbs = (props) => {
|
||||
<>
|
||||
{" "}
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("dnsCommon:service-name")}
|
||||
</li>
|
||||
{renderTextCrumb(t("dnsCommon:service-name"))}
|
||||
</>
|
||||
)}
|
||||
{isPath("/myportal/dnsdetails") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={"/myportal/dnsapplications"}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("dnsCommon:service-name")}
|
||||
</Link>
|
||||
</li>
|
||||
{renderLinkCrumb(
|
||||
"/myportal/dnsapplications",
|
||||
t("dnsCommon:service-name")
|
||||
)}
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
@@ -572,14 +544,10 @@ const Breadcrumbs = (props) => {
|
||||
{t("common:breadcrumb-my-portal")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={"/myportal/dnsapplications"}
|
||||
className="govuk-breadcrumbs__link"
|
||||
>
|
||||
{t("dnsCommon:service-name")}
|
||||
</Link>
|
||||
</li>
|
||||
{renderLinkCrumb(
|
||||
"/myportal/dnsapplications",
|
||||
t("dnsCommon:service-name")
|
||||
)}
|
||||
{renderCaseReferenceCrumb(caseReferenceDisplay)}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -162,6 +162,34 @@ Follow-ups:
|
||||
|
||||
- Next bounded slice can target remaining repeated linked breadcrumb list-item patterns (e.g., recurring address-search result link pairs) via small local render helpers.
|
||||
|
||||
### CL-22541-F: breadcrumbs multi-pattern helper bundle (text + link crumbs)
|
||||
|
||||
date: 2026-04-09
|
||||
author: Cline
|
||||
scope: `components/breadcrumbs.js`
|
||||
type: change
|
||||
rationale: Deliver a slightly larger bounded slice by extracting and reusing multiple breadcrumb rendering patterns (plain text crumb and linked crumb) across several route branches.
|
||||
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:
|
||||
|
||||
- Added reusable helpers in `components/breadcrumbs.js`:
|
||||
- `renderTextCrumb(label)`
|
||||
- `renderLinkCrumb(href, label, onClick)`
|
||||
- Replaced multiple repeated inline breadcrumb blocks across search/address/myportal/dns branches with helper calls.
|
||||
- Included onClick-capable link helper usage in the `/myportal/case/id/[incident]` address-results breadcrumb branch to preserve `router.back()` behavior.
|
||||
- Combined with existing `renderMyPortalCrumb` and `renderCaseReferenceCrumb` helpers for more consistent branch composition.
|
||||
|
||||
Validation:
|
||||
|
||||
- `npx eslint components/breadcrumbs.js` -> pass.
|
||||
- `node tests/phase22/index.test.cjs` -> pass (combined suite).
|
||||
|
||||
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-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
|
||||
|
||||
date: 2026-04-07
|
||||
|
||||
Reference in New Issue
Block a user