[8.x] [Streams 🌊] Fix broken breadcrumbs in project nav mode (#207314) (#207335)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Streams 🌊] Fix broken breadcrumbs in project nav mode
(#207314)](https://github.com/elastic/kibana/pull/207314)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco Antonio
Ghiani","email":"marcoantonio.ghiani01@gmail.com"},"sourceCommit":{"committedDate":"2025-01-21T12:01:24Z","message":"[Streams
🌊] Fix broken breadcrumbs in project nav mode (#207314)\n\n## 📓
Summary\r\n\r\nThe shared `useBreadcrumbs` from
`@kbn/typed-react-router-config`\r\ncouldn't apply correctly breadcrumbs
in project mode for a couple of\r\nreasons:\r\n- the breadcrumbs
evaluation was based on the `serverless` plugin\r\nexistence, while it
should rely on the chrome view style\r\n- the setter method from
`chrome` didn't account for the specific option\r\nto apply the
breadcrumbs to a project navigation view.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n| <img width=\"866\"
alt=\"before\"\r\nsrc=\"https://github.com/user-attachments/assets/a615405b-e852-4614-b5c2-550780bfd0ba\"\r\n/>
| <img width=\"852\"
alt=\"after\"\r\nsrc=\"https://github.com/user-attachments/assets/04c6c45e-0b6f-4e6c-af3e-ccb7a144a47d\"\r\n/>
|","sha":"939c9fb71ee5c23c0e54b017fdea44ce0c6de5cb","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","Feature:Streams"],"title":"[Streams
🌊] Fix broken breadcrumbs in project nav
mode","number":207314,"url":"https://github.com/elastic/kibana/pull/207314","mergeCommit":{"message":"[Streams
🌊] Fix broken breadcrumbs in project nav mode (#207314)\n\n## 📓
Summary\r\n\r\nThe shared `useBreadcrumbs` from
`@kbn/typed-react-router-config`\r\ncouldn't apply correctly breadcrumbs
in project mode for a couple of\r\nreasons:\r\n- the breadcrumbs
evaluation was based on the `serverless` plugin\r\nexistence, while it
should rely on the chrome view style\r\n- the setter method from
`chrome` didn't account for the specific option\r\nto apply the
breadcrumbs to a project navigation view.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n| <img width=\"866\"
alt=\"before\"\r\nsrc=\"https://github.com/user-attachments/assets/a615405b-e852-4614-b5c2-550780bfd0ba\"\r\n/>
| <img width=\"852\"
alt=\"after\"\r\nsrc=\"https://github.com/user-attachments/assets/04c6c45e-0b6f-4e6c-af3e-ccb7a144a47d\"\r\n/>
|","sha":"939c9fb71ee5c23c0e54b017fdea44ce0c6de5cb"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/207314","number":207314,"mergeCommit":{"message":"[Streams
🌊] Fix broken breadcrumbs in project nav mode (#207314)\n\n## 📓
Summary\r\n\r\nThe shared `useBreadcrumbs` from
`@kbn/typed-react-router-config`\r\ncouldn't apply correctly breadcrumbs
in project mode for a couple of\r\nreasons:\r\n- the breadcrumbs
evaluation was based on the `serverless` plugin\r\nexistence, while it
should rely on the chrome view style\r\n- the setter method from
`chrome` didn't account for the specific option\r\nto apply the
breadcrumbs to a project navigation view.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n| <img width=\"866\"
alt=\"before\"\r\nsrc=\"https://github.com/user-attachments/assets/a615405b-e852-4614-b5c2-550780bfd0ba\"\r\n/>
| <img width=\"852\"
alt=\"after\"\r\nsrc=\"https://github.com/user-attachments/assets/04c6c45e-0b6f-4e6c-af3e-ccb7a144a47d\"\r\n/>
|","sha":"939c9fb71ee5c23c0e54b017fdea44ce0c6de5cb"}}]}] BACKPORT-->

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani01@gmail.com>

src/platform/packages/shared/kbn-typed-react-router-config/src/breadcrumbs/use_breadcrumbs.ts

@@ -13,11 +13,12 @@ import { MouseEvent, useEffect, useMemo } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ChromeBreadcrumbsAppendExtension } from '@kbn/core-chrome-browser';
 import type { ServerlessPluginStart } from '@kbn/serverless/public';
+import useObservable from 'react-use/lib/useObservable';
 
 function addClickHandlers(
   breadcrumbs: ChromeBreadcrumb[],
   navigateToHref?: (url: string) => Promise<void>
-) {
+): ChromeBreadcrumb[] {
   return breadcrumbs.map((bc) => ({
     ...bc,
     ...(bc.href
@@ -49,7 +50,12 @@ export const useBreadcrumbs = (
 
   const {
     services: {
-      chrome: { docTitle, setBreadcrumbs: chromeSetBreadcrumbs, setBreadcrumbsAppendExtension },
+      chrome: {
+        docTitle,
+        setBreadcrumbs: chromeSetBreadcrumbs,
+        setBreadcrumbsAppendExtension,
+        getChromeStyle$,
+      },
       application: { getUrlForApp, navigateToUrl },
     },
   } = useKibana<{
@@ -57,6 +63,9 @@ export const useBreadcrumbs = (
     chrome: ChromeStart;
   }>();
 
+  const chromeStyle = useObservable(getChromeStyle$());
+  const isProjectNavigation = chromeStyle === 'project';
+
   const setTitle = docTitle.change;
   const appPath = getUrlForApp(app?.id ?? 'observability-overview') ?? '';
 
@@ -77,7 +86,7 @@ export const useBreadcrumbs = (
   }, [breadcrumbsAppendExtension, setBreadcrumbsAppendExtension]);
 
   useEffect(() => {
-    const breadcrumbs = serverless
+    const breadcrumbs = isProjectNavigation
       ? extraCrumbs
       : [
           {
@@ -92,10 +101,25 @@ export const useBreadcrumbs = (
         ];
 
     if (setBreadcrumbs) {
-      setBreadcrumbs(addClickHandlers(breadcrumbs, navigateToUrl));
+      const breadcrumbsWithClickHandlers = addClickHandlers(breadcrumbs, navigateToUrl);
+      setBreadcrumbs(breadcrumbsWithClickHandlers, {
+        project: {
+          value: breadcrumbsWithClickHandlers,
+          absolute: true,
+        },
+      });
     }
     if (setTitle) {
       setTitle(getTitleFromBreadCrumbs(breadcrumbs));
     }
-  }, [app?.label, appPath, extraCrumbs, navigateToUrl, serverless, setBreadcrumbs, setTitle]);
+  }, [
+    app?.label,
+    isProjectNavigation,
+    appPath,
+    extraCrumbs,
+    navigateToUrl,
+    serverless,
+    setBreadcrumbs,
+    setTitle,
+  ]);
 };