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

app/client/cypress/fixtures/layoutdsl.json

@@ -35,6 +35,7 @@
              "bottomRow": 9,
              "snapColumns": 16,
              "orientation": "VERTICAL",
+             "parentId": "0",
              "children": [
                  {
                      "backgroundColor": "transparent",
@@ -51,6 +52,7 @@
                      "bottomRow": 342,
                      "snapColumns": 16,
                      "orientation": "VERTICAL",
+                     "parentId": "4kiuclj7on",
                      "children": [
                          {
                              "text": "Title",
@@ -66,7 +68,8 @@
                              "rightColumn": 3,
                              "topRow": 0,
                              "bottomRow": 1,
-                             "widgetId": "jnusumakb5"
+                             "widgetId": "jnusumakb5",
+                             "parentId": "xe6a0w50jz"
                          }
                      ],
                      "widgetId": "xe6a0w50jz",
@@ -92,6 +95,7 @@
              "bottomRow": 23,
              "snapColumns": 16,
              "orientation": "VERTICAL",
+             "parentId": "0",
              "children": [
                  {
                      "backgroundColor": "transparent",
@@ -107,6 +111,7 @@
                      "topRow": 0,
                      "bottomRow": 532,
                      "snapColumns": 16,
+                     "parentId": "9lr328fusr",
                      "orientation": "VERTICAL",
                      "children": [
                          {
@@ -123,7 +128,8 @@
                              "rightColumn": 3,
                              "topRow": 0,
                              "bottomRow": 1,
-                             "widgetId": "2p0avl6plv"
+                             "widgetId": "2p0avl6plv",
+                             "parentId": "p7cexs0qo5"
                          },
                          {
                              "isVisible": true,
@@ -189,7 +195,7 @@
                              "topRow": 0,
                              "shouldShowTabs": true,
                              "bottomRow": 7,
-                             "parentId": "xe6a0w50jz",
+                             "parentId": "p7cexs0qo5",
                              "widgetId": "wuzxcyyjma",
                              "children": [
                                  {
@@ -258,6 +264,7 @@
              "bottomRow": 9,
              "snapColumns": 16,
              "orientation": "VERTICAL",
+             "parentId": "0",
              "children": [
                  {
                      "backgroundColor": "transparent",
@@ -274,6 +281,7 @@
                      "bottomRow": 342,
                      "snapColumns": 16,
                      "orientation": "VERTICAL",
+                     "parentId": "47gso3f7ll",
                      "children": [
                          {
                              "text": "Title",
@@ -289,7 +297,8 @@
                              "rightColumn": 3,
                              "topRow": 0,
                              "bottomRow": 1,
-                             "widgetId": "0tknsgos8i"
+                             "widgetId": "0tknsgos8i",
+                             "parentId": "nixoni01d8"
                          }
                      ],
                      "widgetId": "nixoni01d8",

app/client/src/components/designSystems/appsmith/ImageComponent.tsx

@@ -6,6 +6,8 @@ export interface StyledImageProps {
   defaultImageUrl: string;
   imageUrl?: string;
   backgroundColor?: string;
+  showHoverPointer?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 export const StyledImage = styled.div<
@@ -16,6 +18,8 @@ export const StyledImage = styled.div<
   position: relative;
   display: flex;
   flex-direction: "row";
+  cursor: ${props =>
+    props.showHoverPointer && props.onClick ? "pointer" : "inherit"};
   background: ${props => props.backgroundColor};
   background-image: url("${props =>
     props.imageError ? props.defaultImageUrl : props.imageUrl}");
@@ -53,6 +57,7 @@ class ImageComponent extends React.Component<
           src={this.props.imageUrl}
           onError={this.onImageError}
           onLoad={this.onImageLoad}
+          onClick={this.props.onClick}
         ></img>
       </StyledImage>
     );
@@ -75,6 +80,8 @@ export interface ImageComponentProps extends ComponentProps {
   imageUrl: string;
   defaultImageUrl: string;
   isLoading: boolean;
+  showHoverPointer?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 export default ImageComponent;

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -234,6 +234,21 @@ const PropertyPaneConfigResponse: PropertyPaneConfigsResponse["data"] = {
           },
         ],
       },
+      {
+        id: "3.2",
+        sectionName: "Actions",
+        children: [
+          {
+            id: "3.2.1",
+            helpText:
+              "Triggers an action when a user changes the selected option",
+            propertyName: "onClick",
+            label: "onClick",
+            controlType: "ACTION_SELECTOR",
+            isJSConvertible: true,
+          },
+        ],
+      },
     ],
     RADIO_GROUP_WIDGET: [
       {

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -70,6 +70,7 @@ import { generateReactKey } from "utils/generators";
 import { flashElementById } from "utils/helpers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { cloneDeep } from "lodash";
+import log from "loglevel";
 
 function getChildWidgetProps(
   parent: FlattenedWidgetProps,
@@ -358,15 +359,19 @@ export function* undoDeleteSaga(action: ReduxAction<{ widgetId: string }>) {
         if (widget.tabId && widget.type === WidgetTypes.CANVAS_WIDGET) {
           const parent = widgets[widget.parentId];
           if (parent.tabs) {
-            const tabs = _.isString(parent.tabs)
-              ? JSON.parse(parent.tabs)
-              : parent.tabs;
-            tabs.push({
-              id: widget.tabId,
-              widgetId: widget.widgetId,
-              label: widget.tabName || widget.widgetName,
-            });
-            widgets[widget.parentId].tabs = JSON.stringify(tabs);
+            try {
+              const tabs = _.isString(parent.tabs)
+                ? JSON.parse(parent.tabs)
+                : parent.tabs;
+              tabs.push({
+                id: widget.tabId,
+                widgetId: widget.widgetId,
+                label: widget.tabName || widget.widgetName,
+              });
+              widgets[widget.parentId].tabs = JSON.stringify(tabs);
+            } catch (error) {
+              log.debug("Error deleting tabs widget: ", { error });
+            }
           } else {
             parent.tabs = JSON.stringify([
               {
@@ -706,6 +711,7 @@ function* pasteWidgetSaga() {
       // the main container
       if (
         selectedWidget.parentId !== MAIN_CONTAINER_WIDGET_ID &&
+        widgets[selectedWidget.parentId] &&
         widgets[selectedWidget.parentId].children &&
         widgets[selectedWidget.parentId].children.length > 0
       ) {

app/client/src/widgets/ImageWidget.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
-import { WidgetType } from "constants/WidgetConstants";
+import { WidgetType, RenderModes } from "constants/WidgetConstants";
 import ImageComponent from "components/designSystems/appsmith/ImageComponent";
 import {
   WidgetPropertyValidationType,
@@ -8,8 +8,14 @@ import {
 } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import * as Sentry from "@sentry/react";
+import { EventType } from "constants/ActionConstants";
+import { TriggerPropertiesMap } from "utils/WidgetFactory";
 
 class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
+  constructor(props: ImageWidgetProps) {
+    super(props);
+    this.onImageClick = this.onImageClick.bind(this);
+  }
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
       ...BASE_WIDGET_VALIDATION,
@@ -18,17 +24,35 @@ class ImageWidget extends BaseWidget<ImageWidgetProps, WidgetState> {
       defaultImage: VALIDATION_TYPES.TEXT,
     };
   }
+  static getTriggerPropertyMap(): TriggerPropertiesMap {
+    return {
+      onClick: true,
+    };
+  }
   getPageView() {
     return (
       <ImageComponent
         widgetId={this.props.widgetId}
         imageUrl={this.props.image}
+        onClick={this.props.onClick ? this.onImageClick : undefined}
+        showHoverPointer={this.props.renderMode === RenderModes.PAGE}
         defaultImageUrl={this.props.defaultImage}
         isLoading={this.props.isLoading}
       />
     );
   }
 
+  onImageClick() {
+    if (this.props.onClick) {
+      super.executeAction({
+        dynamicString: this.props.onClick,
+        event: {
+          type: EventType.ON_CLICK,
+        },
+      });
+    }
+  }
+
   getWidgetType(): WidgetType {
     return "IMAGE_WIDGET";
   }
@@ -40,6 +64,7 @@ export interface ImageWidgetProps extends WidgetProps {
   image: string;
   imageShape: ImageShape;
   defaultImage: string;
+  onClick?: string;
 }
 
 export default ImageWidget;