Replace IndexingStatusFetcher with logic

x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.test.tsx

@@ -4,21 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import '../../__mocks__/kea.mock';
+import '../../__mocks__/shallow_useeffect.mock';
+
+import { setMockActions, setMockValues } from '../../__mocks__';
+
 import React from 'react';
 import { shallow } from 'enzyme';
 
 import { EuiPanel } from '@elastic/eui';
 
 import { IndexingStatusContent } from './indexing_status_content';
 import { IndexingStatusErrors } from './indexing_status_errors';
-import { IndexingStatusFetcher } from './indexing_status_fetcher';
 import { IndexingStatus } from './indexing_status';
 
 describe('IndexingStatus', () => {
   const getItemDetailPath = jest.fn();
   const getStatusPath = jest.fn();
   const onComplete = jest.fn();
   const setGlobalIndexingStatus = jest.fn();
+  const fetchIndexingStatus = jest.fn();
 
   const props = {
     percentageComplete: 50,
@@ -32,20 +37,29 @@ describe('IndexingStatus', () => {
     setGlobalIndexingStatus,
   };
 
+  beforeEach(() => {
+    setMockActions({ fetchIndexingStatus });
+  });
+
   it('renders', () => {
+    setMockValues({
+      percentageComplete: 50,
+      numDocumentsWithErrors: 0,
+    });
     const wrapper = shallow(<IndexingStatus {...props} />);
-    const fetcher = wrapper.find(IndexingStatusFetcher).prop('children')(
-      props.percentageComplete,
-      props.numDocumentsWithErrors
-    );
 
-    expect(shallow(fetcher).find(EuiPanel)).toHaveLength(1);
-    expect(shallow(fetcher).find(IndexingStatusContent)).toHaveLength(1);
+    expect(wrapper.find(EuiPanel)).toHaveLength(1);
+    expect(wrapper.find(IndexingStatusContent)).toHaveLength(1);
+    expect(fetchIndexingStatus).toHaveBeenCalled();
   });
 
   it('renders errors', () => {
+    setMockValues({
+      percentageComplete: 100,
+      numDocumentsWithErrors: 1,
+    });
     const wrapper = shallow(<IndexingStatus {...props} percentageComplete={100} />);
-    const fetcher = wrapper.find(IndexingStatusFetcher).prop('children')(100, 1);
-    expect(shallow(fetcher).find(IndexingStatusErrors)).toHaveLength(1);
+
+    expect(wrapper.find(IndexingStatusErrors)).toHaveLength(1);
   });
 });

x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx

@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+
+import { useValues, useActions } from 'kea';
 
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
 
 import { IndexingStatusContent } from './indexing_status_content';
 import { IndexingStatusErrors } from './indexing_status_errors';
-import { IndexingStatusFetcher } from './indexing_status_fetcher';
+import { IndexingStatusLogic } from './indexing_status_logic';
 
 import { IIndexingStatus } from '../types';
 
@@ -23,22 +25,34 @@ export interface IIndexingStatusProps extends IIndexingStatus {
   setGlobalIndexingStatus?(activeReindexJob: IIndexingStatus): void;
 }
 
-export const IndexingStatus: React.FC<IIndexingStatusProps> = (props) => (
-  <IndexingStatusFetcher {...props}>
-    {(percentageComplete, numDocumentsWithErrors) => (
-      <div>
-        {percentageComplete < 100 && (
-          <EuiPanel paddingSize="l" hasShadow>
-            <IndexingStatusContent percentageComplete={percentageComplete} />
-          </EuiPanel>
-        )}
-        {percentageComplete === 100 && numDocumentsWithErrors > 0 && (
-          <>
-            <EuiSpacer />
-            <IndexingStatusErrors viewLinkPath={props.viewLinkPath} />
-          </>
-        )}
-      </div>
-    )}
-  </IndexingStatusFetcher>
-);
+export const IndexingStatus: React.FC<IIndexingStatusProps> = ({
+  itemId,
+  activeReindexJobId,
+  viewLinkPath,
+  getStatusPath,
+  onComplete,
+}) => {
+  const { percentageComplete, numDocumentsWithErrors } = useValues(IndexingStatusLogic);
+  const { fetchIndexingStatus } = useActions(IndexingStatusLogic);
+  const statusPath = getStatusPath(itemId, activeReindexJobId);
+
+  useEffect(() => {
+    fetchIndexingStatus({ statusPath, onComplete });
+  }, []);
+
+  return (
+    <div className="c-stui-indexing-status-wrapper">
+      {percentageComplete < 100 && (
+        <EuiPanel paddingSize="l" hasShadow={true}>
+          <IndexingStatusContent percentageComplete={percentageComplete} />
+        </EuiPanel>
+      )}
+      {percentageComplete === 100 && numDocumentsWithErrors > 0 && (
+        <>
+          <EuiSpacer />
+          <IndexingStatusErrors viewLinkPath={viewLinkPath} />
+        </>
+      )}
+    </div>
+  );
+};