CADENZA-33304 replace targetOrigin with webApplication

DisyInformationssysteme · Sep 28, 2023 · 0f2967d · 0f2967d
1 parent 58f4d31
commit 0f2967d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 ### Added
-- Added webApplicationLink and webApplicationLinkRepository constructor params
+- Added webApplication constructor parameter
 
 ### Added
 

diff --git a/src/cadenza.js b/src/cadenza.js
@@ -4,7 +4,7 @@
  * @param {string} baseUrl - The base URL of the Cadenza server
  * @param {object} [options] - Options
  * @param {HTMLIFrameElement | string} [options.iframe] - An iframe for embedding Cadenza or the iframe's ID
- * @param {ExternalLinkKey} [options.targetOrigin] - A external link id from which origin should be resolved when cadenza posts event
+ * @param {ExternalLinkKey} [options.webApplication] - An external link that Cadenza uses to resolve the [target origin](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#targetorigin) when posting events. This is required if Cadenza and your application are not running on the same origin.
  * @param {boolean} [options.debug] - Whether to enable debug logging
  * @throws For invalid base URL
  */
@@ -28,7 +28,7 @@ globalThis.cadenza = Object.assign(
 /** @typedef {string} EmbeddingTargetId - The ID of an embedding target */
 
 /**
- * @typedef ExternalLinkKey - A tuple qualifying a cadenza external link
+ * @typedef ExternalLinkKey - A tuple qualifying a Cadenza external link
  * @property {string} repositoryName - The name of the link's repository
  * @property {string} externalLinkId - The ID of the external link
  */
@@ -84,9 +84,8 @@ export class CadenzaClient {
   /** @readonly */
   #iframe;
 
-  /** @readonly */
-  /** @type {ExternalLinkKey | undefined} */
-  #targetOrigin;
+  /** @readonly @type {ExternalLinkKey | undefined} */
+  #webApplication;
 
   /** @type {HTMLIFrameElement | undefined} */
   #iframeElement;
@@ -102,11 +101,17 @@ export class CadenzaClient {
    * @param {string} baseUrl
    * @param {object} [options]
    * @param {HTMLIFrameElement | string} [options.iframe]
-   * @param {ExternalLinkKey} [options.targetOrigin]
+   * @param {ExternalLinkKey} [options.webApplication]
    * @param {boolean} [options.debug]
    */
-  constructor(baseUrl, { debug = false, iframe, targetOrigin } = {}) {
+  constructor(baseUrl, { debug = false, iframe, webApplication } = {}) {
     assert(validUrl(baseUrl), `Invalid baseUrl: ${baseUrl}`);
+    if (webApplication) {
+      assert(
+        validExternalLinkKey(webApplication),
+        `Invalid webApplication parameter: ${webApplication}`,
+      );
+    }
 
     // Remove trailing /
     if (baseUrl.at(-1) === '/') {
@@ -119,7 +124,7 @@ export class CadenzaClient {
     this.#origin = new URL(baseUrl).origin;
     this.#iframe = iframe;
     this.#debug = debug;
-    this.#targetOrigin = targetOrigin;
+    this.#webApplication = webApplication;
   }
 
   /** The base URL of the Cadenza server this client is requesting */
@@ -166,9 +171,9 @@ export class CadenzaClient {
     const params = new URLSearchParams({
       ...(hideMainHeaderAndFooter && { hideMainHeaderAndFooter: 'true' }),
       ...(hideWorkbookToolBar && { hideWorkbookToolBar: 'true' }),
-      ...(this.#targetOrigin && {
-        webApplicationLink: this.#targetOrigin.externalLinkId,
-        webApplicationLinkRepository: this.#targetOrigin.repositoryName,
+      ...(this.#webApplication && {
+        webApplicationLink: this.#webApplication.externalLinkId,
+        webApplicationLinkRepository: this.#webApplication.repositoryName,
       }),
     });
     return this.#show(resolvePath(source), { params, signal });
@@ -211,9 +216,9 @@ export class CadenzaClient {
       ...(locationFinder && { locationFinder }),
       ...(mapExtent && { mapExtent: mapExtent.join() }),
       ...(useMapSrs && { useMapSrs: 'true' }),
-      ...(this.#targetOrigin && {
-        webApplicationLink: this.#targetOrigin.externalLinkId,
-        webApplicationLinkRepository: this.#targetOrigin.repositoryName,
+      ...(this.#webApplication && {
+        webApplicationLink: this.#webApplication.externalLinkId,
+        webApplicationLinkRepository: this.#webApplication.repositoryName,
       }),
     });
     return this.#show(resolvePath(mapView), { params, signal }).then(() =>
@@ -255,9 +260,9 @@ export class CadenzaClient {
       ...(locationFinder && { locationFinder }),
       ...(mapExtent && { mapExtent: mapExtent.join() }),
       ...(minScale && { minScale: String(minScale) }),
-      ...(this.#targetOrigin && {
-        webApplicationLink: this.#targetOrigin.externalLinkId,
-        webApplicationLinkRepository: this.#targetOrigin.repositoryName,
+      ...(this.#webApplication && {
+        webApplicationLink: this.#webApplication.externalLinkId,
+        webApplicationLinkRepository: this.#webApplication.repositoryName,
       }),
     });
     return this.#show(resolvePath(backgroundMapView), { params, signal });
@@ -293,9 +298,9 @@ export class CadenzaClient {
       ...(mapExtent && { mapExtent: mapExtent.join() }),
       ...(useMapSrs && { useMapSrs: 'true' }),
       ...(minScale && { minScale: String(minScale) }),
-      ...(this.#targetOrigin && {
-        webApplicationLink: this.#targetOrigin.externalLinkId,
-        webApplicationLinkRepository: this.#targetOrigin.repositoryName,
+      ...(this.#webApplication && {
+        webApplicationLink: this.#webApplication.externalLinkId,
+        webApplicationLinkRepository: this.#webApplication.repositoryName,
       }),
     });
     return this.#show(resolvePath(backgroundMapView), { params, signal }).then(
@@ -597,6 +602,14 @@ function validWorkbookId(value) {
   }
 }
 
+/** @param {ExternalLinkKey} linkKey */
+function validExternalLinkKey(linkKey) {
+  return (
+    validRepositoryName(linkKey.repositoryName) &&
+    validWorkbookId(linkKey.externalLinkId)
+  );
+}
+
 /** @param {string} value */
 function assertValidGeometryType(value) {
   assert(validGeometryType(value), 'Invalid geometry type');

diff --git a/src/cadenza.test.ts b/src/cadenza.test.ts
@@ -2,7 +2,7 @@ import { cadenza, CadenzaClient, CadenzaError } from './cadenza.js';
 
 const BASE_URL = 'http://example.com';
 const EMBEDDING_TARGET_ID = 'embedding-target';
-const EXTERNAL_LINK_ID = 'external-link';
+const EXTERNAL_LINK_ID = 'qwertzuioplkjhgfdsay';
 const REPOSITORY_NAME = 'repository';
 const WORKBOOK_ID = 'abcdefghijklmnopqrst'; // length=20, Base64
 const WORKSHEET_ID = WORKBOOK_ID;
@@ -164,19 +164,13 @@ describe('Given a Cadenza JS client instance', () => {
 
     beforeEach(() => {
       iframe = document.createElement('iframe');
-      cad = cadenza(BASE_URL, { iframe, targetOrigin: EXTERNAL_LINK_KEY });
+      cad = cadenza(BASE_URL, { iframe, webApplication: EXTERNAL_LINK_KEY });
     });
 
     it('Includes given origin param', () => {
       cad.show(EMBEDDING_TARGET_ID);
-      const expectedKey = `webApplicationLink=${encodeURIComponent(
-        EXTERNAL_LINK_KEY.externalLinkId,
-      )}`;
-      const expectedKeyRepository = `webApplicationLinkRepository=${encodeURIComponent(
-        EXTERNAL_LINK_KEY.repositoryName,
-      )}`;
       expect(cad.iframe!.src).toBe(
-        `${BASE_URL}/w/${EMBEDDING_TARGET_ID}?${expectedKey}&${expectedKeyRepository}`,
+        `${BASE_URL}/w/${EMBEDDING_TARGET_ID}?webApplicationLink=${EXTERNAL_LINK_KEY.externalLinkId}&webApplicationLinkRepository=${EXTERNAL_LINK_KEY.repositoryName}`,
       );
     });
   });