persist page size in visualization state

elastic · Nov 17, 2021 · e20cc21 · e20cc21
1 parent 750c770
commit e20cc21
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 33 deletions.
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/constants.ts b/x-pack/plugins/lens/public/datatable_visualization/components/constants.ts
@@ -8,3 +8,4 @@
 export const LENS_EDIT_SORT_ACTION = 'sort';
 export const LENS_EDIT_RESIZE_ACTION = 'resize';
 export const LENS_TOGGLE_ACTION = 'toggle';
+export const LENS_EDIT_PAGESIZE_ACTION = 'pagesize';
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
@@ -26,6 +26,8 @@ import { chartPluginMock } from 'src/plugins/charts/public/mocks';
 import { IUiSettingsClient } from 'kibana/public';
 import { RenderMode } from 'src/plugins/expressions';
 
+import { LENS_EDIT_PAGESIZE_ACTION } from './constants';
+
 function sampleArgs() {
   const indexPatternId = 'indexPatternId';
   const data: LensMultiTable = {
@@ -757,5 +759,39 @@ describe('DatatableComponent', () => {
 
       expect(wrapper.find(EuiDataGrid).prop('pagination')).not.toBeTruthy();
     });
+
+    it('dispatches event when page size changed', async () => {
+      const { data, args } = sampleArgs();
+
+      args.pageSize = 10;
+
+      const wrapper = mount(
+        <DatatableComponent
+          data={data}
+          args={args}
+          formatFactory={(x) => x as IFieldFormat}
+          dispatchEvent={onDispatchEvent}
+          getType={jest.fn()}
+          paletteService={chartPluginMock.createPaletteRegistry()}
+          uiSettings={{ get: jest.fn() } as unknown as IUiSettingsClient}
+          renderMode="edit"
+        />
+      );
+
+      const paginationConfig = wrapper.find(EuiDataGrid).prop('pagination');
+      expect(paginationConfig).toBeTruthy();
+
+      const sizeToChangeTo = 100;
+      paginationConfig?.onChangeItemsPerPage(sizeToChangeTo);
+
+      expect(onDispatchEvent).toHaveBeenCalledTimes(1);
+      expect(onDispatchEvent).toHaveBeenCalledWith({
+        name: 'edit',
+        data: {
+          action: LENS_EDIT_PAGESIZE_ACTION,
+          size: sizeToChangeTo,
+        },
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -30,6 +30,7 @@ import type {
   LensSortAction,
   LensResizeAction,
   LensToggleAction,
+  LensPagesizeAction,
 } from './types';
 import { createGridColumns } from './columns';
 import { createGridCell } from './cell_value';
@@ -79,34 +80,6 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
     );
   }, [props.args.pageSize]);
 
-  const onChangeItemsPerPage = useCallback(
-    (pageSize) =>
-      setPagination((_pagination) => ({
-        ..._pagination,
-        pageSize,
-        pageIndex: 0,
-      })),
-    [setPagination]
-  );
-
-  const onChangePage = useCallback(
-    (pageIndex) => {
-      setPagination((_pagination) => {
-        if (_pagination) {
-          return { pageSize: _pagination?.pageSize, pageIndex };
-        }
-      });
-    },
-    [setPagination]
-  );
-
-  const paginationConfig = pagination && {
-    ...pagination,
-    pageSizeOptions: PAGE_SIZE_OPTIONS,
-    onChangeItemsPerPage,
-    onChangePage,
-  };
-
   useDeepCompareEffect(() => {
     setColumnConfig({
       columns: props.args.columns,
@@ -149,11 +122,35 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
   );
 
   const onEditAction = useCallback(
-    (data: LensSortAction['data'] | LensResizeAction['data'] | LensToggleAction['data']) => {
+    (
+      data:
+        | LensSortAction['data']
+        | LensResizeAction['data']
+        | LensToggleAction['data']
+        | LensPagesizeAction['data']
+    ) => {
       dispatchEvent({ name: 'edit', data });
     },
     [dispatchEvent]
   );
+
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) => onEditAction({ action: 'pagesize', size: pageSize }),
+    [onEditAction]
+  );
+
+  // active page isn't persisted, so we manage this state locally
+  const onChangePage = useCallback(
+    (pageIndex) => {
+      setPagination((_pagination) => {
+        if (_pagination) {
+          return { pageSize: _pagination?.pageSize, pageIndex };
+        }
+      });
+    },
+    [setPagination]
+  );
+
   const onRowContextMenuClick = useCallback(
     (data: LensTableRowContextMenuEvent['data']) => {
       dispatchEvent({ name: 'tableRowContextMenuClick', data });
@@ -409,7 +406,14 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
           renderCellValue={renderCellValue}
           gridStyle={gridStyle}
           sorting={sorting}
-          pagination={paginationConfig}
+          pagination={
+            pagination && {
+              ...pagination,
+              pageSizeOptions: PAGE_SIZE_OPTIONS,
+              onChangeItemsPerPage,
+              onChangePage,
+            }
+          }
           onColumnResize={onColumnResize}
           toolbarVisibility={false}
           renderFooterCellValue={renderSummaryRow}

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/types.ts b/x-pack/plugins/lens/public/datatable_visualization/components/types.ts
@@ -10,7 +10,12 @@ import { CustomPaletteState, PaletteRegistry } from 'src/plugins/charts/public';
 import type { IAggType } from 'src/plugins/data/public';
 import type { Datatable, RenderMode } from 'src/plugins/expressions';
 import type { ILensInterpreterRenderHandlers, LensEditEvent } from '../../types';
-import { LENS_EDIT_SORT_ACTION, LENS_EDIT_RESIZE_ACTION, LENS_TOGGLE_ACTION } from './constants';
+import {
+  LENS_EDIT_SORT_ACTION,
+  LENS_EDIT_RESIZE_ACTION,
+  LENS_TOGGLE_ACTION,
+  LENS_EDIT_PAGESIZE_ACTION,
+} from './constants';
 import type { FormatFactory } from '../../../common';
 import type { DatatableProps, LensGridDirection } from '../../../common/expressions';
 
@@ -28,9 +33,14 @@ export interface LensToggleActionData {
   columnId: string;
 }
 
+export interface LensPagesizeActionData {
+  size: number;
+}
+
 export type LensSortAction = LensEditEvent<typeof LENS_EDIT_SORT_ACTION>;
 export type LensResizeAction = LensEditEvent<typeof LENS_EDIT_RESIZE_ACTION>;
 export type LensToggleAction = LensEditEvent<typeof LENS_TOGGLE_ACTION>;
+export type LensPagesizeAction = LensEditEvent<typeof LENS_EDIT_PAGESIZE_ACTION>;
 
 export type DatatableRenderProps = DatatableProps & {
   formatFactory: FormatFactory;

diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
@@ -668,5 +668,23 @@ describe('Datatable Visualization', () => {
         columns: [{ columnId: 'saved', width: undefined }],
       });
     });
+
+    it('should update page size', () => {
+      const currentState: DatatableVisualizationState = {
+        layerId: 'foo',
+        layerType: layerTypes.DATA,
+        columns: [{ columnId: 'saved', width: 5000 }],
+        paging: { enabled: true, size: 10 },
+      };
+      expect(
+        datatableVisualization.onEditAction!(currentState, {
+          name: 'edit',
+          data: { action: 'pagesize', size: 30 },
+        })
+      ).toEqual({
+        ...currentState,
+        paging: { enabled: true, size: 30 },
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -423,10 +423,11 @@ export const getDatatableVisualization = ({
           },
         };
       case 'toggle':
+        const toggleColumnId = event.data.columnId;
         return {
           ...state,
           columns: state.columns.map((column) => {
-            if (column.columnId === event.data.columnId) {
+            if (column.columnId === toggleColumnId) {
               return {
                 ...column,
                 hidden: !column.hidden,
@@ -438,10 +439,11 @@ export const getDatatableVisualization = ({
         };
       case 'resize':
         const targetWidth = event.data.width;
+        const resizeColumnId = event.data.columnId;
         return {
           ...state,
           columns: state.columns.map((column) => {
-            if (column.columnId === event.data.columnId) {
+            if (column.columnId === resizeColumnId) {
               return {
                 ...column,
                 width: targetWidth,
@@ -451,6 +453,14 @@ export const getDatatableVisualization = ({
             }
           }),
         };
+      case 'pagesize':
+        return {
+          ...state,
+          paging: {
+            enabled: state.paging?.enabled || false,
+            size: event.data.size,
+          },
+        };
       default:
         return state;
     }

diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
@@ -26,6 +26,7 @@ import type {
   LensSortActionData,
   LensResizeActionData,
   LensToggleActionData,
+  LensPagesizeActionData,
 } from './datatable_visualization/components/types';
 import type {
   UiActionsStart,
@@ -37,6 +38,7 @@ import {
   LENS_EDIT_SORT_ACTION,
   LENS_EDIT_RESIZE_ACTION,
   LENS_TOGGLE_ACTION,
+  LENS_EDIT_PAGESIZE_ACTION,
 } from './datatable_visualization/components/constants';
 import type { LensInspector } from './lens_inspector_service';
 
@@ -782,6 +784,7 @@ export interface LensEditContextMapping {
   [LENS_EDIT_SORT_ACTION]: LensSortActionData;
   [LENS_EDIT_RESIZE_ACTION]: LensResizeActionData;
   [LENS_TOGGLE_ACTION]: LensToggleActionData;
+  [LENS_EDIT_PAGESIZE_ACTION]: LensPagesizeActionData;
 }
 
 type LensEditSupportedActions = keyof LensEditContextMapping;