Fix classic nav breadcrumbs with href full page reload; fix home tutorials project breadcrumbs (#216176)

## Summary


1.

Fixes https://github.com/elastic/kibana/issues/214804

In classic nav when breadcrumb href points to another app there was a
full page reload. One example from
https://github.com/elastic/kibana/issues/214804 is navigation from APM
tutorial page (home app) to integrations page (fleet) was causing a page
reload. This was only an issue for classic nav.

2.

While testing, I noticed that APM tutorial page was missing breadcrumbs
in project nav. This is now fixed by setting project breadcrumbs


![Screenshot 2025-03-27 at 14 29
22](https://github.com/user-attachments/assets/c83b44da-c731-460c-995f-985f1e5b5e6d)

src/core/packages/chrome/browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap

@@ -180,29 +180,34 @@ Array [
             </button>
           </div>
         </div>
-        <nav
-          aria-label="Breadcrumbs"
-          class="euiBreadcrumbs euiHeaderBreadcrumbs emotion-euiHeaderBreadcrumbs"
-          data-test-subj="breadcrumbs"
+        <div
+          css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+          data-test-subj="kbnRedirectAppLink"
         >
-          <ol
-            class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated"
+          <nav
+            aria-label="Breadcrumbs"
+            class="euiBreadcrumbs euiHeaderBreadcrumbs emotion-euiHeaderBreadcrumbs"
+            data-test-subj="breadcrumbs"
           >
-            <li
-              class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
-              data-test-subj="euiBreadcrumb"
+            <ol
+              class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated"
             >
-              <span
-                aria-current="page"
-                class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-onlyChild-isTruncatedLast"
-                data-test-subj="breadcrumb first last"
-                title="test"
+              <li
+                class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+                data-test-subj="euiBreadcrumb"
               >
-                test
-              </span>
-            </li>
-          </ol>
-        </nav>
+                <span
+                  aria-current="page"
+                  class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-onlyChild-isTruncatedLast"
+                  data-test-subj="breadcrumb first last"
+                  title="test"
+                >
+                  test
+                </span>
+              </li>
+            </ol>
+          </nav>
+        </div>
         <div
           class="euiHeaderSection emotion-euiHeaderSection-right"
         >

src/core/packages/chrome/browser-internal/src/ui/header/header.tsx

@@ -35,6 +35,8 @@ import type {
 } from '@kbn/core-chrome-browser';
 import { CustomBranding } from '@kbn/core-custom-branding-common';
 import type { DocLinksStart } from '@kbn/core-doc-links-browser';
+import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
+import { css } from '@emotion/react';
 import type { OnIsLockedUpdate } from './types';
 import { CollapsibleNav } from './collapsible_nav';
 import { HeaderBadge } from './header_badge';
@@ -203,11 +205,18 @@ export function Header({
 
               <HeaderNavControls side="left" navControls$={observables.navControlsLeft$} />
             </EuiHeaderSection>
-            <BreadcrumbsWithExtensionsWrapper
-              breadcrumbsAppendExtensions$={breadcrumbsAppendExtensions$}
+            <RedirectAppLinks
+              coreStart={{ application }}
+              css={css`
+                min-width: 0; // enable text truncation for long breadcrumb titles
+              `}
             >
-              {Breadcrumbs}
-            </BreadcrumbsWithExtensionsWrapper>
+              <BreadcrumbsWithExtensionsWrapper
+                breadcrumbsAppendExtensions$={breadcrumbsAppendExtensions$}
+              >
+                {Breadcrumbs}
+              </BreadcrumbsWithExtensionsWrapper>
+            </RedirectAppLinks>
 
             <HeaderBadge badge$={observables.badge$} />
 

src/platform/plugins/shared/home/public/application/components/tutorial/tutorial.tsx

@@ -103,7 +103,7 @@ class TutorialUi extends React.Component<TutorialProps, TutorialState> {
       this.setState({ notFound: true });
     }
 
-    getServices().chrome.setBreadcrumbs([
+    const breadcrumbs = [
       {
         text: integrationsTitle,
         href: this.props.addBasePath('/app/integrations/browse'),
@@ -111,7 +111,12 @@ class TutorialUi extends React.Component<TutorialProps, TutorialState> {
       {
         text: tutorial ? tutorial.name : this.props.tutorialId,
       },
-    ]);
+    ];
+    getServices().chrome.setBreadcrumbs(breadcrumbs, {
+      project: {
+        value: breadcrumbs,
+      },
+    });
   }
 
   getInstructions = () => {

src/platform/plugins/shared/home/public/application/components/tutorial_directory.tsx

@@ -173,7 +173,11 @@ class TutorialDirectoryUi extends React.Component<
       });
     }
 
-    getServices().chrome.setBreadcrumbs(breadcrumbs);
+    getServices().chrome.setBreadcrumbs(breadcrumbs, {
+      project: {
+        value: breadcrumbs,
+      },
+    });
   };
 
   onSelectedTabChanged = (id: string) => {