Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fixed empty area issue when columns are hidden in published mode (#5162)

Browse Source
This commit is contained in:
Vicky Bansal 2021-06-23 19:09:04 +05:30 committed by GitHub
parent dce3a80e40
commit fe700a8049
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 531 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

505
app/client/cypress/fixtures/tableResizedColumnsDsl.json Normal file
View File

@ -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
}
}
]
}
]
}
]
}
}

24
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Column_Resize_spec.js Normal file
View File

@ -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);
});
});
});
});

6
app/client/src/widgets/TableWidget/index.tsx
View File

@ -137,11 +137,8 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
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<TableWidgetProps, WidgetState> {
columnData.isHidden = true;
hiddenColumns.push(columnData);
} else {
totalColumnSizes += columnData.width;
columns.push(columnData);
}
}