From 5ec470e3c6905295d05abbd1eb9dcef464358bf4 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Fri, 3 Dec 2021 15:15:23 +0100 Subject: [PATCH] fix: selected row issue (#9445) * fix: selected row issue * fix: add tests Co-authored-by: Arpit Mohan --- .../cypress/fixtures/tableAndTextDsl.json | 277 ++++++++++++++++++ .../Table_Widget_Selected_row_spec.js | 17 ++ .../src/widgets/TableWidget/widget/index.tsx | 2 +- 3 files changed, 295 insertions(+), 1 deletion(-) create mode 100644 app/client/cypress/fixtures/tableAndTextDsl.json create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Selected_row_spec.js diff --git a/app/client/cypress/fixtures/tableAndTextDsl.json b/app/client/cypress/fixtures/tableAndTextDsl.json new file mode 100644 index 0000000000..29dc8d10c2 --- /dev/null +++ b/app/client/cypress/fixtures/tableAndTextDsl.json @@ -0,0 +1,277 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 427, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1770, + "containerStyle": "none", + "snapRows": 177, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 46, + "minHeight": 1780, + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "widgetName": "Table1", + "defaultPageSize": 0, + "columnOrder": [ + "step", + "task", + "status", + "action", + "customColumn1", + "customColumn2" + ], + "isVisibleDownload": true, + "displayName": "Table", + "iconSVG": "/static/media/icon.db8a9cbd.svg", + "topRow": 28, + "bottomRow": 56, + "isSortable": true, + "parentRowSpace": 10, + "type": "TABLE_WIDGET", + "defaultSelectedRow": "0", + "hideCard": false, + "parentColumnSpace": 17.265625, + "dynamicTriggerPathList": [], + "dynamicBindingPathList": [ + { + "key": "primaryColumns.step.computedValue" + }, + { + "key": "primaryColumns.task.computedValue" + }, + { + "key": "primaryColumns.status.computedValue" + }, + { + "key": "primaryColumns.action.computedValue" + }, + { + "key": "primaryColumns.action.buttonLabel" + }, + { + "key": "primaryColumns.action.menuButtonLabel" + }, + { + "key": "derivedColumns.customColumn1.menuButtonLabel" + }, + { + "key": "primaryColumns.customColumn1.menuButtonLabel" + } + ], + "leftColumn": 2, + "primaryColumns": { + "step": { + "index": 0, + "width": 150, + "id": "step", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "step", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}" + }, + "task": { + "index": 1, + "width": 150, + "id": "task", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "task", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}" + }, + "status": { + "index": 2, + "width": 150, + "id": "status", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "status", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}" + }, + "action": { + "index": 3, + "width": 150, + "id": "action", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "button", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDisabled": false, + "isDerived": false, + "label": "action", + "onClick": "{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", + "buttonLabel": "{{Table1.sanitizedTableData.map((currentRow) => ( 'Action'))}}", + "menuButtonLabel": "{{Table1.sanitizedTableData.map((currentRow) => ( 'Open Menu'))}}" + }, + "customColumn1": { + "index": 4, + "width": 150, + "id": "customColumn1", + "columnType": "menuButton", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": true, + "label": "customColumn1", + "computedValue": "", + "buttonStyle": "rgb(3, 179, 101)", + "buttonLabelColor": "#FFFFFF", + "menuButtonLabel": "{{Table1.sanitizedTableData.map((currentRow) => ( 'Open Menu'))}}", + "menuItems": { + "menuItemyjwc4mqjn8": { + "id": "menuItemyjwc4mqjn8", + "label": "Menu Item 1", + "widgetId": "ysl7bs8qv3", + "isDisabled": false, + "isVisible": true + } + } + }, + "customColumn2": { + "index": 5, + "width": 150, + "id": "customColumn2", + "columnType": "iconButton", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": true, + "label": "customColumn2", + "computedValue": "", + "buttonStyle": "rgb(3, 179, 101)", + "buttonLabelColor": "#FFFFFF" + } + }, + "delimiter": ",", + "key": "loucuvyjvb", + "derivedColumns": { + "customColumn1": { + "index": 4, + "width": 150, + "id": "customColumn1", + "columnType": "menuButton", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": true, + "label": "customColumn1", + "computedValue": "", + "buttonStyle": "rgb(3, 179, 101)", + "buttonLabelColor": "#FFFFFF", + "menuButtonLabel": "{{Table1.sanitizedTableData.map((currentRow) => ( 'Open Menu'))}}" + }, + "customColumn2": { + "index": 5, + "width": 150, + "id": "customColumn2", + "columnType": "iconButton", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellVisible": true, + "isDerived": true, + "label": "customColumn2", + "computedValue": "", + "buttonStyle": "rgb(3, 179, 101)", + "buttonLabelColor": "#FFFFFF" + } + }, + "rightColumn": 47, + "textSize": "PARAGRAPH", + "widgetId": "ofs3jqui68", + "isVisibleFilters": true, + "tableData": "[\n {\n \"step\": \"#1\",\n \"task\": \"Drop a table\",\n \"status\": \"✅\",\n \"action\": \"\"\n },\n {\n \"step\": \"#2\",\n \"task\": \"Create a query fetch_users with the Mock DB\",\n \"status\": \"--\",\n \"action\": \"\"\n },\n {\n \"step\": \"#3\",\n \"task\": \"Bind the query using => fetch_users.data\",\n \"status\": \"--\",\n \"action\": \"\"\n }\n]", + "isVisible": true, + "label": "Data", + "searchKey": "", + "version": 3, + "totalRecordsCount": 0, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "horizontalAlignment": "LEFT", + "isVisibleSearch": true, + "isVisiblePagination": true, + "verticalAlignment": "CENTER", + "columnSizeMap": { + "task": 245, + "step": 62, + "status": 75 + } + }, + { + "widgetName": "Text1", + "displayName": "Text", + "iconSVG": "/static/media/icon.97c59b52.svg", + "topRow": 73, + "bottomRow": 77, + "parentRowSpace": 10, + "type": "TEXT_WIDGET", + "hideCard": false, + "parentColumnSpace": 17.265625, + "dynamicTriggerPathList": [], + "leftColumn": 7, + "dynamicBindingPathList": [ + { + "key": "text" + } + ], + "text": "{{Table1.selectedRowIndex}}", + "key": "r91cgfzjby", + "rightColumn": 23, + "textAlign": "LEFT", + "widgetId": "oftnjwntmu", + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "fontSize": "PARAGRAPH" + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Selected_row_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Selected_row_spec.js new file mode 100644 index 0000000000..ad87c145c9 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Selected_row_spec.js @@ -0,0 +1,17 @@ +const dsl = require("../../../../fixtures/tableAndTextDsl.json"); + +describe("Table Widget property pane feature validation", function() { + before(() => { + cy.addDsl(dsl); + }); + it("Table widget new menu button column should not deselect row", function() { + cy.openPropertyPane("tablewidget"); + + cy.get(".t--widget-textwidget").should("have.text", "0"); + cy.contains("Open Menu").click({ + force: true, + }); + cy.wait(1000); + cy.get(".t--widget-textwidget").should("have.text", "0"); + }); +}); diff --git a/app/client/src/widgets/TableWidget/widget/index.tsx b/app/client/src/widgets/TableWidget/widget/index.tsx index 7aed51f291..7ec17b8fb6 100644 --- a/app/client/src/widgets/TableWidget/widget/index.tsx +++ b/app/client/src/widgets/TableWidget/widget/index.tsx @@ -211,7 +211,7 @@ class TableWidget extends BaseWidget { ); } else if (columnProperties.columnType === "menuButton") { const menuButtonProps: RenderMenuButtonProps = { - isSelected: !!props.row.isSelected, + isSelected: isSelected, onCommandClick: (action: string, onComplete?: () => void) => this.onCommandClick(rowIndex, action, onComplete), isDisabled: cellProperties.isDisabled || false,