[ILM] Fix breadcrumbs (#82594) (#82700)

* added breadcrumb service and call on ILM pages

* add notices to legacy pattern services

* fix jest tests and create mock

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -14,6 +14,9 @@ import { DataTierAllocationType } from '../../../public/application/sections/edi
 
 import { Phases as PolicyPhases } from '../../../common/types';
 
+import { KibanaContextProvider } from '../../../public/shared_imports';
+import { createBreadcrumbsMock } from '../../../public/application/services/breadcrumbs.mock';
+
 type Phases = keyof PolicyPhases;
 
 import { POLICY_NAME } from './constants';
@@ -48,7 +51,17 @@ const testBedConfig: TestBedConfig = {
   },
 };
 
-const initTestBed = registerTestBed<TestSubjects>(EditPolicy, testBedConfig);
+const breadcrumbService = createBreadcrumbsMock();
+
+const MyComponent = (props: any) => {
+  return (
+    <KibanaContextProvider services={{ breadcrumbService }}>
+      <EditPolicy {...props} />
+    </KibanaContextProvider>
+  );
+};
+
+const initTestBed = registerTestBed<TestSubjects>(MyComponent, testBedConfig);
 
 type SetupReturn = ReturnType<typeof setup>;
 

x-pack/plugins/index_lifecycle_management/public/application/index.tsx

@@ -14,17 +14,20 @@ import { KibanaContextProvider } from '../shared_imports';
 
 import { App } from './app';
 
+import { BreadcrumbService } from './services/breadcrumbs';
+
 export const renderApp = (
   element: Element,
   I18nContext: I18nStart['Context'],
   history: ScopedHistory,
   navigateToApp: ApplicationStart['navigateToApp'],
   getUrlForApp: ApplicationStart['getUrlForApp'],
+  breadcrumbService: BreadcrumbService,
   cloud?: CloudSetup
 ): UnmountCallback => {
   render(
     <I18nContext>
-      <KibanaContextProvider services={{ cloud }}>
+      <KibanaContextProvider services={{ cloud, breadcrumbService }}>
         <App history={history} navigateToApp={navigateToApp} getUrlForApp={getUrlForApp} />
       </KibanaContextProvider>
     </I18nContext>,

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx

@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+
+import { useKibana } from '../../../shared_imports';
+
 import { useLoadPoliciesList } from '../../services/api';
 
 import { EditPolicy as PresentationComponent } from './edit_policy';
@@ -33,7 +36,14 @@ export const EditPolicy: React.FunctionComponent<Props & RouteComponentProps<Rou
   getUrlForApp,
   history,
 }) => {
+  const {
+    services: { breadcrumbService },
+  } = useKibana();
   const { error, isLoading, data: policies, resendRequest } = useLoadPoliciesList(false);
+
+  useEffect(() => {
+    breadcrumbService.setBreadcrumbs('editPolicy');
+  }, [breadcrumbService]);
   if (isLoading) {
     return (
       <EuiEmptyPrompt

x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx

@@ -4,12 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ApplicationStart } from 'kibana/public';
 import { RouteComponentProps } from 'react-router-dom';
 import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { PolicyTable as PresentationComponent } from './policy_table';
+import { useKibana } from '../../../shared_imports';
 import { useLoadPoliciesList } from '../../services/api';
 
 interface Props {
@@ -20,8 +21,15 @@ export const PolicyTable: React.FunctionComponent<Props & RouteComponentProps> =
   navigateToApp,
   history,
 }) => {
+  const {
+    services: { breadcrumbService },
+  } = useKibana();
   const { data: policies, isLoading, error, resendRequest } = useLoadPoliciesList(true);
 
+  useEffect(() => {
+    breadcrumbService.setBreadcrumbs('policies');
+  }, [breadcrumbService]);
+
   if (isLoading) {
     return (
       <EuiEmptyPrompt

x-pack/plugins/index_lifecycle_management/public/application/services/breadcrumbs.mock.ts

@@ -0,0 +1,13 @@
+/*
+ * 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 { BreadcrumbService } from './breadcrumbs';
+
+export const createBreadcrumbsMock = () => {
+  const breadcrumbService = new BreadcrumbService();
+  breadcrumbService.setup(jest.fn());
+  return breadcrumbService;
+};

x-pack/plugins/index_lifecycle_management/public/application/services/breadcrumbs.ts

@@ -0,0 +1,67 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { ManagementAppMountParams } from '../../../../../../src/plugins/management/public';
+
+type SetBreadcrumbs = ManagementAppMountParams['setBreadcrumbs'];
+
+// Build the breadcrumbs for this app
+const breadcrumbs = (function () {
+  const policies: ChromeBreadcrumb[] = [
+    {
+      text: i18n.translate('xpack.indexLifecycleMgmt.breadcrumb.homeLabel', {
+        defaultMessage: 'Index Lifecycle Management',
+      }),
+      href: `/policies`,
+    },
+  ];
+
+  const editPolicy: ChromeBreadcrumb[] = [
+    ...policies,
+    {
+      text: i18n.translate('xpack.indexLifecycleMgmt.breadcrumb.editPolicyLabel', {
+        defaultMessage: 'Edit policy',
+      }),
+      href: undefined,
+    },
+  ];
+
+  return {
+    policies,
+    editPolicy,
+  };
+})();
+
+export class BreadcrumbService {
+  private setBreadcrumbsHandler?: SetBreadcrumbs;
+
+  public setup(setBreadcrumbsHandler: SetBreadcrumbs): void {
+    this.setBreadcrumbsHandler = setBreadcrumbsHandler;
+  }
+
+  public setBreadcrumbs(type: keyof typeof breadcrumbs): void {
+    if (!this.setBreadcrumbsHandler) {
+      throw new Error(`BreadcrumbService#setup() must be called first!`);
+    }
+
+    const newBreadcrumbs = breadcrumbs[type] ? [...breadcrumbs[type]] : [...breadcrumbs.policies];
+
+    // Pop off last breadcrumb
+    const lastBreadcrumb = newBreadcrumbs.pop() as {
+      text: string;
+      href?: string;
+    };
+
+    // Put last breadcrumb back without href
+    newBreadcrumbs.push({
+      ...lastBreadcrumb,
+      href: undefined,
+    });
+
+    this.setBreadcrumbsHandler(newBreadcrumbs);
+  }
+}

x-pack/plugins/index_lifecycle_management/public/application/services/documentation.ts

@@ -4,6 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/**
+ * TODO:
+ * IMPORTANT: Please see how {@link BreadcrumbService} is set up for an example of how these services should be set up
+ * in future. The pattern in this file is legacy and should be updated to conform to the plugin lifecycle.
+ */
+
 export let skippingDisconnectedClustersUrl: string;
 export let remoteClustersUrl: string;
 export let transportPortUrl: string;

x-pack/plugins/index_lifecycle_management/public/application/services/http.ts

@@ -4,6 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/**
+ * TODO:
+ * IMPORTANT: Please see how {@link BreadcrumbService} is set up for an example of how these services should be set up
+ * in future. The pattern in this file is legacy and should be updated to conform to the plugin lifecycle.
+ */
+
 import { HttpSetup } from 'src/core/public';
 import {
   UseRequestConfig,

x-pack/plugins/index_lifecycle_management/public/application/services/notification.ts

@@ -4,6 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/**
+ * TODO:
+ * IMPORTANT: Please see how {@link BreadcrumbService} is set up for an example of how these services should be set up
+ * in future. The pattern in this file is legacy and should be updated to conform to the plugin lifecycle.
+ */
+
 import { IToasts, FatalErrorsSetup } from 'src/core/public';
 
 export let toasts: IToasts;

x-pack/plugins/index_lifecycle_management/public/application/services/ui_metric.ts

@@ -4,6 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+/**
+ * TODO:
+ * IMPORTANT: Please see how {@link BreadcrumbService} is set up for an example of how these services should be set up
+ * in future. The pattern in this file is legacy and should be updated to conform to the plugin lifecycle.
+ */
+
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/public';
 import { UiStatsMetricType } from '@kbn/analytics';
 

x-pack/plugins/index_lifecycle_management/public/plugin.tsx

@@ -12,12 +12,15 @@ import { init as initHttp } from './application/services/http';
 import { init as initDocumentation } from './application/services/documentation';
 import { init as initUiMetric } from './application/services/ui_metric';
 import { init as initNotification } from './application/services/notification';
+import { BreadcrumbService } from './application/services/breadcrumbs';
 import { addAllExtensions } from './extend_index_management';
 import { PluginsDependencies, ClientConfigType } from './types';
 
 export class IndexLifecycleManagementPlugin {
   constructor(private readonly initializerContext: PluginInitializerContext) {}
 
+  private breadcrumbService = new BreadcrumbService();
+
   public setup(coreSetup: CoreSetup, plugins: PluginsDependencies) {
     const {
       ui: { enabled: isIndexLifecycleManagementUiEnabled },
@@ -42,7 +45,7 @@ export class IndexLifecycleManagementPlugin {
         id: PLUGIN.ID,
         title: PLUGIN.TITLE,
         order: 2,
-        mount: async ({ element, history }) => {
+        mount: async ({ element, history, setBreadcrumbs }) => {
           const [coreStart] = await getStartServices();
           const {
             chrome: { docTitle },
@@ -52,6 +55,7 @@ export class IndexLifecycleManagementPlugin {
           } = coreStart;
 
           docTitle.change(PLUGIN.TITLE);
+          this.breadcrumbService.setup(setBreadcrumbs);
 
           // Initialize additional services.
           initDocumentation(
@@ -66,6 +70,7 @@ export class IndexLifecycleManagementPlugin {
             history,
             navigateToApp,
             getUrlForApp,
+            this.breadcrumbService,
             cloud
           );
 

x-pack/plugins/index_lifecycle_management/public/types.ts

@@ -10,6 +10,8 @@ import { ManagementSetup } from '../../../../src/plugins/management/public';
 import { IndexManagementPluginSetup } from '../../index_management/public';
 import { CloudSetup } from '../../cloud/public';
 
+import { BreadcrumbService } from './application/services/breadcrumbs';
+
 export interface PluginsDependencies {
   usageCollection?: UsageCollectionSetup;
   management: ManagementSetup;
@@ -25,5 +27,6 @@ export interface ClientConfigType {
 }
 
 export interface AppServicesContext {
+  breadcrumbService: BreadcrumbService;
   cloud?: CloudSetup;
 }