From 198184e77fefc7237f47b48b8ee4073244b948b0 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 13:53:06 -0500
Subject: [PATCH] [App Search] Added the log retention confirmation modal to
 the Settings page (#83009) (#83191)

---
 .../generic_confirmation_modal.test.tsx       |  81 +++++++++++
 .../generic_confirmation_modal.tsx            |  95 ++++++++++++
 .../log_retention_confirmation_modal.test.tsx | 129 +++++++++++++++++
 .../log_retention_confirmation_modal.tsx      | 137 ++++++++++++++++++
 .../components/settings/settings.tsx          |   3 +
 5 files changed, 445 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/generic_confirmation_modal.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.tsx

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 0000000000000..f1eac1a009ecf
--- /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(
+      <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);
+  });
+});
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 0000000000000..6d802b0c5cfaf
--- /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<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>
+  );
+};
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 0000000000000..d77089d52fbdd
--- /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('<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();
+    });
+  });
+});
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 0000000000000..67421bb78fa71
--- /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 (
+    <EuiOverlayMask>
+      {openedModal === LogRetentionOptions.Analytics && (
+        <GenericConfirmationModal
+          data-test-subj="AnalyticsLogRetentionConfirmationModal"
+          title={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.analytics.title',
+            {
+              defaultMessage: 'Disable Analytics writes',
+            }
+          )}
+          subheading={
+            logRetention &&
+            logRetention[LogRetentionOptions.Analytics].retentionPolicy?.minAgeDays &&
+            i18n.translate(
+              'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.analytics.subheading',
+              {
+                defaultMessage:
+                  'Your Analytics Logs are currently being stored for {minAgeDays} days.',
+                values: {
+                  minAgeDays:
+                    logRetention[LogRetentionOptions.Analytics].retentionPolicy?.minAgeDays,
+                },
+              }
+            )
+          }
+          description={
+            <>
+              <p>
+                {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.',
+                  }
+                )}
+              </p>
+              <p>
+                <strong>
+                  <EuiTextColor color="danger">{CANNOT_BE_RECOVERED_TEXT}</EuiTextColor>
+                </strong>
+              </p>
+            </>
+          }
+          target={DISABLE_TEXT}
+          onClose={closeModals}
+          onSave={() => saveLogRetention(LogRetentionOptions.Analytics, false)}
+        />
+      )}
+      {openedModal === LogRetentionOptions.API && (
+        <GenericConfirmationModal
+          data-test-subj="APILogRetentionConfirmationModal"
+          title={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.api.title',
+            {
+              defaultMessage: 'Disable API writes',
+            }
+          )}
+          subheading={
+            logRetention &&
+            logRetention?.[LogRetentionOptions.API].retentionPolicy?.minAgeDays &&
+            i18n.translate(
+              'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.api.subheading',
+              {
+                defaultMessage: 'Your API Logs are currently being stored for {minAgeDays} days.',
+                values: {
+                  minAgeDays: logRetention?.[LogRetentionOptions.API].retentionPolicy?.minAgeDays,
+                },
+              }
+            )
+          }
+          description={
+            <>
+              <p>
+                {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.',
+                  }
+                )}
+              </p>
+              <p>
+                <strong>
+                  <EuiTextColor color="danger">{CANNOT_BE_RECOVERED_TEXT}</EuiTextColor>
+                </strong>
+              </p>
+            </>
+          }
+          target={DISABLE_TEXT}
+          onClose={closeModals}
+          onSave={() => saveLogRetention(LogRetentionOptions.API, false)}
+        />
+      )}
+    </EuiOverlayMask>
+  );
+};
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 7bd3683919bc1..dbd6627a3b9ce 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 = () => {
       <EuiPageContent>
         <EuiPageContentBody>
           <FlashMessages />
+          <LogRetentionConfirmationModal />
           <LogRetentionPanel />
         </EuiPageContentBody>
       </EuiPageContent>