[Data table] Reactify & EUIficate the visualization

scripts/functional_tests.js

@@ -24,6 +24,7 @@ const alwaysImportedTests = [
   require.resolve('../test/ui_capabilities/newsfeed_err/config.ts'),
   require.resolve('../test/new_visualize_flow/config.ts'),
   require.resolve('../test/security_functional/config.ts'),
+  require.resolve('../test/functional/config.legacy.ts'),
 ];
 // eslint-disable-next-line no-restricted-syntax
 const onlyNotInCoverageTests = [

src/plugins/vis_type_table/README.md

@@ -1 +1,8 @@
-Contains the data table visualization, that allows presenting data in a simple table format.
+Contains the data table visualization, that allows presenting data in a simple table format.
+
+By default a new version of visualization will be used. To use the previous version of visualization the config must have the `vis_type_table.legacyVisEnabled: true` setting
+configured in `kibana.dev.yml` or `kibana.yml`, as shown in the example below:
+
+```yaml
+vis_type_table.legacyVisEnabled: true
+```

src/plugins/vis_type_table/config.ts

@@ -21,6 +21,7 @@ import { schema, TypeOf } from '@kbn/config-schema';
 
 export const configSchema = schema.object({
   enabled: schema.boolean({ defaultValue: true }),
+  legacyVisEnabled: schema.boolean({ defaultValue: false }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/vis_type_table/kibana.json

@@ -11,8 +11,10 @@
   ],
   "requiredBundles": [
     "kibanaUtils",
+    "kibanaReact",
     "share",
     "charts",
     "visDefaultEditor"
-  ]
+  ],
+  "optionalPlugins": ["usageCollection"]
 }

src/plugins/vis_type_table/public/components/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { TableOptions } from './table_vis_options_lazy';

src/plugins/vis_type_table/public/components/table_vis_basic.tsx

@@ -0,0 +1,149 @@
+/*
+ * 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 React, { memo, useCallback, useMemo } from 'react';
+import { EuiDataGrid, EuiDataGridSorting, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { orderBy } from 'lodash';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { createTableVisCell } from './table_vis_cell';
+import { Table } from '../table_vis_response_handler';
+import { TableVisConfig, TableVisUiState } from '../types';
+import { useFormattedColumnsAndRows, usePagination } from '../utils';
+import { TableVisControls } from './table_vis_controls';
+import { createGridColumns } from './table_vis_columns';
+
+interface TableVisBasicProps {
+  fireEvent: IInterpreterRenderHandlers['event'];
+  setSort: (s?: TableVisUiState['sort']) => void;
+  sort: TableVisUiState['sort'];
+  table: Table;
+  visConfig: TableVisConfig;
+  title?: string;
+}
+
+export const TableVisBasic = memo(
+  ({ fireEvent, setSort, sort, table, visConfig, title }: TableVisBasicProps) => {
+    const { columns, rows } = useFormattedColumnsAndRows(table, visConfig);
+
+    // custom sorting is in place until the EuiDataGrid sorting gets rid of flaws -> https://github.com/elastic/eui/issues/4108
+    const sortedRows = useMemo(
+      () =>
+        sort.columnIndex !== null && sort.direction
+          ? orderBy(rows, columns[sort.columnIndex]?.id, sort.direction)
+          : rows,
+      [columns, rows, sort]
+    );
+
+    // renderCellValue is a component which renders a cell based on column and row indexes
+    const renderCellValue = useMemo(() => createTableVisCell(columns, sortedRows), [
+      columns,
+      sortedRows,
+    ]);
+
+    // Columns config
+    const gridColumns = useMemo(() => createGridColumns(table, columns, sortedRows, fireEvent), [
+      table,
+      columns,
+      sortedRows,
+      fireEvent,
+    ]);
+
+    // Pagination config
+    const pagination = usePagination(visConfig);
+    // Sorting config
+    const sortingColumns = useMemo(
+      () =>
+        sort.columnIndex !== null && sort.direction
+          ? [{ id: columns[sort.columnIndex]?.id, direction: sort.direction }]
+          : [],
+      [columns, sort]
+    );
+    const onSort = useCallback(
+      (sortingCols: EuiDataGridSorting['columns'] | []) => {
+        // data table vis sorting now only handles one column sorting
+        // if data grid provides more columns to sort, pick only the next column to sort
+        const newSortValue = sortingCols.length <= 1 ? sortingCols[0] : sortingCols[1];
+        setSort(
+          newSortValue && {
+            columnIndex: columns.findIndex((c) => c.id === newSortValue.id),
+            direction: newSortValue.direction,
+          }
+        );
+      },
+      [columns, setSort]
+    );
+
+    const dataGridAriaLabel =
+      title ||
+      visConfig.title ||
+      i18n.translate('visTypeTable.defaultAriaLabel', {
+        defaultMessage: 'Data table visualization',
+      });
+
+    return (
+      <>
+        {title && (
+          <EuiTitle size="xs">
+            <h3>{title}</h3>
+          </EuiTitle>
+        )}
+        <EuiDataGrid
+          aria-label={dataGridAriaLabel}
+          columns={gridColumns}
+          gridStyle={{
+            border: 'horizontal',
+            header: 'underline',
+          }}
+          rowCount={rows.length}
+          columnVisibility={{
+            visibleColumns: columns.map(({ id }) => id),
+            setVisibleColumns: () => {},
+          }}
+          toolbarVisibility={
+            visConfig.showToolbar && {
+              showColumnSelector: false,
+              showFullScreenSelector: false,
+              showSortSelector: false,
+              additionalControls: (
+                <TableVisControls
+                  dataGridAriaLabel={dataGridAriaLabel}
+                  cols={columns}
+                  rows={rows}
+                  table={table}
+                  filename={visConfig.title}
+                />
+              ),
+            }
+          }
+          renderCellValue={renderCellValue}
+          renderFooterCellValue={
+            visConfig.showTotal
+              ? // @ts-expect-error
+                ({ colIndex }) => columns[colIndex].formattedTotal || null
+              : undefined
+          }
+          pagination={pagination}
+          sorting={{ columns: sortingColumns, onSort }}
+        />
+      </>
+    );
+  }
+);

src/plugins/vis_type_table/public/components/table_vis_cell.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 React from 'react';
+import { EuiDataGridCellValueElementProps } from '@elastic/eui';
+
+import { Table } from '../table_vis_response_handler';
+import { FormattedColumn } from '../types';
+
+export const createTableVisCell = (formattedColumns: FormattedColumn[], rows: Table['rows']) => ({
+  // @ts-expect-error
+  colIndex,
+  rowIndex,
+  columnId,
+}: EuiDataGridCellValueElementProps) => {
+  const rowValue = rows[rowIndex][columnId];
+  const column = formattedColumns[colIndex];
+  const content = column?.formatter?.convert(rowValue, 'html') || (rowValue as string) || '';
+
+  const cellContent = (
+    <div
+      /*
+       * Justification for dangerouslySetInnerHTML:
+       * The Data table visualization can "enrich" cell contents by applying a field formatter,
+       * which we want to do if possible.
+       */
+      dangerouslySetInnerHTML={{ __html: content }} // eslint-disable-line react/no-danger
+      data-test-subj="tbvChartCellContent"
+    />
+  );
+
+  return cellContent;
+};