From 0f2967d94ecb06690b83381a8117b3f5a9d818c0 Mon Sep 17 00:00:00 2001 From: smoljo Date: Mon, 25 Sep 2023 09:40:30 +0200 Subject: [PATCH] CADENZA-33304 replace targetOrigin with webApplication --- CHANGELOG.md | 2 +- src/cadenza.js | 53 ++++++++++++++++++++++++++++----------------- src/cadenza.test.ts | 12 +++------- 3 files changed, 37 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0907a9a9..1526ab68 100644 --- 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 index ed641614..361e4949 100644 --- 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 index 69b471bb..82836e67 100644 --- 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}`, ); }); });