[Discover] Deangularize context_app.html, part 3

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import {
@@ -86,7 +86,11 @@ export function ActionBar({
       onChangeCount(newDocCount);
     }
   };
-
+  useEffect(() => {
+    if (newDocCount !== docCount && newDocCount === 0) {
+      setNewDocCount(docCount);
+    }
+  }, [docCount, newDocCount]);
   return (
     <I18nProvider>
       <form onSubmit={onSubmit}>

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

@@ -10,33 +10,23 @@
 >
 </kbn-top-nav>
 
-<!-- Error feedback -->
-<context-error-message
+<!-- Context App Legacy -->
+<context-app-legacy
+  filter="contextApp.actions.addFilter"
+  hits="contextApp.state.rows.all"
+  index-pattern="contextApp.indexPattern"
+  sorting="contextApp.state.queryParameters.sort"
+  columns="contextApp.state.queryParameters.columns"
+  minimum-visible-rows="contextApp.state.rows.all.length"
   status="contextApp.state.loadingStatus.anchor.status"
-  reason="contextApp.state.loadingStatus.anchor.reason">
-</context-error-message>
-
-<main
-  class="kuiViewContent kuiViewContentItem"
-  ng-if="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.FAILED"
->
-  <!-- Table -->
-  <context-app-legacy
-    filter="contextApp.actions.addFilter"
-    hits="contextApp.state.rows.all"
-    index-pattern="contextApp.indexPattern"
-    sorting="contextApp.state.queryParameters.sort"
-    columns="contextApp.state.queryParameters.columns"
-    minimum-visible-rows="contextApp.state.rows.all.length"
-    status="contextApp.state.loadingStatus.anchor.status"
-    default-step-size="contextApp.state.queryParameters.defaultStepSize"
-    predecessor-count="contextApp.state.queryParameters.predecessorCount"
-    predecessor-available="contextApp.state.rows.predecessors.length"
-    predecessor-status="contextApp.state.loadingStatus.predecessors.status"
-    on-change-predecessor-count="contextApp.actions.fetchGivenPredecessorRows"
-    successor-count="contextApp.state.queryParameters.successorCount"
-    successor-available="contextApp.state.rows.successors.length"
-    successor-status="contextApp.state.loadingStatus.successors.status"
-    on-change-successor-count="contextApp.actions.fetchGivenSuccessorRows"
-  ></context-app-legacy>
-</main>
+  reason="contextApp.state.loadingStatus.anchor.reason"
+  default-step-size="contextApp.state.queryParameters.defaultStepSize"
+  predecessor-count="contextApp.state.queryParameters.predecessorCount"
+  predecessor-available="contextApp.state.rows.predecessors.length"
+  predecessor-status="contextApp.state.loadingStatus.predecessors.status"
+  on-change-predecessor-count="contextApp.actions.fetchGivenPredecessorRows"
+  successor-count="contextApp.state.queryParameters.successorCount"
+  successor-available="contextApp.state.rows.successors.length"
+  successor-status="contextApp.state.loadingStatus.successors.status"
+  on-change-successor-count="contextApp.actions.fetchGivenSuccessorRows"
+></context-app-legacy>

src/plugins/discover/public/application/components/context_app/context_app_legacy.scss

@@ -0,0 +1,5 @@
+.dscCxtAppContent {
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+}

src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx

@@ -24,6 +24,7 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DocTableLegacy } from '../../angular/doc_table/create_doc_table_react';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { ActionBar } from '../../angular/context/components/action_bar/action_bar';
+import { ContextErrorMessage } from '../context_error_message';
 
 describe('ContextAppLegacy test', () => {
   const hit = {
@@ -53,6 +54,7 @@ describe('ContextAppLegacy test', () => {
     minimumVisibleRows: 5,
     indexPattern,
     status: 'loaded',
+    reason: 'no reason',
     defaultStepSize: 5,
     predecessorCount: 10,
     successorCount: 10,
@@ -76,9 +78,19 @@ describe('ContextAppLegacy test', () => {
     const props = { ...defaultProps };
     props.status = 'loading';
     const component = mountWithIntl(<ContextAppLegacy {...props} />);
-    expect(component.find('DocTableLegacy').length).toBe(0);
+    expect(component.find(DocTableLegacy).length).toBe(0);
     const loadingIndicator = findTestSubject(component, 'contextApp_loadingIndicator');
     expect(loadingIndicator.length).toBe(1);
     expect(component.find(ActionBar).length).toBe(2);
   });
+
+  it('renders error message', () => {
+    const props = { ...defaultProps };
+    props.status = 'failed';
+    props.reason = 'something went wrong';
+    const component = mountWithIntl(<ContextAppLegacy {...props} />);
+    expect(component.find(DocTableLegacy).length).toBe(0);
+    const errorMessage = component.find(ContextErrorMessage);
+    expect(errorMessage.length).toBe(1);
+  });
 });

src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx

@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import './context_app_legacy.scss';
 import React from 'react';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
-import { EuiPanel, EuiText } from '@elastic/eui';
+import { EuiPanel, EuiText, EuiPageContent, EuiPage } from '@elastic/eui';
+import { ContextErrorMessage } from '../context_error_message';
 import {
   DocTableLegacy,
   DocTableLegacyProps,
@@ -35,6 +37,7 @@ export interface ContextAppProps {
   minimumVisibleRows: number;
   sorting: string[];
   status: string;
+  reason: string;
   defaultStepSize: number;
   predecessorCount: number;
   successorCount: number;
@@ -56,6 +59,7 @@ function isLoading(status: string) {
 export function ContextAppLegacy(renderProps: ContextAppProps) {
   const status = renderProps.status;
   const isLoaded = status === LOADING_STATUS.LOADED;
+  const isFailed = status === LOADING_STATUS.FAILED;
 
   const actionBarProps = (type: string) => {
     const {
@@ -111,18 +115,24 @@ export function ContextAppLegacy(renderProps: ContextAppProps) {
 
   return (
     <I18nProvider>
-      <React.Fragment>
-        <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
-        {loadingFeedback()}
-        {isLoaded ? (
-          <EuiPanel paddingSize="none">
-            <div className="discover-table">
-              <DocTableLegacy {...docTableProps()} />
-            </div>
-          </EuiPanel>
-        ) : null}
-        <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
-      </React.Fragment>
+      {isFailed ? (
+        <ContextErrorMessage status={status} reason={renderProps.reason} />
+      ) : (
+        <EuiPage>
+          <EuiPageContent paddingSize="s" className="dscCxtAppContent">
+            <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
+            {loadingFeedback()}
+            {isLoaded ? (
+              <EuiPanel paddingSize="none">
+                <div className="discover-table">
+                  <DocTableLegacy {...docTableProps()} />
+                </div>
+              </EuiPanel>
+            ) : null}
+            <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
+          </EuiPageContent>
+        </EuiPage>
+      )}
     </I18nProvider>
   );
 }

src/plugins/discover/public/application/components/context_app/context_app_legacy_directive.ts

@@ -27,6 +27,7 @@ export function createContextAppLegacy(reactDirective: any) {
     ['columns', { watchDepth: 'collection' }],
     ['minimumVisibleRows', { watchDepth: 'reference' }],
     ['status', { watchDepth: 'reference' }],
+    ['reason', { watchDepth: 'reference' }],
     ['defaultStepSize', { watchDepth: 'reference' }],
     ['predecessorCount', { watchDepth: 'reference' }],
     ['predecessorAvailable', { watchDepth: 'reference' }],

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

@@ -18,4 +18,3 @@
  */
 
 export { ContextErrorMessage } from './context_error_message';
-export { createContextErrorMessageDirective } from './context_error_message_directive';

src/plugins/discover/public/get_inner_angular.ts

@@ -52,7 +52,6 @@ import {
   createTopNavDirective,
   createTopNavHelper,
 } from '../../kibana_legacy/public';
-import { createContextErrorMessageDirective } from './application/components/context_error_message';
 import { DiscoverStartPlugins } from './plugin';
 import { getScopedHistory } from './kibana_services';
 import { createDiscoverLegacyDirective } from './application/components/create_discover_legacy_directive';
@@ -137,8 +136,7 @@ export function initializeInnerAngularModule(
     .config(watchMultiDecorator)
     .run(registerListenEventListener)
     .directive('renderComplete', createRenderCompleteDirective)
-    .directive('discoverLegacy', createDiscoverLegacyDirective)
-    .directive('contextErrorMessage', createContextErrorMessageDirective);
+    .directive('discoverLegacy', createDiscoverLegacyDirective);
 }
 
 function createLocalPromiseModule() {