From 39009b08079a1660ddd085c1bdf5662131d8baf7 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Wed, 18 Mar 2020 14:31:30 +0000
Subject: [PATCH] Page events

---
 .../editorComponents/DraggableComponent.tsx   |  9 +++++
 .../src/pages/Editor/PropertyPane/index.tsx   | 40 +++++++++++++++++++
 app/client/src/utils/AnalyticsUtil.tsx        |  6 ++-
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index a4aba58481..2bae8590a0 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -144,10 +144,19 @@ const DraggableComponent = (props: DraggableComponentProps) => {
         props.widgetId === propertyPaneState.widgetId) ||
       props.widgetId !== propertyPaneState.widgetId
     ) {
+      AnalyticsUtil.logEvent("PROPERTY_PANE_OPEN_CLICK", {
+        widgetType: props.type,
+        widgetId: props.widgetId,
+      });
       showPropertyPane && showPropertyPane(props.widgetId, undefined, true);
     } else {
+      AnalyticsUtil.logEvent("PROPERTY_PANE_CLOSE_CLICK", {
+        widgetType: props.type,
+        widgetId: props.widgetId,
+      });
       showPropertyPane && showPropertyPane();
     }
+
     e.preventDefault();
     e.stopPropagation();
   };
diff --git a/app/client/src/pages/Editor/PropertyPane/index.tsx b/app/client/src/pages/Editor/PropertyPane/index.tsx
index f42f8d8644..1e99170f38 100644
--- a/app/client/src/pages/Editor/PropertyPane/index.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/index.tsx
@@ -82,6 +82,12 @@ class PropertyPane extends Component<
 
         <CloseButton
           onClick={(e: any) => {
+            AnalyticsUtil.logEvent("PROPERTY_PANE_CLOSE_CLICK", {
+              widgetType: this.props.widgetProperties
+                ? this.props.widgetProperties.type
+                : "",
+              widgetId: this.props.widgetId,
+            });
             this.props.hidePropertyPane();
             e.preventDefault();
             e.stopPropagation();
@@ -167,6 +173,40 @@ class PropertyPane extends Component<
     }
   };
 
+  shouldComponentUpdate(nextProps: PropertyPaneProps & PropertyPaneFunctions) {
+    if (
+      nextProps.widgetId !== this.props.widgetId &&
+      nextProps.widgetId !== undefined
+    ) {
+      if (this.props.widgetId && this.props.widgetProperties) {
+        AnalyticsUtil.logEvent("PROPERTY_PANE_CLOSE", {
+          widgetType: this.props.widgetProperties.type,
+          widgetId: this.props.widgetId,
+        });
+      }
+      if (nextProps.widgetProperties) {
+        AnalyticsUtil.logEvent("PROPERTY_PANE_OPEN", {
+          widgetType: nextProps.widgetProperties.type,
+          widgetId: nextProps.widgetId,
+        });
+      }
+    }
+
+    if (
+      nextProps.widgetId === this.props.widgetId &&
+      nextProps.isVisible &&
+      !this.props.isVisible &&
+      nextProps.widgetProperties !== undefined
+    ) {
+      AnalyticsUtil.logEvent("PROPERTY_PANE_OPEN", {
+        widgetType: nextProps.widgetProperties.type,
+        widgetId: nextProps.widgetId,
+      });
+    }
+
+    return true;
+  }
+
   onPropertyChange(propertyName: string, propertyValue: any) {
     this.props.updateWidgetProperty(
       this.props.widgetId,
diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
index f9f3d301cc..10cc441eb4 100644
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@@ -42,7 +42,11 @@ export type EventName =
   | "SAVE_DATA_SOURCE"
   | "NAVIGATE"
   | "PAGE_LOAD"
-  | "NAVIGATE_EDITOR";
+  | "NAVIGATE_EDITOR"
+  | "PROPERTY_PANE_OPEN"
+  | "PROPERTY_PANE_CLOSE"
+  | "PROPERTY_PANE_OPEN_CLICK"
+  | "PROPERTY_PANE_CLOSE_CLICK";
 
 export type Gender = "MALE" | "FEMALE";
 export interface User {