Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormReset_spec.js

@@ -22,7 +22,6 @@ describe("Form reset functionality", function() {
 
     cy.get(".tr")
       .eq(2)
-      .click()
       .should("not.have.class", "selected-row");
 
     cy.get(widgetsPage.inputWidget + " " + "input")

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

@@ -257,11 +257,10 @@ class ChartDataControl extends BaseControl<ControlProps> {
     }> = this.props.propertyValue;
     const updatedChartData = chartData.map((item, i) => {
       if (index === i) {
-        if (propertyName === "seriesName") {
+        return {
-          item.seriesName = updatedValue;
+          ...item,
-        } else {
+          [propertyName]: updatedValue,
-          item.data = updatedValue;
+        };
-        }
       }
       return item;
     });

app/client/src/widgets/CheckboxWidget.tsx

@@ -64,15 +64,12 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
   }
 
   onCheckChange = (isChecked: boolean) => {
-    this.props.updateWidgetMetaProperty("isChecked", isChecked);
+    this.props.updateWidgetMetaProperty("isChecked", isChecked, {
-    if (this.props.onCheckChange) {
+      dynamicString: this.props.onCheckChange,
-      super.executeAction({
+      event: {
-        dynamicString: this.props.onCheckChange,
+        type: EventType.ON_CHECK_CHANGE,
-        event: {
+      },
-          type: EventType.ON_CHECK_CHANGE,
+    });
-        },
-      });
-    }
   };
 
   getWidgetType(): WidgetType {

app/client/src/widgets/DatePickerWidget.tsx

@@ -74,15 +74,12 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
   }
 
   onDateSelected = (selectedDate: string) => {
-    this.props.updateWidgetMetaProperty("selectedDate", selectedDate);
+    this.props.updateWidgetMetaProperty("selectedDate", selectedDate, {
-    if (this.props.onDateSelected) {
+      dynamicString: this.props.onDateSelected,
-      super.executeAction({
+      event: {
-        dynamicString: this.props.onDateSelected,
+        type: EventType.ON_DATE_SELECTED,
-        event: {
+      },
-          type: EventType.ON_DATE_SELECTED,
+    });
-        },
-      });
-    }
   };
 
   getWidgetType(): WidgetType {

app/client/src/widgets/DropdownWidget.tsx

@@ -143,6 +143,12 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
         this.props.updateWidgetMetaProperty(
           "selectedOptionValue",
           selectedOption.value,
+          {
+            dynamicString: this.props.onOptionChange,
+            event: {
+              type: EventType.ON_OPTION_CHANGE,
+            },
+          },
         );
       }
     } else if (this.props.selectionType === "MULTI_SELECT") {
@@ -161,16 +167,13 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       this.props.updateWidgetMetaProperty(
         "selectedOptionValueArr",
         newSelectedValue,
-      );
+        {
-    }
+          dynamicString: this.props.onOptionChange,
-
+          event: {
-    if (this.props.onOptionChange && isChanged) {
+            type: EventType.ON_OPTION_CHANGE,
-      super.executeAction({
+          },
-        dynamicString: this.props.onOptionChange,
-        event: {
-          type: EventType.ON_OPTION_CHANGE,
         },
-      });
+      );
     }
   };
 
@@ -182,15 +185,13 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
     this.props.updateWidgetMetaProperty(
       "selectedOptionValueArr",
       newSelectedValue,
-    );
+      {
-    if (this.props.onOptionChange) {
-      super.executeAction({
         dynamicString: this.props.onOptionChange,
         event: {
           type: EventType.ON_OPTION_CHANGE,
         },
-      });
+      },
-    }
+    );
   };
 
   getWidgetType(): WidgetType {

app/client/src/widgets/InputWidget.tsx

@@ -94,18 +94,15 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
   }
 
   onValueChange = (value: string) => {
-    this.props.updateWidgetMetaProperty("text", value);
+    this.props.updateWidgetMetaProperty("text", value, {
+      dynamicString: this.props.onTextChanged,
+      event: {
+        type: EventType.ON_TEXT_CHANGE,
+      },
+    });
     if (!this.props.isDirty) {
       this.props.updateWidgetMetaProperty("isDirty", true);
     }
-    if (this.props.onTextChanged) {
-      super.executeAction({
-        dynamicString: this.props.onTextChanged,
-        event: {
-          type: EventType.ON_TEXT_CHANGE,
-        },
-      });
-    }
   };
 
   handleFocusChange = (focusState: boolean) => {

app/client/src/widgets/MapWidget.tsx

@@ -83,18 +83,19 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
 
   onCreateMarker = (lat: number, long: number) => {
     this.disableDrag(true);
-    this.props.updateWidgetMetaProperty("selectedMarker", {
+    this.props.updateWidgetMetaProperty(
-      lat,
+      "selectedMarker",
-      long,
+      {
-    });
+        lat,
-    if (this.props.onCreateMarker) {
+        long,
-      super.executeAction({
+      },
+      {
         dynamicString: this.props.onCreateMarker,
         event: {
           type: EventType.ON_CREATE_MARKER,
         },
-      });
+      },
-    }
+    );
   };
 
   onMarkerClick = (lat: number, long: number, title: string) => {
@@ -104,15 +105,12 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
       long: long,
       title: title,
     };
-    this.props.updateWidgetMetaProperty("selectedMarker", selectedMarker);
+    this.props.updateWidgetMetaProperty("selectedMarker", selectedMarker, {
-    if (this.props.onMarkerClick) {
+      dynamicString: this.props.onMarkerClick,
-      super.executeAction({
+      event: {
-        dynamicString: this.props.onMarkerClick,
+        type: EventType.ON_MARKER_CLICK,
-        event: {
+      },
-          type: EventType.ON_MARKER_CLICK,
+    });
-        },
-      });
-    }
   };
 
   getPageView() {

app/client/src/widgets/MetaHOC.tsx

@@ -3,15 +3,26 @@ import BaseWidget, { WidgetProps } from "./BaseWidget";
 import _ from "lodash";
 import { EditorContext } from "../components/editorComponents/EditorContextProvider";
 import { clearPropertyCache } from "../utils/DynamicBindingUtils";
+import { ExecuteActionPayload } from "../constants/ActionConstants";
+
+type DebouncedExecuteActionPayload = Omit<
+  ExecuteActionPayload,
+  "dynamicString"
+> & { dynamicString?: string };
 
 export interface WithMeta {
-  updateWidgetMetaProperty: (propertyName: string, propertyValue: any) => void;
+  updateWidgetMetaProperty: (
+    propertyName: string,
+    propertyValue: any,
+    actionExecution?: DebouncedExecuteActionPayload,
+  ) => void;
 }
 
 const withMeta = (WrappedWidget: typeof BaseWidget) => {
   return class MetaHOC extends React.Component<WidgetProps, any> {
     static contextType = EditorContext;
     updatedProperties = new Map<string, true>();
+    propertyTriggers = new Map<string, DebouncedExecuteActionPayload>();
 
     debouncedHandleUpdateWidgetMetaProperty = _.debounce(
       this.handleUpdateWidgetMetaProperty.bind(this),
@@ -49,20 +60,30 @@ const withMeta = (WrappedWidget: typeof BaseWidget) => {
     updateWidgetMetaProperty = (
       propertyName: string,
       propertyValue: any,
+      actionExecution?: DebouncedExecuteActionPayload,
     ): void => {
-      this.setState({
-        [propertyName]: propertyValue,
-      });
       this.updatedProperties.set(propertyName, true);
-      this.debouncedHandleUpdateWidgetMetaProperty();
+      if (actionExecution) {
+        this.propertyTriggers.set(propertyName, actionExecution);
+      }
+      this.setState(
+        {
+          [propertyName]: propertyValue,
+        },
+        () => {
+          this.debouncedHandleUpdateWidgetMetaProperty();
+        },
+      );
     };
 
     handleUpdateWidgetMetaProperty() {
-      const { updateWidgetMetaProperty } = this.context;
+      const { updateWidgetMetaProperty, executeAction } = this.context;
       const { widgetId, widgetName } = this.props;
       // We have kept a map of all updated properties. After debouncing we will
       // go through these properties and update with the final value. This way
       // we will only update a certain property once per debounce interval.
+      // Then we will execute any action associated with the trigger of
+      // that value changing
       [...this.updatedProperties.keys()].forEach(propertyName => {
         if (updateWidgetMetaProperty) {
           const propertyValue = this.state[propertyName];
@@ -70,6 +91,15 @@ const withMeta = (WrappedWidget: typeof BaseWidget) => {
           updateWidgetMetaProperty(widgetId, propertyName, propertyValue);
           this.updatedProperties.delete(propertyName);
         }
+        const debouncedPayload = this.propertyTriggers.get(propertyName);
+        if (
+          debouncedPayload &&
+          debouncedPayload.dynamicString &&
+          executeAction
+        ) {
+          executeAction(debouncedPayload);
+          this.propertyTriggers.delete(propertyName);
+        }
       });
     }
 

app/client/src/widgets/RadioGroupWidget.tsx

@@ -66,15 +66,12 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
   }
 
   onRadioSelectionChange = (updatedValue: string) => {
-    this.props.updateWidgetMetaProperty("selectedOptionValue", updatedValue);
+    this.props.updateWidgetMetaProperty("selectedOptionValue", updatedValue, {
-    if (this.props.onSelectionChange) {
+      dynamicString: this.props.onSelectionChange,
-      super.executeAction({
+      event: {
-        dynamicString: this.props.onSelectionChange,
+        type: EventType.ON_OPTION_CHANGE,
-        event: {
+      },
-          type: EventType.ON_OPTION_CHANGE,
+    });
-        },
-      });
-    }
   };
 
   getWidgetType(): WidgetType {

app/client/src/widgets/RichTextEditorWidget.tsx

@@ -61,15 +61,12 @@ class RichTextEditorWidget extends BaseWidget<
   }
 
   onValueChange = (text: string) => {
-    this.props.updateWidgetMetaProperty("text", text);
+    this.props.updateWidgetMetaProperty("text", text, {
-    if (this.props.onTextChange) {
+      dynamicString: this.props.onTextChange,
-      super.executeAction({
+      event: {
-        dynamicString: this.props.onTextChange,
+        type: EventType.ON_TEXT_CHANGE,
-        event: {
+      },
-          type: EventType.ON_TEXT_CHANGE,
+    });
-        },
-      });
-    }
   };
 
   getPageView() {

app/client/src/widgets/TableWidget.tsx

@@ -570,15 +570,12 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     const { onSearchTextChanged } = this.props;
     this.resetSelectedRowIndex();
     this.props.updateWidgetMetaProperty("pageNo", 1);
-    this.props.updateWidgetMetaProperty("searchText", searchKey);
+    this.props.updateWidgetMetaProperty("searchText", searchKey, {
-    if (onSearchTextChanged) {
+      dynamicString: onSearchTextChanged,
-      super.executeAction({
+      event: {
-        dynamicString: onSearchTextChanged,
+        type: EventType.ON_SEARCH,
-        event: {
+      },
-          type: EventType.ON_SEARCH,
+    });
-        },
-      });
-    }
   };
 
   updateHiddenColumns = (hiddenColumns?: string[]) => {
@@ -596,7 +593,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
   };
 
   handleRowClick = (rowData: object, index: number) => {
-    const { onRowSelected, selectedRowIndices } = this.props;
+    const { selectedRowIndices } = this.props;
     if (this.props.multiRowSelection) {
       if (selectedRowIndices.includes(index)) {
         const rowIndex = selectedRowIndices.indexOf(index);
@@ -619,30 +616,27 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       this.props.updateWidgetMetaProperty(
         "selectedRow",
         this.props.filteredTableData[index],
-      );
+        {
-    }
+          dynamicString: this.props.onRowSelected,
-    if (onRowSelected) {
+          event: {
-      super.executeAction({
+            type: EventType.ON_ROW_SELECTED,
-        dynamicString: onRowSelected,
+          },
-        event: {
-          type: EventType.ON_ROW_SELECTED,
         },
-      });
+      );
     }
   };
 
   handleNextPageClick = () => {
     let pageNo = this.props.pageNo || 1;
     pageNo = pageNo + 1;
-    this.props.updateWidgetMetaProperty("pageNo", pageNo);
+    this.props.updateWidgetMetaProperty("pageNo", pageNo, {
+      dynamicString: this.props.onPageChange,
+      event: {
+        type: EventType.ON_NEXT_PAGE,
+      },
+    });
     if (this.props.onPageChange) {
       this.resetSelectedRowIndex();
-      super.executeAction({
-        dynamicString: this.props.onPageChange,
-        event: {
-          type: EventType.ON_NEXT_PAGE,
-        },
-      });
     }
   };
 
@@ -655,15 +649,14 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     let pageNo = this.props.pageNo || 1;
     pageNo = pageNo - 1;
     if (pageNo >= 1) {
-      this.props.updateWidgetMetaProperty("pageNo", pageNo);
+      this.props.updateWidgetMetaProperty("pageNo", pageNo, {
+        dynamicString: this.props.onPageChange,
+        event: {
+          type: EventType.ON_PREV_PAGE,
+        },
+      });
       if (this.props.onPageChange) {
         this.resetSelectedRowIndex();
-        super.executeAction({
-          dynamicString: this.props.onPageChange,
-          event: {
-            type: EventType.ON_PREV_PAGE,
-          },
-        });
       }
     }
   };

app/client/src/widgets/TabsWidget.tsx

@@ -24,15 +24,12 @@ class TabsWidget extends BaseWidget<
   }
 
   onTabChange = (tabId: string) => {
-    this.props.updateWidgetMetaProperty("selectedTabId", tabId);
+    this.props.updateWidgetMetaProperty("selectedTabId", tabId, {
-    if (this.props.onTabSelected) {
+      dynamicString: this.props.onTabSelected,
-      super.executeAction({
+      event: {
-        dynamicString: this.props.onTabSelected,
+        type: EventType.ON_TAB_CHANGE,
-        event: {
+      },
-          type: EventType.ON_TAB_CHANGE,
+    });
-        },
-      });
-    }
   };
 
   static getDerivedPropertiesMap() {

app/client/src/widgets/VideoWidget.tsx

@@ -68,38 +68,33 @@ class VideoWidget extends BaseWidget<VideoWidgetProps, WidgetState> {
           autoplay={autoPlay}
           controls={true}
           onPlay={() => {
-            this.props.updateWidgetMetaProperty("playState", PlayState.PLAYING);
+            this.props.updateWidgetMetaProperty(
-            if (onPlay) {
+              "playState",
-              super.executeAction({
+              PlayState.PLAYING,
+              {
                 dynamicString: onPlay,
                 event: {
                   type: EventType.ON_VIDEO_PLAY,
                 },
-              });
+              },
-            }
+            );
           }}
           onPause={() => {
             //TODO: We do not want the pause event for onSeek or onEnd.
-            this.props.updateWidgetMetaProperty("playState", PlayState.PAUSED);
+            this.props.updateWidgetMetaProperty("playState", PlayState.PAUSED, {
-            if (onPause) {
+              dynamicString: onPause,
-              super.executeAction({
+              event: {
-                dynamicString: onPause,
+                type: EventType.ON_VIDEO_PAUSE,
-                event: {
+              },
-                  type: EventType.ON_VIDEO_PAUSE,
+            });
-                },
-              });
-            }
           }}
           onEnded={() => {
-            this.props.updateWidgetMetaProperty("playState", PlayState.ENDED);
+            this.props.updateWidgetMetaProperty("playState", PlayState.ENDED, {
-            if (onEnd) {
+              dynamicString: onEnd,
-              super.executeAction({
+              event: {
-                dynamicString: onEnd,
+                type: EventType.ON_VIDEO_END,
-                event: {
+              },
-                  type: EventType.ON_VIDEO_END,
+            });
-                },
-              });
-            }
           }}
         />
       </Suspense>