22541 extract shared my-portal breadcrumb list item helper

This commit is contained in:
2026-04-09 09:32:21 +01:00
parent f447aa19ea
commit 035f0e9adf
2 changed files with 44 additions and 88 deletions
+19 -88
View File
@@ -92,6 +92,14 @@ const Breadcrumbs = (props) => {
return labelsByKey[viewKey] || null;
};
const renderMyPortalCrumb = () => (
<li className="govuk-breadcrumbs__list-item">
<Link href={myPortalHref} className="govuk-breadcrumbs__link">
{t("common:breadcrumb-my-portal")}
</Link>
</li>
);
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
resolveCaseBreadcrumbState({
query: router.query,
@@ -164,14 +172,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/addresssearch") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
{t("common:breadcrumb-address-search")}
</li>
@@ -179,14 +180,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/advancedsearch") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
{t("common:breadcrumb-advanced-search")}
</li>
@@ -194,14 +188,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/contactus") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
{t("common:footer-contact-us-link-label")}
</li>
@@ -262,14 +249,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/advancedsearchresults") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
<Link
href={
@@ -292,14 +272,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/addresssearchresults") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
<Link
href={
@@ -413,14 +386,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/viewall") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
{t("common:breadcrumb-your-cases")}
</li>
@@ -428,14 +394,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/viewall") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
{getViewAllLabel(
currentViewState.viewKey ||
@@ -525,14 +484,7 @@ const Breadcrumbs = (props) => {
{isPath("/myportal/case/id/[incident]") && (
<>
{" "}
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
<Link
href={
@@ -577,14 +529,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/case/[ticketnumber]") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
<Link
href={breadcrumbHref}
@@ -602,14 +547,7 @@ const Breadcrumbs = (props) => {
{isPath("/myportal/dnsapplications") && (
<>
{" "}
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
{t("dnsCommon:service-name")}
</li>
@@ -617,14 +555,7 @@ const Breadcrumbs = (props) => {
)}
{isPath("/myportal/dnsdetails") && (
<>
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item">
<Link
href={"/myportal/dnsapplications"}
+25
View File
@@ -112,6 +112,31 @@ Follow-ups:
- Next bounded slice can extract grouped pathname render blocks from `components/breadcrumbs.js` (data-driven map or small render helpers) while preserving route parity.
### CL-22541-D: breadcrumbs shared my-portal crumb helper extraction
date: 2026-04-09
author: Cline
scope: `components/breadcrumbs.js`
type: change
rationale: Continue bounded breadcrumbs decomposition by extracting repeated my-portal breadcrumb `<li>` markup into one local render helper to reduce duplication and keep follow-on slices safer.
impact: Refactor-only JSX deduplication in breadcrumb rendering; no intended route, auth/session, API, EN/CY, or accessibility behavior change.
status: completed
Summary:
- Added local `renderMyPortalCrumb()` helper in `components/breadcrumbs.js`.
- Replaced repeated identical my-portal crumb JSX in multiple `/myportal/*` route branches with helper calls.
- Kept special-case crumbs untouched where label/href differs (e.g. `newappeal` parent-title crumb, `cyMyPortalHref` account branches).
Validation:
- `npx eslint components/breadcrumbs.js` -> pass.
- `node tests/phase22/index.test.cjs` -> pass (combined suite).
Follow-ups:
- Next bounded slice can target additional repeated breadcrumb list-item patterns (e.g., repeated case-reference tail item blocks) with same behavior parity approach.
### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
date: 2026-04-07