[Maps] Originating App Breadcrumb (#75692)

* [Maps] Originating App Breadcrumb

* pass getHasUnsavedChanges instead of passing boolean

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/maps/public/routing/routes/maps_app/get_breadcrumbs.test.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getBreadcrumbs } from './get_breadcrumbs';
+
+jest.mock('../../../kibana_services', () => {});
+jest.mock('../../maps_router', () => {});
+
+const getHasUnsavedChanges = () => {
+  return false;
+};
+
+test('should get breadcrumbs "Maps / mymap"', () => {
+  const breadcrumbs = getBreadcrumbs({ title: 'mymap', getHasUnsavedChanges });
+  expect(breadcrumbs.length).toBe(2);
+  expect(breadcrumbs[0].text).toBe('Maps');
+  expect(breadcrumbs[1].text).toBe('mymap');
+});
+
+test('should get breadcrumbs "Dashboard / Maps / mymap" with originatingApp', () => {
+  const breadcrumbs = getBreadcrumbs({
+    title: 'mymap',
+    getHasUnsavedChanges,
+    originatingApp: 'dashboardId',
+    getAppNameFromId: (appId) => {
+      return 'Dashboard';
+    },
+  });
+  expect(breadcrumbs.length).toBe(3);
+  expect(breadcrumbs[0].text).toBe('Dashboard');
+  expect(breadcrumbs[1].text).toBe('Maps');
+  expect(breadcrumbs[2].text).toBe('mymap');
+});

x-pack/plugins/maps/public/routing/routes/maps_app/get_breadcrumbs.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { getNavigateToApp } from '../../../kibana_services';
+// @ts-expect-error
+import { goToSpecifiedPath } from '../../maps_router';
+
+export const unsavedChangesWarning = i18n.translate(
+  'xpack.maps.breadCrumbs.unsavedChangesWarning',
+  {
+    defaultMessage: 'Your map has unsaved changes. Are you sure you want to leave?',
+  }
+);
+
+export function getBreadcrumbs({
+  title,
+  getHasUnsavedChanges,
+  originatingApp,
+  getAppNameFromId,
+}: {
+  title: string;
+  getHasUnsavedChanges: () => boolean;
+  originatingApp?: string;
+  getAppNameFromId?: (id: string) => string;
+}) {
+  const breadcrumbs = [];
+  if (originatingApp && getAppNameFromId) {
+    breadcrumbs.push({
+      onClick: () => {
+        getNavigateToApp()(originatingApp);
+      },
+      text: getAppNameFromId(originatingApp),
+    });
+  }
+
+  breadcrumbs.push({
+    text: i18n.translate('xpack.maps.mapController.mapsBreadcrumbLabel', {
+      defaultMessage: 'Maps',
+    }),
+    onClick: () => {
+      if (getHasUnsavedChanges()) {
+        const navigateAway = window.confirm(unsavedChangesWarning);
+        if (navigateAway) {
+          goToSpecifiedPath('/');
+        }
+      } else {
+        goToSpecifiedPath('/');
+      }
+    },
+  });
+
+  breadcrumbs.push({ text: title });
+
+  return breadcrumbs;
+}

x-pack/plugins/maps/public/routing/routes/maps_app/maps_app_view.js

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { i18n } from '@kbn/i18n';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import _ from 'lodash';
 import { DEFAULT_IS_LAYER_TOC_OPEN } from '../../../reducers/ui';
@@ -29,13 +28,9 @@ import { AppStateManager } from '../../state_syncing/app_state_manager';
 import { startAppStateSyncing } from '../../state_syncing/app_sync';
 import { esFilters } from '../../../../../../../src/plugins/data/public';
 import { MapContainer } from '../../../connected_components/map_container';
-import { goToSpecifiedPath } from '../../maps_router';
 import { getIndexPatternsFromIds } from '../../../index_pattern_util';
 import { getTopNavConfig } from './top_nav_config';
-
-const unsavedChangesWarning = i18n.translate('xpack.maps.breadCrumbs.unsavedChangesWarning', {
-  defaultMessage: 'Your map has unsaved changes. Are you sure you want to leave?',
-});
+import { getBreadcrumbs, unsavedChangesWarning } from './get_breadcrumbs';
 
 export class MapsAppView extends React.Component {
   _globalSyncUnsubscribe = null;
@@ -104,7 +99,7 @@ export class MapsAppView extends React.Component {
     getCoreChrome().setBreadcrumbs([]);
   }
 
-  _hasUnsavedChanges() {
+  _hasUnsavedChanges = () => {
     const savedLayerList = this.props.savedMap.getLayerList();
     return !savedLayerList
       ? !_.isEqual(this.props.layerListConfigOnly, this.state.initialLayerListConfig)
@@ -114,27 +109,16 @@ export class MapsAppView extends React.Component {
         // Need to perform the same process for layerListConfigOnly to compare apples to apples
         // and avoid undefined properties in layerListConfigOnly triggering unsaved changes.
         !_.isEqual(JSON.parse(JSON.stringify(this.props.layerListConfigOnly)), savedLayerList);
-  }
+  };
 
   _setBreadcrumbs = () => {
-    getCoreChrome().setBreadcrumbs([
-      {
-        text: i18n.translate('xpack.maps.mapController.mapsBreadcrumbLabel', {
-          defaultMessage: 'Maps',
-        }),
-        onClick: () => {
-          if (this._hasUnsavedChanges()) {
-            const navigateAway = window.confirm(unsavedChangesWarning);
-            if (navigateAway) {
-              goToSpecifiedPath('/');
-            }
-          } else {
-            goToSpecifiedPath('/');
-          }
-        },
-      },
-      { text: this.props.savedMap.title },
-    ]);
+    const breadcrumbs = getBreadcrumbs({
+      title: this.props.savedMap.title,
+      getHasUnsavedChanges: this._hasUnsavedChanges,
+      originatingApp: this.state.originatingApp,
+      getAppNameFromId: this.props.stateTransfer.getAppNameFromId,
+    });
+    getCoreChrome().setBreadcrumbs(breadcrumbs);
   };
 
   _updateFromGlobalState = ({ changes, state: globalState }) => {