Migrate chrome UI class components to function components#253954
Merged
Dosant merged 7 commits intoelastic:mainfrom Feb 20, 2026
Merged
Migrate chrome UI class components to function components#253954Dosant merged 7 commits intoelastic:mainfrom
Dosant merged 7 commits intoelastic:mainfrom
Conversation
Dosant
added
release_note:skip
Rewrite LoadingIndicator, HeaderBadge, HeaderExtension, and HeaderHelpMenu as function components with hooks. Extract shared breadcrumb mapping into prepareBreadcrumbs utility and duplicate hasBeta$ observable logic into useHasAppMenuConfig hook. Narrow BehaviorSubject to Observable in GridLayoutProjectSideNav props. Closes elastic/kibana-team#2651
Dosant
force-pushed
the
d/2026-02-19-chrome-component-migration
branch
from
3e6664e to
20799a3
Compare
Contributor
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
The optional chaining on helpExtensionContent could return undefined, which doesn't satisfy the MountPoint type signature. Fall back to a no-op function when helpExtensionContent is nullish.
…rome-component-migration
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Module Count
Page load bundle
History
|
1 task
Dosant
added a commit
that referenced
this pull request
Feb 24, 2026
## Summary @eokoneyo pointed our new error in console in Discover: <img width="1688" height="1244" alt="image" src="https://github.com/user-attachments/assets/f6b734ef-2031-427e-b840-9b0c9a3e347b" /> I think the error appeared after #253954 The change to functional components made React highlight an issue with the breadcrumb badge unmounting and remounting because of an unstable reference. This PR is meant to short-fix this: - Stabilize breadcrumbs badges append extension content identity so unrelated extension updates do not recreate the badges mount function. - Refactor badges stream derivation into small helpers to keep the state pipeline easier to reason about while preserving behavior. - Add focused unit tests for `createBreadcrumbsState` identity behavior on non-badge extension updates, badge updates, and `isFirst` transitions. Longer term I hope we migrate to native react extension points - #221815 ## Test plan - [x] `yarn test:jest src/core/packages/chrome/browser-internal/src/state/breadcrumbs_state.test.ts`
nreese
pushed a commit
to nreese/kibana
that referenced
this pull request
Feb 25, 2026
## Summary @eokoneyo pointed our new error in console in Discover: <img width="1688" height="1244" alt="image" src="https://github.com/user-attachments/assets/f6b734ef-2031-427e-b840-9b0c9a3e347b" /> I think the error appeared after elastic#253954 The change to functional components made React highlight an issue with the breadcrumb badge unmounting and remounting because of an unstable reference. This PR is meant to short-fix this: - Stabilize breadcrumbs badges append extension content identity so unrelated extension updates do not recreate the badges mount function. - Refactor badges stream derivation into small helpers to keep the state pipeline easier to reason about while preserving behavior. - Add focused unit tests for `createBreadcrumbsState` identity behavior on non-badge extension updates, badge updates, and `isFirst` transitions. Longer term I hope we migrate to native react extension points - elastic#221815 ## Test plan - [x] `yarn test:jest src/core/packages/chrome/browser-internal/src/state/breadcrumbs_state.test.ts`
qn895
pushed a commit
to qn895/kibana
that referenced
this pull request
Mar 11, 2026
## Summary @eokoneyo pointed our new error in console in Discover: <img width="1688" height="1244" alt="image" src="https://github.com/user-attachments/assets/f6b734ef-2031-427e-b840-9b0c9a3e347b" /> I think the error appeared after elastic#253954 The change to functional components made React highlight an issue with the breadcrumb badge unmounting and remounting because of an unstable reference. This PR is meant to short-fix this: - Stabilize breadcrumbs badges append extension content identity so unrelated extension updates do not recreate the badges mount function. - Refactor badges stream derivation into small helpers to keep the state pipeline easier to reason about while preserving behavior. - Add focused unit tests for `createBreadcrumbsState` identity behavior on non-badge extension updates, badge updates, and `isFirst` transitions. Longer term I hope we migrate to native react extension points - elastic#221815 ## Test plan - [x] `yarn test:jest src/core/packages/chrome/browser-internal/src/state/breadcrumbs_state.test.ts`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of elastic/kibana-team#2651
Problem / Intent
Several chrome UI components are still class components with manual RxJS subscription management, deprecated
defaultProps, andwithEuiThemeHOC patterns. Breadcrumb mapping logic is duplicated between classic and project headers, and thehasBeta$observable pattern is copy-pasted across two components.Approach
LoadingIndicator,HeaderBadge,HeaderExtension, andHeaderHelpMenuas function components using hooks (useState,useEffect,useCallback,useObservable,useEuiTheme)prepareBreadcrumbs()utility to deduplicate breadcrumb mapping inHeaderBreadcrumbsand projectBreadcrumbsuseHasAppMenuConfighook to deduplicate thehasBeta$observable pattern used inHeaderand projectAppMenuNotes
prepareBreadcrumbs()extraction fixes a subtle pre-existing bug: whenbreadcrumbswas empty,isLastwas computed against the original empty array length (i === -1, always false) instead of the fallback array. The fallback "Kibana" breadcrumb now correctly receives thelastclass in itsdata-test-subjattribute ("breadcrumb first last"instead of"breadcrumb first").