Internal Fix: migration of dynamicTriggerPathList in Table Widget(#3064)

app/client/src/components/propertyControls/ActionSelectorControl.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 // import DynamicActionCreator from "components/editorComponents/DynamicActionCreator";
 import { ActionCreator } from "components/editorComponents/actioncreator/ActionCreator";
-import { ColumnProperties } from "components/designSystems/appsmith/TableComponent/Constants";
 
 class ActionSelectorControl extends BaseControl<ControlProps> {
   handleValueUpdate = (newValue: string) => {
@@ -12,28 +11,14 @@ class ActionSelectorControl extends BaseControl<ControlProps> {
 
   render() {
     const { propertyValue } = this.props;
-    /* The following code is very specific to the table columns */
-    const { widgetProperties } = this.props;
-    let additionalAutoComplete = {};
-    if (
-      this.props.customJSControl &&
-      this.props.customJSControl === "COMPUTE_VALUE"
-    ) {
-      const columns: ColumnProperties[] = widgetProperties.primaryColumns || [];
-      const currentRow: { [key: string]: any } = {};
-      for (let i = 0; i < columns.length; i++) {
-        currentRow[columns[i].id] = undefined;
-      }
-      additionalAutoComplete = { currentRow };
-    }
-    /* EO specific code */
+
     return (
       <ActionCreator
         value={propertyValue}
         isValid={this.props.isValid}
         validationMessage={this.props.errorMessage}
         onValueChange={this.handleValueUpdate}
-        additionalAutoComplete={additionalAutoComplete}
+        additionalAutoComplete={this.props.additionalAutoComplete}
       />
     );
   }

app/client/src/components/propertyControls/BaseControl.tsx

@@ -36,8 +36,10 @@ export interface ControlBuilder<T extends ControlProps> {
 
 export interface ControlProps extends ControlData, ControlFunctions {
   key?: string;
+  additionalAutoComplete?: Record<string, Record<string, unknown>>;
 }
-export interface ControlData extends PropertyPaneControlConfig {
+export interface ControlData
+  extends Omit<PropertyPaneControlConfig, "additionalAutoComplete"> {
   propertyValue?: any;
   isValid: boolean;
   errorMessage?: string;

app/client/src/constants/PropertyControlConstants.tsx

@@ -42,6 +42,9 @@ export type PropertyPaneControlConfig = {
   hidden?: (props: any, propertyPath: string) => boolean;
   isBindProperty: boolean;
   isTriggerProperty: boolean;
+  additionalAutoComplete?: (
+    props: any,
+  ) => Record<string, Record<string, unknown>>;
 };
 
 export type PropertyPaneConfig =

app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx

@@ -172,8 +172,9 @@ const PropertyControl = memo((props: Props) => {
     );
 
     const { isValid, validationMessage } = getPropertyValidation(propertyName);
+    const { additionalAutoComplete, ...rest } = props;
     const config = {
-      ...props,
+      ...rest,
       isValid,
       propertyValue,
       validationMessage,
@@ -246,6 +247,9 @@ const PropertyControl = memo((props: Props) => {
                 },
                 isDynamic,
                 props.customJSControl,
+                additionalAutoComplete
+                  ? additionalAutoComplete(widgetProperties)
+                  : undefined,
               )}
             </Indicator>
           </Boxed>

app/client/src/utils/PropertyControlFactory.tsx

@@ -21,6 +21,7 @@ class PropertyControlFactory {
     controlFunctions: ControlFunctions,
     preferEditor: boolean,
     customEditor?: string,
+    additionalAutoComplete?: Record<string, Record<string, unknown>>,
   ): JSX.Element {
     let controlBuilder = this.controlMap.get(controlData.controlType);
     if (preferEditor) {
@@ -34,6 +35,7 @@ class PropertyControlFactory {
         ...controlFunctions,
         key: controlData.id,
         customJSControl: customEditor,
+        additionalAutoComplete,
       };
       const control = controlBuilder.buildPropertyControl(controlProps);
       return control;

app/client/src/utils/migrations/TableWidget.ts

@@ -135,6 +135,9 @@ export const tableWidgetPropertyPaneMigrations = (
           onClick: action.dynamicTrigger,
           computedValue: "",
         };
+        dynamicTriggerPathList.push({
+          key: `primaryColumns.${columnPrefix}${index + 1}.onClick`,
+        });
         updatedDerivedColumns[column.id] = column;
       });
 

app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts

@@ -500,7 +500,14 @@ export default [
                   propertyName: "onClick",
                   label: "onClick",
                   controlType: "ACTION_SELECTOR",
-                  customJSControl: "COMPUTE_VALUE",
+                  additionalAutoComplete: (props: TableWidgetProps) => ({
+                    currentRow: Object.assign(
+                      {},
+                      ...Object.keys(props.primaryColumns).map((key) => ({
+                        [key]: "",
+                      })),
+                    ),
+                  }),
                   isJSConvertible: true,
                   updateHook: updateDerivedColumnsHook,
                   isBindProperty: true,

app/client/src/widgets/TableWidget/index.tsx

@@ -903,6 +903,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       const modifiedAction = jsSnippets.reduce((prev: string, next: string) => {
         return prev + `{{(currentRow) => { ${next} }}} `;
       }, "");
+
       super.executeAction({
         dynamicString: modifiedAction,
         event: {