Table visualization renderer (#79455) (#80121)

* Implement toExpressionAst fn

* Implement table vis renderer, move legacy codebase

* Update legacy paths

* Update types

* Fix filtering

* Update styles

* Remove legacy tests

* Update docs

* Update tests

* Fix tests

Co-authored-by: Kibana Machine <[email protected]>
# Conflicts:
#	docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md
#	docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md
#	src/plugins/expressions/public/public.api.md
#	src/plugins/expressions/server/server.api.md

docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-expressions-public](./kibana-plugin-plugins-expressions-public.md) &gt; [IInterpreterRenderHandlers](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.md) &gt; [uiState](./kibana-plugin-plugins-expressions-public.iinterpreterrenderhandlers.uistate.md)
+
+## IInterpreterRenderHandlers.uiState property
+
+<b>Signature:</b>
+
+```typescript
+uiState?: PersistedState;
+```

docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-expressions-server](./kibana-plugin-plugins-expressions-server.md) &gt; [IInterpreterRenderHandlers](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.md) &gt; [uiState](./kibana-plugin-plugins-expressions-server.iinterpreterrenderhandlers.uistate.md)
+
+## IInterpreterRenderHandlers.uiState property
+
+<b>Signature:</b>
+
+```typescript
+uiState?: PersistedState;
+```

src/plugins/expressions/common/expression_renderers/types.ts

@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { PersistedState } from 'src/plugins/visualizations/public';
+
 export interface ExpressionRenderDefinition<Config = unknown> {
   /**
    * Technical name of the renderer, used as ID to identify renderer in
@@ -68,4 +70,5 @@ export interface IInterpreterRenderHandlers {
   reload: () => void;
   update: (params: any) => void;
   event: (event: any) => void;
+  uiState?: PersistedState;
 }

src/plugins/vis_type_table/public/index.ts

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import './index.scss';
 import { PluginInitializerContext } from 'kibana/public';
 import { TableVisPlugin as Plugin } from './plugin';
 

src/plugins/vis_type_table/public/_table_vis.scss → src/plugins/vis_type_table/public/legacy/_table_vis.scss

@@ -4,8 +4,10 @@
 .table-vis {
   display: flex;
   flex-direction: column;
-  flex: 1 0 100%;
+  flex: 1 1 0;
   overflow: auto;
+
+  @include euiScrollBar;
 }
 
 .table-vis-container {

src/plugins/vis_type_table/public/agg_table/agg_table.js → src/plugins/vis_type_table/public/legacy/agg_table/agg_table.js

@@ -17,9 +17,9 @@
  * under the License.
  */
 import _ from 'lodash';
-import { CSV_SEPARATOR_SETTING, CSV_QUOTE_VALUES_SETTING } from '../../../share/public';
+import { CSV_SEPARATOR_SETTING, CSV_QUOTE_VALUES_SETTING } from '../../../../share/public';
 import aggTableTemplate from './agg_table.html';
-import { getFormatService } from '../services';
+import { getFormatService } from '../../services';
 import { i18n } from '@kbn/i18n';
 
 export function KbnAggTable(config, RecursionHelper) {

src/plugins/vis_type_table/public/agg_table/agg_table.test.js → src/plugins/vis_type_table/public/legacy/agg_table/agg_table.test.js

@@ -24,14 +24,14 @@ import 'angular-mocks';
 import sinon from 'sinon';
 import { round } from 'lodash';
 
-import { getFieldFormatsRegistry } from '../../../data/public/test_utils';
-import { coreMock } from '../../../../core/public/mocks';
-import { initAngularBootstrap } from '../../../kibana_legacy/public';
-import { setUiSettings } from '../../../data/public/services';
-import { UI_SETTINGS } from '../../../data/public/';
-import { CSV_SEPARATOR_SETTING, CSV_QUOTE_VALUES_SETTING } from '../../../share/public';
-
-import { setFormatService } from '../services';
+import { getFieldFormatsRegistry } from '../../../../data/public/test_utils';
+import { coreMock } from '../../../../../core/public/mocks';
+import { initAngularBootstrap } from '../../../../kibana_legacy/public';
+import { setUiSettings } from '../../../../data/public/services';
+import { UI_SETTINGS } from '../../../../data/public/';
+import { CSV_SEPARATOR_SETTING, CSV_QUOTE_VALUES_SETTING } from '../../../../share/public';
+
+import { setFormatService } from '../../services';
 import { getInnerAngular } from '../get_inner_angular';
 import { initTableVisLegacyModule } from '../table_vis_legacy_module';
 import { tabifiedData } from './tabified_data';

src/plugins/vis_type_table/public/agg_table/agg_table_group.test.js → src/plugins/vis_type_table/public/legacy/agg_table/agg_table_group.test.js

@@ -22,11 +22,11 @@ import angular from 'angular';
 import 'angular-mocks';
 import expect from '@kbn/expect';
 
-import { getFieldFormatsRegistry } from '../../../data/public/test_utils';
-import { coreMock } from '../../../../core/public/mocks';
-import { initAngularBootstrap } from '../../../kibana_legacy/public';
-import { setUiSettings } from '../../../data/public/services';
-import { setFormatService } from '../services';
+import { getFieldFormatsRegistry } from '../../../../data/public/test_utils';
+import { coreMock } from '../../../../../core/public/mocks';
+import { initAngularBootstrap } from '../../../../kibana_legacy/public';
+import { setUiSettings } from '../../../../data/public/services';
+import { setFormatService } from '../../services';
 import { getInnerAngular } from '../get_inner_angular';
 import { initTableVisLegacyModule } from '../table_vis_legacy_module';
 import { tabifiedData } from './tabified_data';

src/plugins/vis_type_table/public/get_inner_angular.ts → src/plugins/vis_type_table/public/legacy/get_inner_angular.ts

@@ -33,7 +33,7 @@ import {
   PrivateProvider,
   watchMultiDecorator,
   KbnAccessibleClickProvider,
-} from '../../kibana_legacy/public';
+} from '../../../kibana_legacy/public';
 
 initAngularBootstrap();
 

src/plugins/vis_type_table/public/paginated_table/paginated_table.test.ts → src/plugins/vis_type_table/public/legacy/paginated_table/paginated_table.test.ts

@@ -25,11 +25,7 @@ import 'angular-mocks';
 
 import { getAngularModule } from '../get_inner_angular';
 import { initTableVisLegacyModule } from '../table_vis_legacy_module';
-import { coreMock } from '../../../../core/public/mocks';
-
-jest.mock('../../../kibana_legacy/public/angular/angular_config', () => ({
-  configureAppAngularModule: () => {},
-}));
+import { coreMock } from '../../../../../core/public/mocks';
 
 interface Sort {
   columnIndex: number;

src/plugins/vis_type_table/public/paginated_table/rows.js → src/plugins/vis_type_table/public/legacy/paginated_table/rows.js

@@ -44,15 +44,18 @@ export function KbnRows($compile) {
             }
 
             $scope.filter({
-              data: [
-                {
-                  table: $scope.table,
-                  row: $scope.rows.findIndex((r) => r === row),
-                  column: $scope.table.columns.findIndex((c) => c.id === column.id),
-                  value,
-                },
-              ],
-              negate,
+              name: 'filterBucket',
+              data: {
+                data: [
+                  {
+                    table: $scope.table,
+                    row: $scope.rows.findIndex((r) => r === row),
+                    column: $scope.table.columns.findIndex((c) => c.id === column.id),
+                    value,
+                  },
+                ],
+                negate,
+              },
             });
           };
 

src/plugins/vis_type_table/public/table_vis.html → src/plugins/vis_type_table/public/legacy/table_vis.html

@@ -15,7 +15,7 @@
 
   <div ng-if="tableGroups" class="table-vis-container" data-test-subj="tableVis">
     <kbn-agg-table-group
-      filter="vis.API.events.filter"
+      filter="filter"
       dimensions="dimensions"
       group="tableGroups"
       export-title="visState.title"

src/plugins/vis_type_table/public/table_vis_controller.test.ts → src/plugins/vis_type_table/public/legacy/table_vis_controller.test.ts

@@ -24,24 +24,19 @@ import $ from 'jquery';
 
 import { getAngularModule } from './get_inner_angular';
 import { initTableVisLegacyModule } from './table_vis_legacy_module';
-import { getTableVisTypeDefinition } from './table_vis_type';
-import { Vis } from '../../visualizations/public';
-import { stubFields } from '../../data/public/stubs';
-import { tableVisResponseHandler } from './table_vis_response_handler';
-import { coreMock } from '../../../core/public/mocks';
-import { IAggConfig, search } from '../../data/public';
-import { getStubIndexPattern } from '../../data/public/test_utils';
-// TODO: remove linting disable
-import { searchServiceMock } from '../../data/public/search/mocks';
+import { tableVisTypeDefinition } from '../table_vis_type';
+import { Vis } from '../../../visualizations/public';
+import { stubFields } from '../../../data/public/stubs';
+import { tableVisResponseHandler } from '../table_vis_response_handler';
+import { coreMock } from '../../../../core/public/mocks';
+import { IAggConfig, search } from '../../../data/public';
+import { getStubIndexPattern } from '../../../data/public/test_utils';
+import { searchServiceMock } from '../../../data/public/search/mocks';
 
 const { createAggConfigs } = searchServiceMock.createStartContract().aggs;
 
 const { tabifyAggResponse } = search;
 
-jest.mock('../../kibana_legacy/public/angular/angular_config', () => ({
-  configureAppAngularModule: () => {},
-}));
-
 interface TableVisScope extends IScope {
   [key: string]: any;
 }
@@ -112,10 +107,6 @@ describe('Table Vis - Controller', () => {
       coreMock.createSetup()
     );
   });
-  const tableVisTypeDefinition = getTableVisTypeDefinition(
-    coreMock.createSetup(),
-    coreMock.createPluginInitializerContext()
-  );
 
   function getRangeVis(params?: object) {
     return ({

src/plugins/vis_type_table/public/legacy/table_vis_legacy_renderer.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { CoreSetup, PluginInitializerContext } from 'kibana/public';
+import { ExpressionRenderDefinition } from 'src/plugins/expressions';
+import { TablePluginStartDependencies } from '../plugin';
+import { TableVisRenderValue } from '../table_vis_fn';
+import { TableVisLegacyController } from './vis_controller';
+
+const tableVisRegistry = new Map<HTMLElement, TableVisLegacyController>();
+
+export const getTableVisLegacyRenderer: (
+  core: CoreSetup<TablePluginStartDependencies>,
+  context: PluginInitializerContext
+) => ExpressionRenderDefinition<TableVisRenderValue> = (core, context) => ({
+  name: 'table_vis',
+  reuseDomNode: true,
+  render: async (domNode, config, handlers) => {
+    let registeredController = tableVisRegistry.get(domNode);
+
+    if (!registeredController) {
+      const { getTableVisualizationControllerClass } = await import('./vis_controller');
+
+      const Controller = getTableVisualizationControllerClass(core, context);
+      registeredController = new Controller(domNode);
+      tableVisRegistry.set(domNode, registeredController);
+
+      handlers.onDestroy(() => {
+        registeredController?.destroy();
+        tableVisRegistry.delete(domNode);
+      });
+    }
+
+    await registeredController.render(config.visData, config.visConfig, handlers);
+    handlers.done();
+  },
+});