Skip to content

Commit

Permalink
[App Search] Added the log retention confirmation modal to the Settin…
Browse files Browse the repository at this point in the history
…gs page (elastic#83009)
  • Loading branch information
JasonStoltz committed Nov 11, 2020
1 parent e1e1401 commit 3992066
Show file tree
Hide file tree
Showing 5 changed files with 445 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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(
<GenericConfirmationModal
title="A title"
subheading="A subheading"
description="A description"
target="DISABLE"
onClose={onClose}
onSave={onSave}
/>
);
});

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);
});
});
Original file line number Diff line number Diff line change
@@ -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<GenericConfirmationModalProps> = ({
description,
onClose,
onSave,
subheading,
target,
title,
}) => {
const [inputValue, setInputValue] = useState('');

const onConfirm = () => {
setInputValue('');
onSave();
};

return (
<EuiModal onClose={onClose} initialFocus=".euiFieldText" aria-label={title}>
<EuiModalHeader>
<EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiText>
<p>
<strong>{subheading}</strong>
</p>
<p>{description}</p>
</EuiText>
<EuiSpacer />
<EuiFormRow
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.prompt',
{
defaultMessage: 'Type "{target}" to confirm.',
values: { target },
}
)}
>
<EuiFieldText
data-test-subj="GenericConfirmationModalInput"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</EuiFormRow>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty data-test-subj="GenericConfirmationModalCancel" onClick={onClose}>
{i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.modal.cancel', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
<EuiButton
data-test-subj="GenericConfirmationModalSave"
onClick={onConfirm}
disabled={inputValue.toLowerCase() !== target.toLowerCase()}
>
{i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.modal.save', {
defaultMessage: 'Save setting',
})}
</EuiButton>
</EuiModalFooter>
</EuiModal>
);
};
Original file line number Diff line number Diff line change
@@ -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('<LogRetentionConfirmationModal />', () => {
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(<LogRetentionConfirmationModal />);
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(<LogRetentionConfirmationModal />);
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(<LogRetentionConfirmationModal />);
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(<LogRetentionConfirmationModal />);
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(<LogRetentionConfirmationModal />);
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(<LogRetentionConfirmationModal />);
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(<LogRetentionConfirmationModal />);
const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal);
genericConfirmationModal.prop('onClose')();
expect(actions.closeModals).toHaveBeenCalled();
});
});
});
Loading

0 comments on commit 3992066

Please sign in to comment.