From b095691aff109093fa65040abceb9a1643a1fc0f Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 25 May 2020 18:53:54 +0300
Subject: [PATCH] [Discover] Deangularize the loading spinner (#67165) (#67275)

* [Discover] Deangularize the loading spinner

* Eslint changes

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../public/application/angular/discover.html  | 13 +-----
 .../loading_spinner/loading_spinner.test.tsx  | 34 +++++++++++++++
 .../loading_spinner/loading_spinner.tsx       | 41 +++++++++++++++++++
 .../discover/public/get_inner_angular.ts      |  2 +
 4 files changed, 78 insertions(+), 12 deletions(-)
 create mode 100644 src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx
 create mode 100644 src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx

diff --git a/src/plugins/discover/public/application/angular/discover.html b/src/plugins/discover/public/application/angular/discover.html
index d70d5dad9130b..022c39afff27f 100644
--- a/src/plugins/discover/public/application/angular/discover.html
+++ b/src/plugins/discover/public/application/angular/discover.html
@@ -59,18 +59,7 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
             fetch-error="fetchError"
           ></discover-fetch-error>
 
-          <div ng-hide="fetchError" class="dscOverlay">
-            <h2
-              i18n-id="discover.searchingTitle"
-              i18n-default-message="Searching"
-              class="euiTitle euiTitle--small"
-            ></h2>
-            <div class="euiSpacer euiSpacer--m"></div>
-            <div
-              class="euiLoadingSpinner euiLoadingSpinner--large"
-              data-test-subj="loadingSpinner"
-            ></div>
-          </div>
+          <loading-spinner ng-hide="fetchError" class="dscOverlay"></loading-spinner>
         </div>
 
         <div class="dscWrapper__content" ng-show="resultState === 'ready'">
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx
new file mode 100644
index 0000000000000..3321ac764a05b
--- /dev/null
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ReactWrapper } from 'enzyme';
+import { LoadingSpinner } from './loading_spinner';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+describe('loading spinner', function () {
+  let component: ReactWrapper;
+
+  it('LoadingSpinner renders a Searching text and a spinner', () => {
+    component = mountWithIntl(<LoadingSpinner />);
+    expect(findTestSubject(component, 'loadingSpinnerText').text()).toBe('Searching');
+    expect(findTestSubject(component, 'loadingSpinner').length).toBe(1);
+  });
+});
diff --git a/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
new file mode 100644
index 0000000000000..44b922bf0f708
--- /dev/null
+++ b/src/plugins/discover/public/application/components/loading_spinner/loading_spinner.tsx
@@ -0,0 +1,41 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { EuiLoadingSpinner, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+
+export function LoadingSpinner() {
+  return (
+    <I18nProvider>
+      <>
+        <EuiTitle size="s" data-test-subj="loadingSpinnerText">
+          <h2>
+            <FormattedMessage id="discover.searchingTitle" defaultMessage="Searching" />
+          </h2>
+        </EuiTitle>
+        <EuiSpacer size="m" />
+        <EuiLoadingSpinner size="l" data-test-subj="loadingSpinner" />
+      </>
+    </I18nProvider>
+  );
+}
+
+export function createLoadingSpinnerDirective(reactDirective: any) {
+  return reactDirective(LoadingSpinner);
+}
diff --git a/src/plugins/discover/public/get_inner_angular.ts b/src/plugins/discover/public/get_inner_angular.ts
index a3e2efa785c81..2b4705645cfcc 100644
--- a/src/plugins/discover/public/get_inner_angular.ts
+++ b/src/plugins/discover/public/get_inner_angular.ts
@@ -59,6 +59,7 @@ import {
 } from '../../kibana_legacy/public';
 import { createDiscoverSidebarDirective } from './application/components/sidebar';
 import { createHitsCounterDirective } from '././application/components/hits_counter';
+import { createLoadingSpinnerDirective } from '././application/components/loading_spinner/loading_spinner';
 import { createTimechartHeaderDirective } from './application/components/timechart_header';
 import { DiscoverStartPlugins } from './plugin';
 import { getScopedHistory } from './kibana_services';
@@ -155,6 +156,7 @@ export function initializeInnerAngularModule(
     .directive('renderComplete', createRenderCompleteDirective)
     .directive('discoverSidebar', createDiscoverSidebarDirective)
     .directive('hitsCounter', createHitsCounterDirective)
+    .directive('loadingSpinner', createLoadingSpinnerDirective)
     .directive('timechartHeader', createTimechartHeaderDirective)
     .service('debounce', ['$timeout', DebounceProviderTimeout]);
 }