Merge pull request #49 from contentstack/development

Development --> Stag

Author: abhishek305

ui/package-lock.json

@@ -1,14 +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.25.0",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
     "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",
@@ -18,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": [
@@ -58,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",

ui/package.json

@@ -0,0 +1,78 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+/**
+ * Read environment variables from file.
+ */
+require("dotenv").config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testMatch: /.*.ts/,
+  /**
+   * globalSetup & teardown of test data
+   * globalTeardown: require.resolve("./tests/global-teardown"),
+   */
+  globalSetup: require.resolve("../ui/tests/global-setup"),
+
+
+  testDir: "../ui/tests/e2e",
+  /* Maximum time one test can run for. */
+  timeout: 10 * 10000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 10 * 10000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: 2,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    storageState: "storageState.json",
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    screenshot: "off",
+    video: "off",
+    viewport: { width: 1000, height: 720 },
+    trace: "on-first-retry",
+    baseURL: process.env.APP_HOST_URL,
+    launchOptions: {
+      logger: {
+        isEnabled: () => {
+          return false;
+        },
+        log: (name, severity, message, args) => console.log(`${name}: ${message}`),
+      },
+    },
+  },
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "Chromium",
+      use: {
+        browserName: "chromium",
+      },
+    },
+    {
+      name: 'safari',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: "firefox",
+      use: {
+        browserName: "firefox",
+      },
+    },
+  ],
+};
+
+export default config;

ui/playwright-report/index.html

@@ -1,3 +1,8 @@
 export default {
   appSdkError: "appSdk initialization error",
 };
+
+export const eventNames = Object.freeze({
+  APP_INITIALIZE_SUCCESS: "App Loaded Successfully",
+  APP_INITIALIZE_FAILURE: "App Load Failure",
+});

ui/playwright.config.ts

@@ -1,31 +1,48 @@
 /* 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 {}
+interface MyProps {
+  children: React.ReactElement;
+}
 
 interface MyState {
   hasError: boolean;
 }
 
+//  datadog-rum Installation
+datadogRum.init({
+  applicationId: `${process.env.REACT_APP_DATADOG_RUM_APPLICATION_ID}`,
+  clientToken: `${process.env.REACT_APP_DATADOG_RUM_CLIENT_TOKEN}`,
+  site: `${process.env.REACT_APP_DATADOG_RUM_SITE}`,
+  service: `${process.env.REACT_APP_DATADOG_RUM_SERVICE}`,
+  sampleRate: 100,
+  sessionReplaySampleRate: 20,
+  trackInteractions: true,
+  trackResources: true,
+  trackLongTasks: true,
+  defaultPrivacyLevel: 'mask-user-input',
+  useCrossSiteSessionCookie: true,
+});
+
+// sending MetaData to Datadog RUM
+datadogRum.setGlobalContextProperty('Application Type', 'Marketplace');
+datadogRum.setGlobalContextProperty('Application Name', 'JSON Editor App');
+
 class ErrorBoundary extends React.Component<MyProps, MyState> {
   constructor(props: any) {
     super(props);
     this.state = { hasError: false };
   }
 
   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);
@@ -34,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>;
     }

ui/src/common/constants/index.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,15 +11,25 @@ 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 */
 import "tippy.js/dist/tippy.css";
 /* Import our CSS */
 import "./styles.scss";
 
+import useJsErrorTracker from "../../hooks/useJsErrorTracker";
+import { useAppSdk } from "../../hooks/useAppSdk";
+import useAnalytics from "../../hooks/useAnalytics";
+
 const ConfigScreen: React.FC = function () {
+
+  // error tracking hooks
+  const { addMetadata, trackError } = useJsErrorTracker();
+  const { trackEvent } = useAnalytics();
+  const [appSdk] = useAppSdk();
+  
+
   const [state, setState] = useState<TypeAppSdkConfigState>({
     installationData: {
       configuration: {
@@ -35,14 +45,11 @@ const ConfigScreen: React.FC = function () {
     },
     appSdkInitialized: false,
   });
-  const [isStringified, setIsStringified] = useState(false);
+  const [isStringified,setIsStringified]=useState(false);
 
   useEffect(() => {
     ContentstackAppSdk.init()
       .then(async (appSdk) => {
-        //Adding Track.js metadata
-        TrackJS.addMetadata(appSdk);
-
         const sdkConfigData = appSdk?.location?.AppConfigWidget?.installation;
         if (sdkConfigData) {
           const installationDataFromSDK =
@@ -63,6 +70,7 @@ const ConfigScreen: React.FC = function () {
         }
       })
       .catch((error) => {
+        trackError(error);
         console.error(constants.appSdkError, error);
       });
   }, []);
@@ -77,10 +85,8 @@ const ConfigScreen: React.FC = function () {
     if (typeof fieldValue === "string") fieldValue = fieldValue?.trim();
     const updatedConfig = state?.installationData?.configuration || {};
     const updatedServerConfig = state?.installationData?.serverConfiguration;
-
     if (fieldName === "auth_token") updatedServerConfig[fieldName] = fieldValue;
     else updatedConfig[fieldName] = fieldValue;
-
     if (typeof state?.setInstallationData !== "undefined") {
       await state?.setInstallationData({
         ...state?.installationData,
@@ -94,6 +100,7 @@ const ConfigScreen: React.FC = function () {
 
   const updateCustomJSON = (e: any) => {
     const val = e?.target?.id !== "jsonObject";
+    trackEvent("Clicked", { property: `Update Json` });
     setIsStringified(val);
     updateConfig({ target: { name: "isStringified", value: val } });
   };

ui/src/containers/App/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import ContentstackAppSdk from "@contentstack/app-sdk";
-import constants from "../../common/constants";
+import constants, { eventNames } from "../../common/constants";
 import { isEmpty } from "../../common/utils";
-import TrackJS from "../../trackjs";
 import { TypeSDKData } from "../../common/types";
 import "./styles.scss";
+import useAnalytics from "../../hooks/useAnalytics";
 import JSONEditor from "../../components/jsoneditor";
 
 const CustomField: React.FC = function () {
@@ -14,7 +14,10 @@ const CustomField: React.FC = function () {
     appSdkInitialized: false,
   });
   const [jsonData, setJsonData] = useState<Array<any>>([{}]);
-  const [saceJsonData, setSaveJsonData] = useState<Array<any>>([{}]);
+  const { trackEvent } = useAnalytics();
+  const [saveJsonData, setSaveJsonData] = useState<Array<any>>([{}]);
+  const { APP_INITIALIZE_SUCCESS, APP_INITIALIZE_FAILURE } = eventNames;
+
   let isStringified: any;
 
   const toStringify = (localConfig: any, globalConfig: any) => {
@@ -30,9 +33,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,
@@ -66,9 +66,11 @@ const CustomField: React.FC = function () {
             [JSON.stringify(jsonVal[0])]
             : jsonVal
         );
+        trackEvent(APP_INITIALIZE_SUCCESS)
       })
       .catch((error) => {
         console.error(constants.appSdkError, error);
+        trackEvent(APP_INITIALIZE_FAILURE)
       });
   }, []);
 
@@ -81,8 +83,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

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+import { useAppSdk } from "./useAppSdk";
+
+const ENV: string = process.env.NODE_ENV || "";
+
+/**
+ * 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 };
+};
+
+export default useAnalytics;