From 958f8fa32d89c18b0d615761310e9b1c29842646 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Thu, 5 Nov 2020 18:27:04 +0100 Subject: [PATCH] [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 --- .../edit_policy/edit_policy.helpers.tsx | 15 ++++- .../public/application/index.tsx | 5 +- .../edit_policy/edit_policy.container.tsx | 12 +++- .../policy_table/policy_table.container.tsx | 10 ++- .../application/services/breadcrumbs.mock.ts | 13 ++++ .../application/services/breadcrumbs.ts | 67 +++++++++++++++++++ .../application/services/documentation.ts | 6 ++ .../public/application/services/http.ts | 6 ++ .../application/services/notification.ts | 6 ++ .../public/application/services/ui_metric.ts | 6 ++ .../public/plugin.tsx | 7 +- .../public/types.ts | 3 + 12 files changed, 151 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/services/breadcrumbs.mock.ts create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/services/breadcrumbs.ts diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx index ad61641ea1e36a..0b9f47e188d152 100644 --- a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx +++ b/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(EditPolicy, testBedConfig); +const breadcrumbService = createBreadcrumbsMock(); + +const MyComponent = (props: any) => { + return ( + + + + ); +}; + +const initTestBed = registerTestBed(MyComponent, testBedConfig); type SetupReturn = ReturnType; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/index.tsx b/x-pack/plugins/index_lifecycle_management/public/application/index.tsx index 7a7fd20e96c638..3d4cc7dbbd1d49 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/index.tsx +++ b/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( - + , diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx index dfc3e7194da066..c82a420b748571 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.container.tsx +++ b/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 { + const { + services: { breadcrumbService }, + } = useKibana(); const { error, isLoading, data: policies, resendRequest } = useLoadPoliciesList(false); + + useEffect(() => { + breadcrumbService.setBreadcrumbs('editPolicy'); + }, [breadcrumbService]); if (isLoading) { return ( = navigateToApp, history, }) => { + const { + services: { breadcrumbService }, + } = useKibana(); const { data: policies, isLoading, error, resendRequest } = useLoadPoliciesList(true); + useEffect(() => { + breadcrumbService.setBreadcrumbs('policies'); + }, [breadcrumbService]); + if (isLoading) { return ( { + const breadcrumbService = new BreadcrumbService(); + breadcrumbService.setup(jest.fn()); + return breadcrumbService; +}; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/breadcrumbs.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/breadcrumbs.ts new file mode 100644 index 00000000000000..7f9a5b8a3dab16 --- /dev/null +++ b/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); + } +} diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/documentation.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/documentation.ts index d459d304d5c71f..b80de8a1477a08 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/services/documentation.ts +++ b/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; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts index d61ed1ad25ddec..b7761aec3fb8e6 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts +++ b/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, diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/notification.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/notification.ts index aa3ac9ea75c22c..e8ef2d9b224433 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/services/notification.ts +++ b/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; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/ui_metric.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/ui_metric.ts index 274d3d1ca97f3f..a94c0a8b8ef59a 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/services/ui_metric.ts +++ b/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'; diff --git a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx index 24ce036c0e0584..6300c6bfc7eb1d 100644 --- a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx +++ b/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 ); diff --git a/x-pack/plugins/index_lifecycle_management/public/types.ts b/x-pack/plugins/index_lifecycle_management/public/types.ts index c9b9b063cd45fc..6b11830b424af0 100644 --- a/x-pack/plugins/index_lifecycle_management/public/types.ts +++ b/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; }