Merge pull request #106 from contentstack/staging

Staging --> Main

Author: abhishek305

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "marketplace-app-boilerplate",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "files": [
     "dist"

package.json

@@ -63,6 +63,14 @@ const localeTexts = {
       url: "https://www.contentstack.com/docs/developers/developer-hub/full-page-location/",
     },
   },
+  GlobalFullPage: {
+    title: "Global Full Page App",
+    body: "This is the location that contains your Global Full Page App.",
+    button: {
+      text: "Learn More",
+      url: "https://www.contentstack.com/docs/developers/developer-hub/global-full-page/",
+    },
+  },
   FieldModifier: {
     title: "Field Modifier App",
     body: "This is the location that contains your Field Modifier app.",

src/common/locales/en-us/index.ts

@@ -18,6 +18,7 @@ const AppConfigurationExtension = React.lazy(() => import("../AppConfiguration/A
 const AssetSidebarExtension = React.lazy(() => import("../AssetSidebarWidget/AssetSidebar"));
 const StackDashboardExtension = React.lazy(() => import("../DashboardWidget/StackDashboard"));
 const FullPageExtension = React.lazy(() => import("../FullPage/FullPage"));
+const GlobalFullPageExtension = React.lazy(() => import("../GlobalFullPage/GlobalFullPage"));
 const PageNotFound = React.lazy(() => import("../404/404"));
 const DefaultPage = React.lazy(() => import("../index"));
 const ContentTypeSidebarExtension = React.lazy(() => import("../ContentTypeSidebar/ContentTypeSidebar"));
@@ -82,6 +83,14 @@ function App() {
               </Suspense>
             }
           />
+          <Route
+            path="/global-full-page"
+            element={
+              <Suspense>
+                <GlobalFullPageExtension />
+              </Suspense>
+            }
+          />
           <Route
             path="/field-modifier"
             element={

src/containers/App/App.tsx

@@ -0,0 +1,53 @@
+/* Full Page UI Location styles  */
+
+body {
+  overflow: hidden;
+}
+
+.layout-container {
+  padding: 1.5rem 1.875rem;
+  flex-direction: column;
+  flex-shrink: 0;
+  margin: auto;
+  height: 95vh;
+}
+
+.ui-location {
+  padding: 1.5rem 1rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.9375rem;
+  flex: 1 0 0;
+  height: 80vh;
+  width: 95vw;
+  max-height: 89vh;
+}
+
+.ui-container {
+  padding: 1.5rem 0rem;
+  justify-content: center;
+}
+
+.config-container {
+  width: 23.5625rem;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.label {
+  font-size: 0.875rem;
+}
+
+.info {
+  font-size: 0.875rem;
+}
+
+.location-description {
+  width: 25.5625rem;
+}
+
+.location-description-text {
+  white-space: nowrap;
+  word-wrap: break-word;
+}

src/containers/GlobalFullPage/GlobalFullPage.css

@@ -0,0 +1,63 @@
+import React, { useCallback, useState } from "react";
+import localeTexts from "../../common/locales/en-us/index";
+import parse from "html-react-parser";
+import { useAppConfig } from "../../common/hooks/useAppConfig";
+import Icon from "../../assets/Full-Page-Logo.svg";
+import ReadOnly from "../../assets/lock.svg";
+import JsonView from "../../assets/JsonView.svg";
+import ConfigModal from "../../components/ConfigModal/ConfigModal";
+
+import "../index.css";
+import "./GlobalFullPage.css";
+
+const GlobalFullPageExtension = () => {
+  const appConfig = useAppConfig();
+  const [isRawConfigModalOpen, setRawConfigModalOpen] = useState<boolean>(false);
+
+  const handleViewRawConfig = useCallback(() => {
+    setRawConfigModalOpen(true);
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setRawConfigModalOpen(false);
+  }, []);
+
+  const sampleAppConfig = appConfig?.["sample_app_configuration"] || "";
+  const trimmedSampleAppConfig =
+    sampleAppConfig.length > 19 ? `${sampleAppConfig.substring(0, 19)}...` : sampleAppConfig;
+
+  return (
+    <div className="layout-container">
+      <div className="ui-location">
+        <div className="ui-container">
+          <div className="logo-container">
+            <img src={Icon} alt="Logo" />
+            <p>{localeTexts.GlobalFullPage.title}</p>
+          </div>
+          <div className="config-container">
+            <div className="label-container">
+              <p className="label">Sample App Configuration</p>
+              <p className="info">(read only)</p>
+            </div>
+            <div className="input-wrapper">
+              <div className="input-container">
+                <p className="config-value">{trimmedSampleAppConfig}</p>
+                <img src={ReadOnly} alt="ReadOnlyLogo" />
+              </div>
+
+              <img src={JsonView} alt="Show-Json-CTA" className="show-json-cta" onClick={handleViewRawConfig} />
+              {isRawConfigModalOpen && <ConfigModal config={appConfig!} onClose={handleCloseModal} />}
+            </div>
+          </div>
+          <div className="location-description">
+            <p className="location-description-text">{parse(localeTexts.GlobalFullPage.body)}</p>
+            <a target="_blank" rel="noreferrer" href={localeTexts.GlobalFullPage.button.url}>
+              <span className="location-description-link">{localeTexts.GlobalFullPage.button.text}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default GlobalFullPageExtension;

src/containers/GlobalFullPage/GlobalFullPage.tsx

@@ -26,6 +26,9 @@ const DefaultPage = () => {
             <li>
               <a href="/field-modifier">Field Modifier</a>
             </li>
+            <li>
+              <a href="/global-full-page">Global Full Page</a>
+            </li>
           </ul>
         </div>
       </div>