fix: selected row issue (#9445)
* fix: selected row issue * fix: add tests Co-authored-by: Arpit Mohan <arpit@appsmith.com>
This commit is contained in:
Tolulope Adetula
GitHub
parent
81ccdbaede
commit
5ec470e3c6
277
app/client/cypress/fixtures/tableAndTextDsl.json
Normal file
277
app/client/cypress/fixtures/tableAndTextDsl.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
@ -211,7 +211,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
|
|||
);
|
||||
} 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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user