From 335eb1a5956077b35e0cefbac04aca2ec954b324 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Fri, 26 Feb 2021 13:36:30 -0500
Subject: [PATCH] [PR Feedback] Show loading message

---
 .../relevance_tuning.test.tsx                 | 16 +++++++++
 .../relevance_tuning/relevance_tuning.tsx     | 33 ++++++++++++-------
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx
index 112c4611015cd..e2adce7dd7687 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.test.tsx
@@ -13,6 +13,7 @@ import { shallow } from 'enzyme';
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 
+import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
 
 import { RelevanceTuning } from './relevance_tuning';
@@ -27,6 +28,7 @@ describe('RelevanceTuning', () => {
     },
     schemaFieldsWithConflicts: [],
     unsavedChanges: false,
+    dataLoading: false,
   };
 
   const actions = {
@@ -46,6 +48,8 @@ describe('RelevanceTuning', () => {
   it('renders', () => {
     const wrapper = subject();
     expect(wrapper.find(RelevanceTuningForm).exists()).toBe(true);
+    expect(wrapper.find(Loading).exists()).toBe(false);
+    expect(wrapper.find('EmptyCallout').exists()).toBe(false);
   });
 
   it('initializes relevance tuning data', () => {
@@ -60,6 +64,18 @@ describe('RelevanceTuning', () => {
     });
     const wrapper = subject();
     expect(wrapper.find('EmptyCallout').dive().find(EuiEmptyPrompt).exists()).toBe(true);
+    expect(wrapper.find(Loading).exists()).toBe(false);
+    expect(wrapper.find(RelevanceTuningForm).exists()).toBe(false);
+  });
+
+  it('will show a loading message if data is loading', () => {
+    setMockValues({
+      ...values,
+      dataLoading: true,
+    });
+    const wrapper = subject();
+    expect(wrapper.find(Loading).exists()).toBe(true);
+    expect(wrapper.find('EmptyCallout').exists()).toBe(false);
     expect(wrapper.find(RelevanceTuningForm).exists()).toBe(false);
   });
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx
index e1cd20df52deb..0ae3c8fd3b5dc 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/relevance_tuning/relevance_tuning.tsx
@@ -12,6 +12,7 @@ import { useActions, useValues } from 'kea';
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { Loading } from '../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../shared/unsaved_changes_prompt';
 import { DOCS_PREFIX } from '../../routes';
 
@@ -63,26 +64,36 @@ const EmptyCallout: React.FC = () => {
 };
 
 export const RelevanceTuning: React.FC<Props> = ({ engineBreadcrumb }) => {
-  const { engineHasSchemaFields, unsavedChanges } = useValues(RelevanceTuningLogic);
+  const { dataLoading, engineHasSchemaFields, unsavedChanges } = useValues(RelevanceTuningLogic);
   const { initializeRelevanceTuning } = useActions(RelevanceTuningLogic);
 
   useEffect(() => {
     initializeRelevanceTuning();
   }, []);
 
+  const body = () => {
+    if (dataLoading) {
+      return <Loading />;
+    }
+
+    if (!engineHasSchemaFields) {
+      return <EmptyCallout />;
+    }
+
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <RelevanceTuningForm />
+        </EuiFlexItem>
+        <EuiFlexItem />
+      </EuiFlexGroup>
+    );
+  };
+
   return (
     <RelevanceTuningLayout engineBreadcrumb={engineBreadcrumb}>
       <UnsavedChangesPrompt hasUnsavedChanges={unsavedChanges} />
-      {engineHasSchemaFields ? (
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <RelevanceTuningForm />
-          </EuiFlexItem>
-          <EuiFlexItem />
-        </EuiFlexGroup>
-      ) : (
-        <EmptyCallout />
-      )}
+      {body()}
     </RelevanceTuningLayout>
   );
 };