[Discover] Deangularize the loading spinner (#67165) (#67275)

* [Discover] Deangularize the loading spinner

* Eslint changes

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>

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'">

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);
+  });
+});

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);
+}

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]);
 }