From 1f3cd7d9155e3bd64e3a33681e18c7d26343d312 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Mon, 9 Nov 2020 14:22:10 -0500
Subject: [PATCH 1/7] Added log retention modal

---
 .../generic_confirmation_modal.test.tsx       |  70 +++++++++
 .../generic_confirmation_modal.tsx            |  96 ++++++++++++
 .../log_retention_confirmation_modal.test.tsx | 146 ++++++++++++++++++
 .../log_retention_confirmation_modal.tsx      | 124 +++++++++++++++
 .../components/settings/settings.tsx          |   3 +
 5 files changed, 439 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 00000000000000..af638100f109a1
--- /dev/null
+++ b/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);
+  });
+});
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..4ad0be454ffd49
--- /dev/null
+++ b/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>
+  );
+};
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..68ed6a9ff95590
--- /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,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();
+    });
+  });
+});
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..2c7236af34c236
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/settings/log_retention/log_retention_confirmation_modal.tsx
@@ -0,0 +1,124 @@
+/*
+ * 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 { ELogRetentionOptions } from './types';
+
+export const LogRetentionConfirmationModal: React.FC = () => {
+  const CANNOT_BE_RECOVERED = i18n.translate(
+    'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.recovery',
+    {
+      defaultMessage: 'cannot be recovered',
+    }
+  );
+
+  const { closeModals, saveLogRetention } = useActions(LogRetentionLogic);
+
+  const { logRetention, openedModal } = useValues(LogRetentionLogic);
+
+  if (openedModal === null) {
+    return null;
+  }
+
+  return (
+    <EuiOverlayMask>
+      {openedModal === ELogRetentionOptions.Analytics && (
+        <GenericConfirmationModal
+          data-test-subj="AnalyticsLogRetentionConfirmationModal"
+          title={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.analytics.title',
+            {
+              defaultMessage: 'Disable Analytics writes',
+            }
+          )}
+          subheading={
+            logRetention &&
+            logRetention[ELogRetentionOptions.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[ELogRetentionOptions.Analytics].retentionPolicy?.minAgeDays,
+                },
+              }
+            )
+          }
+          description={
+            <>
+              {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. Once your data has been removed, it',
+                }
+              )}{' '}
+              <strong>
+                <EuiTextColor color="danger">{CANNOT_BE_RECOVERED}</EuiTextColor>
+              </strong>
+              .
+            </>
+          }
+          target="DISABLE"
+          onClose={closeModals}
+          onSave={() => saveLogRetention(ELogRetentionOptions.Analytics, false)}
+        />
+      )}
+      {openedModal === ELogRetentionOptions.API && (
+        <GenericConfirmationModal
+          data-test-subj="APILogRetentionConfirmationModal"
+          title={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.api.title',
+            {
+              defaultMessage: 'Disable API writes',
+            }
+          )}
+          subheading={
+            logRetention &&
+            logRetention?.[ELogRetentionOptions.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?.[ELogRetentionOptions.API].retentionPolicy?.minAgeDays,
+                },
+              }
+            )
+          }
+          description={
+            <>
+              {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. Once your data has been removed, it',
+                }
+              )}{' '}
+              <strong>
+                <EuiTextColor color="danger">{CANNOT_BE_RECOVERED}</EuiTextColor>
+              </strong>
+              .
+            </>
+          }
+          target="DISABLE"
+          onClose={closeModals}
+          onSave={() => saveLogRetention(ELogRetentionOptions.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 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 = () => {
       <EuiPageContent>
         <EuiPageContentBody>
           <FlashMessages />
+          <LogRetentionConfirmationModal />
           <LogRetentionPanel />
         </EuiPageContentBody>
       </EuiPageContent>

From 99463bb6ab73cc0db72df7b445e5ab669e55380e Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 08:50:25 -0500
Subject: [PATCH 2/7] No portal

---
 .../log_retention_confirmation_modal.test.tsx   | 17 -----------------
 1 file changed, 17 deletions(-)

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
index 68ed6a9ff95590..5ff75966b3585e 100644
--- 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
@@ -8,7 +8,6 @@ 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';
@@ -16,16 +15,6 @@ 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(),
@@ -57,12 +46,6 @@ describe('<LogRetentionConfirmationModal />', () => {
     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);

From ee43a03047078a80f99fcb9d71092ac63be71c06 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 08:54:34 -0500
Subject: [PATCH 3/7] i18n DISABLE text

---
 .../log_retention_confirmation_modal.tsx              | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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
index 2c7236af34c236..3ade619942a404 100644
--- 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
@@ -23,6 +23,13 @@ export const LogRetentionConfirmationModal: React.FC = () => {
     }
   );
 
+  const DISABLE_TEXT = i18n.translate(
+    'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.disable',
+    {
+      defaultMessage: 'DISABLE',
+    }
+  );
+
   const { closeModals, saveLogRetention } = useActions(LogRetentionLogic);
 
   const { logRetention, openedModal } = useValues(LogRetentionLogic);
@@ -72,7 +79,7 @@ export const LogRetentionConfirmationModal: React.FC = () => {
               .
             </>
           }
-          target="DISABLE"
+          target={DISABLE_TEXT}
           onClose={closeModals}
           onSave={() => saveLogRetention(ELogRetentionOptions.Analytics, false)}
         />
@@ -114,7 +121,7 @@ export const LogRetentionConfirmationModal: React.FC = () => {
               .
             </>
           }
-          target="DISABLE"
+          target={DISABLE_TEXT}
           onClose={closeModals}
           onSave={() => saveLogRetention(ELogRetentionOptions.API, false)}
         />

From 2737c20477dd8494108e2a39ca1089a2dbcc7325 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 09:02:44 -0500
Subject: [PATCH 4/7] Better red disable text

---
 .../log_retention_confirmation_modal.tsx      | 54 ++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

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
index 3ade619942a404..87018a63cf352c 100644
--- 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
@@ -16,10 +16,10 @@ import { LogRetentionLogic } from './log_retention_logic';
 import { ELogRetentionOptions } from './types';
 
 export const LogRetentionConfirmationModal: React.FC = () => {
-  const CANNOT_BE_RECOVERED = i18n.translate(
+  const CANNOT_BE_RECOVERED_TEXT = i18n.translate(
     'xpack.enterpriseSearch.appSearch.settings.logRetention.modal.recovery',
     {
-      defaultMessage: 'cannot be recovered',
+      defaultMessage: 'Once your data has been removed, it cannot be recovered.',
     }
   );
 
@@ -66,17 +66,20 @@ export const LogRetentionConfirmationModal: React.FC = () => {
           }
           description={
             <>
-              {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. Once your data has been removed, it',
-                }
-              )}{' '}
-              <strong>
-                <EuiTextColor color="danger">{CANNOT_BE_RECOVERED}</EuiTextColor>
-              </strong>
-              .
+              <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}
@@ -108,17 +111,20 @@ export const LogRetentionConfirmationModal: React.FC = () => {
           }
           description={
             <>
-              {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. Once your data has been removed, it',
-                }
-              )}{' '}
-              <strong>
-                <EuiTextColor color="danger">{CANNOT_BE_RECOVERED}</EuiTextColor>
-              </strong>
-              .
+              <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}

From e84793010cfaf9ef5d85c54991f3e8ff6c08059e Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 09:35:33 -0500
Subject: [PATCH 5/7] Better a11y

---
 .../settings/log_retention/generic_confirmation_modal.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 4ad0be454ffd49..3da031572fa580 100644
--- 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
@@ -25,7 +25,7 @@ interface GenericConfirmationModalProps {
   description: ReactNode;
   subheading: ReactNode;
   target: string;
-  title: ReactNode;
+  title: string;
   onClose(): void;
   onSave(): void;
 }
@@ -46,7 +46,7 @@ export const GenericConfirmationModal: React.FC<GenericConfirmationModalProps> =
   };
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} initialFocus=".euiFieldText" aria-label={title}>
       <EuiModalHeader>
         <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
       </EuiModalHeader>

From 5df1e781fefd9487d3529e0544d73080a2c18ac5 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 09:36:14 -0500
Subject: [PATCH 6/7] engineName?

---
 .../settings/log_retention/generic_confirmation_modal.tsx        | 1 -
 1 file changed, 1 deletion(-)

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
index 3da031572fa580..f9d097edbd7b7a 100644
--- 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
@@ -69,7 +69,6 @@ export const GenericConfirmationModal: React.FC<GenericConfirmationModalProps> =
         >
           <EuiFieldText
             data-test-subj="GenericConfirmationModalInput"
-            name="engineName"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
           />

From e22098287934276b58bcd613f72241502e6b3b38 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Wed, 11 Nov 2020 09:50:12 -0500
Subject: [PATCH 7/7] case insensitive disable

---
 .../log_retention/generic_confirmation_modal.test.tsx | 11 +++++++++++
 .../log_retention/generic_confirmation_modal.tsx      |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

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
index af638100f109a1..f1eac1a009ecfc 100644
--- 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
@@ -67,4 +67,15 @@ describe('GenericConfirmationModal', () => {
     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
index f9d097edbd7b7a..6d802b0c5cfafa 100644
--- 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
@@ -83,7 +83,7 @@ export const GenericConfirmationModal: React.FC<GenericConfirmationModalProps> =
         <EuiButton
           data-test-subj="GenericConfirmationModalSave"
           onClick={onConfirm}
-          disabled={inputValue !== target}
+          disabled={inputValue.toLowerCase() !== target.toLowerCase()}
         >
           {i18n.translate('xpack.enterpriseSearch.appSearch.settings.logRetention.modal.save', {
             defaultMessage: 'Save setting',