[Workspace Chrome] Bootstrap grid layout for project nav by Dosant · Pull Request #225772 · elastic/kibana

Dosant · 2025-06-30T09:04:11Z

Important

Should be no user-facing changes!!! The new layout work is behind a feature flag!

Summary

Part of workspace chrome work.
This is follow up to #224255, #225824 which mostly implements the new layout for project (serverless) navigation.

Implementation notes:

The project navigation sidebar still uses the EuiCollapsibleNavBeta component. It works as a push flyout on larger screens and as an overlay on smaller screens.
In the next steps, we will start using the new navigation grid cell for the upcoming side navigation component.

How to review

Most importantly, we need to ensure that nothing is broken in the old layout during the refactor. - Functional tests + visual/manual testing
Then for the new layout:

kibana.yml:

feature_flags.overrides:
  core.chrome.layoutType: 'grid'
  core.chrome.layoutDebug: true

Check that it mostly works (some specific edge cases and bugs are expected and are gathered in [Workspace Chrome] Grid layout QA #225263)
Code-review: focus on the layout implementation split approach

…plication-layout-2

…plication-layout-3 # Conflicts: # src/core/packages/chrome/browser-internal/src/chrome_service.tsx # src/core/packages/chrome/browser-internal/src/types.ts # src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx # src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx # src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/hack_use_sync_push_flyout.tsx

…plication-layout-3

…plication-layout-3 # Conflicts: # src/core/packages/chrome/layout/core-chrome-layout-components/README.md # src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts # src/core/packages/chrome/layout/core-chrome-layout-components/debug/layout_debug_overlay.tsx # src/core/packages/chrome/layout/core-chrome-layout-components/layout_global_css.tsx # src/core/packages/chrome/layout/core-chrome-layout/layouts/legacy-fixed/legacy_fixed_global_app_style.tsx # src/platform/packages/shared/kbn-css-utils/public/full_body_height_css.ts # src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap # src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap # src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx

…plication-layout-3

Dosant · 2025-07-01T13:12:35Z

src/core/packages/chrome/layout/core-chrome-layout-components/header/layout_header.styles.ts


 const root: EmotionFn = ({ euiTheme }) => css`
  position: sticky;
-  overflow: hidden;


I was checking the new layout in different browsers and noticed a bug in Safari. The push flyout from EuiCollapsibleNavBeta wasn't visible because of this. I'm removing it since it's not really needed, but taking it out will fix the bug in Safari.

elasticmachine · 2025-07-01T13:14:43Z

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

elasticmachine · 2025-07-01T14:56:21Z

💚 Build Succeeded

Buildkite Build
Commit: 1c104dd

Metrics [docs]

Page load bundle

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

id	before	after	diff
`core`	471.8KB	473.0KB	+1.2KB

History

💔 Build #314454 failed e6e2d62

clintandrewhall

Something that I did in the proof-of-concept was to render the side navigation in the actual area, even in older versions, rather than keep the navigation as a flyout managed by EUI.

I did this by rendering the menu itself in the in the side nav grid area and hiding the button. Then I rendered a button in the header that would expand/collapse the nav.

I would love to see this done in this PR, as well. It's going to make moving to the new navigation that much easier, IMO.

Thoughts?

Dosant · 2025-07-03T07:54:12Z

Something that I did in the proof-of-concept was to render the side navigation in the actual area, even in older versions, rather than keep the navigation as a flyout managed by EUI.

I did this by rendering the menu itself in the in the side nav grid area and hiding the button. Then I rendered a button in the header that would expand/collapse the nav.

I would love to see this done in this PR, as well. It's going to make moving to the new navigation that much easier, IMO.

Thoughts?

Discussed offline: this PR integrates the old sidenav into the new grid layout using the current flyout approach, minimizing hacks and allowing us to start polishing the layout right away. A proper integration for the new grouped sidenav will follow in a separate PR, behind a new feature flag. The new sidenav will only be available with the grid layout, while the grid can support both nav versions. This approach lets us decouple layout and nav changes and move forward incrementally.

clintandrewhall

Nice work.

clintandrewhall · 2025-07-03T13:19:45Z

src/core/packages/chrome/browser-internal/src/chrome_service.tsx

@@ -489,59 +577,13 @@ export class ChromeService {

        // render header
        if (chromeStyle === 'project') {


This was the kind of check I wanted delegated to the layout service.

right, new layout ("grid") does this there. but old layout still relies on this being done by chrome_service. we can refactor this now, but I think we should better clean this up together when we remove old layout.

clintandrewhall · 2025-07-03T13:20:10Z

src/core/packages/chrome/browser-internal/src/chrome_service.tsx

      return getClassicHeader({ isFixed: false, includeBanner: false, as: 'div' });
    };

+    const getProjectHeaderComponentForGridLayout = () => {


This too, potentially. Can we move these, or is that a planned step?

clintandrewhall · 2025-07-03T13:21:04Z

src/core/packages/chrome/browser-internal/src/chrome_service.tsx

+
    return {
      // TODO: this service does too much and doesn't have to compose these headers components.
      // let's get rid of this in the future https://github.com/elastic/kibana/issues/225264


Ah, I see now. 🎉

clintandrewhall · 2025-07-03T13:23:33Z

src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx

@@ -28,7 +29,10 @@ const globalLayoutStyles = (euiTheme: UseEuiTheme['euiTheme']) => css`
    --kbnHeaderBannerHeight: var(--kbn-layout--banner-height, 0px);


nit: I would like these to follow the same style we adopted for the grid layout variables, e.g. --kbn-header--banner-height (or whatever suits).

This is just old variable names that exist for backward compatibility. The names will stay, but we will use new values. Later, I hope to clean them up.

clintandrewhall · 2025-07-03T13:25:59Z

src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/hack_use_sync_push_flyout.tsx

+          paddingInlineStart = paddingInlineStart ?? start;
          paddingInlineEnd = paddingInlineEnd ?? end;

+          if (paddingInlineStart) {


This is never going to be falsey, right? Because of line 63? Or am I missing something?

it can be falsey if there is no padding-inline-end or padding-inline styles set on body

) > [!IMPORTANT] > **Should be no user-facing changes!!!** The new layout work is behind a feature flag! ## Summary Part of [workspace chrome](elastic/kibana-team#1581 ) work. This is follow up to elastic#224255, elastic#225824 which mostly implements the new layout for project (serverless) navigation. ![Screenshot 2025-07-01 at 15 04 45](https://github.com/user-attachments/assets/270a9871-4eec-49ac-bb75-75ea1b68916e) ### Implementation notes: - The project navigation sidebar still uses the EuiCollapsibleNavBeta component. It works as a push flyout on larger screens and as an overlay on smaller screens. - In the next steps, we will start using the new navigation grid cell for the upcoming side navigation component. ## How to review 1. Most importantly, we need to ensure that nothing is broken in the old layout during the refactor. - Functional tests + visual/manual testing 2. Then for the new layout: kibana.yml: ``` feature_flags.overrides: core.chrome.layoutType: 'grid' core.chrome.layoutDebug: true ``` - Check that it mostly works (some specific edge cases and bugs are expected and are gathered in elastic#225263) - Code-review: focus on the layout implementation split approach

Dosant added 19 commits June 23, 2025 12:03

Bootstrap chrome’s grid layout

a4101de

fixes

eadf52f

fix lint

2ff31a7

clean up kbnProjectHeaderAppActionMenuHeight

c1a8e3f

Merge branch 'main' of github.com:elastic/kibana into d/2025-06-13-ap…

73285e7

…plication-layout-2

Merge branch 'main' of github.com:elastic/kibana into d/2025-06-13-ap…

9001177

…plication-layout-2

code review

2d5d7c7

nice wip

15b4eda

wip project nav on grid layout

161fe5c

chery pick application-content

57010e8

wip

1315e77

fix variable

6f6b5f9

Merge branch 'main' of github.com:elastic/kibana into d/2025-06-13-ap…

f9f8938

…plication-layout-3

Merge branch 'main' of github.com:elastic/kibana into d/2025-06-13-ap…

5309603

…plication-layout-3

remove overflow from layout components

e6e2d62

fix mocks

7e4ba63

fix

1c104dd

Dosant commented Jul 1, 2025

View reviewed changes

Dosant changed the title ~~[WIP] Project nav grid~~ [Workspace Chrome] Bootstrap grid layout for project nav Jul 1, 2025

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 Jul 1, 2025

Dosant marked this pull request as ready for review July 1, 2025 13:14

Dosant requested a review from a team as a code owner July 1, 2025 13:14

Dosant requested review from clintandrewhall and tsullivan July 1, 2025 17:03

clintandrewhall reviewed Jul 2, 2025

View reviewed changes

Dosant requested a review from clintandrewhall July 3, 2025 07:54

Merge branch 'main' into d/2025-06-13-application-layout-3

e4d5580

clintandrewhall approved these changes Jul 3, 2025

View reviewed changes

Dosant merged commit 222d16b into elastic:main Jul 3, 2025
10 checks passed

kibanamachine added the v9.2.0 label Jul 3, 2025

Dosant added the chrome-grid Work related to Chrome refactor to grid layout label Nov 17, 2025

		@@ -489,59 +577,13 @@ export class ChromeService {

		// render header
		if (chromeStyle === 'project') {

		@@ -28,7 +29,10 @@ const globalLayoutStyles = (euiTheme: UseEuiTheme['euiTheme']) => css`
		--kbnHeaderBannerHeight: var(--kbn-layout--banner-height, 0px);

Conversation

Dosant commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Implementation notes:

How to review

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 1, 2025

Uh oh!

elasticmachine commented Jul 1, 2025

💚 Build Succeeded

Metrics [docs]

Page load bundle

History

Uh oh!

clintandrewhall left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant commented Jul 3, 2025

Uh oh!

clintandrewhall left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Dosant commented Jun 30, 2025 •

edited

Loading