Update LogRetentionTooltip and LogRetentionCallout to manage fetching…

… log retention + change ILM to LogRetention per PR feedback
elastic · Jan 14, 2021 · a448f12 · a448f12
1 parent 1a47c90
commit a448f12
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 18 deletions.
diff --git a/...pplications/app_search/components/log_retention/components/log_retention_callout.test.tsx b/...pplications/app_search/components/log_retention/components/log_retention_callout.test.tsx
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { setMockValues } from '../../../../__mocks__/kea.mock';
+import '../../../../__mocks__/shallow_useeffect.mock';
+import { setMockValues, setMockActions } from '../../../../__mocks__/kea.mock';
 import { mountWithIntl } from '../../../../__mocks__';
 
 import React from 'react';
@@ -15,16 +16,16 @@ import { LogRetentionOptions } from '../';
 import { LogRetentionCallout } from './';
 
 describe('LogRetentionCallout', () => {
-  const values = {
-    myRole: { canManageLogSettings: true },
-  };
+  const actions = { fetchLogRetention: jest.fn() };
+  const values = { myRole: { canManageLogSettings: true } };
   const DISABLED = {
     disabledAt: '01 Jan 1970 12:00:00 +0000',
     enabled: false,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    setMockActions(actions);
   });
 
   it('renders an analytics callout', () => {
@@ -75,10 +76,26 @@ describe('LogRetentionCallout', () => {
     expect(wrapper.isEmptyRender()).toBe(true);
   });
 
-  it('does not render if ILM is not available', () => {
+  it('does not render if log retention is not available', () => {
     setMockValues({ ...values, logRetention: null });
     const wrapper = shallow(<LogRetentionCallout type={LogRetentionOptions.API} />);
 
     expect(wrapper.isEmptyRender()).toBe(true);
   });
+
+  describe('on mount', () => {
+    it('fetches log retention data when not already loaded', () => {
+      setMockValues({ ...values, logRetention: null });
+      shallow(<LogRetentionCallout type={LogRetentionOptions.API} />);
+
+      expect(actions.fetchLogRetention).toHaveBeenCalled();
+    });
+
+    it('does not fetch log retention data if it has already been loaded', () => {
+      setMockValues({ ...values, logRetention: {} });
+      shallow(<LogRetentionCallout type={LogRetentionOptions.API} />);
+
+      expect(actions.fetchLogRetention).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/...lic/applications/app_search/components/log_retention/components/log_retention_callout.tsx b/...lic/applications/app_search/components/log_retention/components/log_retention_callout.tsx
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { useValues } from 'kea';
+import React, { useEffect } from 'react';
+import { useValues, useActions } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -29,18 +29,23 @@ interface Props {
   type: LogRetentionOptions;
 }
 export const LogRetentionCallout: React.FC<Props> = ({ type }) => {
+  const { fetchLogRetention } = useActions(LogRetentionLogic);
   const { logRetention } = useValues(LogRetentionLogic);
   const {
     myRole: { canManageLogSettings },
   } = useValues(AppLogic);
 
+  const hasLogRetention = logRetention !== null;
+
+  useEffect(() => {
+    if (!hasLogRetention) fetchLogRetention();
+  }, []);
+
   const logRetentionSettings = logRetention?.[type];
   const title = TITLE_MAP[type];
+  const hasLogRetentionDisabled = hasLogRetention && !logRetentionSettings?.enabled;
 
-  const hasILM = logRetention !== null;
-  const hasILMDisabled = hasILM && !logRetentionSettings?.enabled;
-
-  return hasILMDisabled ? (
+  return hasLogRetentionDisabled ? (
     <>
       <EuiCallOut
         iconType="alert"

diff --git a/...pplications/app_search/components/log_retention/components/log_retention_tooltip.test.tsx b/...pplications/app_search/components/log_retention/components/log_retention_tooltip.test.tsx
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { setMockValues } from '../../../../__mocks__/kea.mock';
+import '../../../../__mocks__/shallow_useeffect.mock';
+import { setMockValues, setMockActions } from '../../../../__mocks__/kea.mock';
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
@@ -14,9 +15,13 @@ import { LogRetentionOptions, LogRetentionMessage } from '../';
 import { LogRetentionTooltip } from './';
 
 describe('LogRetentionTooltip', () => {
+  const values = { logRetention: {} };
+  const actions = { fetchLogRetention: jest.fn() };
+
   beforeEach(() => {
     jest.clearAllMocks();
-    setMockValues({ logRetentionLogic: {} });
+    setMockValues(values);
+    setMockActions(actions);
   });
 
   it('renders an analytics tooltip', () => {
@@ -43,10 +48,26 @@ describe('LogRetentionTooltip', () => {
     expect(wrapper.find(EuiIconTip).prop('position')).toEqual('right');
   });
 
-  it('does not render if ILM is not available', () => {
+  it('does not render if log retention is not available', () => {
     setMockValues({ logRetention: null });
     const wrapper = mount(<LogRetentionTooltip type={LogRetentionOptions.API} />);
 
     expect(wrapper.isEmptyRender()).toBe(true);
   });
+
+  describe('on mount', () => {
+    it('fetches log retention data when not already loaded', () => {
+      setMockValues({ logRetention: null });
+      shallow(<LogRetentionTooltip type={LogRetentionOptions.Analytics} />);
+
+      expect(actions.fetchLogRetention).toHaveBeenCalled();
+    });
+
+    it('does not fetch log retention data if it has already been loaded', () => {
+      setMockValues({ logRetention: {} });
+      shallow(<LogRetentionTooltip type={LogRetentionOptions.Analytics} />);
+
+      expect(actions.fetchLogRetention).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/...lic/applications/app_search/components/log_retention/components/log_retention_tooltip.tsx b/...lic/applications/app_search/components/log_retention/components/log_retention_tooltip.tsx
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { useValues } from 'kea';
+import React, { useEffect } from 'react';
+import { useValues, useActions } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 import { EuiIconTip } from '@elastic/eui';
@@ -17,10 +17,16 @@ interface Props {
   position?: 'top' | 'right' | 'bottom' | 'left';
 }
 export const LogRetentionTooltip: React.FC<Props> = ({ type, position = 'bottom' }) => {
+  const { fetchLogRetention } = useActions(LogRetentionLogic);
   const { logRetention } = useValues(LogRetentionLogic);
-  const hasILM = logRetention !== null;
 
-  return hasILM ? (
+  const hasLogRetention = logRetention !== null;
+
+  useEffect(() => {
+    if (!hasLogRetention) fetchLogRetention();
+  }, []);
+
+  return hasLogRetention ? (
     <EuiIconTip
       aria-label={i18n.translate('xpack.enterpriseSearch.appSearch.logRetention.tooltip', {
         defaultMessage: 'Log retention info',