[Discover] Deangularization context error message refactoring

src/plugins/discover/public/application/angular/context_app.html

@@ -12,44 +12,10 @@
 
 
 <!-- Error feedback -->
-<div
-  class="kuiViewContent kuiViewContentItem"
-  ng-if="contextApp.state.loadingStatus.anchor.status === contextApp.constants.LOADING_STATUS.FAILED"
->
-  <div class="kuiInfoPanel kuiInfoPanel--error kuiVerticalRhythm">
-    <div class="kuiInfoPanelHeader">
-      <span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
-      <span
-        class="kuiInfoPanelHeader__title"
-        i18n-id="discover.context.failedToLoadAnchorDocumentDescription"
-        i18n-default-message="Failed to load the anchor document"
-      ></span>
-    </div>
-
-    <div class="kuiInfoPanelBody">
-      <div
-        class="kuiInfoPanelBody__message"
-        ng-if="contextApp.state.loadingStatus.anchor.reason === contextApp.constants.FAILURE_REASONS.INVALID_TIEBREAKER"
-        i18n-id="discover.context.noSearchableTiebreakerFieldDescription"
-        i18n-default-message="No searchable tiebreaker field could be found in the index pattern {indexPatternId}. Please change the advanced setting {tieBreakerFields} to include a valid field for this index pattern."
-        i18n-values="{
-          indexPatternId: contextApp.state.queryParameters.indexPatternId,
-          html_tieBreakerFields: '<code>context:tieBreakerFields</code>'
-        }"
-      >
-      </div>
-      <div
-        class="kuiInfoPanelBody__message"
-        ng-if="contextApp.state.loadingStatus.anchor.reason === contextApp.constants.FAILURE_REASONS.UNKNOWN"
-      >
-        <span
-          i18n-id="discover.context.reloadPageDescription.reloadOrVisitTextMessage"
-          i18n-default-message="Please reload or go back to the document list to select a valid anchor document."
-        ></span>
-    </div>
-    </div>
-  </div>
-</div>
+<context-error-message 
+  status="contextApp.state.loadingStatus.anchor.status" 
+  reason="contextApp.state.loadingStatus.anchor.reason">
+</context-error-message>
 
 <main
   class="kuiViewContent kuiViewContentItem"

src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { ContextErrorMessage } from './context_error_message';
+// @ts-ignore
+import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+describe('loading spinner', function () {
+  let component: ReactWrapper;
+
+  it('ContextErrorMessage does not render on loading', () => {
+    component = mountWithIntl(<ContextErrorMessage status={LOADING_STATUS.LOADING} />);
+    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(0);
+  });
+
+  it('ContextErrorMessage does not render on success loading', () => {
+    component = mountWithIntl(<ContextErrorMessage status={LOADING_STATUS.LOADED} />);
+    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(0);
+  });
+
+  it('ContextErrorMessage renders just the title if the reason is not specifically handled', () => {
+    component = mountWithIntl(<ContextErrorMessage status={LOADING_STATUS.FAILED} />);
+    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(1);
+    expect(findTestSubject(component, 'contextErrorMessageBody').text()).toBe('');
+  });
+
+  it('ContextErrorMessage renders the reason for unknown errors', () => {
+    component = mountWithIntl(
+      <ContextErrorMessage status={LOADING_STATUS.FAILED} reason={FAILURE_REASONS.UNKNOWN} />
+    );
+    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(1);
+    expect(findTestSubject(component, 'contextErrorMessageBody').length).toBe(1);
+  });
+});

src/plugins/discover/public/application/components/context_error_message/context_error_message.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { EuiCallOut, EuiText } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+// @ts-ignore
+import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';
+
+export interface ContextErrorMessageProps {
+  /**
+   * the status of the loading action
+   */
+  status: string;
+  /**
+   * the reason of the error
+   */
+  reason?: string;
+}
+
+export function ContextErrorMessage({ status, reason }: ContextErrorMessageProps) {
+  if (status !== LOADING_STATUS.FAILED) {
+    return null;
+  }
+  return (
+    <I18nProvider>
+      <EuiCallOut
+        title={
+          <FormattedMessage
+            id="discover.context.failedToLoadAnchorDocumentDescription"
+            defaultMessage="Failed to load the anchor document"
+          />
+        }
+        color="danger"
+        iconType="alert"
+        data-test-subj="contextErrorMessageTitle"
+      >
+        <EuiText data-test-subj="contextErrorMessageBody">
+          {reason === FAILURE_REASONS.UNKNOWN && (
+            <FormattedMessage
+              id="discover.context.reloadPageDescription.reloadOrVisitTextMessage"
+              defaultMessage="Please reload or go back to the document list to select a valid anchor document."
+            />
+          )}
+        </EuiText>
+      </EuiCallOut>
+    </I18nProvider>
+  );
+}

src/plugins/discover/public/application/components/context_error_message/context_error_message_directive.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { ContextErrorMessage } from './context_error_message';
+
+export function createContextErrorMessageDirective(reactDirective: any) {
+  return reactDirective(ContextErrorMessage, [
+    ['status', { watchDepth: 'reference' }],
+    ['reason', { watchDepth: 'reference' }],
+  ]);
+}

src/plugins/discover/public/application/components/context_error_message/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+export { ContextErrorMessage } from './context_error_message';
+export { createContextErrorMessageDirective } from './context_error_message_directive';

src/plugins/discover/public/get_inner_angular.ts

@@ -61,6 +61,7 @@ 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 { createContextErrorMessageDirective } from './application/components/context_error_message';
 import { DiscoverStartPlugins } from './plugin';
 import { getScopedHistory } from './kibana_services';
 
@@ -158,6 +159,7 @@ export function initializeInnerAngularModule(
     .directive('hitsCounter', createHitsCounterDirective)
     .directive('loadingSpinner', createLoadingSpinnerDirective)
     .directive('timechartHeader', createTimechartHeaderDirective)
+    .directive('contextErrorMessage', createContextErrorMessageDirective)
     .service('debounce', ['$timeout', DebounceProviderTimeout]);
 }