@elliemae/pui-app-sdk 5.22.0 → 5.23.0

package/dist/esm/utils/micro-frontend/tests/app.config.json

@@ -0,0 +1,200 @@
+{
+  "appId": "microfe",
+  "activeEnv": "localhost",
+  "googleTagManager": true,
+  "sessionTimeoutWarnInterval": "7200000",
+  "sessionTimeoutInterval": "9000000",
+  "microFrontendApps": {
+    "loanapp": {
+      "name": "Loan",
+      "hostUrl": "./loan",
+      "development": {
+        "files": ["index.js"]
+      },
+      "production": {
+        "files": ["index.js"]
+      }
+    },
+    "taskapp": {
+      "name": "Task",
+      "hostUrl": "./task",
+      "mode": "development",
+      "development": {
+        "files": ["index.dev.js"]
+      },
+      "production": {
+        "files": ["index.js"]
+      }
+    },
+    "travelhub": {
+      "name": "TravelHub",
+      "hostUrl": "./travelhub",
+      "development": {
+        "files": ["app.js", "landing.js", "app.css", "landing.css"]
+      },
+      "production": {
+        "files": ["app.js", "landing.js", "app.css", "landing.css"]
+      }
+    },
+    "flights": {
+      "name": "Flights",
+      "hostUrl": "./flights",
+      "development": {
+        "files": ["app.js", "app.css"]
+      },
+      "production": {
+        "files": ["app.js", "app.css"]
+      }
+    },
+    "hotels": {
+      "name": "Hotels",
+      "hostUrl": "./hotels",
+      "development": {
+        "files": ["app.js", "app.css"]
+      },
+      "production": {
+        "files": ["app.js", "app.css"]
+      }
+    }
+  },
+  "serviceEndpoints": {
+    "api": "",
+    "idp": "https://int.idp.ellielabs.com",
+    "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+  },
+  "env": {
+    "localhost": {
+      "serviceEndpoints": {
+        "api": "",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "dev": {
+      "serviceEndpoints": {
+        "api": "https://dev.api.puiservice.rd.elliemae.io",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "dev2": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "qa": {
+      "serviceEndpoints": {
+        "api": "https://dev.api.puiservice.rd.elliemae.io",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "qa2": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "qa3": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "int": {
+      "serviceEndpoints": {
+        "api": "https://int.api.ellielabs.com",
+        "idp": "https://int.idp.ellielabs.com",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-osb1": {
+      "serviceEndpoints": {
+        "api": "https://encompass-peg-api.elliemae.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-osb2": {
+      "serviceEndpoints": {
+        "api": "https://encompass-peg2-api.elliemae.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg": {
+      "serviceEndpoints": {
+        "api": "https://peg2-west.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-oapi-west": {
+      "serviceEndpoints": {
+        "api": "https://peg2-west.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg-oapi-east": {
+      "serviceEndpoints": {
+        "api": "https://peg2-east.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg2-oapi-east": {
+      "serviceEndpoints": {
+        "api": "https://peg2-east.api.ellielabs.com",
+        "idp": "https://peg.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "peg3": {
+      "serviceEndpoints": {
+        "api": "https://pel1.api.ellielabs.com",
+        "idp": "https://peg3.idp.ellielabs.com/authorize",
+        "logger": "https://int.api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "stage": {
+      "serviceEndpoints": {
+        "api": "https://stg.api.elliemae.com",
+        "idp": "https://stg.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "beta": {
+      "serviceEndpoints": {
+        "api": "https://concept.api.elliemae.com",
+        "idp": "https://concept.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "demo": {
+      "serviceEndpoints": {
+        "api": "https://concept.api.elliemae.com",
+        "idp": "https://concept.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "epc": {
+      "serviceEndpoints": {
+        "api": "https://concept.api.elliemae.com",
+        "idp": "https://concept.idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    },
+    "prod": {
+      "serviceEndpoints": {
+        "api": "https://api.elliemae.com",
+        "idp": "https://idp.elliemae.com/authorize",
+        "logger": "https://api.ellielabs.com/diagnostics/v2/logging"
+      }
+    }
+  }
+}

package/dist/esm/utils/micro-frontend/tests/utils.js

@@ -0,0 +1,96 @@
+import { MessageType } from "@elliemae/microfe-common";
+const applicationScriptingObject = {
+  object: {
+    events: [],
+    functions: [
+      "closeModal",
+      "extend",
+      "getApplicationContext",
+      "getCapabilities",
+      "getCompanySettings",
+      "getDescriptor",
+      "getPersonaAccess",
+      "getPoliciesDetails",
+      "getUserAccessRights",
+      "hideSpinner",
+      "keepSessionAlive",
+      "log",
+      "navigate",
+      "open",
+      "openModal",
+      "performAction",
+      "print",
+      "showError",
+      "showSpinner",
+      "supportsAction",
+      "supportsNavigateTo"
+    ],
+    objectId: "application",
+    objectType: "Object"
+  },
+  type: "object"
+};
+const authScriptingObject = {
+  object: {
+    events: [],
+    functions: ["getAccessToken", "createAuthCode", "getUser"],
+    objectId: "auth",
+    objectType: "Object"
+  },
+  type: "object"
+};
+const hostObjects = {
+  application: applicationScriptingObject,
+  auth: authScriptingObject
+};
+const getOrigin = (url) => {
+  if (!url || url === "about:blank") return "*";
+  try {
+    const { origin } = new URL(url);
+    return origin === "null" || !origin ? url : origin;
+  } catch (e) {
+    const { origin } = new URL(url, document.baseURI);
+    return origin;
+  }
+};
+const postMessage = ({
+  srcWindow,
+  targetWindow,
+  message
+}) => {
+  targetWindow.dispatchEvent(
+    new MessageEvent("message", {
+      source: srcWindow,
+      origin: getOrigin(srcWindow.location.href),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      data: {
+        source: "elli:remoting",
+        ...message
+      }
+    })
+  );
+};
+const setupHost = (hostWindow) => {
+  const onMessage = ({ data }) => {
+    if (data?.type !== MessageType.ObjectGet) return;
+    const scriptingObject = hostObjects[data?.body?.objectId ?? ""] ?? null;
+    if (scriptingObject)
+      postMessage({
+        srcWindow: hostWindow,
+        targetWindow: window,
+        message: {
+          body: scriptingObject,
+          type: "elli:remoting:response",
+          requestId: data.requestId
+        }
+      });
+  };
+  hostWindow?.addEventListener?.("message", onMessage);
+  return () => hostWindow?.removeEventListener?.("message", onMessage);
+};
+export {
+  applicationScriptingObject,
+  authScriptingObject,
+  postMessage,
+  setupHost
+};

package/dist/esm/utils/testing/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { getDefaultTheme } from "@elliemae/pui-theme";
 import { createAppStore } from "../../data/store.js";
 import { AppRoot } from "../../view/app-root/index.js";
@@ -11,7 +12,10 @@ const AllTheProviders = ({
   theme = defaultTheme,
   children
 }) => /* @__PURE__ */ jsx(AppRoot, { store, history: browserHistory, theme, children });
-const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options });
+const customRender = (ui, options) => ({
+  user: userEvent.setup(),
+  ...render(ui, { wrapper: AllTheProviders, ...options })
+});
 export * from "@testing-library/react";
 export {
   customRender as render

package/dist/esm/view/guest-microapp.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useRef } from "react";
+import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { getAppBridge } from "../utils/micro-frontend/app-bridge.js";
+import { waitMessage } from "../data/wait-message/actions.js";
+import { getLogger } from "../utils/micro-frontend/index.js";
+const Div = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const useAppRenderer = (props) => {
+  const { id, history, onLoadComplete, onUnloadComplete, containerId } = props;
+  const dispatch = useDispatch();
+  useLayoutEffect(() => {
+    let isMounted = true;
+    let appBridge = null;
+    let unloadInProgress = Promise.resolve();
+    let instanceId = null;
+    (async () => {
+      await unloadInProgress;
+      dispatch(waitMessage.open());
+      try {
+        appBridge = await getAppBridge();
+        if (!appBridge)
+          throw new Error(`Failed to load ${id}, AppBridge not initialized`);
+        if (isMounted) {
+          instanceId = await appBridge.openApp({
+            id,
+            frameOptions: { containerId },
+            history
+          });
+          setTimeout(() => {
+            try {
+              onLoadComplete?.(instanceId);
+            } catch (ex) {
+            }
+          }, 0);
+        }
+      } catch (ex) {
+        getLogger().error({
+          message: `Failed to load ${id}`,
+          exception: ex
+        });
+        isMounted = false;
+        if (appBridge && instanceId)
+          unloadInProgress = appBridge.closeApp(instanceId);
+        throw ex;
+      } finally {
+        dispatch(waitMessage.close());
+      }
+    })();
+    return () => {
+      isMounted = false;
+      if (appBridge) {
+        unloadInProgress = appBridge.closeApp(instanceId);
+        unloadInProgress.then(() => {
+          instanceId = null;
+          setTimeout(() => {
+            try {
+              onUnloadComplete?.();
+            } catch (ex) {
+            }
+          }, 0);
+        }).catch(() => {
+        });
+      }
+    };
+  }, [containerId, dispatch, history, id, onLoadComplete, onUnloadComplete]);
+};
+const GuestMicroApp = memo(
+  (props) => {
+    const containerId = useRef(crypto.randomUUID());
+    useAppRenderer({ ...props, containerId: containerId.current });
+    return /* @__PURE__ */ jsx(Div, { id: containerId.current });
+  }
+);
+export {
+  GuestMicroApp
+};

package/dist/esm/view/micro-iframe-app/iframe/index.js

@@ -28,7 +28,7 @@ const IFrame = memo(
         ref: frameRef,
         title,
         src,
-        scrolling: "no",
+        "data-testid": `${IFRAME_CONTAINER_ID_PREFIX}${id}`,
         ...sandboxProps,
         onLoad: () => frameRef?.current?.contentDocument && onFrameReady(frameRef.current.contentDocument)
       }

package/dist/esm/view/micro-iframe-app/iframe.html

@@ -69,6 +69,10 @@
       <strong>JavaScript has been disabled on your browser</strong>, please
       <strong>enable JS</strong> to make this app work.</noscript
     >
-    <div id="pui-app-container-" class="full-width full-height"></div>
+    <div
+      id="pui-app-container-"
+      data-testid="pui-app-container-"
+      class="full-width full-height"
+    ></div>
   </body>
 </html>

package/dist/esm/view/micro-iframe-app/use-frame-loaded.js

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { trackActivity } from "../../utils/session.js";
 import { CMicroAppHost } from "../../utils/micro-frontend/host.js";
 import { getMicroFrontEndAppConfig } from "../../utils/micro-frontend/index.js";
+import { APP_CONTAINER_ID_PREFIX } from "../micro-app/const.js";
 const addBaseTag = (id, documentEle) => {
   const { hostUrl, manifestPath } = getMicroFrontEndAppConfig({
     id
@@ -13,9 +14,10 @@ const addBaseTag = (id, documentEle) => {
   documentEle.getElementsByTagName("head")[0].appendChild(base);
 };
 const updateContainerId = (id, documentEle) => {
-  const ele = documentEle.getElementById("pui-app-container-");
+  const ele = documentEle.getElementById(APP_CONTAINER_ID_PREFIX);
   if (ele) {
     ele.id = `${ele.id}${id}`;
+    ele.dataset.testid = ele.id;
   }
 };
 const useFrameLoaded = ({ id, documentEle }) => {

package/dist/esm/view/tests/__snapshots__/guest-microapp.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MicroAppV2 should open loanapp and call init and mount methods 1`] = `
+Document {
+  "location": Location {
+    "assign": [Function],
+    "hash": "",
+    "host": "localhost:3111",
+    "hostname": "localhost",
+    "href": "http://localhost:3111/frame.html",
+    "origin": "http://localhost:3111",
+    "pathname": "/frame.html",
+    "port": "3111",
+    "protocol": "http:",
+    "reload": [Function],
+    "replace": [Function],
+    "search": "",
+    "toString": [Function],
+  },
+}
+`;

package/dist/esm/view/tests/__snapshots__/micro-iframe-app.test.tsx.snap

@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MicroIFrameApp should close previous instance of app before loading new instance 2`] = `
+<body
+  class="full-width full-height"
+>
+  
+    
+  <!-- Display a message if JS has been disabled on the browser. -->
+  
+    
+  <noscript>
+    If you're seeing this message, that means
+      &lt;strong&gt;JavaScript has been disabled on your browser&lt;/strong&gt;, please
+      &lt;strong&gt;enable JS&lt;/strong&gt; to make this app work.
+  </noscript>
+  
+    
+  <div
+    class="full-width full-height"
+    data-testid="pui-app-container-loanapp"
+    id="pui-app-container-loanapp"
+  >
+    <main>
+      <h1>
+        Loan App
+      </h1>
+      <p>
+        Go to 
+        <a
+          href="#"
+        >
+          Pipeline
+        </a>
+      </p>
+    </main>
+  </div>
+  
+  
+
+
+  <script
+    id="emui-script-Loan-1"
+    src="http://localhost:3111/loan/latest/index.js"
+  />
+</body>
+`;
+
+exports[`MicroIFrameApp should open loanapp and call init and mount methods 1`] = `
+<head>
+  
+    
+  <!-- The first thing in any HTML file should be the charset -->
+  
+    
+  <meta
+    charset="utf-8"
+  />
+  
+    
+  <!-- Make the page mobile compatible -->
+  
+    
+  <meta
+    content="width=device-width, initial-scale=1"
+    name="viewport"
+  />
+  
+    
+  <!-- Allow installing the app to the homescreen -->
+  
+    
+  <meta
+    content="yes"
+    name="mobile-web-app-capable"
+  />
+  
+    
+  <link
+    href="/favicon.ico"
+    rel="icon"
+  />
+  
+    
+  <title>
+    Application
+  </title>
+  
+    
+  <!-- Google Tag Manager -->
+  
+    
+  <!-- &lt;script nonce="__CSP_NONCE__"&gt;
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != 'dataLayer' ? '&l=' + l : '';
+      j.async = true;
+      j.src =
+        'https://www.googletagmanager.com/gtm.js?id=' +
+        i +
+        dl;
+      f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', window.emui.gtm.id);
+  &lt;/script&gt; -->
+  
+    
+  <!-- &lt;script nonce="__CSP_NONCE__"&gt;
+      window.emuiUserMonitoring = window.parent.emuiUserMonitoring || {
+        setCustomVirtualPageName: function () {},
+        startVirtualPageMonitoringWithAutoEnd: function () {},
+      };
+    &lt;/script&gt; -->
+  
+    
+  <script
+    src="https://www.google-analytics.com/analytics.js"
+  />
+  <script>
+    
+      (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        (i[r] =
+          i[r] ||
+          function () {
+            (i[r].q = i[r].q || []).push(arguments);
+          }),
+          (i[r].l = 1 * new Date());
+        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m);
+      })(
+        window,
+        document,
+        'script',
+        'https://www.google-analytics.com/analytics.js',
+        'ga',
+      );
+    
+  </script>
+  
+    
+  <style>
+    
+      .full-width {
+        width: 100%;
+      }
+      .full-height {
+        height: 100%;
+      }
+    
+  </style>
+  
+  
+  <base
+    href="http://localhost:3111/loan/latest"
+  />
+</head>
+`;
+
+exports[`MicroIFrameApp should open loanapp and call init and mount methods 2`] = `
+<body
+  class="full-width full-height"
+>
+  
+    
+  <!-- Display a message if JS has been disabled on the browser. -->
+  
+    
+  <noscript>
+    If you're seeing this message, that means
+      &lt;strong&gt;JavaScript has been disabled on your browser&lt;/strong&gt;, please
+      &lt;strong&gt;enable JS&lt;/strong&gt; to make this app work.
+  </noscript>
+  
+    
+  <div
+    class="full-width full-height"
+    data-testid="pui-app-container-loanapp"
+    id="pui-app-container-loanapp"
+  >
+    <main>
+      <h1>
+        Loan App
+      </h1>
+      <p>
+        Go to 
+        <a
+          href="#"
+        >
+          Pipeline
+        </a>
+      </p>
+    </main>
+  </div>
+  
+  
+
+
+  <script
+    id="emui-script-Loan-1"
+    src="http://localhost:3111/loan/latest/index.js"
+  />
+</body>
+`;