fix: table derived bindingList error.

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -346,6 +346,37 @@ function* updateWidgetPropertySaga(
   );
 }
 
+export function removeDynamicBindingProperties(
+  propertyPath: string,
+  dynamicBindingPathList: DynamicPath[],
+) {
+  /*
+  we are doing this because when you toggle js off we only 
+  receive the  `primaryColumns.` properties not the `derivedColumns.`
+  properties therefore we need just a hard-codded check.
+  (TODO) - Arsalan remove this primaryColumns check when the Table widget v2 is live.
+  */
+
+  if (_.startsWith(propertyPath, "primaryColumns")) {
+    // primaryColumns.customColumn1.isVisible -> customColumn1.isVisible
+    const tableProperty = propertyPath
+      .split(".")
+      .splice(1)
+      .join(".");
+    const tablePropertyPathsToRemove = [
+      propertyPath, // primaryColumns.customColumn1.isVisible
+      `derivedColumns.${tableProperty}`, // derivedColumns.customColumn1.isVisible
+    ];
+    return _.reject(dynamicBindingPathList, ({ key }) =>
+      tablePropertyPathsToRemove.includes(key),
+    );
+  } else {
+    return _.reject(dynamicBindingPathList, {
+      key: propertyPath,
+    });
+  }
+}
+
 export function* setWidgetDynamicPropertySaga(
   action: ReduxAction<SetWidgetDynamicPropertyPayload>,
 ) {
@@ -377,9 +408,10 @@ export function* setWidgetDynamicPropertySaga(
     });
 
     if (shouldRejectDynamicBindingPathList) {
-      dynamicBindingPathList = _.reject(dynamicBindingPathList, {
-        key: propertyPath,
-      });
+      dynamicBindingPathList = removeDynamicBindingProperties(
+        propertyPath,
+        dynamicBindingPathList,
+      );
     }
     const { parsed } = yield call(
       validateProperty,

app/client/src/sagas/WidgetOperationUtils.test.ts

@@ -2,6 +2,7 @@ import { OccupiedSpace } from "constants/CanvasEditorConstants";
 import { get } from "lodash";
 import { WidgetProps } from "widgets/BaseWidget";
 import { FlattenedWidgetProps } from "widgets/constants";
+import { removeDynamicBindingProperties } from "./WidgetOperationSagas";
 import {
   handleIfParentIsListWidgetWhilePasting,
   handleSpecificCasesWhilePasting,
@@ -979,3 +980,81 @@ describe("WidgetOperationSaga", () => {
     ]);
   });
 });
+
+describe("test removeDynamicBindingList", () => {
+  it("should remove table derived binding properties", () => {
+    // table bindings with derived properties
+    const dynamicBindingList = [
+      { key: "primaryColumns.step.computedValue" },
+      { key: "primaryColumns.task.computedValue" },
+      { key: "primaryColumns.status.computedValue" },
+      { key: "primaryColumns.action.computedValue" },
+      { key: "derivedColumns.customColumn1.isCellVisible" },
+      { key: "primaryColumns.customColumn1.isCellVisible" },
+    ];
+    const propertyPath = "primaryColumns.customColumn1.isCellVisible";
+    const dynamicProperties = removeDynamicBindingProperties(
+      propertyPath,
+      dynamicBindingList,
+    );
+
+    // should remove custom and derived properties for customColumn1.isCellVisible
+    expect(dynamicProperties).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          key: "derivedColumns.customColumn1.isCellVisible",
+        }),
+        expect.objectContaining({
+          key: "primaryColumns.customColumn1.isCellVisible",
+        }),
+      ]),
+    );
+  });
+
+  it("should remove table binding properties", () => {
+    // table bindings
+    const dynamicBindingList = [
+      { key: "primaryColumns.step.computedValue" },
+      { key: "primaryColumns.task.computedValue" },
+      { key: "primaryColumns.status.computedValue" },
+      { key: "primaryColumns.action.computedValue" },
+      { key: "primaryColumns.action.buttonLabel" },
+    ];
+
+    const propertyPath = "primaryColumns.action.buttonLabel";
+
+    const dynamicProperties = removeDynamicBindingProperties(
+      propertyPath,
+      dynamicBindingList,
+    );
+
+    // should remove primaryColumns.action.buttonLabel property
+    expect(dynamicProperties).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          key: "primaryColumns.action.buttonLabel",
+        }),
+      ]),
+    );
+  });
+
+  it("should remove widget properties", () => {
+    // button widget binding
+    const dynamicBindingList = [{ key: "isVisible" }];
+
+    const propertyPath = "isVisible";
+    const dynamicProperties = removeDynamicBindingProperties(
+      propertyPath,
+      dynamicBindingList,
+    );
+
+    // should remove the isVisible property
+    expect(dynamicProperties).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          key: "isVisible",
+        }),
+      ]),
+    );
+  });
+});

app/client/src/widgets/TableWidget/widget/propertyUtils.ts

@@ -283,72 +283,55 @@ export function updateIconAlignmentHook(
 // For example, when we add a new column or update a derived column's name
 // The propertyPath will be of the type `primaryColumns.columnId`
 // Handling BindingProperty of derived columns
+const addColumnRegex = /^primaryColumns\.\w+$/; // primaryColumns.customColumn1
+const updateColumnRegex = /^primaryColumns\.(\w+)\.(.*)$/; // primaryColumns.customColumn1.computedValue
+
 export const updateDerivedColumnsHook = (
   props: TableWidgetProps,
   propertyPath: string,
   propertyValue: any,
 ): Array<{ propertyPath: string; propertyValue: any }> | undefined => {
-  let propertiesToUpdate: Array<{
-    propertyPath: string;
-    propertyValue: any;
-  }> = [];
-  if (props && propertyValue) {
-    // If we're adding a column, we need to add it to the `derivedColumns` property as well
-    if (/^primaryColumns\.\w+$/.test(propertyPath)) {
-      const newId = propertyValue.id;
-      if (newId) {
-        // sets default value for some properties
-        propertyValue.labelColor = Colors.WHITE;
-
-        propertiesToUpdate = [
-          {
-            propertyPath: `derivedColumns.${newId}`,
-            propertyValue,
-          },
-        ];
-      }
-
+  if (propertyValue && addColumnRegex.test(propertyPath)) {
+    if (propertyValue.id) {
+      const propertiesToUpdate = [];
+      // sets default value for some properties
+      propertyValue.labelColor = Colors.WHITE;
+      propertiesToUpdate.push({
+        propertyPath: `derivedColumns.${propertyValue.id}`,
+        propertyValue,
+      });
       const oldColumnOrder = props.columnOrder || [];
       const newColumnOrder = [...oldColumnOrder, propertyValue.id];
       propertiesToUpdate.push({
         propertyPath: "columnOrder",
         propertyValue: newColumnOrder,
       });
+      return propertiesToUpdate;
+    }
+  }
+
+  const matches = propertyPath.match(updateColumnRegex);
+  if (matches && matches.length === 3) {
+    const propertiesToUpdate = [];
+    const columnId = matches[1];
+    const columnProperty = matches[2];
+    const { derivedColumns = {} } = props;
+    // only change derived properties of custom columns
+    if (derivedColumns[columnId]) {
+      propertiesToUpdate.push({
+        propertyPath: `derivedColumns.${columnId}.${columnProperty}`,
+        propertyValue: propertyValue,
+      });
+
+      updateThemeStylesheetsInColumns(
+        props,
+        propertyValue,
+        columnId,
+        columnProperty,
+        propertiesToUpdate,
+      );
     }
-    // If we're updating a columns' name, we need to update the `derivedColumns` property as well.
-    const regex = /^primaryColumns\.(\w+)\.(.*)$/;
-    if (regex.test(propertyPath)) {
-      const matches = propertyPath.match(regex);
-      if (matches && matches.length === 3) {
-        // updated to use column keys
-        const columnId = matches[1];
-        const columnProperty = matches[2];
-        const primaryColumn = props.primaryColumns[columnId];
-        const isDerived = primaryColumn ? primaryColumn.isDerived : false;
-
-        const { derivedColumns = {} } = props;
-
-        if (isDerived && derivedColumns && derivedColumns[columnId]) {
-          propertiesToUpdate = [
-            {
-              propertyPath: `derivedColumns.${columnId}.${columnProperty}`,
-              propertyValue: propertyValue,
-            },
-          ];
-        }
-
-        updateThemeStylesheetsInColumns(
-          props,
-          propertyValue,
-          columnId,
-          columnProperty,
-          propertiesToUpdate,
-        );
-      }
-    }
-    if (propertiesToUpdate.length > 0) return propertiesToUpdate;
   }
-  return;
 };
 
 /**