[App Search] Added the log retention confirmation modal to the Settings page

x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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: ReactNode;
+  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}>
+      <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"
+            name="engineName"
+            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 !== target}
+        >
+          {i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.modal.save', {
+            defaultMessage: 'Save setting',
+          })}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.test.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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 ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+
+import { LogRetentionConfirmationModal } from './log_retention_confirmation_modal';
+import { ELogRetentionOptions } from './types';
+import { GenericConfirmationModal } from './generic_confirmation_modal';
+
+describe('<LogRetentionConfirmationModal />', () => {
+  beforeAll(() => {
+    // LogRetentionConfirmationModal contains EuiModals, which utilize React Portals,
+    // so we must mock `createPortal` to get the rendered element directly,
+    // instead of letting it be placed normally elsewhere in DOM (outside of jest's domain)
+    // @ts-ignore
+    ReactDOM.createPortal = jest.fn((element) => {
+      return element;
+    });
+  });
+
+  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);
+  });
+
+  afterEach(() => {
+    // Remove the jest mock on createPortal
+    // @ts-ignore
+    ReactDOM.createPortal.mockClear();
+  });
+
+  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: ELogRetentionOptions.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: ELogRetentionOptions.Analytics,
+      });
+
+      const logRetentionPanel = shallow(<LogRetentionConfirmationModal />);
+      const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal);
+      genericConfirmationModal.prop('onSave')();
+      expect(actions.saveLogRetention).toHaveBeenCalledWith(ELogRetentionOptions.Analytics, false);
+    });
+
+    it('calls closeModals on close', () => {
+      setMockValues({
+        ...values,
+        openedModal: ELogRetentionOptions.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: ELogRetentionOptions.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: ELogRetentionOptions.API,
+      });
+
+      const logRetentionPanel = shallow(<LogRetentionConfirmationModal />);
+      const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal);
+      genericConfirmationModal.prop('onSave')();
+      expect(actions.saveLogRetention).toHaveBeenCalledWith(ELogRetentionOptions.API, false);
+    });
+
+    it('calls closeModals on close', () => {
+      setMockValues({
+        ...values,
+        openedModal: ELogRetentionOptions.API,
+      });
+
+      const logRetentionPanel = shallow(<LogRetentionConfirmationModal />);
+      const genericConfirmationModal = logRetentionPanel.find(GenericConfirmationModal);
+      genericConfirmationModal.prop('onClose')();
+      expect(actions.closeModals).toHaveBeenCalled();
+    });
+  });
+});