From fe700a8049655cc555dd0f3aab38c4d24dd85967 Mon Sep 17 00:00:00 2001 From: Vicky Bansal <67091118+vicky-primathon@users.noreply.github.com> Date: Wed, 23 Jun 2021 19:09:04 +0530 Subject: [PATCH] Fixed empty area issue when columns are hidden in published mode (#5162) --- .../fixtures/tableResizedColumnsDsl.json | 505 ++++++++++++++++++ .../Table_Column_Resize_spec.js | 24 + app/client/src/widgets/TableWidget/index.tsx | 6 +- 3 files changed, 531 insertions(+), 4 deletions(-) create mode 100644 app/client/cypress/fixtures/tableResizedColumnsDsl.json create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Column_Resize_spec.js diff --git a/app/client/cypress/fixtures/tableResizedColumnsDsl.json b/app/client/cypress/fixtures/tableResizedColumnsDsl.json new file mode 100644 index 0000000000..85ea1b6a2a --- /dev/null +++ b/app/client/cypress/fixtures/tableResizedColumnsDsl.json @@ -0,0 +1,505 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1280, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1310, + "containerStyle": "none", + "snapRows": 125, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 23, + "minHeight": 1320, + "parentColumnSpace": 1, + "dynamicTriggerPathList": [], + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#ffffff", + "widgetName": "Container1", + "rightColumn": 64, + "widgetId": "sc2tsag5jw", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 6, + "parentRowSpace": 10, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "version": 1, + "parentId": "0", + "isLoading": false, + "parentColumnSpace": 16.432031249999998, + "dynamicTriggerPathList": [], + "leftColumn": 0, + "dynamicBindingPathList": [], + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 525.8249999999999, + "detachFromLayout": true, + "widgetId": "v615d41hf1", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 400, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "version": 1, + "parentId": "sc2tsag5jw", + "minHeight": 400, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + } + ] + }, + { + "image": "https://source.unsplash.com/mGFHA_0TWnA/2048x620", + "widgetName": "Image1", + "rightColumn": 64, + "widgetId": "ah4cbb9o2e", + "topRow": 6, + "bottomRow": 39, + "parentRowSpace": 10, + "isVisible": true, + "type": "IMAGE_WIDGET", + "version": 1, + "parentId": "0", + "isLoading": false, + "maxZoomLevel": 1, + "parentColumnSpace": 16.432031249999998, + "dynamicTriggerPathList": [], + "imageShape": "RECTANGLE", + "leftColumn": 0, + "dynamicBindingPathList": [], + "defaultImage": "https://res.cloudinary.com/drako999/image/upload/v1589196259/default.png" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container2", + "rightColumn": 64, + "widgetId": "0oh55q30ji", + "containerStyle": "card", + "topRow": 39, + "bottomRow": 85, + "parentRowSpace": 10, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "version": 1, + "parentId": "0", + "isLoading": false, + "shouldScrollContents": false, + "parentColumnSpace": 16.432031249999998, + "dynamicTriggerPathList": [], + "leftColumn": 0, + "dynamicBindingPathList": [], + "children": [ + { + "widgetName": "Canvas2", + "rightColumn": 525.8249999999999, + "detachFromLayout": true, + "widgetId": "9kax26wjp6", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 460, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "version": 1, + "parentId": "0oh55q30ji", + "minHeight": 400, + "isLoading": false, + "parentColumnSpace": 1, + "dynamicTriggerPathList": [], + "leftColumn": 0, + "dynamicBindingPathList": [], + "children": [ + { + "widgetName": "Table2", + "columnOrder": [ + "data", + "customColumn3", + "customColumn4", + "customColumn5", + "customColumn6", + "page_id", + "customColumn2", + "customColumn7", + "customColumn8" + ], + "dynamicPropertyPathList": [], + "topRow": 4, + "bottomRow": 44, + "parentRowSpace": 10, + "type": "TABLE_WIDGET", + "parentColumnSpace": 16.182031249999998, + "dynamicTriggerPathList": [ + { + "key": "primaryColumns.customColumn2.onClick" + } + ], + "dynamicBindingPathList": [ + { + "key": "tableData" + }, + { + "key": "primaryColumns.data.computedValue" + }, + { + "key": "primaryColumns.page_id.computedValue" + }, + { + "key": "primaryColumns.customColumn3.computedValue" + }, + { + "key": "primaryColumns.customColumn4.computedValue" + }, + { + "key": "primaryColumns.customColumn5.computedValue" + }, + { + "key": "primaryColumns.customColumn6.computedValue" + }, + { + "key": "primaryColumns.customColumn7.computedValue" + }, + { + "key": "primaryColumns.customColumn8.computedValue" + }, + { + "key": "primaryColumns.customColumn2.buttonLabel" + } + ], + "leftColumn": 0, + "primaryColumns": { + "customColumn7": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.author?.email})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 8, + "isVisible": true, + "label": "Author", + "columnType": "text", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn7", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "page_id": { + "isDerived": false, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.page_id})}}", + "textSize": "PARAGRAPH2", + "index": 1, + "isVisible": false, + "label": "page_id", + "columnType": "text", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "page_id", + "verticalAlignment": "CENTER" + }, + "customColumn8": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.updated_at?.date.start})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 9, + "isVisible": true, + "label": "Last Updated", + "inputFormat": "YYYY-MM-DD", + "columnType": "date", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn8", + "buttonLabelColor": "#FFFFFF", + "outputFormat": "LL", + "verticalAlignment": "CENTER" + }, + "data": { + "isDerived": false, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return '#' + currentRow.data.id?.number})}}", + "textSize": "PARAGRAPH2", + "index": 0, + "isVisible": true, + "label": "ID", + "fontStyle": "BOLD", + "columnType": "text", + "horizontalAlignment": "RIGHT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "data", + "verticalAlignment": "CENTER" + }, + "customColumn2": { + "isDerived": true, + "computedValue": "", + "onClick": "{{showModal('Modal2')}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "#38AFF4", + "index": 9, + "isVisible": true, + "label": "Re-Estimate", + "buttonLabel": "{{Table2.sanitizedTableData.map((currentRow) => { return 'Update'})}}", + "columnType": "button", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn2", + "buttonLabelColor": "#F6F7F8", + "verticalAlignment": "CENTER" + }, + "customColumn3": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.estimate?.number})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 4, + "isVisible": true, + "label": "Estimate(SP)", + "columnType": "number", + "horizontalAlignment": "RIGHT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn3", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn4": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.issue_type?.select.name})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 5, + "isVisible": true, + "label": "Issue Type", + "columnType": "text", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn4", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn5": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.issue_url?.url})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 6, + "isVisible": true, + "label": "Issue URL", + "columnType": "url", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn5", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn6": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.created_at?.date.start})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 7, + "isVisible": true, + "label": "Created At", + "inputFormat": "YYYY-MM-DD", + "columnType": "date", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn6", + "buttonLabelColor": "#FFFFFF", + "outputFormat": "LL", + "verticalAlignment": "CENTER" + } + }, + "derivedColumns": { + "customColumn7": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.author?.email})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 8, + "isVisible": true, + "label": "Author", + "columnType": "text", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn7", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn8": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.updated_at?.date.start})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 9, + "isVisible": true, + "label": "Last Updated", + "inputFormat": "YYYY-MM-DD", + "columnType": "date", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn8", + "buttonLabelColor": "#FFFFFF", + "outputFormat": "LL", + "verticalAlignment": "CENTER" + }, + "customColumn2": { + "isDerived": true, + "computedValue": "", + "onClick": "{{showModal('Modal2')}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "#38AFF4", + "index": 9, + "isVisible": true, + "label": "Re-Estimate", + "buttonLabel": "{{Table1.sanitizedTableData.map((currentRow) => { return 'Update'})}}", + "columnType": "button", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn2", + "buttonLabelColor": "#F6F7F8", + "verticalAlignment": "CENTER" + }, + "customColumn3": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.estimate?.number})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 4, + "isVisible": true, + "label": "Estimate(SP)", + "columnType": "number", + "horizontalAlignment": "RIGHT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn3", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn4": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.issue_type?.select.name})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 5, + "isVisible": true, + "label": "Issue Type", + "columnType": "text", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn4", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn5": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.issue_url?.url})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 6, + "isVisible": true, + "label": "Issue URL", + "columnType": "url", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn5", + "buttonLabelColor": "#FFFFFF", + "verticalAlignment": "CENTER" + }, + "customColumn6": { + "isDerived": true, + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => { return currentRow.data.created_at?.date.start})}}", + "textSize": "PARAGRAPH2", + "buttonStyle": "rgb(3, 179, 101)", + "index": 7, + "isVisible": true, + "label": "Created At", + "inputFormat": "YYYY-MM-DD", + "columnType": "date", + "horizontalAlignment": "LEFT", + "width": 150, + "enableFilter": true, + "enableSort": true, + "id": "customColumn6", + "buttonLabelColor": "#FFFFFF", + "outputFormat": "LL", + "verticalAlignment": "CENTER" + } + }, + "rightColumn": 64, + "textSize": "PARAGRAPH2", + "widgetId": "efhhtr442b", + "tableData": "{{[]}}", + "isVisible": true, + "label": "Data", + "searchKey": "", + "version": 1, + "parentId": "9kax26wjp6", + "isLoading": false, + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnSizeMap": { + "parent": 136, + "issue_url": 174, + "data": 72, + "author": 174, + "issue_type": 109, + "created_at": 117, + "customColumn1": 122, + "customColumn2": 110, + "customColumn3": 110, + "customColumn4": 112, + "customColumn5": 320, + "task": 245, + "estimate": 109, + "step": 62, + "id": 60, + "status": 75 + } + } + ] + } + ] + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Column_Resize_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Column_Resize_spec.js new file mode 100644 index 0000000000..7eb9000870 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Column_Resize_spec.js @@ -0,0 +1,24 @@ +/* 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/tableResizedColumnsDsl.json"); + +describe("Table Widget Functionality with Hidden and Resized Columns", function() { + before(() => { + cy.addDsl(dsl); + }); + + it("Table Widget Functionality with Hidden and Resized Columns", function() { + cy.PublishtheApp(); + cy.get(".t--widget-tablewidget") + .invoke("outerWidth") + .then((tableWidth) => { + cy.get(".t--widget-tablewidget .thead .tr") + .invoke("outerWidth") + .then((width) => { + expect(width).to.be.at.least(tableWidth); + }); + }); + }); +}); diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx index 281aff8c35..6e6f3a8a4e 100644 --- a/app/client/src/widgets/TableWidget/index.tsx +++ b/app/client/src/widgets/TableWidget/index.tsx @@ -137,11 +137,8 @@ class TableWidget extends BaseWidget { let totalColumnSizes = 0; const defaultColumnWidth = 150; - for (const i in columnSizeMap) { - totalColumnSizes += columnSizeMap[i]; - } - const allColumnProperties = this.props.tableColumns || []; + for (let index = 0; index < allColumnProperties.length; index++) { const columnProperties = allColumnProperties[index]; const isHidden = !columnProperties.isVisible; @@ -218,6 +215,7 @@ class TableWidget extends BaseWidget { columnData.isHidden = true; hiddenColumns.push(columnData); } else { + totalColumnSizes += columnData.width; columns.push(columnData); } }