[Discover] Deangularize context.app (#80851)

* [Discover] Deangularize context.app * Add a unit test * Addressing PR comments; fixin I18n provider; replacing kui with EUI code Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Oct 21, 2020 · 3df30e0 · 3df30e0
1 parent c11163d
commit 3df30e0
Show file tree

Hide file tree

Showing 11 changed files with 947 additions and 43 deletions.
diff --git a/src/plugins/discover/public/application/angular/context/query/actions.js b/src/plugins/discover/public/application/angular/context/query/actions.js
@@ -25,7 +25,7 @@ import { getServices } from '../../../../kibana_services';
 import { fetchAnchorProvider } from '../api/anchor';
 import { fetchContextProvider } from '../api/context';
 import { getQueryParameterActions } from '../query_parameters';
-import { FAILURE_REASONS, LOADING_STATUS } from './constants';
+import { FAILURE_REASONS, LOADING_STATUS } from './index';
 import { MarkdownSimple } from '../../../../../../kibana_react/public';
 
 export function QueryActionsProvider(Promise) {

diff --git a/src/plugins/discover/public/application/angular/context/query/index.js b/src/plugins/discover/public/application/angular/context/query/index.js
@@ -18,5 +18,5 @@
  */
 
 export { QueryActionsProvider } from './actions';
-export { FAILURE_REASONS, LOADING_STATUS } from './constants';
+export { FAILURE_REASONS, LOADING_STATUS } from '../../../components/context_app/constants';
 export { createInitialLoadingStatusState } from './state';
diff --git a/src/plugins/discover/public/application/angular/context/query/state.js b/src/plugins/discover/public/application/angular/context/query/state.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { LOADING_STATUS } from './constants';
+import { LOADING_STATUS } from './index';
 
 export function createInitialLoadingStatusState() {
   return {

diff --git a/src/plugins/discover/public/application/angular/context_app.html b/src/plugins/discover/public/application/angular/context_app.html
@@ -12,8 +12,8 @@
 
 
 <!-- Error feedback -->
-<context-error-message 
-  status="contextApp.state.loadingStatus.anchor.status" 
+<context-error-message
+  status="contextApp.state.loadingStatus.anchor.status"
   reason="contextApp.state.loadingStatus.anchor.reason">
 </context-error-message>
 
@@ -35,39 +35,17 @@
         type="'predecessors'"
   ></context-action-bar>
 
-
-  <!-- Loading feedback -->
-  <div
-    ng-if="[
-      contextApp.constants.LOADING_STATUS.UNINITIALIZED,
-      contextApp.constants.LOADING_STATUS.LOADING,
-    ].includes(contextApp.state.loadingStatus.anchor.status)"
-    class="kuiPanel kuiPanel--centered kuiVerticalRhythm"
-  >
-    <div
-      class="kuiTableInfo"
-      i18n-id="discover.context.loadingDescription"
-      i18n-default-message="Loading…"
-    ></div>
-  </div>
-
   <!-- Table -->
-  <div
-    ng-if="contextApp.state.loadingStatus.anchor.status === contextApp.constants.LOADING_STATUS.LOADED"
-    class="kuiPanel kuiVerticalRhythm"
-  >
-    <div class="discover-table" fixed-scroll>
-      <doc-table
-        filter="contextApp.actions.addFilter"
-        hits="contextApp.state.rows.all"
-        index-pattern="contextApp.indexPattern"
-        sorting="contextApp.state.queryParameters.sort"
-        columns="contextApp.state.queryParameters.columns"
-        infinite-scroll="true"
-        minimum-visible-rows="contextApp.state.rows.all.length"
-      ></doc-table>
-    </div>
-  </div>
+  <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"
+    infinite-scroll="true"
+    minimum-visible-rows="contextApp.state.rows.all.length"
+    status="contextApp.state.loadingStatus.anchor.status"
+  ></context-app-legacy>
 
   <!-- Controls -->
   <context-action-bar

diff --git a/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx b/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx
@@ -68,6 +68,7 @@ export function convertDirectiveToRenderFn(
     let rejected = false;
 
     const cleanupFnPromise = injectAngularElement(domNode, directive.template, props, getInjector);
+
     cleanupFnPromise.catch(() => {
       rejected = true;
       render(<div>error</div>, domNode);
@@ -91,10 +92,10 @@ export interface DocTableLegacyProps {
   rows: Array<Record<string, unknown>>;
   indexPattern: IIndexPattern;
   minimumVisibleRows: number;
-  onAddColumn: (column: string) => void;
-  onSort: (sort: string[][]) => void;
-  onMoveColumn: (columns: string, newIdx: number) => void;
-  onRemoveColumn: (column: string) => void;
+  onAddColumn?: (column: string) => void;
+  onSort?: (sort: string[][]) => void;
+  onMoveColumn?: (columns: string, newIdx: number) => void;
+  onRemoveColumn?: (column: string) => void;
   sort?: string[][];
 }