From e34a98833cc8592d2d2f27248113c954dfdbc9df Mon Sep 17 00:00:00 2001
From: Vicky Bansal <67091118+vicky-primathon@users.noreply.github.com>
Date: Wed, 27 Jan 2021 11:10:53 +0530
Subject: [PATCH] Trigger `onPageSizeChange` action when table page size
 changes (#2737)

---
 app/client/src/constants/ActionConstants.tsx  |  1 +
 .../PropertyPaneConfigResponse.tsx            |  8 ++
 app/client/src/widgets/TableWidget.tsx        | 77 +++++++++++++------
 3 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx
index 56d053506b..01dc05da7a 100644
--- a/app/client/src/constants/ActionConstants.tsx
+++ b/app/client/src/constants/ActionConstants.tsx
@@ -18,6 +18,7 @@ export enum EventType {
   ON_PAGE_LOAD = "ON_PAGE_LOAD",
   ON_PREV_PAGE = "ON_PREV_PAGE",
   ON_NEXT_PAGE = "ON_NEXT_PAGE",
+  ON_PAGE_SIZE_CHANGE = "ON_PAGE_SIZE_CHANGE",
   ON_ERROR = "ON_ERROR",
   ON_SUCCESS = "ON_SUCCESS",
   ON_ROW_SELECTED = "ON_ROW_SELECTED",
diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
index 8dddbb02ed..6409a8ab98 100644
--- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
+++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
@@ -281,6 +281,14 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = {
           },
           {
             id: "7.2.4",
+            helpText: "Triggers an action when a table page size is changed",
+            propertyName: "onPageSizeChange",
+            label: "onPageSizeChange",
+            controlType: "ACTION_SELECTOR",
+            isJSConvertible: true,
+          },
+          {
+            id: "7.2.5",
             propertyName: "onSearchTextChanged",
             label: "onSearchTextChanged",
             controlType: "ACTION_SELECTOR",
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 89c5740ab0..026ed95bf5 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -90,13 +90,13 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       searchText: VALIDATION_TYPES.TEXT,
       defaultSearchText: VALIDATION_TYPES.TEXT,
       defaultSelectedRow: VALIDATION_TYPES.DEFAULT_SELECTED_ROW,
+      pageSize: VALIDATION_TYPES.NUMBER,
     };
   }
 
   static getMetaPropertiesMap(): Record<string, any> {
     return {
       pageNo: 1,
-      pageSize: undefined,
       selectedRowIndex: undefined,
       selectedRowIndices: undefined,
       searchText: undefined,
@@ -120,12 +120,50 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       onRowSelected: true,
       onPageChange: true,
       onSearchTextChanged: true,
+      onPageSizeChange: true,
       columnActions: true,
     };
   }
 
   static getDerivedPropertiesMap() {
     return {
+      pageSize: `{{function() {
+          const TABLE_SIZES = {
+           ${CompactModeTypes.DEFAULT}: {
+            COLUMN_HEADER_HEIGHT: 38,
+            TABLE_HEADER_HEIGHT: 42,
+            ROW_HEIGHT: 40,
+            ROW_FONT_SIZE: 14,
+           },
+           ${CompactModeTypes.SHORT}: {
+            COLUMN_HEADER_HEIGHT: 38,
+            TABLE_HEADER_HEIGHT: 42,
+            ROW_HEIGHT: 20,
+            ROW_FONT_SIZE: 12,
+           },
+           ${CompactModeTypes.TALL}: {
+            COLUMN_HEADER_HEIGHT: 38,
+            TABLE_HEADER_HEIGHT: 42,
+            ROW_HEIGHT: 60,
+            ROW_FONT_SIZE: 18,
+           },
+          };
+          const compactMode = this.compactMode || "${CompactModeTypes.DEFAULT}";
+          const componentHeight = (this.bottomRow - this.topRow) * this.parentRowSpace;
+          const tableSizes = TABLE_SIZES[compactMode];
+          let pageSize= Math.floor((componentHeight - tableSizes.TABLE_HEADER_HEIGHT - tableSizes.COLUMN_HEADER_HEIGHT) / tableSizes.ROW_HEIGHT);
+          if (
+            componentHeight -
+              (tableSizes.TABLE_HEADER_HEIGHT +
+                tableSizes.COLUMN_HEADER_HEIGHT +
+                tableSizes.ROW_HEIGHT * pageSize) >
+            0
+          ) {
+            pageSize += 1;
+          }
+          return pageSize;
+        }()
+      }}`,
       triggerRowSelection: "{{!!this.onRowSelected}}",
     };
   }
@@ -505,6 +543,14 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         );
       }
     }
+    if (this.props.pageSize !== prevProps.pageSize) {
+      super.executeAction({
+        dynamicString: this.props.onPageSizeChange,
+        event: {
+          type: EventType.ON_PAGE_SIZE_CHANGE,
+        },
+      });
+    }
   }
 
   getSelectedRowIndexes = (selectedRowIndices: string) => {
@@ -514,7 +560,12 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
   };
 
   getPageView() {
-    const { tableData, hiddenColumns, filteredTableData } = this.props;
+    const {
+      tableData,
+      hiddenColumns,
+      filteredTableData,
+      pageSize,
+    } = this.props;
     const computedSelectedRowIndices = Array.isArray(
       this.props.selectedRowIndices,
     )
@@ -536,28 +587,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       this.props.updateWidgetMetaProperty("pageNo", pageNo);
     }
     const { componentWidth, componentHeight } = this.getComponentDimensions();
-    const tableSizes =
-      TABLE_SIZES[this.props.compactMode || CompactModeTypes.DEFAULT];
-    let pageSize = Math.floor(
-      (componentHeight -
-        tableSizes.TABLE_HEADER_HEIGHT -
-        tableSizes.COLUMN_HEADER_HEIGHT) /
-        tableSizes.ROW_HEIGHT,
-    );
-
-    if (
-      componentHeight -
-        (tableSizes.TABLE_HEADER_HEIGHT +
-          tableSizes.COLUMN_HEADER_HEIGHT +
-          tableSizes.ROW_HEIGHT * pageSize) >
-      0
-    )
-      pageSize += 1;
-
-    if (pageSize !== this.props.pageSize) {
-      this.props.updateWidgetMetaProperty("pageSize", pageSize);
-    }
-
     return (
       <Suspense fallback={<Skeleton />}>
         <ReactTableComponent