[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.js'),
   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,6 +11,7 @@
   ],
   "requiredBundles": [
     "kibanaUtils",
+    "kibanaReact",
     "share",
     "charts",
     "visDefaultEditor"

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,117 @@
+/*
+ * 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 } from '@elastic/eui';
+
+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;
+}
+
+export const TableVisBasic = memo(
+  ({ fireEvent, setSort, sort, table, visConfig }: TableVisBasicProps) => {
+    const { columns, rows, splitRow } = useFormattedColumnsAndRows(table, visConfig);
+    const renderCellValue = useMemo(() => createTableVisCell(columns, rows), [columns, rows]);
+    const gridColumns = useMemo(() => createGridColumns(table, columns, rows, fireEvent), [
+      table,
+      columns,
+      rows,
+      fireEvent,
+    ]);
+
+    // Pagination
+    const pagination = usePagination(visConfig);
+    // Sorting config
+    const sortingColumns = useMemo(
+      () =>
+        sort.columnIndex && 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]
+    );
+
+    return (
+      <EuiDataGrid
+        aria-label=""
+        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
+                cols={columns}
+                rows={rows}
+                table={table}
+                filename={visConfig.title}
+                splitRow={splitRow}
+              />
+            ),
+          }
+        }
+        renderCellValue={renderCellValue}
+        renderFooterCellValue={
+          visConfig.showTotal
+            ? // @ts-expect-error
+              ({ colIndex }) => columns[colIndex].formattedTotal || null
+            : undefined
+        }
+        pagination={pagination}
+        inMemory={{ level: 'sorting' }}
+        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;
+};

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

@@ -0,0 +1,140 @@
+/*
+ * 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 { EuiDataGridColumnCellActionProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { Table } from '../table_vis_response_handler';
+import { FormattedColumn } from '../types';
+
+interface FilterCellData {
+  /**
+   * Row index
+   */
+  row: number;
+  /**
+   * Column index
+   */
+  column: number;
+  value: unknown;
+}
+
+export const createGridColumns = (
+  table: Table,
+  columns: FormattedColumn[],
+  rows: Table['rows'],
+  fireEvent: IInterpreterRenderHandlers['event']
+) => {
+  const onFilterClick = (data: FilterCellData, negate: boolean) => {
+    fireEvent({
+      name: 'filterBucket',
+      data: {
+        data: [
+          {
+            table,
+            ...data,
+          },
+        ],
+        negate,
+      },
+    });
+  };
+
+  return columns.map((col, colIndex) => {
+    const cellActions = col.filterable
+      ? [
+          ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+            const rowValue = rows[rowIndex][columnId];
+            const contentsIsDefined = rowValue ?? false;
+
+            const filterForText = i18n.translate(
+              'visTypeTable.tableCellFilter.filterForValueText',
+              {
+                defaultMessage: 'Filter for value',
+              }
+            );
+
+            return (
+              contentsIsDefined && (
+                <Component
+                  aria-label={filterForText}
+                  data-test-subj="tbvChartCell__filterForCellValue"
+                  onClick={() =>
+                    onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, false)
+                  }
+                  iconType="magnifyWithPlus"
+                >
+                  {filterForText}
+                </Component>
+              )
+            );
+          },
+          ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+            const rowValue = rows[rowIndex][columnId];
+            const contentsIsDefined = rowValue ?? false;
+
+            const filterOutText = i18n.translate(
+              'visTypeTable.tableCellFilter.filterOutValueText',
+              {
+                defaultMessage: 'Filter out value',
+              }
+            );
+
+            return (
+              contentsIsDefined && (
+                <Component
+                  aria-label={filterOutText}
+                  onClick={() =>
+                    onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, true)
+                  }
+                  iconType="magnifyWithMinus"
+                >
+                  {filterOutText}
+                </Component>
+              )
+            );
+          },
+        ]
+      : undefined;
+
+    return {
+      id: col.id,
+      display: col.title,
+      displayAsText: col.title,
+      actions: {
+        showHide: false,
+        showMoveLeft: false,
+        showMoveRight: false,
+        showSortAsc: {
+          label: i18n.translate('visTypeTable.sort.ascLabel', {
+            defaultMessage: 'Sort asc',
+          }),
+        },
+        showSortDesc: {
+          label: i18n.translate('visTypeTable.sort.descLabel', {
+            defaultMessage: 'Sort desc',
+          }),
+        },
+      },
+      cellActions,
+    };
+  });
+};