diff --git a/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json b/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json index d5e8cf1a08..a969c070b1 100644 --- a/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json +++ b/app/client/cypress/fixtures/modalOnTableFilterPaneDsl.json @@ -235,7 +235,7 @@ "key": "primaryColumns.action.computedValue" } ], - "leftColumn": 8, + "leftColumn": 18, "primaryColumns": { "step": { "index": 0, @@ -307,7 +307,7 @@ "delimiter": ",", "key": "xpckfzcfqi", "derivedColumns": {}, - "rightColumn": 58, + "rightColumn": 48, "textSize": "PARAGRAPH", "widgetId": "0qst46493x", "isVisibleFilters": true, diff --git a/app/client/cypress/fixtures/tableResizeDsl.json b/app/client/cypress/fixtures/tableResizeDsl.json deleted file mode 100644 index 5a4cdc27dd..0000000000 --- a/app/client/cypress/fixtures/tableResizeDsl.json +++ /dev/null @@ -1,177 +0,0 @@ -{ - "dsl": { - "widgetName": "MainContainer", - "backgroundColor": "none", - "rightColumn": 656, - "snapColumns": 64, - "detachFromLayout": true, - "widgetId": "0", - "topRow": 0, - "bottomRow": 2860, - "containerStyle": "none", - "snapRows": 128, - "parentRowSpace": 1, - "type": "CANVAS_WIDGET", - "canExtend": true, - "version": 46, - "minHeight": 1292, - "parentColumnSpace": 1, - "dynamicBindingPathList": [], - "leftColumn": 0, - "children": [ - { - "widgetName": "Table1", - "columnOrder": [ - "id", - "email", - "userName", - "productName", - "orderAmount" - ], - "isVisibleDownload": true, - "topRow": 48, - "bottomRow": 71, - "parentRowSpace": 10, - "isSortable": true, - "type": "TABLE_WIDGET", - "parentColumnSpace": 74, - "dynamicTriggerPathList": [], - "leftColumn": 0, - "dynamicBindingPathList": [ - { - "key": "tableData" - }, - { - "key": "primaryColumns.id.computedValue" - }, - { - "key": "primaryColumns.email.computedValue" - }, - { - "key": "primaryColumns.userName.computedValue" - }, - { - "key": "primaryColumns.productName.computedValue" - }, - { - "key": "primaryColumns.orderAmount.computedValue" - } - ], - "primaryColumns": { - "id": { - "index": 0, - "width": 150, - "id": "id", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "PARAGRAPH", - "fontStyle": "REGULAR", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "id", - "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}" - }, - "email": { - "index": 1, - "width": 150, - "id": "email", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "PARAGRAPH", - "fontStyle": "REGULAR", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "email", - "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.email))}}" - }, - "userName": { - "index": 2, - "width": 150, - "id": "userName", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "PARAGRAPH", - "fontStyle": "REGULAR", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "userName", - "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.userName))}}" - }, - "productName": { - "index": 3, - "width": 150, - "id": "productName", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "PARAGRAPH", - "fontStyle": "REGULAR", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "productName", - "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.productName))}}" - }, - "orderAmount": { - "index": 4, - "width": 150, - "id": "orderAmount", - "horizontalAlignment": "LEFT", - "verticalAlignment": "CENTER", - "columnType": "text", - "textSize": "PARAGRAPH", - "fontStyle": "REGULAR", - "enableFilter": true, - "enableSort": true, - "isVisible": true, - "isDisabled": false, - "isCellVisible": true, - "isDerived": false, - "label": "orderAmount", - "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.orderAmount))}}" - } - }, - "delimiter": ",", - "migrated": true, - "derivedColumns": {}, - "rightColumn": 37, - "textSize": "PARAGRAPH", - "widgetId": "sb070qr2ir", - "isVisibleFilters": true, - "tableData": "{{\n[\n {\n \"id\": 2381224,\n \"email\": \"michael.lawson@reqres.in\",\n \"userName\": \"Michael Lawson\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 2736212,\n \"email\": \"lindsay.ferguson@reqres.in\",\n \"userName\": \"Lindsay Ferguson\",\n \"productName\": \"Tuna Salad\",\n \"orderAmount\": 9.99\n },\n {\n \"id\": 6788734,\n \"email\": \"tobias.funke@reqres.in\",\n \"userName\": \"Tobias Funke\",\n \"productName\": \"Beef steak\",\n \"orderAmount\": 19.99\n }\n]\n}}", - "isVisible": true, - "label": "Data", - "searchKey": "", - "fontStyle": "REGULAR", - "version": 3, - "parentId": "0", - "isLoading": false, - "horizontalAlignment": "LEFT", - "isVisibleSearch": true, - "isVisiblePagination": true, - "verticalAlignment": "CENTER", - "columnSizeMap": { - "email": 261 - } - } - ] - } -} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js deleted file mode 100644 index 2f167fd615..0000000000 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Resize_spec.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable cypress/no-unnecessary-waiting */ -const widgetsPage = require("../../../../locators/Widgets.json"); -const commonlocators = require("../../../../locators/commonlocators.json"); -const publish = require("../../../../locators/publishWidgetspage.json"); -const dsl = require("../../../../fixtures/tableResizeDsl.json"); - -describe("Table Widget Resize Functionality", function() { - before(() => { - cy.addDsl(dsl); - }); - - it("Table Widget check default header controls", function() { - cy.get(`${commonlocators.layoutControls} span[name='desktop']`).click(); - cy.get(`${publish.tableWidget} ${publish.searchInput}`).should("exist"); - cy.get( - `${publish.tableWidget} ${widgetsPage.tableFilterPaneToggle}`, - ).should("exist"); - cy.get(`${publish.tableWidget} ${publish.downloadBtn}`).should("exist"); - }); - - it("Table Widget check header controls after resize", function() { - cy.get(`${commonlocators.layoutControls} span[name='mobile']`).click(); - cy.get(`${publish.tableWidget} ${publish.searchInput}`).should("not.exist"); - cy.get( - `${publish.tableWidget} ${widgetsPage.tableFilterPaneToggle}`, - ).should("not.exist"); - cy.get(`${publish.tableWidget} ${publish.downloadBtn}`).should("not.exist"); - }); -}); diff --git a/app/client/src/widgets/TableWidget/component/Constants.ts b/app/client/src/widgets/TableWidget/component/Constants.ts index c340427960..fafb85e469 100644 --- a/app/client/src/widgets/TableWidget/component/Constants.ts +++ b/app/client/src/widgets/TableWidget/component/Constants.ts @@ -284,9 +284,3 @@ export const ConditionFunctions: { return !moment(a).isBefore(moment(b), "d"); }, }; - -export enum TableWidth { - Mobile = 576, - Small = 365, - Smaller = 288, -} diff --git a/app/client/src/widgets/TableWidget/component/Table.tsx b/app/client/src/widgets/TableWidget/component/Table.tsx index 575f4a72fd..7b4b9584c5 100644 --- a/app/client/src/widgets/TableWidget/component/Table.tsx +++ b/app/client/src/widgets/TableWidget/component/Table.tsx @@ -27,7 +27,6 @@ import { TABLE_SIZES, CompactMode, CompactModeTypes, - TableWidth, } from "./Constants"; import { Colors } from "constants/Colors"; @@ -127,7 +126,6 @@ export function Table(props: TableProps) { }), [columnString], ); - const isMobileScreenTableWidth = props.width <= TableWidth["Mobile"]; const pageCount = props.serverSidePaginationEnabled && props.totalRecordsCount ? Math.ceil(props.totalRecordsCount / props.pageSize) @@ -252,7 +250,6 @@ export function Table(props: TableProps) { currentPageIndex={currentPageIndex} delimiter={props.delimiter} filters={props.filters} - isMobileScreenTableWidth={isMobileScreenTableWidth} isVisibleDownload={props.isVisibleDownload} isVisibleFilters={props.isVisibleFilters} isVisiblePagination={props.isVisiblePagination} @@ -272,7 +269,6 @@ export function Table(props: TableProps) { updatePageNo={props.updatePageNo} widgetId={props.widgetId} widgetName={props.widgetName} - width={props.width} /> diff --git a/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx b/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx index 3a1f887fc9..0c7b8a57e9 100644 --- a/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx +++ b/app/client/src/widgets/TableWidget/component/TableDataDownload.tsx @@ -54,7 +54,6 @@ interface TableDataDownloadProps { columns: ReactTableColumnProps[]; widgetName: string; delimiter: string; - isMobileScreenTableWidth: boolean; } type FileDownloadType = "CSV" | "EXCEL"; @@ -114,7 +113,6 @@ const downloadDataAsCSV = (props: { function TableDataDownload(props: TableDataDownloadProps) { const [selected, selectMenu] = React.useState(false); - const downloadFile = (type: string) => { if (type === "CSV") { downloadTableDataAsCsv(); @@ -204,7 +202,7 @@ function TableDataDownload(props: TableDataDownloadProps) { className="t--table-download-btn" selectMenu={selectMenu} selected={selected} - title={props.isMobileScreenTableWidth ? "" : "Download"} + title="Download" > diff --git a/app/client/src/widgets/TableWidget/component/TableFilters.tsx b/app/client/src/widgets/TableWidget/component/TableFilters.tsx index 6ab650c0f1..6f685792d1 100644 --- a/app/client/src/widgets/TableWidget/component/TableFilters.tsx +++ b/app/client/src/widgets/TableWidget/component/TableFilters.tsx @@ -47,7 +47,6 @@ interface TableFilterProps { filters?: ReactTableFilter[]; applyFilter: (filters: ReactTableFilter[]) => void; widgetId: string; - isMobileScreenTableWidth: boolean; } function TableFilters(props: TableFilterProps) { @@ -112,12 +111,6 @@ function TableFilters(props: TableFilterProps) { tableFilterPaneState.isVisible && tableFilterPaneState.widgetId === props.widgetId; - const tableActionTitle = `${props.isMobileScreenTableWidth ? "" : "Filters"}${ - hasAnyFilters && !props.isMobileScreenTableWidth - ? ` (${filters.length})` - : "" - }`; - return ( <> diff --git a/app/client/src/widgets/TableWidget/component/TableHeader.tsx b/app/client/src/widgets/TableWidget/component/TableHeader.tsx index f27b736c90..dbdb5c3f5a 100644 --- a/app/client/src/widgets/TableWidget/component/TableHeader.tsx +++ b/app/client/src/widgets/TableWidget/component/TableHeader.tsx @@ -13,7 +13,6 @@ import { ReactTableColumnProps, TableSizes, ReactTableFilter, - TableWidth, } from "./Constants"; import TableDataDownload from "./TableDataDownload"; import { Colors } from "constants/Colors"; @@ -43,12 +42,9 @@ const PageNumberInputWrapper = styled(NumericInput)` margin: 0 8px; `; -const SearchComponentWrapper = styled.div<{ - isMobileScreenTableWidth: boolean; -}>` +const SearchComponentWrapper = styled.div` margin: 3px 10px; - flex: ${(props) => - props.isMobileScreenTableWidth ? "0 0 120px" : "0 0 200px"}; + flex: 0 0 200px; `; function PageNumberInput(props: { @@ -130,19 +126,14 @@ interface TableHeaderProps { isVisibleFilters?: boolean; isVisiblePagination?: boolean; isVisibleSearch?: boolean; - isMobileScreenTableWidth: boolean; delimiter: string; - width: number; } function TableHeader(props: TableHeaderProps) { - const isSmallerTableWidth = props.width <= TableWidth["Smaller"]; return ( <> - {props.isVisibleSearch && !isSmallerTableWidth && ( - + {props.isVisibleSearch && ( + )} - {(props.isVisibleFilters || props.isVisibleDownload) && - props.width > TableWidth["Small"] && ( - - {props.isVisibleFilters && ( - - )} + {(props.isVisibleFilters || props.isVisibleDownload) && ( + + {props.isVisibleFilters && ( + + )} - {props.isVisibleDownload && ( - - )} - - )} + {props.isVisibleDownload && ( + + )} + + )} {props.isVisiblePagination && props.serverSidePaginationEnabled && ( - + )} {props.isVisiblePagination && !props.serverSidePaginationEnabled && ( - + {props.tableData?.length} Records @@ -225,14 +207,14 @@ function TableHeader(props: TableHeaderProps) { - {!props.isMobileScreenTableWidth && "Page "} + Page{" "} - {!props.isMobileScreenTableWidth && `of ${props.pageCount}`} + />{" "} + of {props.pageCount} ` +export const PaginationWrapper = styled.div` box-sizing: border-box; display: flex; width: 100%; - justify-content: ${(props) => - props.isSmallerTableWidth ? "center" : "flex-end"}; + justify-content: flex-end; align-items: center; padding: 8px 20px; color: ${Colors.GRAY}; - ${(props) => (props.isMobileScreenTableWidth ? "padding: 8px;" : "")}; `; export const PaginationItemWrapper = styled.div<{