From 9b1dbeb9dc92a97ccbefc978ac5b218abb771033 Mon Sep 17 00:00:00 2001 From: Somangshu Goswami Date: Tue, 29 Jun 2021 15:01:41 +0530 Subject: [PATCH] Revert "Enable total number of rows and page size for server side pagination in table widget (#4863)" (#5469) This reverts commit related to #2230 & #1578. We will revisit this problem again and implement the solution based on the discussion in the thread. --- .../Binding/Bind_TableTextPagination_spec.js | 46 +----------------- .../Table_Widget_Copy_Paste_spec.js | 2 +- .../Entity_Explorer_Multiple_Widgets_spec.js | 4 +- .../cypress/locators/commonlocators.json | 3 +- .../appsmith/TableComponent/Table.tsx | 21 ++------- .../appsmith/TableComponent/TableHeader.tsx | 11 ++--- .../appsmith/TableComponent/index.tsx | 12 ----- app/client/src/entities/Widget/utils.test.ts | 4 -- .../utils/autocomplete/EntityDefinitions.ts | 2 - .../TableWidget/TablePropertyPaneConfig.ts | 18 ------- .../TableWidget/TableWidgetConstants.ts | 2 - app/client/src/widgets/TableWidget/index.tsx | 47 ++----------------- 12 files changed, 15 insertions(+), 157 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js index c1903f27fe..707a039195 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js @@ -11,10 +11,7 @@ describe("Test Create Api and Bind to Table widget", function() { it("Test_Add Paginate with Table Page No and Execute the Api", function() { /**Create an Api1 of Paginate with Table Page No */ - cy.createAndFillApi( - this.data.paginationUrl, - "users?page={{Table1.pageNo}}&pageSize={{Table1.defaultPageSize||10}}", - ); + cy.createAndFillApi(this.data.paginationUrl, this.data.paginationParam); cy.RunAPI(); }); @@ -89,46 +86,5 @@ describe("Test Create Api and Bind to Table widget", function() { cy.ValidatePaginationInputData(); cy.get(publishPage.backToEditor).click({ force: true }); cy.ValidatePaginateResponseUrlData(apiPage.apiPaginationNextTest); - cy.wait(5000); - }); - - it("Table-Text, Validate Server Side Pagination of Paginate with Table Default Page Size and Total Record Count", function() { - cy.SearchEntityandOpen("Table1"); - cy.callApi("Api1"); - cy.wait(300); - cy.testJsontext("tabledata", "{{Api1.data.users}}"); - cy.CheckWidgetProperties(commonlocators.serverSidePaginationCheckbox); - cy.wait(300); - //Add on page size change action - cy.get(commonlocators.tablePageSizeChangeAction).click({ - force: true, - }); - cy.wait(300); - cy.get(commonlocators.chooseAction) - .children() - .contains("Call An API") - .click(); - cy.wait(300); - cy.get(commonlocators.chooseAction) - .children() - .contains("Api1") - .click(); - // cy.get(".t--table-widget-next-page").should("have.attr", "disabled"); - - // Add value of default page count and total page count - cy.testJsontext("totalrecordcount", 20); - cy.testJsontext("defaultpagesize", 5); - - cy.wait("@postExecute"); - cy.wait(500); - - cy.get(".t--table-widget-next-page").should("not.have.attr", "disabled"); - cy.ValidateTableData("1"); - - cy.get(commonlocators.tableNextPage).click({ force: true }); - cy.wait("@postExecute"); - cy.wait(500); - - cy.ValidateTableData("6"); }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js index ea23675aca..c5648f5efb 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js @@ -42,7 +42,7 @@ describe("Test Suite to validate copy/paste table Widget", function() { .last() .click(); cy.get(apiwidget.propertyList).then(function($lis) { - expect($lis).to.have.length(10); + expect($lis).to.have.length(8); expect($lis.eq(0)).to.contain("{{Table1Copy.selectedRow}}"); expect($lis.eq(1)).to.contain("{{Table1Copy.selectedRows}}"); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Multiple_Widgets_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Multiple_Widgets_spec.js index df0bc8b95a..4eda944815 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Multiple_Widgets_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Multiple_Widgets_spec.js @@ -38,7 +38,7 @@ describe("Entity explorer tests related to widgets and validation", function() { .last() .click({ force: true }); cy.get(apiwidget.propertyList).then(function($lis) { - expect($lis).to.have.length(10); + expect($lis).to.have.length(8); expect($lis.eq(0)).to.contain("{{Table1.selectedRow}}"); expect($lis.eq(1)).to.contain("{{Table1.selectedRows}}"); expect($lis.eq(2)).to.contain("{{Table1.selectedRowIndex}}"); @@ -47,8 +47,6 @@ describe("Entity explorer tests related to widgets and validation", function() { expect($lis.eq(5)).to.contain("{{Table1.pageSize}}"); expect($lis.eq(6)).to.contain("{{Table1.isVisible}}"); expect($lis.eq(7)).to.contain("{{Table1.searchText}}"); - expect($lis.eq(8)).to.contain("{{Table1.defaultPageSize}}"); - expect($lis.eq(9)).to.contain("{{Table1.totalRecordsCount}}"); }); }); diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index b686c71c21..7248cf2091 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -109,6 +109,5 @@ "paginationButton": ".rc-pagination-item", "switchWidgetActive": ".t--switch-widget-active", "switchWidgetInActive": ".t--switch-widget-inactive", - "switchWidgetLoading": ".t--switch-widget-loading", - "tablePageSizeChangeAction": ".t--property-control-onpagesizechange .t--open-dropdown-Select-Action" + "switchWidgetLoading": ".t--switch-widget-loading" } diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx index 251fae9d2b..b9a8b56731 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx @@ -31,7 +31,6 @@ interface TableProps { width: number; height: number; pageSize: number; - tablePageSize: number; widgetId: string; widgetName: string; searchKey: string; @@ -39,8 +38,6 @@ interface TableProps { columnSizeMap?: { [key: string]: number }; columns: ReactTableColumnProps[]; data: Array>; - defaultPageSize?: number; - totalRecordsCount?: number; editMode: boolean; sortTableColumn: (columnIndex: number, asc: boolean) => void; handleResizeColumn: (columnSizeMap: { [key: string]: number }) => void; @@ -116,10 +113,7 @@ export function Table(props: TableProps) { }), [columnString], ); - const pageCount = - props.defaultPageSize && props.totalRecordsCount - ? Math.ceil(props.totalRecordsCount / props.defaultPageSize) - : Math.ceil(props.data.length / props.pageSize); + const pageCount = Math.ceil(props.data.length / props.pageSize); const currentPageIndex = props.pageNo < pageCount ? props.pageNo : 0; const { getTableBodyProps, @@ -161,10 +155,7 @@ export function Table(props: TableProps) { } let startIndex = currentPageIndex * props.pageSize; let endIndex = startIndex + props.pageSize; - if ( - props.serverSidePaginationEnabled || - (props.defaultPageSize && props.totalRecordsCount) - ) { + if (props.serverSidePaginationEnabled) { startIndex = 0; endIndex = props.data.length; } @@ -216,7 +207,6 @@ export function Table(props: TableProps) { columns={tableHeadercolumns} compactMode={props.compactMode} currentPageIndex={currentPageIndex} - defaultPageSize={props.defaultPageSize} editMode={props.editMode} filters={props.filters} isVisibleCompactMode={props.isVisibleCompactMode} @@ -235,7 +225,6 @@ export function Table(props: TableProps) { tableColumns={columns} tableData={props.data} tableSizes={tableSizes} - totalRecordsCount={props.totalRecordsCount} updateCompactMode={props.updateCompactMode} updatePageNo={props.updatePageNo} widgetName={props.widgetName} @@ -297,7 +286,7 @@ export function Table(props: TableProps) {
subPage.length ? "no-scroll" : "" + props.pageSize > subPage.length ? "no-scroll" : "" }`} ref={tableBodyRef} > @@ -338,9 +327,9 @@ export function Table(props: TableProps) {
); })} - {props.tablePageSize > subPage.length && + {props.pageSize > subPage.length && renderEmptyRows( - props.tablePageSize - subPage.length, + props.pageSize - subPage.length, props.columns, props.width, subPage, diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx index 4f13d6e9de..01fb8b0188 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx @@ -93,8 +93,6 @@ interface TableHeaderProps { nextPageClick: () => void; prevPageClick: () => void; pageNo: number; - defaultPageSize?: number; - totalRecordsCount?: number; tableData: Array>; tableColumns: ReactTableColumnProps[]; pageCount: number; @@ -163,7 +161,7 @@ function TableHeader(props: TableHeaderProps) { { props.prevPageClick(); }} @@ -175,7 +173,7 @@ function TableHeader(props: TableHeaderProps) { { props.nextPageClick(); }} @@ -187,10 +185,7 @@ function TableHeader(props: TableHeaderProps) { {props.isVisiblePagination && !props.serverSidePaginationEnabled && ( - {props.totalRecordsCount - ? props.totalRecordsCount - : props.tableData?.length}{" "} - Records + {props.tableData?.length} Records >; disableDrag: (disable: boolean) => void; onRowClick: (rowData: Record, rowIndex: number) => void; @@ -82,7 +79,6 @@ function ReactTableComponent(props: ReactTableComponentProps) { columns, columnSizeMap, compactMode, - defaultPageSize, disableDrag, editMode, filters, @@ -107,8 +103,6 @@ function ReactTableComponent(props: ReactTableComponentProps) { serverSidePaginationEnabled, sortTableColumn: _sortTableColumn, tableData, - tablePageSize, - totalRecordsCount, triggerRowSelection, updateCompactMode, updatePageNo, @@ -235,7 +229,6 @@ function ReactTableComponent(props: ReactTableComponentProps) { columns={columns} compactMode={compactMode} data={tableData} - defaultPageSize={defaultPageSize} disableDrag={() => { disableDrag(true); }} @@ -263,8 +256,6 @@ function ReactTableComponent(props: ReactTableComponentProps) { selectedRowIndices={selectedRowIndices} serverSidePaginationEnabled={serverSidePaginationEnabled} sortTableColumn={sortTableColumn} - tablePageSize={tablePageSize} - totalRecordsCount={totalRecordsCount} triggerRowSelection={triggerRowSelection} updateCompactMode={updateCompactMode} updatePageNo={updatePageNo} @@ -279,7 +270,6 @@ export default React.memo(ReactTableComponent, (prev, next) => { return ( prev.applyFilter === next.applyFilter && prev.compactMode === next.compactMode && - prev.defaultPageSize === next.defaultPageSize && prev.disableDrag === next.disableDrag && prev.editMode === next.editMode && prev.filters === next.filters && @@ -296,7 +286,6 @@ export default React.memo(ReactTableComponent, (prev, next) => { prev.onRowClick === next.onRowClick && prev.pageNo === next.pageNo && prev.pageSize === next.pageSize && - prev.tablePageSize === next.tablePageSize && prev.prevPageClick === next.prevPageClick && prev.searchKey === next.searchKey && prev.searchTableData === next.searchTableData && @@ -304,7 +293,6 @@ export default React.memo(ReactTableComponent, (prev, next) => { prev.selectedRowIndices === next.selectedRowIndices && prev.serverSidePaginationEnabled === next.serverSidePaginationEnabled && prev.sortTableColumn === next.sortTableColumn && - prev.totalRecordsCount === next.totalRecordsCount && prev.triggerRowSelection === next.triggerRowSelection && prev.updateCompactMode === next.updateCompactMode && prev.updatePageNo === next.updatePageNo && diff --git a/app/client/src/entities/Widget/utils.test.ts b/app/client/src/entities/Widget/utils.test.ts index ebcec693c0..95facdac31 100644 --- a/app/client/src/entities/Widget/utils.test.ts +++ b/app/client/src/entities/Widget/utils.test.ts @@ -116,7 +116,6 @@ describe("getAllPathsFromPropertyConfig", () => { selectedRow: EvaluationSubstitutionType.TEMPLATE, selectedRows: EvaluationSubstitutionType.TEMPLATE, tableData: EvaluationSubstitutionType.SMART_SUBSTITUTE, - defaultPageSize: EvaluationSubstitutionType.TEMPLATE, defaultSearchText: EvaluationSubstitutionType.TEMPLATE, defaultSelectedRow: EvaluationSubstitutionType.TEMPLATE, isVisible: EvaluationSubstitutionType.TEMPLATE, @@ -155,7 +154,6 @@ describe("getAllPathsFromPropertyConfig", () => { EvaluationSubstitutionType.TEMPLATE, "primaryColumns.status.buttonLabelColor": EvaluationSubstitutionType.TEMPLATE, - totalRecordsCount: EvaluationSubstitutionType.TEMPLATE, }, triggerPaths: { onRowSelected: true, @@ -165,12 +163,10 @@ describe("getAllPathsFromPropertyConfig", () => { "primaryColumns.status.onClick": true, }, validationPaths: { - defaultPageSize: "NUMBER", defaultSearchText: "TEXT", defaultSelectedRow: "DEFAULT_SELECTED_ROW", isVisible: "BOOLEAN", tableData: "TABLE_DATA", - totalRecordsCount: "NUMBER", }, }; diff --git a/app/client/src/utils/autocomplete/EntityDefinitions.ts b/app/client/src/utils/autocomplete/EntityDefinitions.ts index f9bb16dd2e..06a2ecc073 100644 --- a/app/client/src/utils/autocomplete/EntityDefinitions.ts +++ b/app/client/src/utils/autocomplete/EntityDefinitions.ts @@ -76,8 +76,6 @@ export const entityDefinitions = { pageSize: "number", isVisible: isVisible, searchText: "string", - defaultPageSize: "number", - totalRecordsCount: "number", }), VIDEO_WIDGET: { "!doc": diff --git a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts index ff2e81e93b..b3980b24e9 100644 --- a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts +++ b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts @@ -663,24 +663,6 @@ export default [ isTriggerProperty: false, validation: VALIDATION_TYPES.TEXT, }, - { - propertyName: "totalRecordsCount", - label: "Total Record Count", - controlType: "INPUT_TEXT", - placeholderText: "Enter total record count", - isBindProperty: true, - isTriggerProperty: false, - validation: VALIDATION_TYPES.NUMBER, - }, - { - propertyName: "defaultPageSize", - label: "Default Page Size", - controlType: "INPUT_TEXT", - placeholderText: "Enter default page size", - isBindProperty: true, - isTriggerProperty: false, - validation: VALIDATION_TYPES.NUMBER, - }, { helpText: "Selects the default selected row", propertyName: "defaultSelectedRow", diff --git a/app/client/src/widgets/TableWidget/TableWidgetConstants.ts b/app/client/src/widgets/TableWidget/TableWidgetConstants.ts index 5a878a4af2..0626ea28b7 100644 --- a/app/client/src/widgets/TableWidget/TableWidgetConstants.ts +++ b/app/client/src/widgets/TableWidget/TableWidgetConstants.ts @@ -38,6 +38,4 @@ export interface TableWidgetProps extends WidgetProps, WithMeta, TableStyles { column: string; asc: boolean; }; - totalRecordCount?: number; - defaultPageSize?: number; } diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx index 6e6f3a8a4e..324f1dba6d 100644 --- a/app/client/src/widgets/TableWidget/index.tsx +++ b/app/client/src/widgets/TableWidget/index.tsx @@ -538,20 +538,6 @@ class TableWidget extends BaseWidget { if (!this.props.pageNo) this.props.updateWidgetMetaProperty("pageNo", 1); - //update pageNo when defaultPageSize or totalRecordsCount is changed - if ( - this.props.defaultPageSize && - this.props.totalRecordCount && - this.props.pageNo - ) { - const maxAllowedPageNumber = Math.ceil( - this.props.totalRecordCount / this.props.defaultPageSize, - ); - if (this.props.pageNo > maxAllowedPageNumber) { - this.props.updateWidgetMetaProperty("pageNo", maxAllowedPageNumber); - } - } - // If the user has switched the mutiple row selection feature if (this.props.multiRowSelection !== prevProps.multiRowSelection) { // It is switched ON: @@ -576,10 +562,7 @@ class TableWidget extends BaseWidget { this.updateSelectedRowIndex(); } - if ( - this.props.pageSize !== prevProps.pageSize || - this.props.defaultPageSize !== prevProps.defaultPageSize - ) { + if (this.props.pageSize !== prevProps.pageSize) { if (this.props.onPageSizeChange) { super.executeAction({ triggerPropertyName: "onPageSizeChange", @@ -634,8 +617,7 @@ class TableWidget extends BaseWidget { getPageView() { const { - totalRecordsCount, - defaultPageSize, + pageSize, filteredTableData = [], isVisibleCompactMode, isVisibleDownload, @@ -643,28 +625,8 @@ class TableWidget extends BaseWidget { isVisiblePagination, isVisibleSearch, } = this.props; - const pageSize = defaultPageSize ? defaultPageSize : this.props.pageSize; const tableColumns = this.getTableColumns() || []; - const paginatedFilteredData = [...filteredTableData]; - if (defaultPageSize && totalRecordsCount) { - //if total records count configured is more than tableData - if (this.props.pageNo * defaultPageSize > totalRecordsCount) { - const count = - totalRecordsCount - (this.props.pageNo - 1) * defaultPageSize; - paginatedFilteredData.splice(count, paginatedFilteredData.length); - } - // Manage defaultPageSize data - if (paginatedFilteredData.length > defaultPageSize) { - paginatedFilteredData.splice( - defaultPageSize, - paginatedFilteredData.length, - ); - } - } - const transformedData = this.transformData( - paginatedFilteredData, - tableColumns, - ); + const transformedData = this.transformData(filteredTableData, tableColumns); const { componentHeight, componentWidth } = this.getComponentDimensions(); const isVisibleHeaderOptions = isVisibleCompactMode || @@ -680,7 +642,6 @@ class TableWidget extends BaseWidget { columnSizeMap={this.props.columnSizeMap} columns={tableColumns} compactMode={this.props.compactMode || CompactModeTypes.DEFAULT} - defaultPageSize={defaultPageSize} disableDrag={this.toggleDrag} editMode={this.props.renderMode === RenderModes.CANVAS} filters={this.props.filters} @@ -713,8 +674,6 @@ class TableWidget extends BaseWidget { serverSidePaginationEnabled={!!this.props.serverSidePaginationEnabled} sortTableColumn={this.handleColumnSorting} tableData={transformedData} - tablePageSize={Math.max(1, this.props.pageSize)} - totalRecordsCount={totalRecordsCount} triggerRowSelection={this.props.triggerRowSelection} updateCompactMode={this.handleCompactModeChange} updatePageNo={this.updatePageNumber}