[Serverless] fix breadcrumbs for alerts and slo (#169778)

## Summary

Close #161447

This fixes deeper context breadcrumbs in serverless observability
project for alerts and slos apps.
This builds on top of #169513
where we added merging of navigational project breadcrumbs with deeper
context breadcrumbs set by `chrome.setBreadcrumbs`. The merging is based
on deepLinkId, so we're adding it to base breadcrumbs. The deepLinkId is
type checked.

![Screenshot 2023-10-25 at 12 28
07](https://github.com/elastic/kibana/assets/7784120/947f59b3-b338-4bd1-96b9-7414bf396fae)
![Screenshot 2023-10-25 at 12 28
16](https://github.com/elastic/kibana/assets/7784120/5e73e902-3397-4b3e-9202-5c1e2c49358f)

x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx

@@ -75,6 +75,7 @@ export function AlertDetails() {
       text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
         defaultMessage: 'Alerts',
       }),
+      deepLinkId: 'observability-overview:alerts',
     },
     {
       text: alert ? pageTitleContent(alert.fields[ALERT_RULE_CATEGORY]) : defaultBreadcrumb,

x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx

@@ -85,6 +85,7 @@ export function RuleDetailsPage() {
         defaultMessage: 'Alerts',
       }),
       href: basePath.prepend(paths.observability.alerts),
+      deepLinkId: 'observability-overview:alerts',
     },
     {
       href: basePath.prepend(paths.observability.rules),

x-pack/plugins/observability/public/pages/rules/rules.tsx

@@ -46,6 +46,7 @@ export function RulesPage({ activeTab = RULES_TAB_NAME }: RulesPageProps) {
         defaultMessage: 'Alerts',
       }),
       href: http.basePath.prepend('/app/observability/alerts'),
+      deepLinkId: 'observability-overview:alerts',
     },
     {
       text: i18n.translate('xpack.observability.breadcrumbs.rulesLinkText', {

x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx

@@ -8,10 +8,10 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIsMutating } from '@tanstack/react-query';
-import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { IBasePath } from '@kbn/core-http-browser';
+import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
 import type { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
 
@@ -97,13 +97,14 @@ export function SloDetailsPage() {
 function getBreadcrumbs(
   basePath: IBasePath,
   slo: SLOWithSummaryResponse | undefined
-): EuiBreadcrumbProps[] {
+): ChromeBreadcrumb[] {
   return [
     {
       href: basePath.prepend(paths.observability.slos),
       text: i18n.translate('xpack.observability.breadcrumbs.slosLinkText', {
         defaultMessage: 'SLOs',
       }),
+      deepLinkId: 'observability-overview:slos',
     },
     {
       text:

x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx

@@ -41,6 +41,7 @@ export function SloEditPage() {
       text: i18n.translate('xpack.observability.breadcrumbs.sloLabel', {
         defaultMessage: 'SLOs',
       }),
+      deepLinkId: 'observability-overview:slos',
     },
     ...(!!slo
       ? [

x-pack/plugins/observability/public/pages/slos/slos.tsx

@@ -44,6 +44,7 @@ export function SlosPage() {
       text: i18n.translate('xpack.observability.breadcrumbs.slosLinkText', {
         defaultMessage: 'SLOs',
       }),
+      deepLinkId: 'observability-overview:slos',
     },
   ]);
 

x-pack/plugins/observability/tsconfig.json

@@ -91,7 +91,8 @@
     "@kbn/core-application-common",
     "@kbn/react-kibana-mount",
     "@kbn/react-kibana-context-theme",
-    "@kbn/shared-ux-link-redirect-app"
+    "@kbn/shared-ux-link-redirect-app",
+    "@kbn/core-chrome-browser"
   ],
   "exclude": [
     "target/**/*"

x-pack/test_serverless/functional/test_suites/observability/navigation.ts

@@ -127,6 +127,18 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
       await svlCommonNavigation.breadcrumbs.expectBreadcrumbTexts(['Cases', 'Settings']);
     });
 
+    it('navigates to alerts app', async () => {
+      await svlCommonNavigation.sidenav.clickLink({ deepLinkId: 'observability-overview:alerts' });
+      await svlCommonNavigation.sidenav.expectLinkActive({
+        deepLinkId: 'observability-overview:alerts',
+      });
+      await testSubjects.click('manageRulesPageButton');
+      await svlCommonNavigation.breadcrumbs.expectBreadcrumbTexts(['Alerts', 'Rules']);
+      await svlCommonNavigation.sidenav.expectLinkActive({
+        deepLinkId: 'observability-overview:alerts',
+      });
+    });
+
     it('navigates to integrations', async () => {
       await svlCommonNavigation.sidenav.openSection('project_settings_project_nav');
       await svlCommonNavigation.sidenav.clickLink({ deepLinkId: 'integrations' });