[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;
 }