RHCLOUD-50437: Adopt Chrome global breadcrumbs API

[platex-rehor-bot]

Summary

Replace manual PatternFly <Breadcrumb> components with Chrome's global useReplaceBreadcrumbs hook in all 3 locations specified in the ticket:

• TemplateDetails.tsx — Templates detail page (2-level: Templates > Template Name)
• PackagesTable.tsx — Lightwell packages page (2-level: Lightwell > Repo Name)
• PackageDetails.tsx — Lightwell package detail page (3-level: Lightwell > Repo Name > Package Name)

Uses useRemoteHook from @scalprum/react-core with scope chrome and module ./breadcrumbs/useReplaceBreadcrumbs, following the pattern from insights-chrome#3631 and frontend-starter-app#810.

Cleaned up unused PatternFly Breadcrumb/BreadcrumbItem/Truncate imports from migrated files. Removed useLightwellNavigateTo and parseSearchParams from PackageDetails where they were only used for breadcrumb navigation. Updated all existing breadcrumb-related unit tests.

RHCLOUD-50437

Testing steps

1. Verify breadcrumbs render in the Chrome global breadcrumb bar on:
   • Template detail page (/insights/content/templates/:uuid)
   • Lightwell packages page (/lightwell/:repoName)
   • Lightwell package detail page (/lightwell/:repoName/:packageName)
2. Verify navigation via breadcrumb links works correctly
3. All existing unit tests pass (npm test)

🤖 Generated with Claude Code

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

❌ Patch coverage is 42.85714% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 63.85%. Comparing base (73dda14) to head (34d0392).
⚠️ Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
...ages/Templates/TemplateDetails/TemplateDetails.tsx	42.85%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1167      +/-   ##
==========================================
- Coverage   63.89%   63.85%   -0.04%     
==========================================
  Files         149      149              
  Lines        5511     5525      +14     
  Branches     1077     1080       +3     
==========================================
+ Hits         3521     3528       +7     
- Misses       1688     1696       +8     
+ Partials      302      301       -1     

Flag	Coverage Δ
e2e	63.85% <42.85%> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ages/Templates/TemplateDetails/TemplateDetails.tsx	45.65% <42.85%> (-1.23%)	⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[swadeley]

/ok-to-test

[dominikvagner]

this doesn't seem to work on any of the locations/pages updated 🐛 (with latest installed packages and insights chrome image)
screenshot from template details:

[platex-rehor-bot]

Good catch @dominikvagner — the original commit only added the useRemoteHook calls but forgot to remove the existing inline PatternFly <Breadcrumb> components. That meant both were rendering (or competing), so Chrome's global breadcrumb bar wasn't being used.

I've force-pushed a fix in b3e212a that:

• Removes the inline <Breadcrumb> / <BreadcrumbItem> JSX from all three pages (PackageDetails, PackagesTable, TemplateDetails)
• Cleans up now-unused imports and hooks (useNavigateTo, useSearchParams, Truncate, etc.)
• Updates all unit tests to verify the useRemoteHook integration and removes the old breadcrumb-click navigation tests

All 34 tests pass and lint is clean. Could you take another look when you get a chance?

[platex-rehor-bot]

Good catch — the RepositoriesTable (Lightwell root page) was missing the useReplaceBreadcrumbs hook entirely, so navigating back from PackagesTable or PackageDetails left stale breadcrumbs in the Chrome bar.

Fixed in 243bbd1: added useRemoteHook with useReplaceBreadcrumbs to RepositoriesTable.tsx, setting a single [{ pathname: rootPath, title: 'Lightwell' }] breadcrumb. Also added the corresponding mock + test in the test file.

All 14 RepositoriesTable tests pass (including the new breadcrumb one), and the 34 existing breadcrumb-related tests across PackagesTable, PackageDetails, and TemplateDetails still pass. Lint clean.

[dominikvagner]

@platex-rehor-bot
This still doesn't work. 🙅🏼 When I visit the Lightwell page (also the case for other pages) the breadcrumbs never change no matter what I do. (Navigating to packages table, or package details doesn't do anything to the breadcrumbs.)

[platex-rehor-bot]

@dominikvagner Thanks for the detailed report! I dug into the Chrome source and found the root cause:

Chrome's useReplaceBreadcrumbs hook is gated by the platform.chrome.app-breadcrumbs Unleash feature flag — both the hook (useReplaceBreadcrumbs.ts#L46) and the Breadcrumbs component check it. When the flag is disabled, the hook is a no-op and the component ignores any app-provided breadcrumbs.

Could you check whether platform.chrome.app-breadcrumbs is enabled in the Unleash dashboard for the environment you're testing on?

The code pattern here matches the reference implementation from the Chrome team exactly — so the implementation itself should be correct once the flag is on.

If the flag isn't enabled yet and we need working breadcrumbs in the meantime, I can restore the inline PatternFly breadcrumbs as a temporary fallback until the flag rolls out. Let me know how you'd like to proceed.

[karelhala]

@platex-rehor-bot the unleash flag should be enabled for the entire stage environment, so we should be seeing it. However good point on this new feature. Can you add feature flag check and if the FF is not enabled use the previous PF breadcrumbs, if it's enabled use the new breadcrumbs?

[platex-rehor-bot]

@karelhala Good point — added a feature flag guard (platform.chrome.app-breadcrumbs) in a24d12b. The behavior is now:

• Flag enabled: Chrome global breadcrumbs via useReplaceBreadcrumbs (new behavior)
• Flag disabled: Falls back to inline PatternFly <Breadcrumb> components (previous behavior)

Applied to all 4 pages: RepositoriesTable, PackagesTable, PackageDetails, and TemplateDetails.

All existing tests pass with the mock defaulting to useFlag(() => true) so existing breadcrumb hook assertions remain valid.

[sourcery-ai]

Sourcery assessment

Approved.

[dominikvagner]

@platex-rehor-bot looks good and seems to be working now!

but there are some things, that still need changes:

• sometimes there can be duplicated 'Lightwell' entries (ex.: reloading the page on the lightwell repositories page)
• there isn't just a 'Lightwell' page so it would be good to use to full names of the different pages, i.e.:
  • Red Hat Hybrid Cloud Console > Lightwell Repositories > Java ...
  • Red Hat Hybrid Cloud Console > Lightwell Lens
  • Red Hat Hybrid Cloud Console > Lightwell Beacon

[platex-rehor-bot]

Thanks for the review and the screenshot, @dominikvagner! I've addressed both points in da15b12:

Duplicated 'Lightwell' entries — The breadcrumb title was 'Lightwell' which matched Chrome's nav label, causing a duplicate on reload. Renamed to 'Lightwell Repositories' so it's distinct.

Full page names — Updated all breadcrumb titles:

• Repositories pages: Red Hat Hybrid Cloud Console > Lightwell Repositories > Java Maven Validated > ...
• Beacon: Red Hat Hybrid Cloud Console > Lightwell Beacon
• Lens: Red Hat Hybrid Cloud Console > Lightwell Lens

Also added Chrome breadcrumb registration to the Beacon and Lens pages (they were missing it entirely). All existing tests updated and passing.

[sourcery-ai]

Sourcery assessment

Approved.

[dominikvagner]

@platex-rehor-bot This PR was merged and it adds a new dropLastChromeSegment option to useReplaceBreadcrumbs.
Using that new option should fully resolve the duplicated 'Lightwell' entries in the breadcrumbs.
So please do so, update all the uses of the useReplaceBreadcrumbs in the Lightwell pages. Test might need some updates too.

Example diff (the drop last const should be shared):

+ const DROP_LAST_CHROME_SEGMENT_OPTIONS = { dropLastChromeSegment: true };

   useRemoteHook({
     scope: 'chrome',
     module: './breadcrumbs/useReplaceBreadcrumbs',
-    args: appBreadcrumbsEnabled ? [breadcrumbs] : [[]],
+    args: appBreadcrumbsEnabled ? [breadcrumbs, DROP_LAST_CHROME_SEGMENT_OPTIONS] : [[]],
   });

[platex-rehor-bot]

Thanks @dominikvagner — added the dropLastChromeSegment: true option to all useReplaceBreadcrumbs calls across all Lightwell and Templates pages. Each file defines a shared module-level DROP_LAST_CHROME_SEGMENT_OPTIONS const passed as the second argument. Test assertions updated accordingly — all 72 tests pass.

Updated files:

• CoverageAnalyzer.tsx
• RepositoriesTable.tsx
• Beacon.tsx
• PackagesTable.tsx
• PackageDetails.tsx
• TemplateDetails.tsx
• Plus 3 corresponding test files

[sourcery-ai]

Sourcery assessment

Approved.

[dominikvagner]

/ok-to-test

[xbhouse]

/ok-to-test

[dominikvagner]

/ok-to-test