diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js index 2fbe37ca8e..a17b4b076a 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js @@ -350,4 +350,40 @@ describe("Table Widget V2 property pane feature validation", function() { cy.get(widgetsPage.searchField).should("have.value", "data"); cy.get(publish.backToEditor).click(); }); + + it("13. Verify custom column property name changes with change in column name ([FEATURE]: #17142)", function() { + // Open property pane + cy.openPropertyPane("tablewidgetv2"); + cy.moveToContentTab(); + cy.addColumnV2("customColumn18"); + cy.editColumn("customColumn1"); + cy.get(".t--property-control-propertyname pre span span").should( + "have.text", + "customColumn18", + ); + cy.editColName("customColumn00"); + cy.get(".t--property-control-propertyname pre span span").should( + "have.text", + "customColumn00", + ); + cy.get(".t--property-pane-back-btn").click(); + cy.get('[data-rbd-draggable-id="customColumn1"] input').should( + "have.value", + "customColumn00", + ); + cy.get("[data-rbd-draggable-id='customColumn1'] input[type='text']").clear({ + force: true, + }); + cy.get("[data-rbd-draggable-id='customColumn1'] input[type='text']").type( + "customColumn99", + { + force: true, + }, + ); + cy.editColumn("customColumn1"); + cy.get(".t--property-control-propertyname pre span span").should( + "have.text", + "customColumn99", + ); + }); }); diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Data.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Data.ts index 709fc62865..6ca793a312 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Data.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Data.ts @@ -93,6 +93,8 @@ export default { propertyName: "alias", label: "Property Name", controlType: "INPUT_TEXT", + helperText: () => + "Changing the name of the column overrides any changes to this field", hidden: (props: TableWidgetProps, propertyPath: string) => { const columnId = propertyPath.match(/primaryColumns\.(.*)\.alias/); let isDerivedProperty = false; diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/index.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/index.ts index de586028d9..82cd69704a 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/index.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/index.ts @@ -14,6 +14,7 @@ import Color from "./Color"; import BorderAndShadow from "./BorderAndShadow"; import Validations from "./Validation"; import Select from "./Select"; +import { updateCustomColumnAliasOnLabelChange } from "../../propertyUtils"; export default { editableTitle: true, @@ -39,4 +40,5 @@ export default { discardButtonStyleConfig, BorderAndShadow, ], + updateHook: updateCustomColumnAliasOnLabelChange, }; diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts index c857f8d6e6..937434f68c 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/contentConfig.ts @@ -11,6 +11,7 @@ import { updateColumnOrderHook, updateInlineEditingSaveOptionHook, updateInlineEditingOptionDropdownVisibilityHook, + updateCustomColumnAliasOnLabelChange, } from "../propertyUtils"; import { createMessage, @@ -50,6 +51,7 @@ export default [ updateHook: composePropertyUpdateHook([ updateColumnOrderHook, updateInlineEditingOptionDropdownVisibilityHook, + updateCustomColumnAliasOnLabelChange, ]), dependencies: [ "columnOrder", diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.test.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.test.ts index 33a25b2c0f..0ca7c242bc 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.test.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.test.ts @@ -6,6 +6,7 @@ import { getBasePropertyPath, hideByColumnType, uniqueColumnAliasValidation, + updateCustomColumnAliasOnLabelChange, } from "./propertyUtils"; import _ from "lodash"; import { ColumnTypes, TableWidgetProps } from "../constants"; @@ -454,3 +455,55 @@ describe("uniqueColumnAliasValidation", () => { }); }); }); + +describe("updateCustomColumnAliasOnLabelChange", () => { + it("should return the propertyToUpdate array to update alias for the given custom column", () => { + expect( + updateCustomColumnAliasOnLabelChange( + {} as TableWidgetProps, + "primaryColumns.customColumn1.label", + "customColumn12", + ), + ).toEqual([ + { + propertyPath: "primaryColumns.customColumn1.alias", + propertyValue: "customColumn12", + }, + ]); + }); + + it("should not return propertyToUpdate array to update alias for the given column", () => { + expect( + updateCustomColumnAliasOnLabelChange( + {} as TableWidgetProps, + "primaryColumns.resume_url.label", + "customColumn12", + ), + ).toEqual(undefined); + }); + + it("should not return the propertyToUpdate array to update alias when any property other than label property of the custom column gets changed", () => { + expect( + updateCustomColumnAliasOnLabelChange( + {} as TableWidgetProps, + "primaryColumns.customColumn1.notlabel", + "customColumn12", + ), + ).toEqual(undefined); + }); + + it("should return the propertyToUpdate array to update alias for any given custom column", () => { + expect( + updateCustomColumnAliasOnLabelChange( + {} as TableWidgetProps, + "primaryColumns.customColumn12345.label", + "customColumn12", + ), + ).toEqual([ + { + propertyPath: "primaryColumns.customColumn12345.alias", + propertyValue: "customColumn12", + }, + ]); + }); +}); diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts index ebbb77b3c8..e4f91367db 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts @@ -624,3 +624,20 @@ export const replacePropertyName = ( path.pop(); return `${path.join(".")}.${targetPropertyName}`; }; + +export const updateCustomColumnAliasOnLabelChange = ( + props: TableWidgetProps, + propertyPath: string, + propertyValue: unknown, +): Array | undefined => { + // alias will be updated along with label change only for custom columns + const regex = /^primaryColumns\.(customColumn\d+)\.label$/; + if (propertyPath?.length && regex.test(propertyPath)) { + return [ + { + propertyPath: propertyPath.replace("label", "alias"), + propertyValue: propertyValue, + }, + ]; + } +};