From 92db929d2ab45bba36be7fd53acee495e4969981 Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 11:12:40 -0600
Subject: [PATCH 01/11] Add react-motion package

This is needed to animate the loading progress bar in the Enterprise Search schema views
---
 package.json |  2 ++
 yarn.lock    | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/package.json b/package.json
index 1febfc2380b7a..f5c8dfa31851e 100644
--- a/package.json
+++ b/package.json
@@ -278,6 +278,7 @@
     "react-intl": "^2.8.0",
     "react-is": "^16.8.0",
     "react-moment-proptypes": "^1.7.0",
+    "react-motion": "^0.5.2",
     "react-portal": "^3.2.0",
     "react-redux": "^7.2.0",
     "react-resizable": "^1.7.5",
@@ -521,6 +522,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-grid-layout": "^0.16.7",
     "@types/react-intl": "^2.3.15",
+    "@types/react-motion": "^0.0.29",
     "@types/react-redux": "^7.1.9",
     "@types/react-resize-detector": "^4.0.1",
     "@types/react-router": "^5.1.7",
diff --git a/yarn.lock b/yarn.lock
index 1f5eba54fb835..7167599d96337 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5475,6 +5475,13 @@
   resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e"
   integrity sha512-FGd6J1GQ7zvl1GZ3BBev83B7nfak8dqoR2PZ+l5MoisKMpd4xOLhZJC1ugpmk3Rz5F85t6HbOg9mYqXW97BsNA==
 
+"@types/react-motion@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/react-motion/-/react-motion-0.0.29.tgz#1a22e11bc1452150e8aa58463f72dd921ff10721"
+  integrity sha512-MD1DbdcDKruR0zz5Z0XIlrkPdjDMgYx0AHhbaoTBpDirUTt8Bd7x6OFE458nEINZxfPW0EcEOw2O8S/WwGNLsA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@*":
   version "0.60.22"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.22.tgz#ba199a441cb0612514244ffb1d0fe6f04c878575"
@@ -23341,6 +23348,15 @@ react-motion@^0.4.8:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
+react-motion@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
+  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
+  dependencies:
+    performance-now "^0.2.0"
+    prop-types "^15.5.8"
+    raf "^3.1.0"
+
 react-onclickoutside@^6.5.0:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"

From d435cf4c21be99f3a80551cc68cec30a6287743f Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 11:12:52 -0600
Subject: [PATCH 02/11] Add shared interface

---
 .../public/applications/shared/types.ts               | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/types.ts

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/types.ts b/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
new file mode 100644
index 0000000000000..3866d1a7199e4
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/types.ts
@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export interface IIndexingStatus {
+  percentageComplete: number;
+  numDocumentsWithErrors: number;
+  activeReindexJobId: number;
+}

From 6822405f596e4fd8c099020c96809deaa2b4be2b Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 12:15:54 -0600
Subject: [PATCH 03/11] Migrate IndexingStatusContent component

This is a straight copy/paste with only linting changes and tests added
---
 .../indexing_status_content.test.tsx          | 21 ++++++++++++++++
 .../indexing_status_content.tsx               | 25 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.test.tsx
new file mode 100644
index 0000000000000..9fe0e890e6943
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.test.tsx
@@ -0,0 +1,21 @@
+/*
+ * 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 { EuiProgress, EuiTitle } from '@elastic/eui';
+
+import { IndexingStatusContent } from './indexing_status_content';
+
+describe('IndexingStatusContent', () => {
+  it('renders', () => {
+    const wrapper = shallow(<IndexingStatusContent percentageComplete={50} />);
+
+    expect(wrapper.find(EuiTitle)).toHaveLength(1);
+    expect(wrapper.find(EuiProgress)).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx
new file mode 100644
index 0000000000000..d62f14ed79c2f
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { EuiProgress, EuiSpacer, EuiTitle } from '@elastic/eui';
+
+interface IIndexingStatusContentProps {
+  percentageComplete: number;
+}
+
+export const IndexingStatusContent: React.FC<IIndexingStatusContentProps> = ({
+  percentageComplete,
+}) => (
+  <div data-test-subj="IndexingStatusProgressMeter">
+    <EuiTitle size="s">
+      <h3>Indexing progress</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiProgress color="primary" size="m" value={percentageComplete} max={100} />
+  </div>
+);

From 569eb5953b907ea90ff5beaeaa471b43350a1b2c Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 12:17:36 -0600
Subject: [PATCH 04/11] Migrate IndexingStatusErrors component

This is a copy/paste with linting changes and tests added. Also changed out the Link component to our EuiLinkTo component for internal routing
---
 .../indexing_status_errors.test.tsx           | 25 ++++++++++++++++
 .../indexing_status_errors.tsx                | 30 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.test.tsx
new file mode 100644
index 0000000000000..fc706aee659a5
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.test.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { EuiCallOut, EuiButton } from '@elastic/eui';
+
+import { EuiLinkTo } from '../react_router_helpers';
+
+import { IndexingStatusErrors } from './indexing_status_errors';
+
+describe('IndexingStatusErrors', () => {
+  it('renders', () => {
+    const wrapper = shallow(<IndexingStatusErrors viewLinkPath="/path" />);
+
+    expect(wrapper.find(EuiButton)).toHaveLength(1);
+    expect(wrapper.find(EuiCallOut)).toHaveLength(1);
+    expect(wrapper.find(EuiLinkTo)).toHaveLength(1);
+    expect(wrapper.find(EuiLinkTo).prop('to')).toEqual('/path');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
new file mode 100644
index 0000000000000..344a0187c46c0
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
@@ -0,0 +1,30 @@
+/*
+ * 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 { EuiButton, EuiCallOut } from '@elastic/eui';
+
+import { EuiLinkTo } from '../react_router_helpers';
+
+interface IIndexingStatusErrorsProps {
+  viewLinkPath: string;
+}
+
+export const IndexingStatusErrors: React.FC<IIndexingStatusErrorsProps> = ({ viewLinkPath }) => (
+  <EuiCallOut
+    className="c-stui-indexing-status-errors"
+    color="danger"
+    iconType="cross"
+    title="There was an error"
+    data-test-subj="IndexingStatusErrors"
+  >
+    <p>Several documents have field conversion errors.</p>
+    <EuiButton color="danger" fill={true} size="s" data-test-subj="ViewErrorsButton">
+      <EuiLinkTo to={viewLinkPath}>View Errors</EuiLinkTo>
+    </EuiButton>
+  </EuiCallOut>
+);

From 7661303ef79f022fa617eebfe07fc8c56b7f9f8c Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 12:18:57 -0600
Subject: [PATCH 05/11] Migrate IndexingStatus component

This is a straight copy/paste with only linting changes and tests added
---
 .../shared/indexing_status/index.ts           |  7 +++
 .../indexing_status/indexing_status.test.tsx  | 51 +++++++++++++++++++
 .../indexing_status/indexing_status.tsx       | 48 +++++++++++++++++
 3 files changed, 106 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/index.ts
new file mode 100644
index 0000000000000..4a97f11e8f0ee
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { IndexingStatus } from './indexing_status';
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.test.tsx
new file mode 100644
index 0000000000000..097c3bbc8e9ff
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 { 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 props = {
+    percentageComplete: 50,
+    numDocumentsWithErrors: 1,
+    activeReindexJobId: 12,
+    viewLinkPath: '/path',
+    itemId: '1',
+    getItemDetailPath,
+    getStatusPath,
+    onComplete,
+    setGlobalIndexingStatus,
+  };
+
+  it('renders', () => {
+    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);
+  });
+
+  it('renders errors', () => {
+    const wrapper = shallow(<IndexingStatus {...props} percentageComplete={100} />);
+    const fetcher = wrapper.find(IndexingStatusFetcher).prop('children')(100, 1);
+    expect(shallow(fetcher).find(IndexingStatusErrors)).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx
new file mode 100644
index 0000000000000..7df910805f786
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 { EuiPanel, EuiSpacer } from '@elastic/eui';
+
+import { IndexingStatusContent } from './indexing_status_content';
+import { IndexingStatusErrors } from './indexing_status_errors';
+import { IndexingStatusFetcher } from './indexing_status_fetcher';
+
+import { IIndexingStatus } from '../types';
+
+export interface IIndexingStatusProps extends IIndexingStatus {
+  viewLinkPath: string;
+  itemId: string;
+  getItemDetailPath?(itemId: string): string;
+  getStatusPath(itemId: string, activeReindexJobId: number): string;
+  onComplete(numDocumentsWithErrors: number): void;
+  setGlobalIndexingStatus?(activeReindexJob: IIndexingStatus): void;
+}
+
+export const IndexingStatus: React.FC<IIndexingStatusProps> = (props) => {
+  const statusPanel = (percentComplete: number) => (
+    <EuiPanel paddingSize="l" hasShadow>
+      <IndexingStatusContent percentageComplete={percentComplete} />
+    </EuiPanel>
+  );
+
+  return (
+    <IndexingStatusFetcher {...props}>
+      {(percentageComplete, numDocumentsWithErrors) => (
+        <div className="c-stui-indexing-status-wrapper">
+          {percentageComplete < 100 && statusPanel(percentageComplete)}
+          {percentageComplete === 100 && numDocumentsWithErrors > 0 && (
+            <>
+              <EuiSpacer />
+              <IndexingStatusErrors viewLinkPath={props.viewLinkPath} />
+            </>
+          )}
+        </div>
+      )}
+    </IndexingStatusFetcher>
+  );
+};

From 5bf73de19d84b78c01d010c9fffe9086e246a6d8 Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 12:21:06 -0600
Subject: [PATCH 06/11] Migrate IndexingStatusFetcher component

This is a copy/paste with some modifications. The http/axios code has been removed in favor of the HTTPLogic in Kibana.

This is a WIP that I am merging to master until I can get it working in the UI. Without either Schema component in the UIs for App Search or Workplace Search this is only a POC. Will not backport until this is verified working and have written tests.
---
 .../indexing_status_fetcher.tsx               | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx
new file mode 100644
index 0000000000000..3e04bb8108267
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx
@@ -0,0 +1,99 @@
+/*
+ * 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, { useEffect, useState, useRef } from 'react';
+
+import { Motion, spring } from 'react-motion';
+
+import { HttpLogic } from '../http';
+import { flashAPIErrors } from '../flash_messages';
+
+interface IIndexingStatusFetcherProps {
+  activeReindexJobId: number;
+  itemId: string;
+  percentageComplete: number;
+  numDocumentsWithErrors: number;
+  onComplete?(numDocumentsWithErrors: number): void;
+  getStatusPath(itemId: string, activeReindexJobId: number): string;
+  children(percentageComplete: number, numDocumentsWithErrors: number): JSX.Element;
+}
+
+interface IIndexingStatus {
+  numDocumentsWithErrors: number;
+  percentageComplete: number;
+}
+
+interface IMotionStatusProps {
+  defaultStatus: IIndexingStatus;
+  currentStatus: IIndexingStatus;
+  children(percentageComplete: number, numDocumentsWithErrors: number): JSX.Element;
+}
+
+const MotionStatus: React.FC<IMotionStatusProps> = ({ defaultStatus, currentStatus, children }) => (
+  <Motion
+    defaultStyle={{
+      percentageComplete: defaultStatus.percentageComplete,
+    }}
+    style={{
+      percentageComplete: spring(currentStatus.percentageComplete),
+      numDocumentsWithErrors: currentStatus.numDocumentsWithErrors,
+    }}
+  >
+    {({ percentageComplete, numDocumentsWithErrors }) =>
+      children(percentageComplete, numDocumentsWithErrors)
+    }
+  </Motion>
+);
+
+export const IndexingStatusFetcher: React.FC<IIndexingStatusFetcherProps> = ({
+  activeReindexJobId,
+  children,
+  getStatusPath,
+  itemId,
+  numDocumentsWithErrors,
+  onComplete,
+  percentageComplete = 0,
+}) => {
+  const [indexingStatus, setIndexingStatus] = useState({
+    numDocumentsWithErrors,
+    percentageComplete,
+  });
+  const pollingInterval = useRef<number>();
+
+  useEffect(() => {
+    pollingInterval.current = window.setInterval(async () => {
+      try {
+        const response = await HttpLogic.values.http.get(getStatusPath(itemId, activeReindexJobId));
+        if (response.percentageComplete >= 100) {
+          clearInterval(pollingInterval.current);
+        }
+        setIndexingStatus({
+          percentageComplete: response.percentageComplete,
+          numDocumentsWithErrors: response.numDocumentsWithErrors,
+        });
+        if (response.percentageComplete >= 100 && onComplete) {
+          onComplete(response.numDocumentsWithErrors);
+        }
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    }, 3000);
+
+    return () => {
+      if (pollingInterval.current) {
+        clearInterval(pollingInterval.current);
+      }
+    };
+  }, []);
+
+  return (
+    <MotionStatus
+      currentStatus={indexingStatus}
+      defaultStatus={{ percentageComplete, numDocumentsWithErrors }}
+      children={children}
+    />
+  );
+};

From 730ac38116bd1e6e34c169b17c0ee10649733ac6 Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 12:33:42 -0600
Subject: [PATCH 07/11] Add i18n

---
 .../shared/indexing_status/constants.ts       | 28 +++++++++++++++++++
 .../indexing_status_content.tsx               |  4 ++-
 .../indexing_status_errors.tsx                |  6 ++--
 3 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts
new file mode 100644
index 0000000000000..ba6077103ad59
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const INDEXING_STATUS_PROGRESS_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.indexingStatus.progress.title',
+  {
+    defaultMessage: 'Indexing progress',
+  }
+);
+
+export const INDEXING_STATUS_HAS_ERRORS_TITLE = i18n.translate(
+  'xpack.enterpriseSearch.indexingStatus.hasErrors.title',
+  {
+    defaultMessage: 'Several documents have field conversion errors.',
+  }
+);
+
+export const INDEXING_STATUS_HAS_ERRORS_BUTTON = i18n.translate(
+  'xpack.enterpriseSearch.indexingStatus.hasErrors.button',
+  {
+    defaultMessage: 'View Errors',
+  }
+);
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx
index d62f14ed79c2f..a0c67388621a8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_content.tsx
@@ -8,6 +8,8 @@ import React from 'react';
 
 import { EuiProgress, EuiSpacer, EuiTitle } from '@elastic/eui';
 
+import { INDEXING_STATUS_PROGRESS_TITLE } from './constants';
+
 interface IIndexingStatusContentProps {
   percentageComplete: number;
 }
@@ -17,7 +19,7 @@ export const IndexingStatusContent: React.FC<IIndexingStatusContentProps> = ({
 }) => (
   <div data-test-subj="IndexingStatusProgressMeter">
     <EuiTitle size="s">
-      <h3>Indexing progress</h3>
+      <h3>{INDEXING_STATUS_PROGRESS_TITLE}</h3>
     </EuiTitle>
     <EuiSpacer size="s" />
     <EuiProgress color="primary" size="m" value={percentageComplete} max={100} />
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
index 344a0187c46c0..7986d0fa757d7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
@@ -10,6 +10,8 @@ import { EuiButton, EuiCallOut } from '@elastic/eui';
 
 import { EuiLinkTo } from '../react_router_helpers';
 
+import { INDEXING_STATUS_HAS_ERRORS_TITLE, INDEXING_STATUS_HAS_ERRORS_BUTTON } from './constants';
+
 interface IIndexingStatusErrorsProps {
   viewLinkPath: string;
 }
@@ -22,9 +24,9 @@ export const IndexingStatusErrors: React.FC<IIndexingStatusErrorsProps> = ({ vie
     title="There was an error"
     data-test-subj="IndexingStatusErrors"
   >
-    <p>Several documents have field conversion errors.</p>
+    <p>{INDEXING_STATUS_HAS_ERRORS_TITLE}</p>
     <EuiButton color="danger" fill={true} size="s" data-test-subj="ViewErrorsButton">
-      <EuiLinkTo to={viewLinkPath}>View Errors</EuiLinkTo>
+      <EuiLinkTo to={viewLinkPath}>{INDEXING_STATUS_HAS_ERRORS_BUTTON}</EuiLinkTo>
     </EuiButton>
   </EuiCallOut>
 );

From e0411e3483ae100ba7e4bf643d549aed1242f1ff Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 14:28:01 -0600
Subject: [PATCH 08/11] Revert "Add react-motion package"

This reverts commit 92db929d2ab45bba36be7fd53acee495e4969981.
---
 package.json |  2 --
 yarn.lock    | 16 ----------------
 2 files changed, 18 deletions(-)

diff --git a/package.json b/package.json
index f5c8dfa31851e..1febfc2380b7a 100644
--- a/package.json
+++ b/package.json
@@ -278,7 +278,6 @@
     "react-intl": "^2.8.0",
     "react-is": "^16.8.0",
     "react-moment-proptypes": "^1.7.0",
-    "react-motion": "^0.5.2",
     "react-portal": "^3.2.0",
     "react-redux": "^7.2.0",
     "react-resizable": "^1.7.5",
@@ -522,7 +521,6 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-grid-layout": "^0.16.7",
     "@types/react-intl": "^2.3.15",
-    "@types/react-motion": "^0.0.29",
     "@types/react-redux": "^7.1.9",
     "@types/react-resize-detector": "^4.0.1",
     "@types/react-router": "^5.1.7",
diff --git a/yarn.lock b/yarn.lock
index 7167599d96337..1f5eba54fb835 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5475,13 +5475,6 @@
   resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e"
   integrity sha512-FGd6J1GQ7zvl1GZ3BBev83B7nfak8dqoR2PZ+l5MoisKMpd4xOLhZJC1ugpmk3Rz5F85t6HbOg9mYqXW97BsNA==
 
-"@types/react-motion@^0.0.29":
-  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/react-motion/-/react-motion-0.0.29.tgz#1a22e11bc1452150e8aa58463f72dd921ff10721"
-  integrity sha512-MD1DbdcDKruR0zz5Z0XIlrkPdjDMgYx0AHhbaoTBpDirUTt8Bd7x6OFE458nEINZxfPW0EcEOw2O8S/WwGNLsA==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-native@*":
   version "0.60.22"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.22.tgz#ba199a441cb0612514244ffb1d0fe6f04c878575"
@@ -23348,15 +23341,6 @@ react-motion@^0.4.8:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-motion@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
-  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
-  dependencies:
-    performance-now "^0.2.0"
-    prop-types "^15.5.8"
-    raf "^3.1.0"
-
 react-onclickoutside@^6.5.0:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"

From e34f03801bc3a209d11978957a434fa625f74f1a Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 14:29:00 -0600
Subject: [PATCH 09/11] Remove motion dependency

---
 .../indexing_status_fetcher.tsx               | 37 +------------------
 1 file changed, 1 insertion(+), 36 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx
index 3e04bb8108267..cb7c82f91ed61 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_fetcher.tsx
@@ -6,8 +6,6 @@
 
 import React, { useEffect, useState, useRef } from 'react';
 
-import { Motion, spring } from 'react-motion';
-
 import { HttpLogic } from '../http';
 import { flashAPIErrors } from '../flash_messages';
 
@@ -21,33 +19,6 @@ interface IIndexingStatusFetcherProps {
   children(percentageComplete: number, numDocumentsWithErrors: number): JSX.Element;
 }
 
-interface IIndexingStatus {
-  numDocumentsWithErrors: number;
-  percentageComplete: number;
-}
-
-interface IMotionStatusProps {
-  defaultStatus: IIndexingStatus;
-  currentStatus: IIndexingStatus;
-  children(percentageComplete: number, numDocumentsWithErrors: number): JSX.Element;
-}
-
-const MotionStatus: React.FC<IMotionStatusProps> = ({ defaultStatus, currentStatus, children }) => (
-  <Motion
-    defaultStyle={{
-      percentageComplete: defaultStatus.percentageComplete,
-    }}
-    style={{
-      percentageComplete: spring(currentStatus.percentageComplete),
-      numDocumentsWithErrors: currentStatus.numDocumentsWithErrors,
-    }}
-  >
-    {({ percentageComplete, numDocumentsWithErrors }) =>
-      children(percentageComplete, numDocumentsWithErrors)
-    }
-  </Motion>
-);
-
 export const IndexingStatusFetcher: React.FC<IIndexingStatusFetcherProps> = ({
   activeReindexJobId,
   children,
@@ -89,11 +60,5 @@ export const IndexingStatusFetcher: React.FC<IIndexingStatusFetcherProps> = ({
     };
   }, []);
 
-  return (
-    <MotionStatus
-      currentStatus={indexingStatus}
-      defaultStatus={{ percentageComplete, numDocumentsWithErrors }}
-      children={children}
-    />
-  );
+  return children(indexingStatus.percentageComplete, indexingStatus.numDocumentsWithErrors);
 };

From beb9589611890c9c7504fc2680d87140beea9768 Mon Sep 17 00:00:00 2001
From: Scotty Bollinger <scotty.bollinger@elastic.co>
Date: Mon, 30 Nov 2020 15:36:30 -0600
Subject: [PATCH 10/11] Update copy

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
---
 .../public/applications/shared/indexing_status/constants.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts
index ba6077103ad59..b2b76d5b987b9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/constants.ts
@@ -23,6 +23,6 @@ export const INDEXING_STATUS_HAS_ERRORS_TITLE = i18n.translate(
 export const INDEXING_STATUS_HAS_ERRORS_BUTTON = i18n.translate(
   'xpack.enterpriseSearch.indexingStatus.hasErrors.button',
   {
-    defaultMessage: 'View Errors',
+    defaultMessage: 'View errors',
   }
 );

From db239d79ea86a0e4f89893595914946605934355 Mon Sep 17 00:00:00 2001
From: scottybollinger <scotty.bollinger@elastic.co>
Date: Tue, 1 Dec 2020 12:20:27 -0600
Subject: [PATCH 11/11] Refactor per code review

- Remove stui classes
- Inline status
---
 .../indexing_status/indexing_status.tsx       | 42 +++++++++----------
 .../indexing_status_errors.tsx                |  1 -
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx
index 7df910805f786..beec0babea590 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status.tsx
@@ -23,26 +23,22 @@ export interface IIndexingStatusProps extends IIndexingStatus {
   setGlobalIndexingStatus?(activeReindexJob: IIndexingStatus): void;
 }
 
-export const IndexingStatus: React.FC<IIndexingStatusProps> = (props) => {
-  const statusPanel = (percentComplete: number) => (
-    <EuiPanel paddingSize="l" hasShadow>
-      <IndexingStatusContent percentageComplete={percentComplete} />
-    </EuiPanel>
-  );
-
-  return (
-    <IndexingStatusFetcher {...props}>
-      {(percentageComplete, numDocumentsWithErrors) => (
-        <div className="c-stui-indexing-status-wrapper">
-          {percentageComplete < 100 && statusPanel(percentageComplete)}
-          {percentageComplete === 100 && numDocumentsWithErrors > 0 && (
-            <>
-              <EuiSpacer />
-              <IndexingStatusErrors viewLinkPath={props.viewLinkPath} />
-            </>
-          )}
-        </div>
-      )}
-    </IndexingStatusFetcher>
-  );
-};
+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>
+);
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
index 7986d0fa757d7..a928400b2338c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/indexing_status/indexing_status_errors.tsx
@@ -18,7 +18,6 @@ interface IIndexingStatusErrorsProps {
 
 export const IndexingStatusErrors: React.FC<IIndexingStatusErrorsProps> = ({ viewLinkPath }) => (
   <EuiCallOut
-    className="c-stui-indexing-status-errors"
     color="danger"
     iconType="cross"
     title="There was an error"