diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_FilteredTableData_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_FilteredTableData_spec.js deleted file mode 100644 index e3ca472a8bf..00000000000 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_FilteredTableData_spec.js +++ /dev/null @@ -1,55 +0,0 @@ -import EditorNavigation, { - EntityType, -} from "../../../../../support/Pages/EditorNavigation"; - -const widgetsPage = require("../../../../../locators/Widgets.json"); -const commonlocators = require("../../../../../locators/commonlocators.json"); -const publish = require("../../../../../locators/publishWidgetspage.json"); -const dsl = require("../../../../../fixtures/tableV2AndTextDsl.json"); - -import * as _ from "../../../../../support/Objects/ObjectsCore"; - -describe( - "Table Widget V2 Filtered Table data in autocomplete", - { tags: ["@tag.Widget", "@tag.Table", "@tag.Sanity"] }, - function () { - before("Table Widget V2 Functionality", () => { - _.agHelper.AddDsl("tableV2AndTextDsl"); - cy.openPropertyPane("tablewidgetv2"); - }); - - it("1. Table Widget V2 Functionality To Filter and search data", function () { - cy.get(publish.searchInput).first().type("query"); - cy.get(publish.filterBtn).click({ force: true }); - cy.get(publish.attributeDropdown).click({ force: true }); - cy.get(publish.attributeValue).contains("task").click({ force: true }); - cy.get(publish.conditionDropdown).click({ force: true }); - cy.get(publish.attributeValue) - .contains("contains") - .click({ force: true }); - cy.get(publish.tableFilterInputValue).type("bind", { force: true }); - cy.wait(500); - cy.get(widgetsPage.filterApplyBtn).click({ force: true }); - cy.wait(500); - cy.get(".t--close-filter-btn").click({ force: true }); - }); - - it("2. Table Widget V2 Functionality to validate filtered table data", function () { - EditorNavigation.SelectEntityByName("Text1", EntityType.Widget); - cy.testJsontext("text", "{{Table1.filteredTableData[0].task}}"); - cy.readTableV2data("0", "1").then((tabData) => { - const tableData = tabData; - cy.get(commonlocators.labelTextStyle).should("have.text", tableData); - }); - - //Table Widget V2 Functionality to validate filtered table data with actual table data - cy.readTableV2data("0", "1").then((tabData) => { - const tableData = JSON.parse(dsl.dsl.children[0].tableData); - cy.get(commonlocators.labelTextStyle).should( - "have.text", - tableData[2].task, - ); - }); - }); - }, -); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_FilteredTableData_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_FilteredTableData_spec.ts new file mode 100644 index 00000000000..8a0a2cdaba0 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_FilteredTableData_spec.ts @@ -0,0 +1,114 @@ +import EditorNavigation, { + EntityType, + PageLeftPane, + PagePaneSegment, +} from "../../../../../support/Pages/EditorNavigation"; + +import dsl from "../../../../../fixtures/tableV2AndTextDsl.json"; +import widgetsPage from "../../../../../locators/Widgets.json"; +import commonlocators from "../../../../../locators/commonlocators.json"; +import publish from "../../../../../locators/publishWidgetspage.json"; + +import { tableDataJSObject } from "../../../../../fixtures/tableV2FilteringWithPrimaryColumnJSObjectWidthData"; +import { + agHelper, + jsEditor, + locators, + table, +} from "../../../../../support/Objects/ObjectsCore"; + +describe( + "Table Widget V2 Filtered Table data in autocomplete", + { tags: ["@tag.Widget", "@tag.Table", "@tag.Sanity"] }, + function () { + before("Table Widget V2 Functionality", () => { + agHelper.AddDsl("tableV2AndTextDsl"); + agHelper.GetNClick(locators._widgetInCanvas("tablewidgetv2")); + }); + + it("1. Table Widget V2 Functionality To Filter and search data", function () { + table.SearchTable("query"); + agHelper.GetNClick(publish.filterBtn, 0, true); + agHelper.GetNClick(publish.attributeDropdown, 0, true); + + agHelper + .GetElement(publish.attributeValue) + .contains("task") + .click({ force: true }); + agHelper.GetNClick(publish.conditionDropdown, 0, true); + agHelper + .GetElement(publish.attributeValue) + .contains("contains") + .click({ force: true }); + agHelper.TypeText(publish.tableFilterInputValue, "bind"); + + agHelper.GetNClick(widgetsPage.filterApplyBtn, 0, true); + table.CloseFilter(); + }); + + it("2. Table Widget V2 Functionality to validate filtered table data", function () { + EditorNavigation.SelectEntityByName("Text1", EntityType.Widget); + (cy as any).testJsontext("text", "{{Table1.filteredTableData[0].task}}"); + table.ReadTableRowColumnData(0, 1, "v2").then((tabData: string) => { + agHelper.AssertText( + commonlocators.labelTextStyle, + "text", + tabData as string, + ); + }); + + //Table Widget V2 Functionality to validate filtered table data with actual table data + const tableData = JSON.parse(dsl.dsl.children[0].tableData as string); + agHelper.AssertText( + commonlocators.labelTextStyle, + "text", + tableData[1].task as string, + ); + }); + + it("3. When primary key is set, selectedRowIndex should not updated after data update", function () { + // https://github.com/appsmithorg/appsmith/issues/36080 + jsEditor.CreateJSObject(tableDataJSObject, { + paste: true, + completeReplace: true, + toRun: false, + shouldCreateNewJSObj: true, + prettify: true, + }); + jsEditor.CreateJSObject(manipulateDataJSObject, { + paste: true, + completeReplace: true, + toRun: true, + shouldCreateNewJSObj: true, + prettify: true, + }); + PageLeftPane.switchSegment(PagePaneSegment.UI); + + agHelper.AddDsl("tableV2FilteringWithPrimaryColumn"); + table.SearchTable("Engineering"); + table.ReadTableRowColumnData(2, 0, "v2").then((text) => { + expect(text).to.equal("Michael Wilson"); + }); + + table.SelectTableRow(2, 0, true, "v2"); + + agHelper.GetText(locators._textWidget, "text").then((text) => { + agHelper.ClickButton("Submit"); + + table.ReadTableRowColumnData(2, 0, "v2").then((text) => { + expect(text).to.equal("Michael Wilson1"); + }); + agHelper.AssertText(locators._textWidget, "text", text as string); + }); + }); + }, +); + +export const manipulateDataJSObject = `export default { + data: JSObject1.initData, + makeNewCopy() { + const my = _.cloneDeep(this.data); + my[5].name =my[5].name+"1"; + this.data = my; + } +}`; diff --git a/app/client/cypress/fixtures/tableV2FilteringWithPrimaryColumn.json b/app/client/cypress/fixtures/tableV2FilteringWithPrimaryColumn.json new file mode 100644 index 00000000000..68abd3e8474 --- /dev/null +++ b/app/client/cypress/fixtures/tableV2FilteringWithPrimaryColumn.json @@ -0,0 +1,449 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1282, + "containerStyle": "none", + "snapRows": 124, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 90, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", + "borderColor": "#E0DEDE", + "isVisibleDownload": true, + "topRow": 1, + "isSortable": true, + "type": "TABLE_WIDGET_V2", + "inlineEditingSaveOption": "ROW_LEVEL", + "animateLoading": true, + "dynamicBindingPathList": [ + { + "key": "accentColor" + }, + { + "key": "borderRadius" + }, + { + "key": "boxShadow" + }, + { + "key": "primaryColumns.name.computedValue" + }, + { + "key": "primaryColumns.department.computedValue" + }, + { + "key": "primaryColumns.location.computedValue" + }, + { + "key": "tableData" + }, + { + "key": "primaryColumns.employeeId.computedValue" + }, + { + "key": "primaryColumns.position.computedValue" + }, + { + "key": "primaryColumns.salary.computedValue" + } + ], + "leftColumn": 0, + "delimiter": ",", + "defaultSelectedRowIndex": 0, + "flexVerticalAlignment": "start", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisibleFilters": true, + "isVisible": true, + "enableClientSideSearch": true, + "version": 2, + "totalRecordsCount": 0, + "isLoading": false, + "childStylesheet": { + "button": { + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "menuButton": { + "menuColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "iconButton": { + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "boxShadow": "none" + }, + "editActions": { + "saveButtonColor": "{{appsmith.theme.colors.primaryColor}}", + "saveBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "discardButtonColor": "{{appsmith.theme.colors.primaryColor}}", + "discardBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" + } + }, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "columnUpdatedAt": 1726719516718, + "primaryColumnId": "employeeId", + "defaultSelectedRowIndices": [0], + "needsErrorInfo": false, + "mobileBottomRow": 35, + "widgetName": "Table1", + "defaultPageSize": 0, + "columnOrder": [ + "name", + "department", + "location", + "employeeId", + "position", + "salary" + ], + "dynamicPropertyPathList": [ + { + "key": "tableData" + } + ], + "bottomRow": 29, + "columnWidthMap": {}, + "parentRowSpace": 10, + "mobileRightColumn": 46, + "parentColumnSpace": 10.546875, + "dynamicTriggerPathList": [], + "borderWidth": "1", + "primaryColumns": { + "name": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 1, + "width": 150, + "originalId": "name", + "id": "name", + "alias": "name", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "0.875rem", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "name", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"name\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard" + }, + "department": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 4, + "width": 150, + "originalId": "department", + "id": "department", + "alias": "department", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "0.875rem", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "department", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"department\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard" + }, + "location": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 5, + "width": 150, + "originalId": "location", + "id": "location", + "alias": "location", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "0.875rem", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "location", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"location\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard" + }, + "employeeId": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 0, + "width": 150, + "originalId": "employeeId", + "id": "employeeId", + "alias": "employeeId", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "number", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "employeeId", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"employeeId\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard", + "cellBackground": "" + }, + "position": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 3, + "width": 150, + "originalId": "position", + "id": "position", + "alias": "position", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "position", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"position\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard", + "cellBackground": "" + }, + "salary": { + "allowCellWrapping": false, + "allowSameOptionsInNewRow": true, + "index": 5, + "width": 150, + "originalId": "salary", + "id": "salary", + "alias": "salary", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "number", + "textColor": "", + "textSize": "0.875rem", + "fontStyle": "", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isDisabled": false, + "isCellEditable": false, + "isEditable": false, + "isCellVisible": true, + "isDerived": false, + "label": "salary", + "isSaveVisible": true, + "isDiscardVisible": true, + "computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"salary\"]))}}", + "sticky": "", + "validation": {}, + "currencyCode": "USD", + "decimals": 0, + "thousandSeparator": true, + "notation": "standard", + "cellBackground": "" + } + }, + "key": "1vnt7cehmt", + "canFreezeColumn": true, + "rightColumn": 64, + "textSize": "0.875rem", + "widgetId": "gt19wbzlit", + "minWidth": 450, + "tableData": "{{JSObject2.data}}", + "label": "Data", + "searchKey": "", + "parentId": "0", + "renderMode": "CANVAS", + "mobileTopRow": 7, + "horizontalAlignment": "LEFT", + "isVisibleSearch": true, + "responsiveBehavior": "fill", + "mobileLeftColumn": 12, + "isVisiblePagination": true, + "verticalAlignment": "CENTER" + }, + { + "needsErrorInfo": false, + "mobileBottomRow": 44, + "widgetName": "Text1", + "topRow": 34, + "bottomRow": 38, + "parentRowSpace": 10, + "type": "TEXT_WIDGET", + "mobileRightColumn": 18, + "animateLoading": true, + "overflow": "NONE", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "parentColumnSpace": 10.546875, + "dynamicTriggerPathList": [], + "leftColumn": 2, + "dynamicBindingPathList": [ + { + "key": "truncateButtonColor" + }, + { + "key": "fontFamily" + }, + { + "key": "borderRadius" + }, + { + "key": "text" + } + ], + "shouldTruncate": false, + "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", + "text": "{{Table1.selectedRowIndex}}", + "key": "dlet8mfjip", + "rightColumn": 18, + "textAlign": "LEFT", + "dynamicHeight": "AUTO_HEIGHT", + "widgetId": "irgoh659po", + "minWidth": 450, + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "mobileTopRow": 40, + "responsiveBehavior": "fill", + "originalTopRow": 40, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "mobileLeftColumn": 2, + "maxDynamicHeight": 9000, + "originalBottomRow": 44, + "fontSize": "1rem", + "minDynamicHeight": 4 + }, + { + "resetFormOnClick": false, + "needsErrorInfo": false, + "boxShadow": "none", + "mobileBottomRow": 44, + "widgetName": "Button1", + "onClick": "{{JSObject2.makeNewCopy();}}", + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "topRow": 34, + "bottomRow": 38, + "parentRowSpace": 10, + "type": "BUTTON_WIDGET", + "mobileRightColumn": 55, + "animateLoading": true, + "parentColumnSpace": 10.546875, + "dynamicTriggerPathList": [ + { + "key": "onClick" + } + ], + "leftColumn": 39, + "dynamicBindingPathList": [ + { + "key": "buttonColor" + }, + { + "key": "borderRadius" + } + ], + "text": "Submit", + "isDisabled": false, + "key": "mzyu2305os", + "rightColumn": 55, + "isDefaultClickDisabled": true, + "widgetId": "q29byryymd", + "minWidth": 120, + "isVisible": true, + "recaptchaType": "V3", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "mobileTopRow": 40, + "responsiveBehavior": "hug", + "disabledWhenInvalid": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "mobileLeftColumn": 39, + "buttonVariant": "PRIMARY", + "placement": "CENTER" + } + ] + } +} diff --git a/app/client/cypress/fixtures/tableV2FilteringWithPrimaryColumnJSObjectWidthData.ts b/app/client/cypress/fixtures/tableV2FilteringWithPrimaryColumnJSObjectWidthData.ts new file mode 100644 index 00000000000..67bd37f395d --- /dev/null +++ b/app/client/cypress/fixtures/tableV2FilteringWithPrimaryColumnJSObjectWidthData.ts @@ -0,0 +1,84 @@ +export const tableDataJSObject = `export default { + initData :[ + { + "employeeId": 101, + "name": "John Doe", + "department": "Engineering", + "position": "Software Engineer", + "location": "San Francisco", + "salary": 120000 + }, + { + "employeeId": 102, + "name": "Jane Smith", + "department": "Engineering", + "position": "DevOps Engineer", + "location": "New York", + "salary": 115000 + }, + { + "employeeId": 103, + "name": "Alice Johnson", + "department": "Marketing", + "position": "Marketing Manager", + "location": "Chicago", + "salary": 90000 + }, + { + "employeeId": 104, + "name": "Robert Brown", + "department": "Sales", + "position": "Sales Executive", + "location": "Los Angeles", + "salary": 95000 + }, + { + "employeeId": 105, + "name": "Linda Davis", + "department": "HR", + "position": "HR Manager", + "location": "San Francisco", + "salary": 85000 + }, + { + "employeeId": 106, + "name": "Michael Wilson", + "department": "Engineering", + "position": "Frontend Developer", + "location": "San Francisco", + "salary": 105000 + }, + { + "employeeId": 107, + "name": "Emily Clark", + "department": "Marketing", + "position": "Content Specialist", + "location": "Chicago", + "salary": 75000 + }, + { + "employeeId": 108, + "name": "David Martinez", + "department": "Sales", + "position": "Sales Manager", + "location": "New York", + "salary": 110000 + }, + { + "employeeId": 109, + "name": "Sarah Lee", + "department": "HR", + "position": "Recruiter", + "location": "Los Angeles", + "salary": 70000 + }, + { + "employeeId": 110, + "name": "James Anderson", + "department": "Engineering", + "position": "Backend Developer", + "location": "New York", + "salary": 118000 + } +] +}`; diff --git a/app/client/src/widgets/TableWidgetV2/widget/utilities.ts b/app/client/src/widgets/TableWidgetV2/widget/utilities.ts index 19bb9dcc8b3..20f5d00561e 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/utilities.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/utilities.ts @@ -19,7 +19,6 @@ import { DEFAULT_BUTTON_COLOR, DEFAULT_COLUMN_WIDTH, TABLE_COLUMN_ORDER_KEY, - ORIGINAL_INDEX_KEY, } from "../constants"; import { SelectColumnOptionsValidations } from "./propertyUtils"; import type { TableWidgetProps } from "../constants"; @@ -65,13 +64,7 @@ export const getOriginalRowIndex = ( } if (!!primaryKey && tableData) { - const selectedRow = tableData.find( - (row) => row[primaryColumnId] === primaryKey, - ); - - if (selectedRow) { - index = selectedRow[ORIGINAL_INDEX_KEY] as number; - } + index = tableData.findIndex((row) => row[primaryColumnId] === primaryKey); } return index;