[Discover] Deangularization of search embeddable (#100552)

* [Discover] Render empty embeddable

* First version of grid embeddable

* More search embeddable

* Almost stable version

* Fixing typescript errors

* Fixing filtering and sorting

* Add data-shared-item to DiscoverGridEmbeddable

* Trigger rerender when title changes

* Fixing incorrectly touched files

* Remove search_embeddable

* Remove lodash

* Fixing imports

* Minor fixes

* Removing unnecessary files

* Minor fix

* Remove unused import

* Applying PR comments

* Applying PR comments

* Removing search embeddable

* Fix missing import

* Addressing PR comments

* Do not memoize saved search component

* Applying Matthias's suggestion

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

src/plugins/discover/public/application/angular/create_discover_grid_directive.tsx

@@ -51,5 +51,6 @@ export function createDiscoverGridDirective(reactDirective: any) {
     ['settings', { watchDepth: 'reference' }],
     ['showTimeCol', { watchDepth: 'value' }],
     ['sort', { watchDepth: 'value' }],
+    ['className', { watchDepth: 'value' }],
   ]);
 }

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
+import { IScope } from 'angular';
+import { getServices } from '../../../kibana_services';
+import { DocTableLegacyProps, injectAngularElement } from './create_doc_table_react';
+
+type AngularEmbeddableScope = IScope & { renderProps?: DocTableEmbeddableProps };
+
+export interface DocTableEmbeddableProps extends Partial<DocTableLegacyProps> {
+  refs: HTMLElement;
+}
+
+function getRenderFn(domNode: Element, props: DocTableEmbeddableProps) {
+  const directive = {
+    template: `<doc-table
+        class="panel-content"
+        columns="renderProps.columns"
+        data-description="{{renderProps.searchDescription}}"
+        data-shared-item
+        data-test-subj="embeddedSavedSearchDocTable"
+        data-title="{{renderProps.sharedItemTitle}}"
+        filter="renderProps.onFilter"
+        hits="renderProps.rows"
+        index-pattern="renderProps.indexPattern"
+        is-loading="renderProps.isLoading"
+        on-add-column="renderProps.onAddColumn"
+        on-change-sort-order="renderProps.onSort"
+        on-move-column="renderProps.onMoveColumn"
+        on-remove-column="renderProps.onRemoveColumn"
+        render-complete
+        sorting="renderProps.sort"
+        total-hit-count="renderProps.totalHitCount"
+        use-new-fields-api="renderProps.useNewFieldsApi"></doc-table>`,
+  };
+
+  return async () => {
+    try {
+      const injector = await getServices().getEmbeddableInjector();
+      return await injectAngularElement(domNode, directive.template, props, injector);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      throw e;
+    }
+  };
+}
+
+export function DiscoverDocTableEmbeddable(props: DocTableEmbeddableProps) {
+  return (
+    <I18nProvider>
+      <DocTableLegacyInner {...props} />
+    </I18nProvider>
+  );
+}
+
+function DocTableLegacyInner(renderProps: DocTableEmbeddableProps) {
+  const scope = useRef<AngularEmbeddableScope | undefined>();
+
+  useEffect(() => {
+    if (renderProps.refs && !scope.current) {
+      const fn = getRenderFn(renderProps.refs, renderProps);
+      fn().then((newScope) => {
+        scope.current = newScope;
+      });
+    } else if (scope?.current) {
+      scope.current.renderProps = { ...renderProps };
+      scope.current.$applyAsync();
+    }
+  }, [renderProps]);
+
+  useEffect(() => {
+    return () => {
+      scope.current?.$destroy();
+    };
+  }, []);
+  return <React.Fragment />;
+}

src/plugins/discover/public/application/angular/doc_table/index.ts

@@ -9,3 +9,4 @@
 export { createDocTableDirective } from './doc_table';
 export { getSort, getSortArray } from './lib/get_sort';
 export { getSortForSearchSource } from './lib/get_sort_for_search_source';
+export { getDefaultSort } from './lib/get_default_sort';

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

@@ -51,6 +51,10 @@ export interface DiscoverGridProps {
    * Determines which element labels the grid for ARIA
    */
   ariaLabelledBy: string;
+  /**
+   * Optional class name to apply
+   */
+  className?: string;
   /**
    * Determines which columns are displayed
    */
@@ -175,6 +179,7 @@ export const DiscoverGrid = ({
   isSortEnabled = true,
   isPaginationEnabled = true,
   controlColumnIds = ['openDetails', 'select'],
+  className,
 }: DiscoverGridProps) => {
   const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
   const [isFilterActive, setIsFilterActive] = useState(false);
@@ -284,6 +289,7 @@ export const DiscoverGrid = ({
       ),
     [displayedColumns, indexPattern, showTimeCol, settings, defaultColumns, isSortEnabled]
   );
+
   const schemaDetectors = useMemo(() => getSchemaDetectors(), []);
   const columnsVisibility = useMemo(
     () => ({
@@ -368,6 +374,7 @@ export const DiscoverGrid = ({
         data-title={searchTitle}
         data-description={searchDescription}
         data-document-number={displayedRows.length}
+        className={className}
       >
         <KibanaContextProvider services={{ uiSettings: services.uiSettings }}>
           <EuiDataGridMemoized