22541 extract shared my-portal breadcrumb list item helper
This commit is contained in:
+19
-88
@@ -92,6 +92,14 @@ const Breadcrumbs = (props) => {
|
|||||||
return labelsByKey[viewKey] || null;
|
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 } =
|
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
|
||||||
resolveCaseBreadcrumbState({
|
resolveCaseBreadcrumbState({
|
||||||
query: router.query,
|
query: router.query,
|
||||||
@@ -164,14 +172,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/addresssearch") && (
|
{isPath("/myportal/addresssearch") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
{t("common:breadcrumb-address-search")}
|
{t("common:breadcrumb-address-search")}
|
||||||
</li>
|
</li>
|
||||||
@@ -179,14 +180,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/advancedsearch") && (
|
{isPath("/myportal/advancedsearch") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
{t("common:breadcrumb-advanced-search")}
|
{t("common:breadcrumb-advanced-search")}
|
||||||
</li>
|
</li>
|
||||||
@@ -194,14 +188,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/contactus") && (
|
{isPath("/myportal/contactus") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
{t("common:footer-contact-us-link-label")}
|
{t("common:footer-contact-us-link-label")}
|
||||||
</li>
|
</li>
|
||||||
@@ -262,14 +249,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/advancedsearchresults") && (
|
{isPath("/myportal/advancedsearchresults") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
@@ -292,14 +272,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/addresssearchresults") && (
|
{isPath("/myportal/addresssearchresults") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
@@ -413,14 +386,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/viewall") && (
|
{isPath("/viewall") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
{t("common:breadcrumb-your-cases")}
|
{t("common:breadcrumb-your-cases")}
|
||||||
</li>
|
</li>
|
||||||
@@ -428,14 +394,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/viewall") && (
|
{isPath("/myportal/viewall") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
{getViewAllLabel(
|
{getViewAllLabel(
|
||||||
currentViewState.viewKey ||
|
currentViewState.viewKey ||
|
||||||
@@ -525,14 +484,7 @@ const Breadcrumbs = (props) => {
|
|||||||
{isPath("/myportal/case/id/[incident]") && (
|
{isPath("/myportal/case/id/[incident]") && (
|
||||||
<>
|
<>
|
||||||
{" "}
|
{" "}
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
@@ -577,14 +529,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/case/[ticketnumber]") && (
|
{isPath("/myportal/case/[ticketnumber]") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
<Link
|
<Link
|
||||||
href={breadcrumbHref}
|
href={breadcrumbHref}
|
||||||
@@ -602,14 +547,7 @@ const Breadcrumbs = (props) => {
|
|||||||
{isPath("/myportal/dnsapplications") && (
|
{isPath("/myportal/dnsapplications") && (
|
||||||
<>
|
<>
|
||||||
{" "}
|
{" "}
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
{t("dnsCommon:service-name")}
|
{t("dnsCommon:service-name")}
|
||||||
</li>
|
</li>
|
||||||
@@ -617,14 +555,7 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/myportal/dnsdetails") && (
|
{isPath("/myportal/dnsdetails") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderMyPortalCrumb()}
|
||||||
<Link
|
|
||||||
href={myPortalHref}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-my-portal")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
<li className="govuk-breadcrumbs__list-item">
|
||||||
<Link
|
<Link
|
||||||
href={"/myportal/dnsapplications"}
|
href={"/myportal/dnsapplications"}
|
||||||
|
|||||||
@@ -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.
|
- 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
|
### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
|
||||||
|
|
||||||
date: 2026-04-07
|
date: 2026-04-07
|
||||||
|
|||||||
Reference in New Issue
Block a user