Merge branch 'feature/integration' into 'master'

Feature/integration

See merge request theappsmith/internal-tools-client!9

app/client/.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env*
 
 npm-debug.log*
 yarn-debug.log*

app/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "picasso",
+  "name": "appsmith",
   "version": "0.1.0",
   "private": true,
   "engines": {
@@ -11,6 +11,7 @@
     "@blueprintjs/datetime": "^3.6.0",
     "@blueprintjs/icons": "^3.5.0",
     "@blueprintjs/table": "^3.4.0",
+    "@sentry/browser": "^5.6.3",
     "@types/axios": "^0.14.0",
     "@types/jest": "^23.3.13",
     "@types/lodash": "^4.14.120",
@@ -59,6 +60,7 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "dotenv": "^8.1.0",
     "redux-devtools": "^3.5.0"
   }
 }

app/client/src/constants/ThirdPartyConstants.tsx

@@ -0,0 +1,6 @@
+export type ENVIRONMENT = "PRODUCTION" | "STAGING" | "LOCAL"
+export const SENTRY_PROD_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Production' }
+export const SENTRY_STAGE_CONFIG = { dsn: "https://a63362b692d64edeb175741f1f80b091@sentry.io/1546547", environment: 'Staging' }
+
+export const HOTJAR_PROD_HJID = "1465835"
+export const HOTJAR_PROD_HJSV = "6"

app/client/src/index.tsx

@@ -13,13 +13,13 @@ import WidgetBuilderRegistry from "./utils/WidgetRegistry";
 import { ThemeProvider, theme } from "./constants/DefaultTheme";
 import createSagaMiddleware from 'redux-saga'
 import { rootSaga } from "./sagas"
-import { ActionType, ReduxAction } from "./constants/ActionConstants";
+import { appInitializer } from "./utils/AppsmithUtils";
 
+appInitializer()
 WidgetBuilderRegistry.registerWidgetBuilders();
 const sagaMiddleware = createSagaMiddleware()
 const store = createStore(appReducer, applyMiddleware(sagaMiddleware));
 sagaMiddleware.run(rootSaga)
-
 ReactDOM.render(
   <Provider store={store}>
     <ThemeProvider theme={theme}>

app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx

@@ -1,4 +1,4 @@
-import { createReducer } from "../../utils/PicassoUtils"
+import { createReducer } from "../../utils/AppsmithUtils"
 import {
   ActionTypes,
   LoadCanvasPayload,

app/client/src/reducers/uiReducers/canvasReducer.tsx

@@ -1,4 +1,4 @@
-import { createReducer } from "../../utils/PicassoUtils"
+import { createReducer } from "../../utils/AppsmithUtils"
 import {
   ActionTypes,
   LoadCanvasPayload,

app/client/src/reducers/uiReducers/widgetPaneReducer.tsx

@@ -1,4 +1,4 @@
-import { createReducer } from "../../utils/PicassoUtils"
+import { createReducer } from "../../utils/AppsmithUtils"
 import {
   ActionTypes,
   ReduxAction,

app/client/src/utils/AnalyticsUtil.tsx

@@ -0,0 +1,59 @@
+
+export type EventName = "PAGE_VIEW" | "ADD_COMPONENT" | "DELETE_COMPONENT" | "RESIZE_COMPONENT"
+export type Gender = "MALE" | "FEMALE"
+export interface User {
+	userId: string
+	name: string
+	email: string
+	gender: Gender
+}
+
+class AnalyticsUtil {
+
+	static initializeHotjar(id: string, sv: string) {
+		(function init(h: any, o: any, t: any, j: any, a?: any, r?: any) {
+			h.hj =
+				h.hj ||
+				function() {
+					(h.hj.q = h.hj.q || []).push(arguments);
+				};
+			h._hjSettings = { hjid: id, hjsv: sv };
+			a = o.getElementsByTagName('head')[0];
+			r = o.createElement('script');
+			r.async = 1;
+			r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+			a.appendChild(r);
+		})(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');
+	};
+
+	static initializeSegment() {
+		(function init(window: any){
+			var analytics=window.analytics=window.analytics||[];
+			if(!analytics.initialize) {
+				if(analytics.invoked) {
+					window.console&&console.error&&console.error("Segment snippet included twice.");
+				} else {
+					analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];
+					analytics.factory=function(t: any){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}
+				};
+			}
+			for(var t: any=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t: any,e: any){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a: any=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+  			analytics.load("O7rsLdWq7fhJI9rYsj1eatGAjuULTmfP");
+  			analytics.page();
+		  }
+		})(window)
+	}
+
+	static logEvent(eventName: EventName, eventData: any) {
+		const windowDoc: any = window
+		windowDoc.analytics.track(eventName, eventData);
+	}
+
+	static identifyUser(userId: string, userData: User) {
+		const windowDoc: any = window
+		windowDoc.analytics.identify(userId, userData);
+	}
+
+}
+
+export default AnalyticsUtil

app/client/src/utils/AppsmithUtils.tsx

@@ -0,0 +1,34 @@
+import { ReduxAction } from "../constants/ActionConstants"
+import { SENTRY_PROD_CONFIG, SENTRY_STAGE_CONFIG, HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV } from "../constants/ThirdPartyConstants";
+import * as Sentry from '@sentry/browser';
+import AnalyticsUtil from "./AnalyticsUtil"
+
+export const createReducer = (
+  initialState: any,
+  handlers: { [type: string]: Function }
+) => {
+  return function reducer(state = initialState, action: ReduxAction<any>) {
+    if (handlers.hasOwnProperty(action.type)) {
+      return handlers[action.type](state, action)
+    } else {
+      return state
+    }
+  }
+}
+
+export const appInitializer = () => {
+  switch (process.env.REACT_APP_ENVIRONMENT) {
+    case "PRODUCTION":
+      Sentry.init(SENTRY_PROD_CONFIG);    
+      AnalyticsUtil.initializeHotjar(HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV);
+      AnalyticsUtil.initializeSegment();
+      break;
+    case "STAGING":
+        Sentry.init(SENTRY_STAGE_CONFIG);
+      break
+    case "LOCAL":
+      break;
+  }
+}
+
+

app/client/src/utils/PicassoUtils.tsx

@@ -1,14 +0,0 @@
-import { ReduxAction } from "../constants/ActionConstants"
-
-export const createReducer = (
-  initialState: any,
-  handlers: { [type: string]: Function }
-) => {
-  return function reducer(state = initialState, action: ReduxAction<any>) {
-    if (handlers.hasOwnProperty(action.type)) {
-      return handlers[action.type](state, action)
-    } else {
-      return state
-    }
-  }
-}

app/client/src/widgets/ContainerWidget.tsx

@@ -52,8 +52,7 @@ class ContainerWidget extends BaseWidget<
       <ContainerComponent
         widgetId={this.props.widgetId}
         style={{
-          ...this.getPositionStyle(),
-          backgroundColor: this.props.backgroundColor
+          ...this.getPositionStyle()
         }}
         orientation={this.props.orientation || "VERTICAL"}
       >