Merge pull request #19 from contentstack/feature/ESI-554-new-updates

UI texts changed as per doc team's review.

Author: NamrataSane

.gitignore

@@ -25,3 +25,6 @@ node_modules/
 .eslintcache
 .dccache
 ui/.dccache
+ui/.env
+api/.env
+.env

ui/package-lock.json

@@ -18,6 +18,7 @@
     "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"
   },

ui/package.json

@@ -2,9 +2,9 @@ export default {
   configFields: {
     entrySaveRadioButton: {
       label: "Data format In Entry",
-      help: "You can select the structure of data you want to save in the entry",
+      help: "Select the structure of the data you want to save in the entry.",
       instruction:
-        "You can select the structure of data you want to save in the entry. You can either save data in a stringified format or as a JSON object.",
+        "You can select the structure of the data you want to save in the entry. You can either save the data as a string or as a JSON object.",
       jsonObject: "JSON Object",
       jsonStringified: "JSON Stringified",
     },

ui/src/common/locale/en-us/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/destructuring-assignment */
 import React from "react";
+import TrackJS from "../../trackjs";
 
 interface MyProps {}
 
@@ -15,20 +16,26 @@ 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);
     throw new Error(errorInfo);
   }
 
   render() {
-    if (this.state.hasError) {
+    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/components/ErrorBoundary/index.tsx

@@ -1,13 +1,14 @@
 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";
 import "./venus.css";
 import "./styles.scss";
 
 /** HomeRedirectHandler - component to nandle redirect based on the window location pathname,
-	as react Router does not identifies pathname if the app is rendered in an iframe.
+  as react Router does not identifies pathname if the app is rendered in an iframe.
 */
 const HomeRedirectHandler = function () {
   if (window?.location?.pathname !== "/") {
@@ -16,6 +17,9 @@ const HomeRedirectHandler = function () {
   return null;
 };
 
+// Track.js installation
+TrackJS.installation();
+
 /* App - The main app component that should be rendered */
 const App: React.FC = function () {
   return (

ui/src/containers/App/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import ConfigPage from "./index";
+
+const inputLabel = "Data format In Entry";
+
+const UIElementsIDs = [
+  "cs-form",
+  "cs-field",
+  "cs-field-label",
+  "cs-tooltip",
+  "cs-radio-one",
+  "cs-radio-two",
+  "cs-instruction-text",
+];
+
+beforeEach(async () => {
+  render(<ConfigPage />);
+});
+jest.spyOn(React, "useEffect").mockImplementation();
+
+afterEach(cleanup);
+
+describe(`UI Elements of Custom Field Screen`, () => {
+  UIElementsIDs.forEach((id: string) => {
+    test(`Rendered ${id} element`, async () => {
+      expect(screen.getByTestId(`${id}`)).toBeInTheDocument();
+    });
+  });
+
+  test(`Text Label`, async () => {
+    expect(screen.getByText(inputLabel)).toBeInTheDocument();
+  });
+
+  test(`FireEvent Functionality`, async () => {
+    const input = screen
+      .getByTestId(`cs-radio-one`)
+      .querySelector("input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "false" } });
+    expect(input.value).toBe("false");
+  });
+});

ui/src/containers/ConfigScreen/index.spec.tsx

@@ -11,6 +11,7 @@ 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 */
@@ -39,6 +40,9 @@ const ConfigScreen: React.FC = function () {
   useEffect(() => {
     ContentstackAppSdk.init()
       .then(async (appSdk) => {
+        //Adding Track.js metadata
+        TrackJS.addMetadata(appSdk);
+
         const sdkConfigData = appSdk?.location?.AppConfigWidget?.installation;
         if (sdkConfigData) {
           const installationDataFromSDK =
@@ -104,16 +108,16 @@ const ConfigScreen: React.FC = function () {
   return (
     <div className="layout-container">
       <div className="page-wrapper">
-        <form data-test-id="cs-form" className="config-wrapper">
+        <form data-testid="cs-form" className="config-wrapper">
           <div className="Form__item">
             <div
               className="Field Field--full json-field"
-              data-test-id="cs-field"
+              data-testid="cs-field"
             >
               <label
                 className="FieldLabel"
                 htmlFor="isStringified"
-                data-test-id="cs-field-label"
+                data-testid="cs-field-label"
               >
                 {localeTexts.configFields.entrySaveRadioButton.label}
                 <span className="FieldLabel__required-text">
@@ -123,12 +127,12 @@ const ConfigScreen: React.FC = function () {
               <div
                 className="tippy-wrapper"
                 id="help-text"
-                data-test-id="cs-tooltip"
+                data-testid="cs-tooltip"
               >
                 <VenusHelp />
               </div>
               <div className="Radio-wrapper">
-                <label data-test-id="cs-radio" className="Radio label-text">
+                <label data-testid="cs-radio-one" className="Radio label-text">
                   <input
                     id="jsonObject"
                     type="radio"
@@ -143,7 +147,7 @@ const ConfigScreen: React.FC = function () {
                     {localeTexts.configFields.entrySaveRadioButton.jsonObject}
                   </span>
                 </label>
-                <label data-test-id="cs-radio" className="Radio label-text">
+                <label data-testid="cs-radio-two" className="Radio label-text">
                   <input
                     id="stringified"
                     type="radio"
@@ -162,7 +166,7 @@ const ConfigScreen: React.FC = function () {
                   </span>
                 </label>
               </div>
-              <p className="InstructionText" data-test-id="cs-instruction-text">
+              <p className="InstructionText" data-testid="cs-instruction-text">
                 {localeTexts.configFields.entrySaveRadioButton.instruction}
               </p>
             </div>

ui/src/containers/ConfigScreen/index.tsx

@@ -2,6 +2,7 @@ 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";
@@ -29,6 +30,9 @@ 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,

ui/src/containers/CustomField/index.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable no-underscore-dangle */
+import { TrackJS } from "trackjs";
+
+// To get started with Track.js - add .env variables and change the app's name here.
+const installation = () => {
+  TrackJS.install({
+    token: `${process.env.REACT_APP_TRACKER_TOKEN}`,
+    application: process.env.REACT_APP_TRACKER_ENV,
+    console: { display: true },
+  });
+
+  TrackJS.addMetadata("application_type", "marketplace");
+  TrackJS.addMetadata("application_name", "JSON-Editor App");
+};
+
+// Adding bulk metadata to the Track.js here
+const addMetadata = (appSdk: any = {}) => {
+  const { api_key: apiKey, org_uid: orgUid, name } = appSdk?.stack?._data || {};
+  const { uid: userUid } = appSdk?.currentUser || {};
+  const metaData = Object.entries({ apiKey, name, orgUid, userUid });
+  metaData?.forEach(([key, value]) => {
+    TrackJS.addMetadata(key, value);
+  });
+};
+
+// To log the error manuall.
+const trackError = (error: any) => {
+  TrackJS.track(error);
+};
+
+export default {
+  installation,
+  addMetadata,
+  trackError,
+};