feat: update property name automatically when custom column name is changed (#18048)

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",
+    );
+  });
 });

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;

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,
 };

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",

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",
+      },
+    ]);
+  });
+});

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<PropertyHookUpdates> | 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,
+      },
+    ];
+  }
+};