Merge pull request #45 from contentstack/fix/ECO-3312

fix:ECO-3320

Author: abhishek305

ui/package-lock.json

@@ -1,15 +1,17 @@
 {
   "name": "marketplace-json-editor-app-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
-    "@contentstack/app-sdk": "^1.2.0",
-    "@types/node": "^12.20.37",
+    "@contentstack/app-sdk": "^1.5.0",
+    "@datadog/browser-rum": "^4.25.0",
+    "@playwright/test": "^1.35.1",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
-    "@datadog/browser-rum": "^4.25.0",
     "ajv": "^8.8.2",
+    "axios": "^1.4.0",
     "brace": "^0.11.1",
+    "jotai": "^2.2.1",
     "jsoneditor": "^9.5.8",
     "jsoneditor-react": "^3.1.2",
     "prop-types": "^15.8.1",
@@ -19,18 +21,23 @@
     "react-scripts": "4.0.3",
     "sass": "^1.43.4",
     "tippy.js": "^6.3.7",
-    "trackjs": "^3.10.1",
     "typescript": "^4.5.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "export PORT=4000 && react-scripts start",
+    "start": "export PORT=3000 && react-scripts start",
     "build": "GENERATE_SOURCEMAP=false react-scripts build",
     "test": "jest",
     "eject": "react-scripts eject",
     "prettify": "prettier --write .",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx . --ignore-pattern './node_modules/' --ignore-pattern './buid/'",
-    "precommit": "npm run prettify && npm run lint:fix"
+    "precommit": "npm run prettify && npm run lint:fix",
+    "test:chrome": "npx playwright test --config=playwright.config.ts --project=Chromium",
+    "test:firefox": "npx playwright test --config=playwright.config.ts --project=firefox",
+    "test:safari": "npx playwright test --config=playwright.config.ts --project=safari",
+    "test:chrome-headed": "npx playwright test --headed --config=playwright.config.ts --project=Chromium",
+    "test:firefox-headed": "npx playwright test --headed --config=playwright.config.ts --project=firefox",
+    "test:safari-headed": "npx playwright test --headed --config=playwright.config.ts --project=safari"
   },
   "eslintConfig": {
     "extends": [
@@ -59,6 +66,7 @@
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^26.0.14",
+    "@types/node": "^20.3.2",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-jest": "^26.6.0",
@@ -75,4 +83,4 @@
     "jest-fetch-mock": "^3.0.3",
     "ts-jest": "^26.5.6"
   }
-}
+}

ui/package.json

@@ -14,10 +14,10 @@ const config: PlaywrightTestConfig = {
    * globalSetup & teardown of test data
    * globalTeardown: require.resolve("./tests/global-teardown"),
    */
-  globalSetup: require.resolve("./tests/global-setup"),
+  globalSetup: require.resolve("../ui/tests/global-setup"),
 
 
-  testDir: "./tests/e2e",
+  testDir: "../ui/tests/e2e",
   /* Maximum time one test can run for. */
   timeout: 10 * 10000,
   expect: {
@@ -42,7 +42,7 @@ const config: PlaywrightTestConfig = {
     actionTimeout: 0,
     screenshot: "off",
     video: "off",
-    viewport: { width: 1200, height: 720 },
+    viewport: { width: 1000, height: 720 },
     trace: "on-first-retry",
     baseURL: process.env.APP_HOST_URL,
     launchOptions: {

ui/playwright-report/index.html

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/destructuring-assignment */
 import React from "react";
-import TrackJS from "../../trackjs";
 import { datadogRum } from '@datadog/browser-rum';
 
 interface MyProps {
@@ -12,7 +11,7 @@ interface MyState {
   hasError: boolean;
 }
 
-//datadog-rum Installation
+//  datadog-rum Installation
 datadogRum.init({
   applicationId: `${process.env.REACT_APP_DATADOG_RUM_APPLICATION_ID}`,
   clientToken: `${process.env.REACT_APP_DATADOG_RUM_CLIENT_TOKEN}`,
@@ -27,7 +26,7 @@ datadogRum.init({
   useCrossSiteSessionCookie: true,
 });
 
-//sending MetaData to Datadog RUM
+// sending MetaData to Datadog RUM
 datadogRum.setGlobalContextProperty('Application Type', 'Marketplace');
 datadogRum.setGlobalContextProperty('Application Name', 'JSON Editor App');
 
@@ -38,16 +37,12 @@ class ErrorBoundary extends React.Component<MyProps, MyState> {
   }
 
   static getDerivedStateFromError(error: any) {
-    // error tracker for error reporting service
-    TrackJS.trackError(error);
     // Update state so the next render will show the fallback UI.
     console.warn(error); // Remove this line if not required.
     return { hasError: true };
   }
 
   componentDidCatch(error: any, errorInfo: any) {
-    // error tracker for error reporting service
-    TrackJS.trackError(error);
     // You can also log the error to an error reporting service
     // logErrorToMyService(error, errorInfo);
     console.error("errorInfo ", errorInfo);
@@ -56,8 +51,6 @@ class ErrorBoundary extends React.Component<MyProps, MyState> {
 
   render() {
     if (this?.state?.hasError) {
-      // error tracker for error reporting service
-      TrackJS.trackError(this?.state?.hasError);
       // You can render any custom fallback UI
       return <h1>Something went wrong.</h1>;
     }

playwright.config.ts ui/playwright.config.tsplaywright.config.ts renamed to ui/playwright.config.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { HashRouter, Route, Routes, Navigate } from "react-router-dom";
-import TrackJS from "../../trackjs";
 import ErrorBoundary from "../../components/ErrorBoundary";
 import ConfigScreen from "../ConfigScreen";
 import CustomField from "../CustomField";
@@ -17,8 +16,6 @@ const HomeRedirectHandler = function () {
   return null;
 };
 
-// Track.js installation
-TrackJS.installation();
 
 /* App - The main app component that should be rendered */
 const App: React.FC = function () {

ui/src/components/ErrorBoundary/index.tsx

@@ -11,7 +11,6 @@ import tippy from "tippy.js";
 import localeTexts from "../../common/locale/en-us";
 import constants from "../../common/constants";
 import { mergeObjects } from "../../common/utils";
-import TrackJS from "../../trackjs";
 import { TypeAppSdkConfigState } from "../../common/types";
 
 /* Import node module CSS */
@@ -50,9 +49,7 @@ const ConfigScreen: React.FC = function () {
 
   useEffect(() => {
     ContentstackAppSdk.init()
-      .then(async (appSdk:AppSdkProps) => {
-        //Adding Track.js metadata
-        TrackJS.addMetadata(appSdk);
+      .then(async (appSdk) => {
         const sdkConfigData = appSdk?.location?.AppConfigWidget?.installation;
         if (sdkConfigData) {
           const installationDataFromSDK =
@@ -70,11 +67,6 @@ const ConfigScreen: React.FC = function () {
           setIsStringified(
             state?.installationData?.configuration?.isStringified
           );
-          // setting metadata for js error tracker
-          addMetadata("stack", `${appSdk?.stack._data.name}`);
-          addMetadata("organization", `${appSdk?.currentUser.defaultOrganization}`);
-          addMetadata("api_key", `${stackKey}`);
-          addMetadata("user_uid", `${appSdk?.stack._data.collaborators[0].uid}`);
         }
       })
       .catch((error) => {

ui/src/containers/App/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import ContentstackAppSdk from "@contentstack/app-sdk";
 import constants from "../../common/constants";
 import { isEmpty } from "../../common/utils";
-import TrackJS from "../../trackjs";
 import { TypeSDKData } from "../../common/types";
 import "./styles.scss";
 import JSONEditor from "../../components/jsoneditor";
@@ -14,7 +13,7 @@ const CustomField: React.FC = function () {
     appSdkInitialized: false,
   });
   const [jsonData, setJsonData] = useState<Array<any>>([{}]);
-  const [saceJsonData, setSaveJsonData] = useState<Array<any>>([{}]);
+  const [saveJsonData, setSaveJsonData] = useState<Array<any>>([{}]);
   let isStringified: any;
 
   const toStringify = (localConfig: any, globalConfig: any) => {
@@ -30,9 +29,6 @@ const CustomField: React.FC = function () {
   useEffect(() => {
     ContentstackAppSdk.init()
       .then(async (appSdk) => {
-        // Adding Track.js metadata
-        TrackJS.addMetadata(appSdk);
-
         const config = await appSdk?.getConfig();
         setState({
           config,
@@ -81,8 +77,8 @@ const CustomField: React.FC = function () {
   };
 
   useEffect(() => {
-    state?.location?.CustomField?.field?.setData(saceJsonData);
-  }, [saceJsonData]);
+    state?.location?.CustomField?.field?.setData(saveJsonData);
+  }, [saveJsonData]);
 
   return (
     <div className="layout-container">

ui/src/containers/ConfigScreen/index.tsx

@@ -1,13 +1,21 @@
-import { useAppSdk } from './useAppSdk';
+import { useCallback } from "react";
+import { useAppSdk } from "./useAppSdk";
 
-const useAnalytics = () => {
-  const [appSdk] = useAppSdk();
+const ENV: string = process.env.NODE_ENV || "";
 
-  const trackEvent = (event: string, eventData: any = {}) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return appSdk?.pulse(event, eventData);
-  };
+/**
+ * useAnalytics hook to track user actions and events in application
+ */
+const useAnalytics = () => {
+  const [appSDK] = useAppSdk();
+  const trackEvent = useCallback(
+    (event: string, eventData: any = {}) => {
+      if (ENV === "production") {
+        appSDK?.pulse(event, eventData);
+      }
+    },
+    [appSDK]
+  );
 
   return { trackEvent };
 };

ui/src/containers/CustomField/index.tsx

@@ -13,6 +13,7 @@ export const appSdkRefAtom = atom<Extension | null>(null);
  * To be used during Sdk initialization
  */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// eslint-disable-next-line arrow-body-style
 export const useAppSdk = (): [Extension | null, any] => {
   return useAtom(appSdkRefAtom);
 };