Remove use of copied MANAGEMENT_BREADCRUMBS and use setBreadcrumbs …

…from management section's mount (#57324) (#57347)

x-pack/plugins/watcher/__jest__/client_integration/helpers/app_context.mock.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { of } from 'rxjs';
 import { ComponentType } from 'enzyme';
 import {
-  chromeServiceMock,
   docLinksServiceMock,
   uiSettingsServiceMock,
   notificationServiceMock,
@@ -31,8 +30,7 @@ class MockTimeBuckets {
 export const mockContextValue = {
   licenseStatus$: of<LicenseStatus>({ valid: true }),
   docLinks: docLinksServiceMock.createStartContract(),
-  chrome: chromeServiceMock.createStartContract(),
-  MANAGEMENT_BREADCRUMB: { text: 'test' },
+  setBreadcrumbs: jest.fn(),
   createTimeBuckets: () => new MockTimeBuckets(),
   uiSettings: uiSettingsServiceMock.createSetupContract(),
   toasts: notificationServiceMock.createSetupContract().toasts,

x-pack/plugins/watcher/public/application/app.tsx

@@ -6,13 +6,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Observable } from 'rxjs';
-import {
-  ChromeStart,
-  DocLinksStart,
-  HttpSetup,
-  ToastsSetup,
-  IUiSettingsClient,
-} from 'kibana/public';
+import { DocLinksStart, HttpSetup, ToastsSetup, IUiSettingsClient } from 'kibana/public';
 
 import {
   HashRouter,
@@ -27,6 +21,8 @@ import { EuiCallOut, EuiLink } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { RegisterManagementAppArgs } from '../../../../../src/plugins/management/public';
+
 import { LicenseStatus } from '../../common/types/license_status';
 import { WatchStatus } from './sections/watch_status/components/watch_status';
 import { WatchEdit } from './sections/watch_edit/components/watch_edit';
@@ -42,15 +38,14 @@ const ShareRouter = withRouter(({ children, history }: RouteComponentProps & { c
 });
 
 export interface AppDeps {
-  chrome: ChromeStart;
   docLinks: DocLinksStart;
   toasts: ToastsSetup;
   http: HttpSetup;
   uiSettings: IUiSettingsClient;
   theme: ChartsPluginSetup['theme'];
   createTimeBuckets: () => any;
   licenseStatus$: Observable<LicenseStatus>;
-  MANAGEMENT_BREADCRUMB: any;
+  setBreadcrumbs: Parameters<RegisterManagementAppArgs['mount']>[0]['setBreadcrumbs'];
 }
 
 export const App = (deps: AppDeps) => {

x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx

@@ -96,7 +96,7 @@ export const WatchEdit = ({
   };
 }) => {
   // hooks
-  const { MANAGEMENT_BREADCRUMB, chrome } = useAppContext();
+  const { setBreadcrumbs } = useAppContext();
   const [{ watch, loadError }, dispatch] = useReducer(watchReducer, { watch: null });
 
   const setWatchProperty = (property: string, value: any) => {
@@ -128,12 +128,8 @@ export const WatchEdit = ({
   }, [id, type]);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([
-      MANAGEMENT_BREADCRUMB,
-      listBreadcrumb,
-      id ? editBreadcrumb : createBreadcrumb,
-    ]);
-  }, [id, chrome, MANAGEMENT_BREADCRUMB]);
+    setBreadcrumbs([listBreadcrumb, id ? editBreadcrumb : createBreadcrumb]);
+  }, [id, setBreadcrumbs]);
 
   const errorCode = getPageErrorCode(loadError);
   if (errorCode) {

x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx

@@ -46,8 +46,7 @@ import { useAppContext } from '../../../app_context';
 export const WatchList = () => {
   // hooks
   const {
-    chrome,
-    MANAGEMENT_BREADCRUMB,
+    setBreadcrumbs,
     links: { watcherGettingStartedUrl },
   } = useAppContext();
   const [selection, setSelection] = useState([]);
@@ -57,8 +56,8 @@ export const WatchList = () => {
   const [deletedWatches, setDeletedWatches] = useState<string[]>([]);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([MANAGEMENT_BREADCRUMB, listBreadcrumb]);
-  }, [chrome, MANAGEMENT_BREADCRUMB]);
+    setBreadcrumbs([listBreadcrumb]);
+  }, [setBreadcrumbs]);
 
   const { isLoading: isWatchesLoading, data: watches, error } = useLoadWatches(
     REFRESH_INTERVALS.WATCH_LIST

x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx

@@ -67,7 +67,7 @@ export const WatchStatus = ({
     };
   };
 }) => {
-  const { chrome, MANAGEMENT_BREADCRUMB, toasts } = useAppContext();
+  const { setBreadcrumbs, toasts } = useAppContext();
   const {
     error: watchDetailError,
     data: watchDetail,
@@ -80,8 +80,8 @@ export const WatchStatus = ({
   const [isTogglingActivation, setIsTogglingActivation] = useState<boolean>(false);
 
   useEffect(() => {
-    chrome.setBreadcrumbs([MANAGEMENT_BREADCRUMB, listBreadcrumb, statusBreadcrumb]);
-  }, [id, chrome, MANAGEMENT_BREADCRUMB]);
+    setBreadcrumbs([listBreadcrumb, statusBreadcrumb]);
+  }, [id, setBreadcrumbs]);
 
   const errorCode = getPageErrorCode(watchDetailError);
 

x-pack/plugins/watcher/public/legacy/index.ts

@@ -3,13 +3,4 @@
  * 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';
-
 export { TimeBuckets } from './time_buckets';
-
-export const MANAGEMENT_BREADCRUMB = Object.freeze({
-  text: i18n.translate('xpack.watcher.management.breadcrumb', {
-    defaultMessage: 'Management',
-  }),
-  href: '#/management',
-});

x-pack/plugins/watcher/public/plugin.ts

@@ -12,7 +12,7 @@ import { FeatureCatalogueCategory } from '../../../../src/plugins/home/public';
 import { LicenseStatus } from '../common/types/license_status';
 
 import { ILicense, LICENSE_CHECK_STATE } from '../../licensing/public';
-import { TimeBuckets, MANAGEMENT_BREADCRUMB } from './legacy';
+import { TimeBuckets } from './legacy';
 import { PLUGIN } from '../common/constants';
 import { Dependencies } from './types';
 
@@ -37,9 +37,9 @@ export class WatcherUIPlugin implements Plugin<void, void, Dependencies, any> {
         'xpack.watcher.sections.watchList.managementSection.watcherDisplayName',
         { defaultMessage: 'Watcher' }
       ),
-      mount: async ({ element }) => {
+      mount: async ({ element, setBreadcrumbs }) => {
         const [core] = await getStartServices();
-        const { chrome, i18n: i18nDep, docLinks, savedObjects } = core;
+        const { i18n: i18nDep, docLinks, savedObjects } = core;
         const { boot } = await import('./application/boot');
 
         return boot({
@@ -51,12 +51,11 @@ export class WatcherUIPlugin implements Plugin<void, void, Dependencies, any> {
           http,
           uiSettings,
           docLinks,
-          chrome,
+          setBreadcrumbs,
           theme: charts.theme,
           savedObjects: savedObjects.client,
           I18nContext: i18nDep.Context,
           createTimeBuckets: () => new TimeBuckets(uiSettings, data),
-          MANAGEMENT_BREADCRUMB,
         });
       },
     });