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

fix: corrected Index cond. for conditional formatting in table widget (#9735)

Browse Source 
* fix: corrected Index cond. for conditional formatting in table widget

* test: added integration test for checking condtional formating post sorting

* refactor: enhanced the originalIndex condition with nullish coalescing op
This commit is contained in:
Keyur Paralkar 2021-12-21 15:25:12 +05:30 committed by GitHub
parent 13f24cbce8
commit 848bc13bc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 171 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
app/client/cypress/fixtures/tableWidgetCondnFormatDsl.json Normal file
View File

@ -0,0 +1,136 @@
{
"dsl": {
"widgetName": "MainContainer",
"backgroundColor": "none",
"rightColumn": 904,
"snapColumns": 64,
"detachFromLayout": true,
"widgetId": "0",
"topRow": 0,
"bottomRow": 1160,
"containerStyle": "none",
"snapRows": 125,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"version": 46,
"minHeight": 1140,
"parentColumnSpace": 1,
"dynamicBindingPathList": [],
"leftColumn": 0,
"children": [
{
"multiRowSelection": false,
"widgetName": "Table1",
"defaultPageSize": 0,
"columnOrder": [
"id",
"color"
],
"isVisibleDownload": true,
"dynamicPropertyPathList": [
{
"key": "primaryColumns.color.textColor"
},
{
"key": "primaryColumns.color.fontStyle"
}
],
"displayName": "Table",
"iconSVG": "/static/media/icon.db8a9cbd.svg",
"topRow": 52,
"bottomRow": 94,
"isSortable": true,
"parentRowSpace": 10,
"type": "TABLE_WIDGET",
"defaultSelectedRow": "0",
"hideCard": false,
"parentColumnSpace": 25.6875,
"dynamicTriggerPathList": [],
"dynamicBindingPathList": [
{
"key": "primaryColumns.id.computedValue"
},
{
"key": "primaryColumns.color.computedValue"
},
{
"key": "primaryColumns.color.textColor"
},
{
"key": "primaryColumns.color.fontStyle"
}
],
"leftColumn": 3,
"primaryColumns": {
"id": {
"index": 0,
"width": 150,
"id": "id",
"horizontalAlignment": "LEFT",
"verticalAlignment": "CENTER",
"columnType": "text",
"textColor": "",
"textSize": "PARAGRAPH",
"fontStyle": "BOLD",
"enableFilter": true,
"enableSort": true,
"isVisible": true,
"isDisabled": false,
"isCellVisible": true,
"isDerived": false,
"label": "id",
"computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.id))}}"
},
"color": {
"index": 1,
"width": 150,
"id": "color",
"horizontalAlignment": "LEFT",
"verticalAlignment": "CENTER",
"columnType": "text",
"textColor": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.color))}}",
"textSize": "PARAGRAPH",
"fontStyle": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.color === \"blue\" ? \"BOLD\" : \"ITALIC\"))}}",
"enableFilter": true,
"enableSort": true,
"isVisible": true,
"isDisabled": false,
"isCellVisible": true,
"isDerived": false,
"label": "color",
"computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.color))}}"
}
},
"delimiter": ",",
"key": "fzi9jh5j7j",
"derivedColumns": {},
"rightColumn": 43,
"textSize": "PARAGRAPH",
"widgetId": "2tk8bgzwaz",
"isVisibleFilters": true,
"tableData": "[{\n\"id\":\"1\",\n\"color\": \"blue\"\n},\n{\n\"id\":\"2\",\n\"color\": \"red\"\n},\n{\n\"id\":\"3\",\n\"color\": \"magenta\"\n},\n{\n\"id\":\"4\",\n\"color\": \"green\"\n}\n]",
"isVisible": true,
"label": "Data",
"searchKey": "",
"fontStyle": "BOLD",
"version": 3,
"enableClientSideSearch": false,
"textColor": "",
"totalRecordsCount": 0,
"parentId": "0",
"renderMode": "CANVAS",
"isLoading": false,
"horizontalAlignment": "LEFT",
"isVisibleSearch": true,
"isVisiblePagination": true,
"verticalAlignment": "CENTER",
"columnSizeMap": {
"task": 245,
"step": 62,
"status": 75
}
}
]
}
}

34
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Table_Widget__CondtionalFormatting_spec.js Normal file
View File

@ -0,0 +1,34 @@
/* eslint-disable cypress/no-unnecessary-waiting */
const dsl = require("../../../../fixtures/tableWidgetCondnFormatDsl.json");
describe("Table Widget condtional formatting to remain consistent", function() {
before(() => {
cy.addDsl(dsl);
});
it("check the cell styles before and after sorting", function() {
cy.openPropertyPane("tablewidget");
//Check Font weight, font style, and text color before sorting
cy.readTabledataValidateCSS("0", "1", "font-weight", "700");
cy.readTabledataValidateCSS("0", "1", "font-style", "normal");
cy.readTabledataValidateCSS("0", "1", "color", "rgb(0, 0, 255)");
cy.readTabledataValidateCSS("1", "1", "font-weight", "400");
cy.readTabledataValidateCSS("1", "1", "font-style", "italic");
cy.readTabledataValidateCSS("1", "1", "color", "rgb(255, 0, 0)");
cy.get(".draggable-header")
.contains("id")
.click({ force: true });
//Check Font weight, font style, and text color after sorting
cy.readTabledataValidateCSS("3", "1", "font-weight", "700");
cy.readTabledataValidateCSS("3", "1", "font-style", "normal");
cy.readTabledataValidateCSS("3", "1", "color", "rgb(0, 0, 255)");
cy.readTabledataValidateCSS("2", "1", "font-weight", "400");
cy.readTabledataValidateCSS("2", "1", "font-style", "italic");
cy.readTabledataValidateCSS("2", "1", "color", "rgb(255, 0, 0)");
});
});

2
app/client/src/widgets/TableWidget/widget/index.tsx
View File

@ -146,7 +146,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
Cell: (props: any) => {
const rowIndex: number = props.cell.row.index;
const data = this.props.filteredTableData[rowIndex];
const originalIndex = data?.__originalIndex__ || rowIndex;
const originalIndex = data.__originalIndex__ ?? rowIndex;
// cellProperties order or size does not change when filter/sorting/grouping is applied
// on the data thus original index is need to identify the column's cell property.