Chrome Next#259318
Draft
Dosant wants to merge 115 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>
js-jankisalvi
pushed a commit
to js-jankisalvi/kibana
that referenced
this pull request
May 12, 2026
## Summary Part of elastic/kibana-team#3115 Extracted from elastic#259318 Adds the first Chrome Next foundation slice behind the default-off `core.chrome.next` feature flag. This PR intentionally keeps the shipped surface small: - Adds `@kbn/core-chrome-feature-flags` with `NEXT_CHROME_FEATURE_FLAG_KEY` and `isNextChrome(featureFlags)`. - Exposes `core.chrome.next.isEnabled` as the initial Chrome Next public API. - Wires the project layout to render a minimal `ChromeNextGlobalHeader` shell when the flag is enabled. - Adds package-local documentation for the feature flag utility. Follow-up PRs will add the actual Chrome Next feature slices, such as the context switcher, side navigation changes, user menu, help menu, search, and app-header migration APIs. ## Testing ``` feature_flags.overrides: core.chrome.next: true ``` <img width="2059" height="1193" alt="Screenshot 2026-05-07 at 15 57 58" src="https://github.com/user-attachments/assets/45ddba2d-48de-425b-b155-f9f412d803af" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
kowalczyk-krzysztof
force-pushed
the
feature/chrome-next
branch
from
64ed462 to
60e17ed
Compare
# Conflicts: # src/core/packages/chrome/browser-components/moon.yml # src/core/packages/chrome/browser-components/src/chrome_next/global_header/global_header.tsx # src/core/packages/chrome/browser-components/src/chrome_next/global_header/header_action_button.tsx # src/core/packages/chrome/browser-components/src/chrome_next/global_header/search_button.tsx # src/core/packages/chrome/browser-components/src/shared/chrome_hooks.ts # src/core/packages/chrome/browser-components/tsconfig.json # src/core/packages/chrome/browser-internal/src/chrome_api.tsx # src/core/packages/chrome/browser-internal/src/state/chrome_state.ts # src/core/packages/chrome/browser-mocks/src/chrome_service.mock.ts # src/core/packages/chrome/browser/src/chrome_next/chrome_next.ts # src/core/packages/chrome/browser/src/chrome_next/global_search.ts # src/core/packages/chrome/browser/src/chrome_next/index.ts # x-pack/platform/plugins/shared/security/moon.yml # x-pack/platform/plugins/shared/security/tsconfig.json
Contributor
|
@Dosant, this PR increases one or more page-load bundle sizes by 15% or more:
Large bundle size increases can affect page load performance. Consider whether dependencies can be lazy-loaded or code split to reduce the bundle. See the bundle optimization guide for tips. |
## Summary This PR updates the badges overflow logic to match the design. **3 badges:** <img width="470" height="77" alt="Screenshot 2026-05-22 at 19 12 41" src="https://github.com/user-attachments/assets/0bf554d9-bab3-4158-b86c-81a437f0c5fe" /> **4 or more badges:** <img width="424" height="82" alt="Screenshot 2026-05-22 at 19 12 45" src="https://github.com/user-attachments/assets/2dc2087c-5feb-4a79-9a87-e233ef932a01" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary This PR: - adds "Add integrations" static item to app menu - migrates workflows and workflows details page to chrome next page header Workflows: <img width="1407" height="431" alt="Screenshot 2026-05-24 at 00 39 51" src="https://github.com/user-attachments/assets/6977e794-3b2d-4363-915b-88033178a7c9" /> Workflows details: <img width="1411" height="497" alt="Screenshot 2026-05-24 at 00 40 21" src="https://github.com/user-attachments/assets/57adcd07-9137-4eaf-b782-81f22af3038b" /> Closes: elastic/kibana-team#3427 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
…270633) Part of elastic/kibana-team#3346 Related: #267691 ## Summary Migrates the Streams listing page and the main classic/wired stream detail header to the Chrome Next app header while keeping classic fallback rendering in place. The migration uses semantic app menu primary actions for the visually primary buttons, preserves the existing classic fallback layout with `rightSideItems`, and keeps Streams-specific header defaults centralized in `StreamsAppHeader`. During the migration we had to work through a few header API differences: EUI fallback actions need explicit `rightSideItems` ordering, Chrome Next tabs only support string labels, and several Streams detail badges are richer React components rather than plain badge config. The final implementation keeps those richer badges through `renderCustomBadge` and keeps tab tooltip/tour wrappers in fallback only. Left for follow-up: query stream detail headers, missing/no-privilege/pending detail-state headers, Chrome Next parity for tab tooltips/tour anchors if the app-header API grows support for richer tab labels, and listing-page description parity if product wants that text visible in Chrome Next. ### Streams List #### before <img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 04 59" src="https://github.com/user-attachments/assets/7f9924d4-1f5c-44c2-b4d1-74090f00b5ff" /> #### after <img width="1962" height="1119" alt="Screenshot 2026-05-22 at 16 58 45" src="https://github.com/user-attachments/assets/b825e037-d447-4496-b002-9139991a1b27" /> ### Stream Details #### before <img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 08" src="https://github.com/user-attachments/assets/43db98d3-14be-4f35-883a-46cb5dd96ad6" /> #### after <img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 16" src="https://github.com/user-attachments/assets/1e351ef4-7264-41cc-ab7d-a015f60554ec" /> ### Not migrated: <img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 26" src="https://github.com/user-attachments/assets/3b1354e1-321e-44c2-8fc0-3e9fda0d655c" /> <img width="1962" height="1119" alt="Screenshot 2026-05-22 at 17 05 32" src="https://github.com/user-attachments/assets/098eb510-6ca1-4d20-8f00-32af3007bc87" />
Dosant
added a commit
that referenced
this pull request
May 27, 2026
## Summary Part of elastic/kibana-team#3344 Extracts the app header infrastructure from the Chrome Next integration work in [#259318](#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: [#271295](#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>
Part of elastic/kibana-team#3115 ## Summary Prevents Chrome Next app headers from rendering an empty menu row when the only static app-menu item is global. The app-header wrapper now reuses the app-menu component visibility rule, allowing legacy header action menu content to render instead of being hidden behind a global-only static item.
smith
pushed a commit
to smith/kibana
that referenced
this pull request
May 27, 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>
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.
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