diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.test.tsx new file mode 100644 index 00000000000000..f1eac1a009ecfc --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.test.tsx @@ -0,0 +1,81 @@ +/* + * 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 React from 'react'; +import { shallow } from 'enzyme'; + +import { GenericConfirmationModal } from './generic_confirmation_modal'; + +describe('GenericConfirmationModal', () => { + let wrapper: any; + const onClose = jest.fn(); + const onSave = jest.fn(); + + beforeEach(() => { + jest.clearAllMocks(); + wrapper = shallow( + + ); + }); + + it('calls onSave callback when save is pressed', () => { + const button = wrapper.find('[data-test-subj="GenericConfirmationModalSave"]'); + button.simulate('click'); + expect(onSave).toHaveBeenCalled(); + }); + + it('calls onClose callback when Cancel is pressed', () => { + const button = wrapper.find('[data-test-subj="GenericConfirmationModalCancel"]'); + button.simulate('click'); + expect(onClose).toHaveBeenCalled(); + }); + + it('disables the Save button when the input is empty', () => { + const button = wrapper.find('[data-test-subj="GenericConfirmationModalSave"]'); + expect(button.prop('disabled')).toEqual(true); + }); + + it('disables the Save button when the input is not equal to the target', () => { + const input = wrapper.find('[data-test-subj="GenericConfirmationModalInput"]'); + input.prop('onChange')({ + target: { + value: 'NOT_GOOD', + }, + }); + + const button = wrapper.find('[data-test-subj="GenericConfirmationModalSave"]'); + expect(button.prop('disabled')).toEqual(true); + }); + + it('enables the Save button when the current input equals the target prop', () => { + const input = wrapper.find('[data-test-subj="GenericConfirmationModalInput"]'); + input.prop('onChange')({ + target: { + value: 'DISABLE', + }, + }); + const button = wrapper.find('[data-test-subj="GenericConfirmationModalSave"]'); + expect(button.prop('disabled')).toEqual(false); + }); + + it('is not case sensitive', () => { + const input = wrapper.find('[data-test-subj="GenericConfirmationModalInput"]'); + input.prop('onChange')({ + target: { + value: 'diSable', + }, + }); + const button = wrapper.find('[data-test-subj="GenericConfirmationModalSave"]'); + expect(button.prop('disabled')).toEqual(false); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.tsx new file mode 100644 index 00000000000000..6d802b0c5cfafa --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.tsx @@ -0,0 +1,95 @@ +/* + * 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 React, { ReactNode, useState } from 'react'; +import { i18n } from '@kbn/i18n'; + +import { + EuiButton, + EuiButtonEmpty, + EuiFieldText, + EuiFormRow, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiSpacer, + EuiText, +} from '@elastic/eui'; + +interface GenericConfirmationModalProps { + description: ReactNode; + subheading: ReactNode; + target: string; + title: string; + onClose(): void; + onSave(): void; +} + +export const GenericConfirmationModal: React.FC = ({ + description, + onClose, + onSave, + subheading, + target, + title, +}) => { + const [inputValue, setInputValue] = useState(''); + + const onConfirm = () => { + setInputValue(''); + onSave(); + }; + + return ( + + + {title} + + + +

+ {subheading} +

+

{description}

+
+ + + setInputValue(e.target.value)} + /> + +
+ + + {i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.modal.cancel', { + defaultMessage: 'Cancel', + })} + + + {i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.modal.save', { + defaultMessage: 'Save setting', + })} + + +
+ ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.test.tsx new file mode 100644 index 00000000000000..d77089d52fbdd5 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.test.tsx @@ -0,0 +1,129 @@ +/* + * 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 '../../../../__mocks__/kea.mock'; +import { setMockActions, setMockValues } from '../../../../__mocks__'; + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { LogRetentionConfirmationModal } from './log_retention_confirmation_modal'; +import { LogRetentionOptions } from './types'; +import { GenericConfirmationModal } from './generic_confirmation_modal'; + +describe('', () => { + const actions = { + closeModals: jest.fn(), + saveLogRetention: jest.fn(), + }; + + const values = { + openedModal: null, + logRetention: { + analytics: { + enabled: true, + retentionPolicy: { + isDefault: true, + minAgeDays: 180, + }, + }, + api: { + enabled: true, + retentionPolicy: { + isDefault: true, + minAgeDays: 7, + }, + }, + }, + }; + + beforeEach(() => { + jest.clearAllMocks(); + setMockActions(actions); + setMockValues(values); + }); + + it('renders nothing by default', () => { + const logRetentionPanel = shallow(); + expect(logRetentionPanel.isEmptyRender()).toBe(true); + }); + + describe('analytics', () => { + it('renders the Analytics panel when openedModal is set to Analytics', () => { + setMockValues({ + ...values, + openedModal: LogRetentionOptions.Analytics, + }); + + const logRetentionPanel = shallow(); + expect( + logRetentionPanel.find('[data-test-subj="AnalyticsLogRetentionConfirmationModal"]').length + ).toBe(1); + }); + + it('calls saveLogRetention on save when showing analytics', () => { + setMockValues({ + ...values, + openedModal: LogRetentionOptions.Analytics, + }); + + const logRetentionPanel = shallow(); + const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal); + genericConfirmationModal.prop('onSave')(); + expect(actions.saveLogRetention).toHaveBeenCalledWith(LogRetentionOptions.Analytics, false); + }); + + it('calls closeModals on close', () => { + setMockValues({ + ...values, + openedModal: LogRetentionOptions.Analytics, + }); + + const logRetentionPanel = shallow(); + const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal); + genericConfirmationModal.prop('onClose')(); + expect(actions.closeModals).toHaveBeenCalled(); + }); + }); + + describe('api', () => { + it('renders the API panel when openedModal is set to API', () => { + setMockValues({ + ...values, + openedModal: LogRetentionOptions.API, + }); + + const logRetentionPanel = shallow(); + expect( + logRetentionPanel.find('[data-test-subj="APILogRetentionConfirmationModal"]').length + ).toBe(1); + }); + + it('calls saveLogRetention on save when showing api', () => { + setMockValues({ + ...values, + openedModal: LogRetentionOptions.API, + }); + + const logRetentionPanel = shallow(); + const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal); + genericConfirmationModal.prop('onSave')(); + expect(actions.saveLogRetention).toHaveBeenCalledWith(LogRetentionOptions.API, false); + }); + + it('calls closeModals on close', () => { + setMockValues({ + ...values, + openedModal: LogRetentionOptions.API, + }); + + const logRetentionPanel = shallow(); + const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal); + genericConfirmationModal.prop('onClose')(); + expect(actions.closeModals).toHaveBeenCalled(); + }); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.tsx new file mode 100644 index 00000000000000..67421bb78fa71c --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.tsx @@ -0,0 +1,137 @@ +/* + * 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 React from 'react'; +import { i18n } from '@kbn/i18n'; + +import { EuiTextColor, EuiOverlayMask } from '@elastic/eui'; +import { useActions, useValues } from 'kea'; + +import { GenericConfirmationModal } from './generic_confirmation_modal'; +import { LogRetentionLogic } from './log_retention_logic'; + +import { LogRetentionOptions } from './types'; + +export const LogRetentionConfirmationModal: React.FC = () => { + const CANNOT_BE_RECOVERED_TEXT = i18n.translate( + 'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.recovery', + { + defaultMessage: 'Once your data has been removed, it cannot be recovered.', + } + ); + + const DISABLE_TEXT = i18n.translate( + 'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.disable', + { + defaultMessage: 'DISABLE', + } + ); + + const { closeModals, saveLogRetention } = useActions(LogRetentionLogic); + + const { logRetention, openedModal } = useValues(LogRetentionLogic); + + if (openedModal === null) { + return null; + } + + return ( + + {openedModal === LogRetentionOptions.Analytics && ( + +

+ {i18n.translate( + 'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.analytics.description', + { + defaultMessage: + 'When disabling Analytics Logs, all your engines will immediately stop indexing Analytics Logs. Your existing data will be deleted in accordance with the storage timeframes outlined above.', + } + )} +

+

+ + {CANNOT_BE_RECOVERED_TEXT} + +

+ + } + target={DISABLE_TEXT} + onClose={closeModals} + onSave={() => saveLogRetention(LogRetentionOptions.Analytics, false)} + /> + )} + {openedModal === LogRetentionOptions.API && ( + +

+ {i18n.translate( + 'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.api.description', + { + defaultMessage: + 'When disabling API Logs, all your engines will immediately stop indexing API Logs. Your existing data will be deleted in accordance with the storage timeframes outlined above.', + } + )} +

+

+ + {CANNOT_BE_RECOVERED_TEXT} + +

+ + } + target={DISABLE_TEXT} + onClose={closeModals} + onSave={() => saveLogRetention(LogRetentionOptions.API, false)} + /> + )} +
+ ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx index 7bd3683919bc14..dbd6627a3b9ce4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/settings.tsx @@ -5,6 +5,7 @@ */ import React from 'react'; + import { EuiPageHeader, EuiPageHeaderSection, @@ -16,6 +17,7 @@ import { import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome'; import { FlashMessages } from '../../../shared/flash_messages'; import { LogRetentionPanel } from './log_retention/log_retention_panel'; +import { LogRetentionConfirmationModal } from './log_retention/log_retention_confirmation_modal'; import { SETTINGS_TITLE } from './'; @@ -33,6 +35,7 @@ export const Settings: React.FC = () => { +