De-angularize DocViewer table layout (elastic#43240) (elastic#44065)

* Convert component to React

* EUI-ficate buttons, warnings and collapse button

* Add jest tests

src/legacy/core_plugins/data/public/index_patterns/index_patterns/format_hit.ts

@@ -26,17 +26,28 @@ const partialFormattedCache = new WeakMap();
 // Takes a hit, merges it with any stored/scripted fields, and with the metaFields
 // returns a formatted version
 export function formatHitProvider(indexPattern: IndexPattern, defaultFormat: any) {
-  function convert(hit: Record<string, any>, val: any, fieldName: string) {
+  function convert(hit: Record<string, any>, val: any, fieldName: string, type: string = 'html') {
     const field = indexPattern.fields.byName[fieldName];
-    if (!field) return defaultFormat.convert(val, 'html');
+    if (!field) return defaultFormat.convert(val, type);
     const parsedUrl = {
       origin: window.location.origin,
       pathname: window.location.pathname,
     };
-    return field.format.getConverterFor('html')(val, field, hit, parsedUrl);
+    return field.format.getConverterFor(type)(val, field, hit, parsedUrl);
   }
 
-  function formatHit(hit: Record<string, any>) {
+  function formatHit(hit: Record<string, any>, type: string = 'html') {
+    if (type === 'text') {
+      // formatHit of type text is for react components to get rid of <span ng-non-bindable>
+      // since it's currently just used at the discover's doc view table, caching is not necessary
+      const flattened = indexPattern.flattenHit(hit);
+      const result: Record<string, any> = {};
+      for (const [key, value] of Object.entries(flattened)) {
+        result[key] = convert(hit, value, key, type);
+      }
+      return result;
+    }
+
     const cached = formattedCache.get(hit);
     if (cached) {
       return cached;

src/legacy/core_plugins/kbn_doc_views/public/filters/trust_as_html.js → src/legacy/core_plugins/kbn_doc_views/public/views/table.ts

@@ -17,11 +17,15 @@
  * under the License.
  */
 
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/doc_views');
+import _ from 'lodash';
+import { addDocView } from 'ui/registry/doc_views';
+import { i18n } from '@kbn/i18n';
+import { DocViewTable } from './table/table';
 
-// Simple filter to allow using ng-bind-html without explicitly calling $sce.trustAsHtml in a controller
-// (See http://goo.gl/mpj9o2)
-module.filter('trustAsHtml', function ($sce) {
-  return $sce.trustAsHtml;
+addDocView({
+  title: i18n.translate('kbnDocViews.table.tableTitle', {
+    defaultMessage: 'Table',
+  }),
+  order: 10,
+  component: DocViewTable,
 });