[Serverless] Partially fix lens/maps/visualize breadcrumbs missing title

src/plugins/visualizations/kibana.jsonc

@@ -33,7 +33,8 @@
       "home",
       "share",
       "spaces",
-      "savedObjectsTaggingOss"
+      "savedObjectsTaggingOss",
+      "serverless"
     ],
     "requiredBundles": [
       "kibanaUtils",

src/plugins/visualizations/public/plugin.ts

@@ -59,6 +59,7 @@ import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import type { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
 import type { SavedSearchPublicPluginStart } from '@kbn/saved-search-plugin/public';
+import type { ServerlessPluginStart } from '@kbn/serverless/public';
 import {
   ContentManagementPublicSetup,
   ContentManagementPublicStart,
@@ -164,6 +165,7 @@ export interface VisualizationsStartDeps {
   usageCollection: UsageCollectionStart;
   savedObjectsManagement: SavedObjectsManagementPluginStart;
   contentManagement: ContentManagementPublicStart;
+  serverless?: ServerlessPluginStart;
 }
 
 /**
@@ -327,6 +329,7 @@ export class VisualizationsPlugin
           visEditorsRegistry,
           listingViewRegistry,
           unifiedSearch: pluginsStart.unifiedSearch,
+          serverless: pluginsStart.serverless,
         };
 
         params.element.classList.add('visAppWrapper');

src/plugins/visualizations/public/visualize_app/components/visualize_listing.tsx

@@ -270,6 +270,7 @@ export const VisualizeListing = () => {
       uiSettings,
       kbnUrlStateStorage,
       listingViewRegistry,
+      serverless,
     },
   } = useKibana<VisualizeServices>();
   const { pathname } = useLocation();
@@ -298,13 +299,20 @@ export const VisualizeListing = () => {
   useMount(() => {
     // Reset editor state for all apps if the visualize listing page is loaded.
     stateTransferService.clearEditorState();
-    chrome.setBreadcrumbs([
-      {
-        text: i18n.translate('visualizations.visualizeListingBreadcrumbsTitle', {
-          defaultMessage: 'Visualize Library',
-        }),
-      },
-    ]);
+    if (serverless?.setBreadcrumbs) {
+      // reset any deeper context breadcrumbs
+      // "Visualization" breadcrumb is set automatically by the serverless navigation
+      serverless.setBreadcrumbs([]);
+    } else {
+      chrome.setBreadcrumbs([
+        {
+          text: i18n.translate('visualizations.visualizeListingBreadcrumbsTitle', {
+            defaultMessage: 'Visualize Library',
+          }),
+        },
+      ]);
+    }
+
     chrome.docTitle.change(
       i18n.translate('visualizations.listingPageTitle', { defaultMessage: 'Visualize Library' })
     );

src/plugins/visualizations/public/visualize_app/types.ts

@@ -40,6 +40,7 @@ import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/
 import type { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import type { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import type { SavedSearch, SavedSearchPublicPluginStart } from '@kbn/saved-search-plugin/public';
+import type { ServerlessPluginStart } from '@kbn/serverless/public';
 import type {
   Vis,
   VisualizeEmbeddableContract,
@@ -115,6 +116,7 @@ export interface VisualizeServices extends CoreStart {
   visEditorsRegistry: VisEditorsRegistry;
   listingViewRegistry: ListingViewRegistry;
   unifiedSearch: UnifiedSearchPublicPluginStart;
+  serverless?: ServerlessPluginStart;
 }
 
 export interface VisInstance {

src/plugins/visualizations/public/visualize_app/utils/breadcrumbs.ts

@@ -45,6 +45,28 @@ export function getCreateBreadcrumbs({
   ];
 }
 
+export function getCreateServerlessBreadcrumbs({
+  byValue,
+  originatingAppName,
+  redirectToOrigin,
+}: {
+  byValue?: boolean;
+  originatingAppName?: string;
+  redirectToOrigin?: () => void;
+}) {
+  // TODO: https://github.com/elastic/kibana/issues/163488
+  // for now, serverless breadcrumbs only set the title,
+  // the rest of the breadcrumbs are handled by the serverless navigation
+  // the serverless navigation is not yet aware of the byValue/originatingApp context
+  return [
+    {
+      text: i18n.translate('visualizations.editor.createBreadcrumb', {
+        defaultMessage: 'Create',
+      }),
+    },
+  ];
+}
+
 export function getEditBreadcrumbs(
   {
     byValue,
@@ -65,3 +87,26 @@ export function getEditBreadcrumbs(
     },
   ];
 }
+
+export function getEditServerlessBreadcrumbs(
+  {
+    byValue,
+    originatingAppName,
+    redirectToOrigin,
+  }: {
+    byValue?: boolean;
+    originatingAppName?: string;
+    redirectToOrigin?: () => void;
+  },
+  title: string = defaultEditText
+) {
+  // TODO: https://github.com/elastic/kibana/issues/163488
+  // for now, serverless breadcrumbs only set the title,
+  // the rest of the breadcrumbs are handled by the serverless navigation
+  // the serverless navigation is not yet aware of the byValue/originatingApp context
+  return [
+    {
+      text: title,
+    },
+  ];
+}

src/plugins/visualizations/public/visualize_app/utils/get_top_nav_config.tsx

@@ -36,7 +36,7 @@ import {
   VisualizeEditorVisInstance,
 } from '../types';
 import { VisualizeConstants } from '../../../common/constants';
-import { getEditBreadcrumbs } from './breadcrumbs';
+import { getEditBreadcrumbs, getEditServerlessBreadcrumbs } from './breadcrumbs';
 import { VISUALIZE_APP_LOCATOR, VisualizeLocatorParams } from '../../../common/locator';
 import { getUiActions } from '../../services';
 import { VISUALIZE_EDITOR_TRIGGER, AGG_BASED_VISUALIZATION_TRIGGER } from '../../triggers';
@@ -117,6 +117,7 @@ export const getTopNavConfig = (
     savedObjectsTagging,
     presentationUtil,
     getKibanaVersion,
+    serverless,
   }: VisualizeServices
 ) => {
   const { vis, embeddableHandler } = visInstance;
@@ -202,7 +203,11 @@ export const getTopNavConfig = (
             stateTransfer.clearEditorState(VisualizeConstants.APP_ID);
           }
           chrome.docTitle.change(savedVis.lastSavedTitle);
-          chrome.setBreadcrumbs(getEditBreadcrumbs({}, savedVis.lastSavedTitle));
+          if (serverless?.setBreadcrumbs) {
+            serverless.setBreadcrumbs(getEditServerlessBreadcrumbs({}, savedVis.lastSavedTitle));
+          } else {
+            chrome.setBreadcrumbs(getEditBreadcrumbs({}, savedVis.lastSavedTitle));
+          }
 
           if (id !== visualizationIdFromUrl) {
             history.replace({

src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.ts

@@ -12,7 +12,12 @@ import { parse } from 'query-string';
 import { i18n } from '@kbn/i18n';
 
 import { getVisualizationInstance } from '../get_visualization_instance';
-import { getEditBreadcrumbs, getCreateBreadcrumbs } from '../breadcrumbs';
+import {
+  getEditBreadcrumbs,
+  getCreateBreadcrumbs,
+  getCreateServerlessBreadcrumbs,
+  getEditServerlessBreadcrumbs,
+} from '../breadcrumbs';
 import { SavedVisInstance, VisualizeServices, IEditorController } from '../../types';
 import { VisualizeConstants } from '../../../../common/constants';
 import { getTypes } from '../../../services';
@@ -46,6 +51,7 @@ export const useSavedVisInstance = (
       stateTransferService,
       visEditorsRegistry,
       application: { navigateToApp },
+      serverless,
     } = services;
     const getSavedVisInstance = async () => {
       try {
@@ -104,18 +110,35 @@ export const useSavedVisInstance = (
         const redirectToOrigin = originatingApp ? () => navigateToApp(originatingApp) : undefined;
 
         if (savedVis.id) {
-          chrome.setBreadcrumbs(
-            getEditBreadcrumbs({ originatingAppName, redirectToOrigin }, savedVis.title)
-          );
+          if (serverless?.setBreadcrumbs) {
+            serverless.setBreadcrumbs(
+              getEditServerlessBreadcrumbs({ originatingAppName, redirectToOrigin }, savedVis.title)
+            );
+          } else {
+            chrome.setBreadcrumbs(
+              getEditBreadcrumbs({ originatingAppName, redirectToOrigin }, savedVis.title)
+            );
+          }
+
           chrome.docTitle.change(savedVis.title);
         } else {
-          chrome.setBreadcrumbs(
-            getCreateBreadcrumbs({
-              byValue: Boolean(originatingApp),
-              originatingAppName,
-              redirectToOrigin,
-            })
-          );
+          if (serverless?.setBreadcrumbs) {
+            serverless.setBreadcrumbs(
+              getCreateServerlessBreadcrumbs({
+                byValue: Boolean(originatingApp),
+                originatingAppName,
+                redirectToOrigin,
+              })
+            );
+          } else {
+            chrome.setBreadcrumbs(
+              getCreateBreadcrumbs({
+                byValue: Boolean(originatingApp),
+                originatingAppName,
+                redirectToOrigin,
+              })
+            );
+          }
         }
 
         let visEditorController;

src/plugins/visualizations/public/visualize_app/utils/use/use_vis_byvalue.ts

@@ -11,7 +11,7 @@ import { useEffect, useRef, useState } from 'react';
 import { VisualizeInput } from '../../..';
 import { ByValueVisInstance, VisualizeServices, IEditorController } from '../../types';
 import { getVisualizationInstanceFromInput } from '../get_visualization_instance';
-import { getEditBreadcrumbs } from '../breadcrumbs';
+import { getEditBreadcrumbs, getEditServerlessBreadcrumbs } from '../breadcrumbs';
 
 export const useVisByValue = (
   services: VisualizeServices,
@@ -33,6 +33,7 @@ export const useVisByValue = (
       application: { navigateToApp },
       stateTransferService,
       visEditorsRegistry,
+      serverless,
     } = services;
     const getVisInstance = async () => {
       if (!valueInput || loaded.current || !visEditorRef.current) {
@@ -59,9 +60,16 @@ export const useVisByValue = (
       const redirectToOrigin = originatingApp
         ? () => navigateToApp(originatingApp, { path: originatingPath })
         : undefined;
-      chrome?.setBreadcrumbs(
-        getEditBreadcrumbs({ byValue: true, originatingAppName, redirectToOrigin })
-      );
+
+      if (serverless?.setBreadcrumbs) {
+        serverless.setBreadcrumbs(
+          getEditServerlessBreadcrumbs({ byValue: true, originatingAppName, redirectToOrigin })
+        );
+      } else {
+        chrome?.setBreadcrumbs(
+          getEditBreadcrumbs({ byValue: true, originatingAppName, redirectToOrigin })
+        );
+      }
 
       loaded.current = true;
       setState({

src/plugins/visualizations/tsconfig.json

@@ -61,7 +61,8 @@
     "@kbn/content-management-table-list-view-table",
     "@kbn/content-management-tabbed-table-list-view",
     "@kbn/content-management-table-list-view",
-    "@kbn/content-management-utils"
+    "@kbn/content-management-utils",
+    "@kbn/serverless"
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/lens/kibana.jsonc

@@ -45,7 +45,8 @@
       "taskManager",
       "globalSearch",
       "savedObjectsTagging",
-      "spaces"
+      "spaces",
+      "serverless"
     ],
     "requiredBundles": [
       "unifiedSearch",

x-pack/plugins/lens/public/app_plugin/app.test.tsx

@@ -33,6 +33,7 @@ import { TopNavMenuData } from '@kbn/navigation-plugin/public';
 import { LensByValueInput } from '../embeddable/embeddable';
 import { SavedObjectReference } from '@kbn/core/types';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { serverlessMock } from '@kbn/serverless/public/mocks';
 import moment from 'moment';
 
 import { setState, LensAppState } from '../state_management';
@@ -365,6 +366,30 @@ describe('Lens App', () => {
         { text: 'Daaaaaaadaumching!' },
       ]);
     });
+
+    it('sets serverless breadcrumbs when the document title changes when serverless service is available', async () => {
+      const serverless = serverlessMock.createStart();
+      const { instance, services, lensStore } = await mountWith({
+        services: {
+          ...makeDefaultServices(),
+          serverless,
+        },
+      });
+      expect(services.chrome.setBreadcrumbs).not.toHaveBeenCalled();
+      expect(serverless.setBreadcrumbs).toHaveBeenCalledWith({ text: 'Create' });
+
+      await act(async () => {
+        instance.setProps({ initialInput: { savedObjectId: breadcrumbDocSavedObjectId } });
+        lensStore.dispatch(
+          setState({
+            persistedDoc: breadcrumbDoc,
+          })
+        );
+      });
+
+      expect(services.chrome.setBreadcrumbs).not.toHaveBeenCalled();
+      expect(serverless.setBreadcrumbs).toHaveBeenCalledWith({ text: 'Daaaaaaadaumching!' });
+    });
   });
 
   describe('TopNavMenu#showDatePicker', () => {

x-pack/plugins/lens/public/app_plugin/app.tsx

@@ -93,6 +93,7 @@ export function App({
     dashboardFeatureFlag,
     locator,
     share,
+    serverless,
   } = lensAppServices;
 
   const saveAndExit = useRef<() => void>();
@@ -288,8 +289,18 @@ export function App({
         },
       });
     }
-    breadcrumbs.push({ text: currentDocTitle });
-    chrome.setBreadcrumbs(breadcrumbs);
+
+    const currentDocBreadcrumb: EuiBreadcrumb = { text: currentDocTitle };
+    breadcrumbs.push(currentDocBreadcrumb);
+    if (serverless?.setBreadcrumbs) {
+      // TODO: https://github.com/elastic/kibana/issues/163488
+      // for now, serverless breadcrumbs only set the title,
+      // the rest of the breadcrumbs are handled by the serverless navigation
+      // the serverless navigation is not yet aware of the byValue/originatingApp context
+      serverless.setBreadcrumbs(currentDocBreadcrumb);
+    } else {
+      chrome.setBreadcrumbs(breadcrumbs);
+    }
   }, [
     dashboardFeatureFlag.allowByValueEmbeddables,
     getOriginatingAppName,
@@ -300,6 +311,7 @@ export function App({
     isLinkedToOriginatingApp,
     persistedDoc,
     initialContext,
+    serverless,
   ]);
 
   const switchDatasource = useCallback(() => {

x-pack/plugins/lens/public/app_plugin/mounter.tsx

@@ -101,6 +101,7 @@ export async function getLensServices(
     spaces,
     share,
     unifiedSearch,
+    serverless,
   } = startDependencies;
 
   const storage = new Storage(localStorage);
@@ -147,6 +148,7 @@ export async function getLensServices(
     unifiedSearch,
     docLinks: coreStart.docLinks,
     locator,
+    serverless,
   };
 }