From b57b80efbddc6b0edcd577edacc4b1c3030432f5 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 27 May 2021 16:20:10 -0700 Subject: [PATCH 1/4] Migrate ILM to ManagementPageLayout. --- .../public/application/index.tsx | 5 +- .../edit_policy/edit_policy.container.tsx | 71 ++-- .../sections/edit_policy/edit_policy.tsx | 352 +++++++++--------- .../policy_table/policy_table.container.tsx | 76 ++-- .../sections/policy_table/policy_table.tsx | 109 +++--- .../public/plugin.tsx | 4 +- .../public/types.ts | 3 + 7 files changed, 312 insertions(+), 308 deletions(-) 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 ed0a4a83b06dbe..5625522f23b76c 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/index.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/index.tsx @@ -9,6 +9,8 @@ import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { I18nStart, ScopedHistory, ApplicationStart } from 'kibana/public'; import { UnmountCallback } from 'src/core/public'; + +import type { ManagementAppMountParams } from '../../../../../src/plugins/management/public'; import { CloudSetup } from '../../../cloud/public'; import { ILicense } from '../../../licensing/public'; @@ -26,11 +28,12 @@ export const renderApp = ( getUrlForApp: ApplicationStart['getUrlForApp'], breadcrumbService: BreadcrumbService, license: ILicense, + managementPageLayout: ManagementAppMountParams['managementPageLayout'], cloud?: CloudSetup ): UnmountCallback => { render( - + { const { - services: { breadcrumbService, license }, + services: { breadcrumbService, license, managementPageLayout: ManagementPageLayout }, } = useKibana(); const { error, isLoading, data: policies, resendRequest } = useLoadPoliciesList(false); @@ -52,43 +52,48 @@ export const EditPolicy: React.FunctionComponent} - body={ - - } - /> + + } + body={ + + } + /> + ); } + if (error || !policies) { const { statusCode, message } = error ? error : { statusCode: '', message: '' }; return ( - - - - } - body={ -

- {message} ({statusCode}) -

- } - actions={ - - - - } - /> + + + + + } + body={ +

+ {message} ({statusCode}) +

+ } + actions={ + + + + } + /> + ); } diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx index d7368249d76e8c..c586b1a249f378 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx @@ -19,11 +19,6 @@ import { EuiFlexItem, EuiFormRow, EuiHorizontalRule, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentHeader, - EuiPageContentHeaderSection, EuiSpacer, EuiSwitch, EuiText, @@ -76,7 +71,7 @@ export const EditPolicy: React.FunctionComponent = ({ history }) => { } = useEditPolicyContext(); const { - services: { cloud }, + services: { cloud, managementPageLayout: ManagementPageLayout }, } = useKibana(); const [saveAsNew, setSaveAsNew] = useState(false); @@ -153,201 +148,196 @@ export const EditPolicy: React.FunctionComponent = ({ history }) => { }; return ( - - - - - - -

- {isNewPolicy - ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage', { - defaultMessage: 'Create policy', - }) - : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.editPolicyMessage', { - defaultMessage: 'Edit policy {originalPolicyName}', - values: { originalPolicyName }, - })} -

- - - - + + {isNewPolicy + ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage', { + defaultMessage: 'Create policy', + }) + : i18n.translate('xpack.indexLifecycleMgmt.editPolicy.editPolicyMessage', { + defaultMessage: 'Edit policy {originalPolicyName}', + values: { originalPolicyName }, + })} + + ), + rightSideItems: [ + + + , + ], + }} + > +
+ {isNewPolicy ? null : ( + + +

+ + + + .{' '} - - - - - {isNewPolicy ? null : ( - - -

- - - - .{' '} +

+ + + + + { + setSaveAsNew(e.target.checked); + }} + label={ + -

- - - - - { - setSaveAsNew(e.target.checked); - }} - label={ - - - - } - /> - - - )} - - {saveAsNew || isNewPolicy ? ( - - path={policyNamePath} - config={{ - label: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.policyNameLabel', { - defaultMessage: 'Policy name', - }), - helpText: i18n.translate( - 'xpack.indexLifecycleMgmt.editPolicy.validPolicyNameMessage', - { - defaultMessage: - 'A policy name cannot start with an underscore and cannot contain a comma or a space.', - } - ), - validations: policyNameValidations, - }} - component={TextField} - componentProps={{ - fullWidth: false, - euiFieldProps: { - 'data-test-subj': 'policyNameField', - }, - }} + + } /> - ) : null} - - - - - - - -
- - + + + )} + + {saveAsNew || isNewPolicy ? ( + + path={policyNamePath} + config={{ + label: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.policyNameLabel', { + defaultMessage: 'Policy name', + }), + helpText: i18n.translate( + 'xpack.indexLifecycleMgmt.editPolicy.validPolicyNameMessage', + { + defaultMessage: + 'A policy name cannot start with an underscore and cannot contain a comma or a space.', + } + ), + validations: policyNameValidations, + }} + component={TextField} + componentProps={{ + fullWidth: false, + euiFieldProps: { + 'data-test-subj': 'policyNameField', + }, + }} + /> + ) : null} + + + + + + + +
+ + + + + + + + + {isAllowedByLicense && ( + <> - - - - - - {isAllowedByLicense && ( - <> - - - - )} + + + )} - {/* We can't add the here as it breaks the layout - and makes the connecting line go further that it needs to. - There is an issue in EUI to fix this (https://github.com/elastic/eui/issues/4492) */} - -
+ {/* We can't add the here as it breaks the layout + and makes the connecting line go further that it needs to. + There is an issue in EUI to fix this (https://github.com/elastic/eui/issues/4492) */} + +
- + - + - + + + - - - - {saveAsNew ? ( - - ) : ( - - )} - - - - - - - - - - - - - - {isShowingPolicyJsonFlyout ? ( + + {saveAsNew ? ( ) : ( )} + + + + + + + - {isShowingPolicyJsonFlyout ? ( - setIsShowingPolicyJsonFlyout(false)} - /> - ) : null} - -
- - + + + {isShowingPolicyJsonFlyout ? ( + + ) : ( + + )} + + + + + {isShowingPolicyJsonFlyout ? ( + setIsShowingPolicyJsonFlyout(false)} + /> + ) : null} + + ); }; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx index 7cf50de0ee9997..8a28d55f2c3506 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx @@ -10,9 +10,10 @@ 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'; +import { PolicyTable as PolicyTableContent } from './policy_table'; interface Props { navigateToApp: ApplicationStart['navigateToApp']; @@ -23,7 +24,7 @@ export const PolicyTable: React.FunctionComponent = history, }) => { const { - services: { breadcrumbService }, + services: { breadcrumbService, managementPageLayout: ManagementPageLayout }, } = useKibana(); const { data: policies, isLoading, error, resendRequest } = useLoadPoliciesList(true); @@ -33,48 +34,53 @@ export const PolicyTable: React.FunctionComponent = if (isLoading) { return ( - } - body={ - - } - /> + + } + body={ + + } + /> + ); } + if (error) { const { statusCode, message } = error ? error : { statusCode: '', message: '' }; return ( - - - - } - body={ -

- {message} ({statusCode}) -

- } - actions={ - - - - } - /> + + + + + } + body={ +

+ {message} ({statusCode}) +

+ } + actions={ + + + + } + /> + ); } return ( - = ({ navigateToApp, updatePolicies, }) => { + const { + services: { managementPageLayout: ManagementPageLayout }, + } = useKibana(); + const [confirmModal, setConfirmModal] = useState(); const [filter, setFilter] = useState(''); @@ -119,67 +122,61 @@ export const PolicyTable: React.FunctionComponent = ({ ); } else { return ( - - - + + + + + } + body={ + +

- - } - body={ - -

- -

- - } - actions={createPolicyButton} - /> - - +

+ + } + actions={createPolicyButton} + /> + ); } return ( - - - {confirmModal} - - - - -

- -

- - - {createPolicyButton} - - - -

+ -

- + + ), + rightSideItems: [createPolicyButton], + }} + > + {confirmModal} + + +

+ +

+ - - {content} - - + + {content} + ); }; diff --git a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx index 069d1e0d10e0bf..72f6f906b06ac0 100644 --- a/x-pack/plugins/index_lifecycle_management/public/plugin.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/plugin.tsx @@ -49,7 +49,7 @@ export class IndexLifecycleManagementPlugin id: PLUGIN.ID, title: PLUGIN.TITLE, order: 2, - mount: async ({ element, history, setBreadcrumbs }) => { + mount: async ({ element, history, setBreadcrumbs, managementPageLayout }) => { const [coreStart, { licensing }] = await getStartServices(); const { chrome: { docTitle }, @@ -69,7 +69,6 @@ export class IndexLifecycleManagementPlugin ); const { renderApp } = await import('./application'); - const unmountAppCallback = renderApp( element, I18nContext, @@ -78,6 +77,7 @@ export class IndexLifecycleManagementPlugin getUrlForApp, this.breadcrumbService, license, + managementPageLayout, cloud ); diff --git a/x-pack/plugins/index_lifecycle_management/public/types.ts b/x-pack/plugins/index_lifecycle_management/public/types.ts index adfca9ad41b26c..fa98fb86f04b17 100644 --- a/x-pack/plugins/index_lifecycle_management/public/types.ts +++ b/x-pack/plugins/index_lifecycle_management/public/types.ts @@ -4,6 +4,8 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ + +import type { ManagementAppMountParams } from '../../../../src/plugins/management/public'; import { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public'; import { ManagementSetup } from '../../../../src/plugins/management/public'; @@ -36,5 +38,6 @@ export interface ClientConfigType { export interface AppServicesContext { breadcrumbService: BreadcrumbService; license: ILicense; + managementPageLayout: ManagementAppMountParams['managementPageLayout']; cloud?: CloudSetup; } From 1f184f1dc3ee29ba45d8a207c27a8284f1dcb9bb Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 27 May 2021 16:56:13 -0700 Subject: [PATCH 2/4] Fix Jest tests. --- .../__snapshots__/policy_table.test.tsx.snap | 128 ++++++++++-------- .../client_integration/app/app.helpers.tsx | 9 +- .../edit_policy/init_test_bed.tsx | 2 + .../__jest__/policy_table.test.tsx | 38 ++++-- 4 files changed, 108 insertions(+), 69 deletions(-) diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap index 98e0e7e41b2360..0183a27451eb10 100644 --- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap +++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap @@ -46,70 +46,86 @@ Array [ `; exports[`policy table should show empty state when there are not any policies 1`] = ` -
-
-
+
-
- -

- Create your first index lifecycle policy -

-
-

- An index lifecycle policy helps you manage your indices as they age. -

-
- -
-
- -
-
-
+ +
+ +

+ Create your first index lifecycle policy +

+
+
+

+ An index lifecycle policy helps you manage your indices as they age. +

+
+ +
+
+ +
+
+
+
+ + `; exports[`policy table should sort when linked indices header is clicked 1`] = ` diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.helpers.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.helpers.tsx index 77b0372e249944..04845f3f5d7fdb 100644 --- a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.helpers.tsx +++ b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/app/app.helpers.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { registerTestBed, TestBed, TestBedConfig } from '@kbn/test/jest'; +import { KibanaPageTemplate } from '../../../../../../src/plugins/kibana_react/public'; import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public/context'; import { createBreadcrumbsMock } from '../../../public/application/services/breadcrumbs.mock'; import { licensingMock } from '../../../../licensing/public/mocks'; @@ -17,7 +18,13 @@ const breadcrumbService = createBreadcrumbsMock(); const AppWithContext = (props: any) => { return ( - + ); diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/init_test_bed.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/init_test_bed.tsx index 4f057e04c85d4a..e96009c37ea3d2 100644 --- a/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/init_test_bed.tsx +++ b/x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/init_test_bed.tsx @@ -10,6 +10,7 @@ import { registerTestBed, TestBedConfig } from '@kbn/test/jest'; import '../helpers/global_mocks'; +import { KibanaPageTemplate } from '../../../../../../src/plugins/kibana_react/public'; import { licensingMock } from '../../../../licensing/public/mocks'; import { EditPolicy } from '../../../public/application/sections/edit_policy'; import { KibanaContextProvider } from '../../../public/shared_imports'; @@ -38,6 +39,7 @@ const EditPolicyContainer = ({ appServicesContext, ...rest }: any) => { services={{ breadcrumbService, license: licensingMock.createLicense({ license: { type: 'enterprise' } }), + managementPageLayout: KibanaPageTemplate, ...appServicesContext, }} > diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx b/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx index 7733d547e34728..1afa70c6d700a9 100644 --- a/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx +++ b/x-pack/plugins/index_lifecycle_management/__jest__/policy_table.test.tsx @@ -18,6 +18,8 @@ import { } from '../../../../src/core/public/mocks'; import { HttpService } from '../../../../src/core/public/http'; import { usageCollectionPluginMock } from '../../../../src/plugins/usage_collection/public/mocks'; +import { KibanaPageTemplate } from '../../../../src/plugins/kibana_react/public'; +import { KibanaContextProvider } from '../public/shared_imports'; import { PolicyFromES } from '../common/types'; import { PolicyTable } from '../public/application/sections/policy_table/policy_table'; @@ -84,23 +86,35 @@ const openContextMenu = (buttonIndex: number) => { describe('policy table', () => { beforeEach(() => { component = ( - + + + ); }); test('should show empty state when there are not any policies', () => { component = ( - + + + ); const rendered = mountWithIntl(component); mountedSnapshot(rendered); From b704ef10d11dd6655680680a257ddd1f0e52ebc3 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 28 May 2021 11:58:48 -0700 Subject: [PATCH 3/4] Fix typos in i18n keys. --- .../public/application/sections/edit_policy/edit_policy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx index c586b1a249f378..fc3870f97d9106 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx @@ -318,12 +318,12 @@ export const EditPolicy: React.FunctionComponent = ({ history }) => { {isShowingPolicyJsonFlyout ? ( ) : ( )} From f907a08d6c1c67816644ba3938d3a5a5b1d92149 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 28 May 2021 12:29:03 -0700 Subject: [PATCH 4/4] Replace use of isEmptyState with centeredContent template. --- .../sections/edit_policy/edit_policy.container.tsx | 4 ++-- .../sections/policy_table/policy_table.container.tsx | 4 ++-- .../public/application/sections/policy_table/policy_table.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) 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 9ef8e1dc2faf30..0d6e0521e96f47 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 @@ -52,7 +52,7 @@ export const EditPolicy: React.FunctionComponent + } body={ @@ -69,7 +69,7 @@ export const EditPolicy: React.FunctionComponent + diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx index 8a28d55f2c3506..e0427618f4621c 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.container.tsx @@ -34,7 +34,7 @@ export const PolicyTable: React.FunctionComponent = if (isLoading) { return ( - + } body={ @@ -51,7 +51,7 @@ export const PolicyTable: React.FunctionComponent = if (error) { const { statusCode, message } = error ? error : { statusCode: '', message: '' }; return ( - + diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx index 9f6f21dd6b1feb..0e9d7a5c803456 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx @@ -122,7 +122,7 @@ export const PolicyTable: React.FunctionComponent = ({ ); } else { return ( - +