Skip to content

Add app header metadata row#271925

Open
Dosant wants to merge 4 commits into
elastic:mainfrom
Dosant:chrome-next-main/metadata-row
Open

Add app header metadata row#271925
Dosant wants to merge 4 commits into
elastic:mainfrom
Dosant:chrome-next-main/metadata-row

Conversation

@Dosant
Copy link
Copy Markdown
Contributor

@Dosant Dosant commented May 29, 2026

Summary

Adds a typed metadata row to the Chrome Next app header so callers can show up to three compact health, text, and action/link metadata items below the title.

Includes Storybook examples for the default and wrapped metadata row states. yarn storybook shared_ux

Screenshot 2026-05-29 at 15 46 18

From requirements I gathered from Figma (@ryankeairns, does this sound right?):

  1. We want 3 items max
  2. We can have these types of items:
  • health -> EuiHealth
  • text -> EuiText
  • button/link -> EuiButtonEmpty

Decisions:

  1. On smaller screen the row wraps. Is this correct? Or do we want truncate?
Screenshot 2026-05-29 at 15 48 14
  1. @ryankeairns, I am not sure if we wanted custom styling on top of the existing EUI components. I simply made sure we use the same color/weight for each element (by default they all different)

Adds typed metadata support to the Chrome Next app header so pages can expose compact health, text, and action/link metadata below the title.
@Dosant Dosant added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// labels May 29, 2026
@Dosant Dosant marked this pull request as ready for review May 29, 2026 13:50
@Dosant Dosant requested a review from a team as a code owner May 29, 2026 13:50
@infra-vault-gh-plugin-prod
Copy link
Copy Markdown

Pinging @elastic/appex-sharedux (Team:SharedUX)

@Dosant Dosant requested a review from ryankeairns May 29, 2026 13:50
renderAppHeader(
<AppHeaderView
favorite={<EuiButtonIcon aria-label="Favorite" iconType="starEmpty" onClick={jest.fn()} />}
favorite={
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated autofix 😢

chrome.next.appHeader.set({
favorite: <EuiButtonIcon aria-label="Favorite" iconType="starEmpty" onClick={jest.fn()} />,
favorite: (
<EuiToolTip content="Favorite" disableScreenReaderOutput>
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated autofix 😢

@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented May 29, 2026

💔 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #46 / Cloud Security Posture - Group 5 (KSPM + Flyouts) Security Alerts Page - Graph visualization expanded flyout - filter by node
  • [job] [logs] FTR Configs #24 / Entity Analytics - Watchlists @ess @serverless @skipInServerlessMKI Watchlist Lifecycle should remove all entities from the watchlist index when the watchlist is deleted
  • [job] [logs] FTR Configs #56 / lens app - TSVB Open in Lens Convert to Lens action on dashboard "before all" hook for "should show notification in context menu if visualization can be converted"
  • [job] [logs] FTR Configs #56 / lens app - TSVB Open in Lens Convert to Lens action on dashboard "before all" hook for "should show notification in context menu if visualization can be converted"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
core 696 697 +1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
core 150.0KB 151.1KB +1.1KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
core 539.5KB 539.5KB +82.0B

History

@ryankeairns
Copy link
Copy Markdown
Contributor

@Dosant both of your assumptions align with my expectations: wrap and enforce same text styles across the various metadata types. 🙇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t//

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants