Table visualization re-write (#11031)

* Re-write table vis

Signed-off-by: abbyhu2000 <[email protected]>

* UI changes

Signed-off-by: abbyhu2000 <[email protected]>

* Changeset file for PR #11031 created/updated

* add tests

Signed-off-by: abbyhu2000 <[email protected]>

* fix hover

Signed-off-by: abbyhu2000 <[email protected]>

* fix unit test

Signed-off-by: abbyhu2000 <[email protected]>

---------

Signed-off-by: abbyhu2000 <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: abbyhu2000

changelogs/fragments/11031.yml

@@ -0,0 +1,2 @@
+feat:
+- Table visualization re-write ([#11031](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11031))

src/plugins/vis_type_table/public/components/table_vis_component.test.tsx

@@ -4,36 +4,36 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { TableVisConfig, ColumnSort } from '../types';
+import { shallow, mount } from 'enzyme';
+import { TableVisConfig, ColumnSort, AggTypes } from '../types';
 import { TableVisComponent } from './table_vis_component';
 import { FormattedColumn } from '../types';
 import { FormattedTableContext } from '../table_vis_response_handler';
-import { getTableVisCellValue } from './table_vis_cell';
-import { getDataGridColumns } from './table_vis_grid_columns';
-import { EuiDataGridColumn } from '@elastic/eui';
-
-jest.mock('./table_vis_cell', () => ({
-  getTableVisCellValue: jest.fn(() => () => {}),
-}));
-
-const mockGetDataGridColumns = jest.fn(() => []);
-jest.mock('./table_vis_grid_columns', () => ({
-  getDataGridColumns: jest.fn(() => mockGetDataGridColumns()),
-}));
+import { TableVisDynamicTable } from './table_vis_dynamic_table';
+import { TableUiState } from '../utils/get_table_ui_state';
+
+const mockFormatter = {
+  convert: jest.fn((val) => val),
+  getConverterFor: jest.fn(),
+  getParamDefaults: jest.fn(),
+  param: jest.fn(),
+  params: jest.fn(),
+  type: { id: 'string' },
+  toJSON: jest.fn(),
+} as any;
 
 const table = {
   formattedColumns: [
     {
       id: 'col-0-2',
       title: 'name.keyword: Descending',
-      formatter: {},
+      formatter: mockFormatter,
       filterable: true,
     },
     {
       id: 'col-1-1',
       title: 'Count',
-      formatter: {},
+      formatter: mockFormatter,
       filterable: false,
       sumTotal: 5,
       formattedTotal: 5,
@@ -90,7 +90,7 @@ const visConfig = {
   showPartialRows: false,
   showTotal: false,
   title: '',
-  totalFunc: 'sum',
+  totalFunc: AggTypes.SUM,
 } as TableVisConfig;
 
 const uiState = {
@@ -109,128 +109,68 @@ describe('TableVisComponent', function () {
     uiState,
   };
 
-  const dataGridColumnsValue = [
-    {
-      id: 'col-0-2',
-      display: 'name.keyword: Descending',
-      displayAsText: 'name.keyword: Descending',
-      actions: {
-        showHide: false,
-        showMoveLeft: false,
-        showMoveRight: false,
-        showSortAsc: {},
-        showSortDesc: {},
-      },
-      cellActions: expect.any(Function),
-    },
-    {
-      id: 'col-1-1',
-      display: 'Count',
-      displayAsText: 'Count',
-      actions: {
-        showHide: false,
-        showMoveLeft: false,
-        showMoveRight: false,
-        showSortAsc: {},
-        showSortDesc: {},
-      },
-      cellActions: undefined,
-    },
-  ] as EuiDataGridColumn[];
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-  it('should render data grid', () => {
+  it('should render TableVisDynamicTable', () => {
     const comp = shallow(<TableVisComponent {...props} />);
-    expect(comp.find('EuiDataGrid')).toHaveLength(1);
+    expect(comp.find(TableVisDynamicTable)).toHaveLength(1);
   });
 
-  it('should render title when provided', () => {
-    const compWithTitle = shallow(<TableVisComponent {...props} title="Test Title" />);
-    const titleElement = compWithTitle.find('EuiTitle');
-    expect(titleElement).toHaveLength(1);
-    expect(titleElement.find('h3').text()).toEqual('Test Title');
+  it('should pass all props to TableVisDynamicTable', () => {
+    const comp = shallow(<TableVisComponent {...props} />);
+    const dynamicTable = comp.find(TableVisDynamicTable);
+
+    expect(dynamicTable.prop('title')).toEqual(props.title);
+    expect(dynamicTable.prop('table')).toEqual(props.table);
+    expect(dynamicTable.prop('visConfig')).toEqual(props.visConfig);
+    expect(dynamicTable.prop('event')).toEqual(props.event);
+    expect(dynamicTable.prop('uiState')).toEqual(props.uiState);
   });
 
-  it('should not render title when not provided', () => {
-    const compWithoutTitle = shallow(<TableVisComponent {...props} title={undefined} />);
-    const titleElement = compWithoutTitle.find('EuiTitle');
-    expect(titleElement).toHaveLength(0);
+  it('should pass title when provided', () => {
+    const compWithTitle = shallow(<TableVisComponent {...props} title="Test Title" />);
+    const dynamicTable = compWithTitle.find(TableVisDynamicTable);
+    expect(dynamicTable.prop('title')).toEqual('Test Title');
   });
 
-  it('should set sort if sort column', () => {
-    // @ts-expect-error TS2345 TODO(ts-error): fixme
-    mockGetDataGridColumns.mockReturnValueOnce(dataGridColumnsValue);
-    const comp = shallow(<TableVisComponent {...props} />);
-    const { onSort } = comp.find('EuiDataGrid').prop('sorting') as any;
-    onSort([]);
-    expect(props.uiState.setSort).toHaveBeenCalledWith([]);
-    onSort([{ id: 'col-0-2', direction: 'asc' }]);
-    expect(props.uiState.setSort).toHaveBeenCalledWith({ colIndex: 0, direction: 'asc' });
-    onSort([
-      { id: 'col-0-2', direction: 'asc' },
-      { id: 'col-1-1', direction: 'desc' },
-    ]);
-    expect(props.uiState.setSort).toHaveBeenCalledWith({ colIndex: 1, direction: 'desc' });
+  it('should pass undefined title when not provided', () => {
+    const compWithoutTitle = shallow(<TableVisComponent {...props} title={undefined} />);
+    const dynamicTable = compWithoutTitle.find(TableVisDynamicTable);
+    expect(dynamicTable.prop('title')).toBeUndefined();
   });
 
-  it('should set width if adjust column width', () => {
-    const uiStateProps = {
-      ...props.uiState,
-      width: [
-        { colIndex: 0, width: 12 },
-        { colIndex: 1, width: 8 },
-      ],
-    };
-    const comp = shallow(<TableVisComponent {...props} />);
-    const onColumnResize = comp.find('EuiDataGrid').prop('onColumnResize') as any;
-    onColumnResize({ columnId: 'col-0-2', width: 18 });
-    expect(props.uiState.setWidth).toHaveBeenCalledWith({ colIndex: 0, width: 18 });
-    const updatedComp = shallow(<TableVisComponent {...props} uiState={uiStateProps} />);
-    const onColumnResizeUpdate = updatedComp.find('EuiDataGrid').prop('onColumnResize') as any;
-    onColumnResizeUpdate({ columnId: 'col-0-2', width: 18 });
-    expect(props.uiState.setWidth).toHaveBeenCalledWith({ colIndex: 0, width: 18 });
+  it('should pass visConfig with showTotal', () => {
+    const visConfigWithTotal = { ...visConfig, showTotal: true };
+    const comp = shallow(<TableVisComponent {...props} visConfig={visConfigWithTotal} />);
+    const dynamicTable = comp.find(TableVisDynamicTable);
+    expect(dynamicTable.prop('visConfig').showTotal).toBe(true);
   });
 
-  it('should create sortedRows and pass to getTableVisCellValue', () => {
-    const uiStateProps = {
-      ...props.uiState,
+  it('should pass uiState with sort configuration', () => {
+    const uiStateWithSort = {
+      ...uiState,
       sort: { colIndex: 1, direction: 'asc' } as ColumnSort,
     };
-    const sortedRows = [
-      { 'col-0-2': 'Anthony', 'col-1-1': 1 },
-      { 'col-0-2': 'Timmy', 'col-1-1': 1 },
-      { 'col-0-2': 'Alice', 'col-1-1': 3 },
-    ];
-    // @ts-expect-error TS2345 TODO(ts-error): fixme
-    mockGetDataGridColumns.mockReturnValueOnce(dataGridColumnsValue);
-    shallow(<TableVisComponent {...props} uiState={uiStateProps} />);
-    expect(getTableVisCellValue).toHaveBeenCalledWith(sortedRows, table.formattedColumns);
-    expect(getDataGridColumns).toHaveBeenCalledWith(table, props.event, props.uiState.colWidth);
-  });
-
-  it('should return formattedTotal from footerCellValue', () => {
-    let comp = shallow(<TableVisComponent {...props} />);
-    let renderFooterCellValue = comp.find('EuiDataGrid').prop('renderFooterCellValue') as any;
-    expect(renderFooterCellValue).toEqual(undefined);
-    comp = shallow(<TableVisComponent {...props} visConfig={{ ...visConfig, showTotal: true }} />);
-    renderFooterCellValue = comp.find('EuiDataGrid').prop('renderFooterCellValue');
-    expect(renderFooterCellValue({ columnId: 'col-1-1' })).toEqual(5);
-    expect(renderFooterCellValue({ columnId: 'col-0-2' })).toEqual(null);
+    const comp = shallow(<TableVisComponent {...props} uiState={uiStateWithSort} />);
+    const dynamicTable = comp.find(TableVisDynamicTable);
+    expect(dynamicTable.prop('uiState').sort).toEqual({ colIndex: 1, direction: 'asc' });
   });
 
-  it('should apply pagination correctly', () => {
-    const comp = shallow(<TableVisComponent {...props} />);
-    const paginationProps = comp.find('EuiDataGrid').prop('pagination');
-    expect(paginationProps).toMatchObject({
-      pageIndex: 0,
-      pageSize: 3,
-      onChangeItemsPerPage: expect.any(Function),
-      onChangePage: expect.any(Function),
-    });
-  });
-
-  it('should not call renderFooterCellValue when showTotal is false', () => {
-    const comp = shallow(<TableVisComponent {...props} />);
-    const renderFooterCellValue = comp.find('EuiDataGrid').prop('renderFooterCellValue');
-    expect(renderFooterCellValue).toBeUndefined();
+  it('should pass uiState with column width configuration', () => {
+    const uiStateWithWidth = {
+      ...uiState,
+      colWidth: [
+        { colIndex: 0, width: 12 },
+        { colIndex: 1, width: 8 },
+      ],
+    };
+    const comp = shallow(<TableVisComponent {...props} uiState={uiStateWithWidth} />);
+    const dynamicTable = comp.find(TableVisDynamicTable);
+    expect(dynamicTable.prop('uiState').colWidth).toEqual([
+      { colIndex: 0, width: 12 },
+      { colIndex: 1, width: 8 },
+    ]);
   });
 });