[Synthetics] Fix breadcrumbs in serverless

packages/deeplinks/observability/deep_links.ts

@@ -59,7 +59,7 @@ export type ApmLinkId =
   | 'settings'
   | 'storage-explorer';
 
-export type SyntheticsLinkId = 'overview' | 'management';
+export type SyntheticsLinkId = 'certificates' | 'overview';
 
 export type LinkId =
   | LogsLinkId

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_settings_context.tsx

@@ -41,6 +41,7 @@ export interface SyntheticsAppProps {
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
   appMountParameters: AppMountParameters;
   isDev: boolean;
+  isServerless: boolean;
 }
 
 export interface SyntheticsSettingsContextValues {
@@ -53,6 +54,8 @@ export interface SyntheticsSettingsContextValues {
   isLogsAvailable: boolean;
   commonlyUsedRanges?: CommonlyUsedDateRange[];
   isDev?: boolean;
+  isServerless?: boolean;
+  setBreadcrumbs?: (crumbs: ChromeBreadcrumb[]) => void;
 }
 
 const { BASE_PATH } = CONTEXT_DEFAULTS;
@@ -79,8 +82,16 @@ export const SyntheticsSettingsContextProvider: React.FC<SyntheticsAppProps> = (
   children,
   ...props
 }) => {
-  const { basePath, isApmAvailable, isInfraAvailable, isLogsAvailable, commonlyUsedRanges, isDev } =
-    props;
+  const {
+    basePath,
+    isApmAvailable,
+    isInfraAvailable,
+    isLogsAvailable,
+    commonlyUsedRanges,
+    isDev,
+    setBreadcrumbs,
+    isServerless,
+  } = props;
 
   const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
@@ -99,6 +110,8 @@ export const SyntheticsSettingsContextProvider: React.FC<SyntheticsAppProps> = (
       commonlyUsedRanges,
       dateRangeStart: dateRangeStart ?? DATE_RANGE_START,
       dateRangeEnd: dateRangeEnd ?? DATE_RANGE_END,
+      setBreadcrumbs,
+      isServerless,
     };
   }, [
     canSave,
@@ -110,6 +123,8 @@ export const SyntheticsSettingsContextProvider: React.FC<SyntheticsAppProps> = (
     dateRangeStart,
     dateRangeEnd,
     commonlyUsedRanges,
+    setBreadcrumbs,
+    isServerless,
   ]);
 
   return <SyntheticsSettingsContext.Provider value={value} children={children} />;

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/hooks/use_breadcrumbs.test.tsx

@@ -17,6 +17,7 @@ import {
   getSupportedUrlParams,
 } from '../utils/url_params/get_supported_url_params';
 import { makeBaseBreadcrumb, useBreadcrumbs } from './use_breadcrumbs';
+import { SyntheticsSettingsContext } from '../contexts';
 
 describe('useBreadcrumbs', () => {
   it('sets the given breadcrumbs', () => {
@@ -49,15 +50,28 @@ describe('useBreadcrumbs', () => {
     render(
       <KibanaContextProvider services={{ ...core }}>
         <Route path={OVERVIEW_ROUTE}>
-          <Component />
+          <SyntheticsSettingsContext.Provider
+            value={{
+              basePath: '/app/synthetics',
+              canSave: true,
+              dateRangeStart: '',
+              dateRangeEnd: '',
+              isApmAvailable: true,
+              setBreadcrumbs: core.chrome.setBreadcrumbs,
+              isInfraAvailable: false,
+              isLogsAvailable: false,
+            }}
+          >
+            <Component />
+          </SyntheticsSettingsContext.Provider>
         </Route>
       </KibanaContextProvider>
     );
 
     const urlParams: SyntheticsUrlParams = getSupportedUrlParams({});
     expect(JSON.stringify(getBreadcrumbs())).toEqual(
       JSON.stringify(
-        makeBaseBreadcrumb('/app/synthetics', '/app/observability', urlParams).concat(
+        makeBaseBreadcrumb('/app/synthetics', '/app/observability', urlParams, false).concat(
           expectedCrumbs
         )
       )

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/hooks/use_breadcrumbs.ts

@@ -7,12 +7,13 @@
 
 import { ChromeBreadcrumb } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
-import { MouseEvent, useEffect } from 'react';
+import { MouseEvent, useContext, useEffect } from 'react';
 import { EuiBreadcrumb } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { SyntheticsUrlParams, stringifyUrlParams } from '../utils/url_params';
 import { useUrlParams } from './use_url_params';
 import { PLUGIN } from '../../../../common/constants/plugin';
+import { SyntheticsSettingsContext } from '../contexts';
 
 const EMPTY_QUERY = '?';
 
@@ -45,8 +46,9 @@ function handleBreadcrumbClick(
 export const makeBaseBreadcrumb = (
   uptimePath: string,
   observabilityPath: string,
-  params?: SyntheticsUrlParams
-): [EuiBreadcrumb, EuiBreadcrumb] => {
+  params?: SyntheticsUrlParams,
+  isServerless?: boolean
+): EuiBreadcrumb[] => {
   if (params) {
     const crumbParams: Partial<SyntheticsUrlParams> = { ...params };
 
@@ -55,28 +57,35 @@ export const makeBaseBreadcrumb = (
     uptimePath += query === EMPTY_QUERY ? '' : query;
   }
 
-  return [
-    {
+  const baseBreadcrumbs: EuiBreadcrumb[] = [];
+
+  // serverless Kibana has a curated UX flow, and "Observability" is already a given,
+  // thus we don't need to include it explicitly in the breadcrumb trail
+  if (!isServerless) {
+    baseBreadcrumbs.push({
       text: i18n.translate('xpack.synthetics.breadcrumbs.observabilityText', {
         defaultMessage: 'Observability',
       }),
       href: observabilityPath,
       'data-test-subj': 'observabilityPathBreadcrumb',
-    },
-    {
-      text: i18n.translate('xpack.synthetics.breadcrumbs.overviewBreadcrumbText', {
-        defaultMessage: 'Synthetics',
-      }),
-      href: uptimePath,
-      'data-test-subj': 'syntheticsPathBreadcrumb',
-    },
-  ];
+    });
+  }
+
+  baseBreadcrumbs.push({
+    text: i18n.translate('xpack.synthetics.breadcrumbs.overviewBreadcrumbText', {
+      defaultMessage: 'Synthetics',
+    }),
+    href: uptimePath,
+    'data-test-subj': 'syntheticsPathBreadcrumb',
+  });
+
+  return baseBreadcrumbs;
 };
 
 export const useBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
   const params = useUrlParams()[0]();
   const kibana = useKibana();
-  const setBreadcrumbs = kibana.services.chrome?.setBreadcrumbs;
+  const { setBreadcrumbs, isServerless } = useContext(SyntheticsSettingsContext);
   const syntheticsPath =
     kibana.services.application?.getUrlForApp(PLUGIN.SYNTHETICS_PLUGIN_ID) ?? '';
   const observabilityPath =
@@ -87,10 +96,20 @@ export const useBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
     if (setBreadcrumbs) {
       setBreadcrumbs(
         handleBreadcrumbClick(
-          makeBaseBreadcrumb(syntheticsPath, observabilityPath, params).concat(extraCrumbs),
+          makeBaseBreadcrumb(syntheticsPath, observabilityPath, params, isServerless).concat(
+            extraCrumbs
+          ),
           navigate
         )
       );
     }
-  }, [syntheticsPath, observabilityPath, extraCrumbs, navigate, params, setBreadcrumbs]);
+  }, [
+    syntheticsPath,
+    observabilityPath,
+    extraCrumbs,
+    navigate,
+    params,
+    setBreadcrumbs,
+    isServerless,
+  ]);
 };

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/render_app.tsx

@@ -20,7 +20,8 @@ export function renderApp(
   plugins: ClientPluginsSetup,
   startPlugins: ClientPluginsStart,
   appMountParameters: AppMountParameters,
-  isDev: boolean
+  isDev: boolean,
+  isServerless: boolean
 ) {
   const {
     application: { capabilities },
@@ -70,7 +71,8 @@ export function renderApp(
       }),
     setBadge,
     appMountParameters,
-    setBreadcrumbs: core.chrome.setBreadcrumbs,
+    isServerless,
+    setBreadcrumbs: startPlugins.serverless?.setBreadcrumbs ?? core.chrome.setBreadcrumbs,
   };
 
   ReactDOM.render(<SyntheticsApp {...props} />, appMountParameters.element);

x-pack/plugins/observability_solution/synthetics/public/plugin.ts

@@ -54,7 +54,7 @@ import {
   ObservabilityAIAssistantPluginStart,
   ObservabilityAIAssistantPluginSetup,
 } from '@kbn/observability-ai-assistant-plugin/public';
-import { ServerlessPluginSetup } from '@kbn/serverless/public';
+import { ServerlessPluginSetup, ServerlessPluginStart } from '@kbn/serverless/public';
 import { PLUGIN } from '../common/constants/plugin';
 import { OVERVIEW_ROUTE } from '../common/constants/ui';
 import { locators } from './apps/locators';
@@ -99,6 +99,7 @@ export interface ClientPluginsStart {
   docLinks: DocLinksStart;
   uiSettings: CoreStart['uiSettings'];
   usageCollection: UsageCollectionStart;
+  serverless: ServerlessPluginStart;
 }
 
 export interface UptimePluginServices extends Partial<CoreStart> {
@@ -157,25 +158,32 @@ export class UptimePlugin
         {
           id: 'overview',
           title: i18n.translate('xpack.synthetics.overviewPage.linkText', {
-            defaultMessage: 'Overview',
+            defaultMessage: 'Monitors',
           }),
           path: '/',
           visibleIn: this._isServerless ? ['globalSearch', 'sideNav'] : [],
         },
         {
-          id: 'management',
-          title: i18n.translate('xpack.synthetics.managementPage.linkText', {
-            defaultMessage: 'Management',
+          id: 'certificates',
+          title: i18n.translate('xpack.synthetics.deepLink.certificatesPage.linkText', {
+            defaultMessage: 'TLS Certificates',
           }),
-          path: '/monitors',
+          path: '/certificates',
           visibleIn: this._isServerless ? ['globalSearch', 'sideNav'] : [],
         },
       ],
       mount: async (params: AppMountParameters) => {
         const [coreStart, corePlugins] = await core.getStartServices();
 
         const { renderApp } = await import('./apps/synthetics/render_app');
-        return renderApp(coreStart, plugins, corePlugins, params, this.initContext.env.mode.dev);
+        return renderApp(
+          coreStart,
+          plugins,
+          corePlugins,
+          params,
+          this.initContext.env.mode.dev,
+          this._isServerless
+        );
       },
     });
   }

x-pack/plugins/serverless_observability/public/navigation_tree.ts

@@ -196,18 +196,26 @@ export const navigationTree: NavigationTreeDefinition = {
             defaultMessage: 'Synthetics',
           }),
           renderAs: 'accordion',
+          breadcrumbStatus: 'hidden',
           children: [
             {
+              title: i18n.translate('xpack.serverlessObservability.nav.synthetics.overviewItem', {
+                defaultMessage: 'Overview',
+              }),
+              id: 'synthetics-overview',
               link: 'synthetics:overview',
-              getIsActive: ({ pathNameSerialized, prepend }) => {
-                return pathNameSerialized.startsWith(prepend('/app/synthetics'));
-              },
+              breadcrumbStatus: 'hidden',
             },
             {
-              link: 'synthetics:management',
-              getIsActive: ({ pathNameSerialized, prepend }) => {
-                return pathNameSerialized.startsWith(prepend('/app/synthetics/monitors'));
-              },
+              link: 'synthetics:certificates',
+              title: i18n.translate(
+                'xpack.serverlessObservability.nav.synthetics.certificatesItem',
+                {
+                  defaultMessage: 'TLS Certificates',
+                }
+              ),
+              id: 'synthetics-certificates',
+              breadcrumbStatus: 'hidden',
             },
           ],
         },