Chrome Next#259318
Draft
Dosant wants to merge 133 commits into
Draft
Conversation
Contributor
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
## Summary This PR adds `projectHeader` service.
…onfig types (#259426) ## Summary Introduces a unified `chrome.projectHeader.set(config)` API. The new `ChromeProjectHeaderConfig` consolidates page identity (title, metadata), global actions (edit, share, favorite), tabs, callouts, and app menu into one structured config object. `get$` is internal-only, consumed by Chrome layout components. State is owned by `ProjectHeaderService` and automatically reset on app navigation. ### NOTE The API is mostly auto-generated from the PRD. We just need to break ground now and see what sticks.
## Summary <img width="1624" height="1056" alt="Screenshot 2026-03-25 at 12 08 38" src="https://github.com/user-attachments/assets/4dec64b8-c55d-4df9-a362-8a82f27ed6c4" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
) ## Summary <img width="1624" height="1056" alt="Screenshot 2026-03-25 at 13 33 18" src="https://github.com/user-attachments/assets/eb6d3dab-02d8-40c3-89d1-d8be0a75b67f" />
## Summary - back button, ~use root breadcrumb as href~ use last not current breadcrumbs as link - for title use the last breadcrumb - revert `currentAppTitle`, it isn't useful - layout improvements <img width="1624" height="1056" alt="Screenshot 2026-03-26 at 12 30 50" src="https://github.com/user-attachments/assets/c589ef94-0c2b-4b33-91ef-6d40f4339db0" />
## Summary This PR removes `AppMenuConfigNext` as we'll be modifying `AppMenuConfig` and going straight to main with it (#259949)
## Summary <img width="1624" height="1056" alt="Screenshot 2026-03-26 at 17 03 58" src="https://github.com/user-attachments/assets/150368f6-b90d-4c44-bada-ce74556059ea" />
… stub (#260460) <img width="1857" height="1163" alt="Screenshot 2026-03-31 at 14 37 16" src="https://github.com/user-attachments/assets/3b68b243-f299-42f4-8e27-c97ffceb814d" /> <img width="1740" height="933" alt="Screenshot 2026-03-31 at 14 56 47" src="https://github.com/user-attachments/assets/59a96b3c-a942-4bcc-b63a-cacdb3037499" /> ## Changes - Force logo to be "elastic" with dark text and no rendered lable underneath when behind `chrome-next` - Add header/footer slots into sidenav for injecting chrome functionality - Stub search button into header - Map existing help menu into footer - Rework help menu data generation to map to both the old popover and sidenav section - Expose stub global search api ## Implementation ### Sidenav tool slots (`@kbn/core-chrome-navigation`) The `Navigation` component now accepts an optional `tools` prop (`ToolSlots`) with two zones: - **`headerTools`** — rendered below the logo (e.g. global search button) - **`footerTools`** — rendered above the collapse toggle (e.g. help button) To support this, the old monolithic `Footer` component (which mixed nav links and the collapse button into one element) has been split into three distinct sub-components on `SideNav`: | New component | Role | |---|---| | `SideNav.FooterNav` | Keyboard-navigable `<nav>` for footer links | | `SideNav.FooterToolbar` | `role="group"` container for footer tool icons | | `SideNav.HeaderToolbar` | `role="group"` container for header tool icons (new) | Tool items (`ToolItem`) follow the same popover pattern as navigation items but are intentionally typed separately — they are controls, not navigation destinations. --- ### New props on `SideNavLogo`: - `hideLabel` — suppresses the text label below the icon in expanded mode (aria-label still set) - `iconColor` — `'default'` (brand colors) | `'text'` (monochromatic). In next-chrome mode the Elastic logo is now always rendered as `logoElastic` in `'text'` color. --- ### Help pipeline refactor (`@kbn/core-chrome-browser-components`) All help-link sources (global extension links, default Kibana/doc links, per-app extension links) are now normalised in one place and exposed as a reactive stream: - `help_menu_links.ts` — pure `buildHelpLinks()` function: takes raw Chrome state and produces a stable `HelpLinks` shape (`{ global, default, extension? }`) - `help_links_hooks.ts` — `useHelpLinks$(): Observable<HelpLinks>` and `useHelpLinks(): HelpLinks`, shareable across the header and sidenav `HeaderHelpMenu` is simplified to consume `useHelpLinks()` directly (removes inline `buildDefaultContentLinks` / `useMemo` logic previously duplicated between classic and project modes). The project sidenav uses `useHelpLinks$()` inside a `combineLatest` to build the Help footer tool item without additional React re-renders. --- ### Global search API stub (`chrome.next.globalSearch`) Adds `chrome.next.globalSearch.set(config?)` to the public `ChromeStart` contract. Plugins call this to register (or clear) a search handler: ```ts chrome.next.globalSearch.set({ onClick: () => openSearchModal() }); ``` Chrome renders a search icon button in the sidenav header toolbar; clicking it fires `onClick`. Passing `undefined` removes the button. The config is global — persists across app changes, like `aiButton`. This is a minimal stub — just enough to wire the button end-to-end. The actual search UI is owned by the consumer plugin.
## Summary Fixes the AI assistant buttons not appearing in the Chrome Next header. Relates to #260010 ### Problem Chrome Next renders the header differently from the legacy chrome — it does **not** render `HeaderNavControls` (the `chrome.navControls.registerRight` mount points). All AI assistant buttons (Security, Observability, Search, AI experience picker) relied exclusively on `registerRight`, so they were invisible when Chrome Next was enabled. Additionally, the existing `chrome.next.aiButton.set()` API was a single-slot, last-write-wins design — only the Agent Builder could use it, and other AI experiences had no way to register their buttons. ### Changes **1. Multi-registration `aiButton.register()` API** Replaced `chrome.next.aiButton.set(node)` with `chrome.next.aiButton.register(button)`: - Multiple plugins can register buttons; each call returns an unregister callback - Accepts `ReactNode | MountPoint` as content (via `ChromeExtensionContent`), so plugins can reuse their existing `mount` functions - Internal state uses `BehaviorSubject<ReadonlySet<ChromeNextAiButton>>` to manage registrations - Chrome Next header renders all registered buttons via `AiButtonSlot` **2. Dual registration in all AI plugins** Each AI plugin now registers with **both** `chrome.navControls.registerRight` (legacy) and `chrome.next.aiButton.register` (Chrome Next). This ensures buttons appear regardless of which chrome is active. All dual registrations are marked with `// TODO: Chrome-Next hack` comments linking to #260010 for cleanup once Chrome Next is the only chrome. Plugins updated: - `elastic_assistant` (Security AI Assistant) - `observability_ai_assistant_app` (Observability AI Assistant) - `search_assistant` (Search AI Assistant) - `ai_assistant_management/selection` (AI experience picker) - `agent_builder` (Agent Builder — already had Chrome Next registration, updated to new API) **3. Type consolidation** Moved all Chrome Next types into `src/core/packages/chrome/browser/src/chrome_next/`: - `ChromeNextAiButton`, `ChromeNextHeaderConfig`, `ChromeNextGlobalSearchConfig`, `ChromeNext` - Extracted `InternalChromeNext` interface in `browser-internal-types` **4. Empty mount point layout fix** Fixed phantom gaps in the Chrome Next trailing actions caused by AI buttons that register but render nothing (e.g., when a solution's assistant is not enabled). Applied `mountPointContainerCss` to both the `MountPoint` and `ReactNode` branches in `HeaderExtension` so empty wrappers collapse out of the flex layout.
## Summary <img width="1624" height="1056" alt="Screenshot 2026-04-02 at 16 58 32" src="https://github.com/user-attachments/assets/14716fe5-5550-428c-9b92-86bcd1597827" /> Note: it is possible to make it work without a page reload, but I thought it was not worth the complexity.
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
…t for ToolItem (#261525) ## Summary Extend the sidenav navigation component's `ToolItem` type to support custom rendering: - `renderContent` — custom trigger content (e.g. avatar, space badge) instead of an icon - `renderPopover` — custom popover body, taking precedence over `sections` - `customContent` on `Popover` — delegates keyboard navigation to children when true - `anchorPosition` on `Popover` — configurable popover anchor direction - `iconType` is now optional when `renderContent` is provided **These are needed to support (following PR)** - Custom icon/badge for user avatar to display user menu - Custom popover for space selector Includes a storybook story demonstrating avatar and space badge tool items. <img width="430" height="643" alt="Screenshot 2026-04-07 at 13 10 23" src="https://github.com/user-attachments/assets/844428b0-7210-460d-ab27-98befcb9d5f2" /> <img width="416" height="640" alt="Screenshot 2026-04-07 at 13 10 17" src="https://github.com/user-attachments/assets/df27e2bf-71d0-449a-b420-9267b0835c5e" />
…lector to the sidenav (#261572) ## Summary Wire the user menu and space selector into the Chrome-Next sidenav via new `chrome.next.userMenu` and `chrome.next.spaceSelector` APIs. - Security plugin provides user avatar, profile link, custom menu links, and logout via `chrome.next.userMenu` - Spaces plugin provides space avatar and selector popover via `chrome.next.spaceSelector` - Add `popoverWidth` to `ToolItem` so custom popovers can override the default 248px width (space selector uses 360px) <img width="513" height="342" alt="Screenshot 2026-04-07 at 16 00 57" src="https://github.com/user-attachments/assets/d9d9c823-95fb-460d-b833-5753e057a87e" /> <img width="350" height="216" alt="Screenshot 2026-04-07 at 16 01 01" src="https://github.com/user-attachments/assets/a6001e0f-32dc-4b65-8581-c9ccc77650d1" />
…1952) Closes #259116 ## Summary This PR adds the global search modal: - Takes the existing global search and moves it into a modal - Sets a width and height to keep the modal from changing size and position as you search - Reuses existing global search functionality (navigate-to-app, navigate-to-saved-object...) - Adds a listener in navigation to be able to open/close the modal with a keyboard shortcut (Cmd+K / Ctrl+K) ### Testing https://github.com/user-attachments/assets/14fa6d4c-29e7-49b0-be6c-68b0b65bbc31 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Dosant
added a commit
that referenced
this pull request
May 28, 2026
Related: #259318 ## Summary Ports a small set of Chrome infrastructure fixes from the Chrome Next integration branch to main, covering app menu static item visibility, Chrome Next helper plumbing, inline legacy action menu handling, header extension layout behavior, sidebar spacing, and the AppHeader badge Storybook story.
dej611
pushed a commit
to dej611/kibana
that referenced
this pull request
May 29, 2026
## Summary Part of elastic/kibana-team#3344 Extracts the app header infrastructure from the Chrome Next integration work in [elastic#259318](elastic#259318) into a focused PR. This adds: - `@kbn/app-header` shared package with inline and Chrome-owned app header rendering APIs. - `chrome.next.appHeader.set()` plus internal state, lifecycle cleanup, mocks, and layout wiring. - Chrome-owned app header rendering in the Chrome Next project layout. - Focused hardening for content detection, registration cleanup, legacy badge fallback, and public type exports. - Package README and targeted unit coverage for the new app-header behavior. This intentionally does not migrate any apps yet and does not pull in unrelated Chrome Next slices such as side nav, user menu, feedback handlers, or broader help menu changes. ## Context The original integration branch includes app migrations and additional Chrome Next features. This PR extracts only the app-header foundation so it can be reviewed and merged independently before route-by-route adoption. Follow-up created: [elastic#271295](elastic#271295) to make the static “Add integrations” action access-aware. ## Risk Low to medium. The new APIs are behind Chrome Next behavior and currently have no app adopters in this PR, but the changes touch shared Chrome layout state. Risk is mitigated with focused unit coverage and existing Chrome validation checks. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
dej611
pushed a commit
to dej611/kibana
that referenced
this pull request
May 29, 2026
Related: elastic#259318 ## Summary Ports a small set of Chrome infrastructure fixes from the Chrome Next integration branch to main, covering app menu static item visibility, Chrome Next helper plumbing, inline legacy action menu handling, header extension layout behavior, sidebar spacing, and the AppHeader badge Storybook story.
## Summary There is no longer need for fallback code for the new rollout strategy
patrykkopycinski
pushed a commit
to patrykkopycinski/kibana
that referenced
this pull request
Jun 5, 2026
## Summary Part of elastic/kibana-team#3344 Extracts the app header infrastructure from the Chrome Next integration work in [elastic#259318](elastic#259318) into a focused PR. This adds: - `@kbn/app-header` shared package with inline and Chrome-owned app header rendering APIs. - `chrome.next.appHeader.set()` plus internal state, lifecycle cleanup, mocks, and layout wiring. - Chrome-owned app header rendering in the Chrome Next project layout. - Focused hardening for content detection, registration cleanup, legacy badge fallback, and public type exports. - Package README and targeted unit coverage for the new app-header behavior. This intentionally does not migrate any apps yet and does not pull in unrelated Chrome Next slices such as side nav, user menu, feedback handlers, or broader help menu changes. ## Context The original integration branch includes app migrations and additional Chrome Next features. This PR extracts only the app-header foundation so it can be reviewed and merged independently before route-by-route adoption. Follow-up created: [elastic#271295](elastic#271295) to make the static “Add integrations” action access-aware. ## Risk Low to medium. The new APIs are behind Chrome Next behavior and currently have no app adopters in this PR, but the changes touch shared Chrome layout state. Risk is mitigated with focused unit coverage and existing Chrome validation checks. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
patrykkopycinski
pushed a commit
to patrykkopycinski/kibana
that referenced
this pull request
Jun 5, 2026
Related: elastic#259318 ## Summary Ports a small set of Chrome infrastructure fixes from the Chrome Next integration branch to main, covering app menu static item visibility, Chrome Next helper plumbing, inline legacy action menu handling, header extension layout behavior, sidebar spacing, and the AppHeader badge Storybook story.
… padding (#272875) ## Summary Polishes the Chrome Next app-header title sizing and vertical spacing. - **Dynamic title size**: the title is `xs` by default and `s` when the header has tabs or metadata row (an `xs` title looks too small in the taller header). The size is resolved internally in `AppHeaderView` and threaded down to the title — there is no public size knob, so the API surface stays minimal. - **Consistent height**: vertical padding is standardized internally to a consistent 48px single-row height, independent of the title size or whether only a back button is present. - **No load-time shift**: the layout reserves the 48px header height while the header chunk lazy-loads, so content no longer jumps (0 → 48px) on first paint. - **Simpler padding API**: `AppHeaderPadding` now controls horizontal layout only; vertical spacing is internal. <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 21" src="https://github.com/user-attachments/assets/b235e113-7a23-4d93-8f97-4d90eef58072" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 24" src="https://github.com/user-attachments/assets/eebfc28c-0a67-4de1-9fcf-26b355761f5a" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 29" src="https://github.com/user-attachments/assets/b784f6fa-4985-4c56-ba58-23223a257e22" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 31" src="https://github.com/user-attachments/assets/0499d83f-ee6b-4e0a-a468-a47c0c4f4d0e" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 37" src="https://github.com/user-attachments/assets/adee7182-372b-49ec-b742-70841e9598c7" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 38" src="https://github.com/user-attachments/assets/76ea1cf5-d368-488e-9a26-511a54bb2e45" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 45" src="https://github.com/user-attachments/assets/c28d90c7-bb41-48bd-b793-96e77ab31f1c" /> <img width="1600" height="1011" alt="Screenshot 2026-06-05 at 16 21 46" src="https://github.com/user-attachments/assets/f6af5feb-3e8c-4758-be8f-58bb9763b642" />
logeekal
pushed a commit
to logeekal/kibana
that referenced
this pull request
Jun 25, 2026
## Summary Part of elastic/kibana-team#3344 Extracts the app header infrastructure from the Chrome Next integration work in [elastic#259318](elastic#259318) into a focused PR. This adds: - `@kbn/app-header` shared package with inline and Chrome-owned app header rendering APIs. - `chrome.next.appHeader.set()` plus internal state, lifecycle cleanup, mocks, and layout wiring. - Chrome-owned app header rendering in the Chrome Next project layout. - Focused hardening for content detection, registration cleanup, legacy badge fallback, and public type exports. - Package README and targeted unit coverage for the new app-header behavior. This intentionally does not migrate any apps yet and does not pull in unrelated Chrome Next slices such as side nav, user menu, feedback handlers, or broader help menu changes. ## Context The original integration branch includes app migrations and additional Chrome Next features. This PR extracts only the app-header foundation so it can be reviewed and merged independently before route-by-route adoption. Follow-up created: [elastic#271295](elastic#271295) to make the static “Add integrations” action access-aware. ## Risk Low to medium. The new APIs are behind Chrome Next behavior and currently have no app adopters in this PR, but the changes touch shared Chrome layout state. Risk is mitigated with focused unit coverage and existing Chrome validation checks. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
logeekal
pushed a commit
to logeekal/kibana
that referenced
this pull request
Jun 25, 2026
Related: elastic#259318 ## Summary Ports a small set of Chrome infrastructure fixes from the Chrome Next integration branch to main, covering app menu static item visibility, Chrome Next helper plumbing, inline legacy action menu handling, header extension layout behavior, sidebar spacing, and the AppHeader badge Storybook story.
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
7 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.
Summary
Chrome-Next (Vibranium) feature branch.
Eliminatesthe global header bar and replaces it with a Chrome-controlled page header, behind thecore.chrome.nextfeature flag. Solution/project navigation only.https://ela.st/vibranium
PRs merged into this branch:
[ChromeNext] Sidenav tool slots, help pipeline, and global search API stub #260460chrome-nextin devbar #260952[Chrome Next] Sidenav: renderContent, renderPopover, and customContent for ToolItem #261525[FeatureBranch/DoNotReview][Chrome Next] Add a user menu and space selector to the sidenav #261572[FeatureBranch/DoNotReview][Chrome Next] Add a user menu and space selector to the sidenav #261572Related PRs:
applicationMarginTopvariable #259328