[Stateful sidenav] Fix breadcrumbs by sebelga · Pull Request #196169 · elastic/kibana

sebelga · 2024-10-14T15:29:44Z

In this PR I've fixed some of the breadcrumbs for the new solution navigation.

From the linked issue, the goal was mainly to fix the "dashboards" and "spaces" plugin breadcrumbs. I also managed to fix the security solution breadcrumbs.

How to test

Add the following in your kibana.dev.yml

xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM="
xpack.cloud.base_url: "https://cloud.elastic.co"

Launch Kibana and set the "search" solution on the default space
Navigate to dashboards > dashboard item and make sure the breadcrumbs works as expected
Navigate to spaces > edit | create space and make sure the breadcrumbs works as expected
Navigate to the security pages and make sure the breadcrumbs works as expected
Navigate the stack management pages and make sure the breadcrumbs works as expected

Notes on implementation

We have 2 chrome style: "classic" and "project".

The "classic" style is the Kibana that we have known for years.
The "project" was initially only for Serverless project, but with the launch of the new solution navigation, it is also used for stateful.

When we are on classic, the API that every plugin calls is core.chrome.setBreadcrumbs, and passes the full breadcrumbs to render. For serverless we call serverlessPlugin.setBreadcrumbs and plugins only call it with the last bit of the breadcrumb to render (as most of the breadcrumbs is already constructed from the navigation tree). This serverless API is only available on serverless so we can't use it in stateful.

I've then extended the core.chrome.setBreadcrumbs api and allow a second optional argument to be passed

core.chrome.setBreadcrumbs([ ... /* classic breadcrumbs */], {
  project: {
    value: [ ... ], // the value of the breadcrumbs when we are in the solution navigation
    absolute: true, // optional flag to indicate if the value is absolute or no (default "false")
  }
})

with the following contract:

interface ChromeSetBreadcrumbsParams {
  /**
   * Declare the breadcrumbs for the project/solution type navigation in stateful.
   * Those breadcrumbs correspond to the serverless breadcrumbs declaration.
   */
  project?: {
    /**
     * The breadcrumb value to set. Can be a single breadcrumb or an array of breadcrumbs.
     */
    value?: ChromeBreadcrumb | ChromeBreadcrumb[];
    /**
     * Indicates whether the breadcrumb should be absolute (replaces the full path) or relative.
     * @default false
     */
    absolute?: boolean;
  };
}

Fixes https://github.com/elastic/kibana-team/issues/1147

elasticmachine · 2024-10-14T16:31:26Z

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

semd

Security changes LGTM

rshen91

Tested locally, changes LGTM

…x-breadcrumbs

ElenaStoeva

Management plugin changes LGTM! Tested locally.

…x-breadcrumbs

kibanamachine · 2024-10-15T14:37:37Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11348390345

elasticmachine · 2024-10-15T14:38:13Z

💚 Build Succeeded

Buildkite Build
Commit: f88e967

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/core-chrome-browser`	102	103	+1

Async chunks

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

id	before	after	diff
`dashboard`	637.3KB	637.3KB	+20.0B

Page load bundle

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

id	before	after	diff
`core`	449.9KB	450.0KB	+137.0B
`management`	10.7KB	10.8KB	+32.0B
`securitySolutionEss`	11.4KB	11.4KB	+29.0B
total			+198.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-chrome-browser`	208	210	+2

History

cc @sebelga

(cherry picked from commit 204f9d3)

kibanamachine · 2024-10-15T14:42:18Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

# Backport This will backport the following commits from `main` to `8.x`: - [[Stateful sidenav] Fix breadcrumbs (#196169)](#196169)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Sébastien Loix <sebastien.loix@elastic.co>

## Summary Continuation of: #196169 Adapted the Cases breadcrumbs to the new navigation for stateful (ESS) environments. Using the same `chrome.setBreadcrumbs` API, the case title breadcrumb now needs to be passed separately, inside the second _param_ object with `{ project: { value }}`. ### Screenshots Before <img width="776" alt="before" src="https://github.com/user-attachments/assets/29df8b36-71b3-4cf8-9c77-a72848ff91fc"> After <img width="776" alt="after" src="https://github.com/user-attachments/assets/bfa0bf06-9e94-454e-ace0-be63f13f9bc7">

## Summary Continuation of: elastic#196169 Adapted the Cases breadcrumbs to the new navigation for stateful (ESS) environments. Using the same `chrome.setBreadcrumbs` API, the case title breadcrumb now needs to be passed separately, inside the second _param_ object with `{ project: { value }}`. ### Screenshots Before <img width="776" alt="before" src="https://github.com/user-attachments/assets/29df8b36-71b3-4cf8-9c77-a72848ff91fc"> After <img width="776" alt="after" src="https://github.com/user-attachments/assets/bfa0bf06-9e94-454e-ace0-be63f13f9bc7"> (cherry picked from commit 7e310f0)

…vigation (#196785) ~⚠️ I'm still putting out some fires with tests, but this is ready to start being reviewed.~ ## Summary A continuation of #196169 for Observability (please read that PR description first). Related: #192050 ## Overview of changes There are essentially three types of breadcrumbs - serverless (which is project style), stateful project style (set through spaces settings), and classic style (the old breadcrumbs we've seen for years). Whilst serverless and stateful project style both use the project based style the navigation trees are slightly different, so the breadcrumbs results are not identical [when they derive the "nav crumbs"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55). Here "project style" will refer to serverless and stateful project style. In these changes I've, for the most part, tried to refactor things so Observability solutions route their breadcrumbs through the observability-shared `useBreadcrumbs` hook, this way the logic around project style, adding an Observability crumb in classic etc is consolidated in one place. [For several solutions `absolute` breadcrumbs are being used](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46), and this means we'll roughly have the same breadcrumbs across the 3 experiences (bar Observability being prepended). Teams may want to refine this going forward to pass curated breadcrumbs that take into account the navigation derived "nav crumbs" (again, bearing in mind the trees from serverless and project based chrome do differ), and not use absolute mode. APM is an example of this at the moment. Right now this is an 8.16 bug though, so this aims to make things acceptable, but not necessarily perfect. ### APM - Project style chrome crumbs have been modelled off the serverless ones. The navigation trees here are the same so this should be fine. ### Infra - The `infra` `useBreadcrumbs` hook has been removed, it was only being used by logs. Logs now goes via the Observability shared hook using `classicOnly`. - Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to route more of it's logic through the shared hook. ### Logs explorer - Wasn't setting any nested breadcrumbs at the moment so the logic has been simplified to just set some classic crumbs, and defer the rest to the nav crumbs via the shared hook. ### Synthetics - Removed custom logic around prepending Observability, adding link handlers etc in favour of the shared hook. ### Alerts / rules / SLOs etc - Simple breadcrumb needs so these are mostly setting `classicOnly` and deferring to the nav crumbs in project style. Several solutions have had their usage of the shared hook updated to pass in the `serverless` plugin. This was missing before, so calls to `serverless.setBreadcrumbs` weren't explicitly happening. ## Testing - Add the following to your `kibana.dev.yml`: ```yml xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=" xpack.cloud.base_url: "https://cloud.elastic.co" ``` - For testing stateful project style chrome you'll need to go to Stack Management > Spaces and change the solution view: ![Screenshot 2024-10-21 at 12 44 21](https://github.com/user-attachments/assets/e3d9fe64-f79f-4e31-a5b6-45a06ca4915d) - Set the above to Classic to test classic breadcrumbs. - As a reviewer please check your solution against the 3 modes. ## Comparison Before these changes we'd see something like the following in APM: ![Screenshot 2024-10-11 at 10 56 54](https://github.com/user-attachments/assets/4938b31e-9d4a-429e-abf0-add04d69b62a) Now we'll see something like this in project style: ![Screenshot 2024-10-21 at 12 48 54](https://github.com/user-attachments/assets/0645a3ae-909e-4a70-a077-d9f83bd1d639)

…vigation (elastic#196785) ~⚠️ I'm still putting out some fires with tests, but this is ready to start being reviewed.~ ## Summary A continuation of elastic#196169 for Observability (please read that PR description first). Related: elastic#192050 ## Overview of changes There are essentially three types of breadcrumbs - serverless (which is project style), stateful project style (set through spaces settings), and classic style (the old breadcrumbs we've seen for years). Whilst serverless and stateful project style both use the project based style the navigation trees are slightly different, so the breadcrumbs results are not identical [when they derive the "nav crumbs"](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L55). Here "project style" will refer to serverless and stateful project style. In these changes I've, for the most part, tried to refactor things so Observability solutions route their breadcrumbs through the observability-shared `useBreadcrumbs` hook, this way the logic around project style, adding an Observability crumb in classic etc is consolidated in one place. [For several solutions `absolute` breadcrumbs are being used](https://github.com/elastic/kibana/blob/9577aa980dd1565fba05e34292fb5c0bba692889/packages/core/chrome/core-chrome-browser-internal/src/project_navigation/breadcrumbs.tsx#L46), and this means we'll roughly have the same breadcrumbs across the 3 experiences (bar Observability being prepended). Teams may want to refine this going forward to pass curated breadcrumbs that take into account the navigation derived "nav crumbs" (again, bearing in mind the trees from serverless and project based chrome do differ), and not use absolute mode. APM is an example of this at the moment. Right now this is an 8.16 bug though, so this aims to make things acceptable, but not necessarily perfect. ### APM - Project style chrome crumbs have been modelled off the serverless ones. The navigation trees here are the same so this should be fine. ### Infra - The `infra` `useBreadcrumbs` hook has been removed, it was only being used by logs. Logs now goes via the Observability shared hook using `classicOnly`. - Metrics (`useMetricsBreadcrumbs` hook) has been slightly amended to route more of it's logic through the shared hook. ### Logs explorer - Wasn't setting any nested breadcrumbs at the moment so the logic has been simplified to just set some classic crumbs, and defer the rest to the nav crumbs via the shared hook. ### Synthetics - Removed custom logic around prepending Observability, adding link handlers etc in favour of the shared hook. ### Alerts / rules / SLOs etc - Simple breadcrumb needs so these are mostly setting `classicOnly` and deferring to the nav crumbs in project style. Several solutions have had their usage of the shared hook updated to pass in the `serverless` plugin. This was missing before, so calls to `serverless.setBreadcrumbs` weren't explicitly happening. ## Testing - Add the following to your `kibana.dev.yml`: ```yml xpack.cloud.id: "ftr_fake_cloud_id:aGVsbG8uY29tOjQ0MyRFUzEyM2FiYyRrYm4xMjNhYmM=" xpack.cloud.base_url: "https://cloud.elastic.co" ``` - For testing stateful project style chrome you'll need to go to Stack Management > Spaces and change the solution view: ![Screenshot 2024-10-21 at 12 44 21](https://github.com/user-attachments/assets/e3d9fe64-f79f-4e31-a5b6-45a06ca4915d) - Set the above to Classic to test classic breadcrumbs. - As a reviewer please check your solution against the 3 modes. ## Comparison Before these changes we'd see something like the following in APM: ![Screenshot 2024-10-11 at 10 56 54](https://github.com/user-attachments/assets/4938b31e-9d4a-429e-abf0-add04d69b62a) Now we'll see something like this in project style: ![Screenshot 2024-10-21 at 12 48 54](https://github.com/user-attachments/assets/0645a3ae-909e-4a70-a077-d9f83bd1d639) (cherry picked from commit 641d915)

…sed navigation (#196785) (#198217) # Backport This will backport the following commits from `main` to `8.x`: - [[Observability] Update breadcrumbs for observability project based navigation (#196785)](#196785)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kerry Gallagher <kerry.gallagher@elastic.co>

…ased navigation (#196785) (#198216) # Backport This will backport the following commits from `main` to `8.16`: - [[Observability] Update breadcrumbs for observability project based navigation (#196785)](#196785)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Kerry Gallagher <kerry.gallagher@elastic.co>

Sébastien Loix added 7 commits October 14, 2024 12:42

Allow project breadcrumb to be declared along with classic ones

ac40e89

Update dashboard breadcrumb for solution nav

30623a5

Update security breadcrumb for solution nav

6b6436f

Always set both classic and project breadcrumbs array

4afdb2b

Update management breadcrumb for solution nav

6e795d1

Remove isSameAsClassic option

56f088d

Add jest test

92f8330

sebelga added the Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// label Oct 14, 2024

sebelga marked this pull request as ready for review October 14, 2024 16:31

sebelga requested review from a team as code owners October 14, 2024 16:31

sebelga added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor Feature:Chrome Core's Chrome UI (sidenav, header, breadcrumbs) labels Oct 14, 2024

sebelga self-assigned this Oct 14, 2024

sebelga mentioned this pull request Oct 14, 2024

[APM] Breadcrumbs are broken on new nav experience #195994

Open

semd approved these changes Oct 14, 2024

View reviewed changes

rshen91 approved these changes Oct 14, 2024

View reviewed changes

Dosant approved these changes Oct 14, 2024

View reviewed changes

Sébastien Loix added 2 commits October 15, 2024 10:23

Fix TS issue

c8aced4

Merge remote-tracking branch 'upstream/main' into stateful-sidenav/fi…

1c8fcfe

…x-breadcrumbs

ElenaStoeva approved these changes Oct 15, 2024

View reviewed changes

Fix TS issue

72e2ca5

sebelga enabled auto-merge (squash) October 15, 2024 10:52

Sébastien Loix added 2 commits October 15, 2024 13:24

Fix functional tests

bf3bd46

Merge remote-tracking branch 'upstream/main' into stateful-sidenav/fi…

f88e967

…x-breadcrumbs

sebelga merged commit 204f9d3 into elastic:main Oct 15, 2024

kibanamachine added the v9.0.0 label Oct 15, 2024

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 15, 2024

[Stateful sidenav] Fix breadcrumbs (elastic#196169)

6f00792

(cherry picked from commit 204f9d3)

kibanamachine mentioned this pull request Oct 15, 2024

[8.x] [Stateful sidenav] Fix breadcrumbs (#196169) #196332

Merged

sebelga deleted the stateful-sidenav/fix-breadcrumbs branch October 15, 2024 15:20

kibanamachine added the v8.16.0 label Oct 15, 2024

semd mentioned this pull request Oct 16, 2024

[Cases] Adapt breadcrumbs to new stateful navigation #196494

Merged

Kerry350 mentioned this pull request Oct 18, 2024

[Observability] Update breadcrumbs for observability project based navigation #196785

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Stateful sidenav] Fix breadcrumbs#196169

[Stateful sidenav] Fix breadcrumbs#196169
sebelga merged 12 commits intoelastic:mainfrom
sebelga:stateful-sidenav/fix-breadcrumbs

sebelga commented Oct 14, 2024 •

edited by kibanamachine

Loading

Uh oh!

elasticmachine commented Oct 14, 2024

Uh oh!

semd left a comment

Uh oh!

rshen91 left a comment

Uh oh!

ElenaStoeva left a comment •

edited

Loading

Uh oh!

kibanamachine commented Oct 15, 2024

Uh oh!

elasticmachine commented Oct 15, 2024

API count

Uh oh!

kibanamachine commented Oct 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

sebelga commented Oct 14, 2024 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to test

Notes on implementation

Uh oh!

elasticmachine commented Oct 14, 2024

Uh oh!

semd left a comment

Choose a reason for hiding this comment

Uh oh!

rshen91 left a comment

Choose a reason for hiding this comment

Uh oh!

ElenaStoeva left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Oct 15, 2024

Uh oh!

elasticmachine commented Oct 15, 2024

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Uh oh!

kibanamachine commented Oct 15, 2024

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

sebelga commented Oct 14, 2024 •

edited by kibanamachine

Loading

ElenaStoeva left a comment •

edited

Loading