@atlassian/atlassian-connect-js 5.3.190

package/src/host/host-api.js

@@ -0,0 +1,325 @@
+import util from './util';
+import EventDispatcher from './dispatchers/event_dispatcher';
+import DialogExtensionActions from './actions/dialog_extension_actions';
+import DomEventActions from './actions/dom_event_actions';
+import IframeCreate from './iframe-create';
+import jwtActions from './actions/jwt_actions';
+import ModuleActions from './actions/module_actions';
+import EventActions from './actions/event_actions';
+import simpleXDM from 'simple-xdm/host';
+import IframeActions from './actions/iframe_actions';
+import AnalyticsAction from './actions/analytics_action';
+import WebItemUtils from './utils/webitem';
+import getBooleanFeatureFlag from './utils/feature-flag';
+import ModuleProviders from './module-providers';
+import { acjsFrameworkAdaptor } from './ACJSFrameworkAdaptor';
+import Util from './util';
+import simpleXdmUtils from './utils/simplexdm';
+import UrlUtils from './utils/url';
+import ExtensionConfigurationOptionsStore from './stores/extension_configuration_options_store';
+import jwtUtil from './utils/jwt';
+import dialogUtils from './utils/dialog';
+import {isDialogWebItem, triggerWebItem} from './components/webitem';
+
+class HostApi {
+  targetSpecNoDialogs = EventActions.targetSpecNoDialogs;
+  triggerWebItem = triggerWebItem;
+  isDialogWebItem = isDialogWebItem
+
+  constructor(){
+    this.create = (extension) => {
+      return IframeCreate(simpleXdmUtils.extensionConfigSanitizer(extension));
+    }
+    this.dialog = {
+      create: (extension, dialogOptions) => {
+        var dialogBeanOptions = WebItemUtils.getModuleOptionsByAddonAndModuleKey('dialog', extension.addon_key, extension.key);
+        var completeOptions = Util.extend({}, dialogBeanOptions || {}, dialogOptions);
+        DialogExtensionActions.open(extension, completeOptions);
+      },
+      close: (addon_key, closeData) => {
+        const frameworkAdaptor = this.getFrameworkAdaptor();
+        const dialogProvider = frameworkAdaptor.getProviderByModuleName('dialog');
+        if (dialogProvider) {
+          dialogUtils.assertActiveDialogOrThrow(dialogProvider, addon_key);
+          EventActions.broadcast('dialog.close', {
+            addon_key: addon_key
+          }, closeData);
+          dialogProvider.close();
+        } else {
+          DialogExtensionActions.close();
+        }
+      }
+    }
+    this.registerContentResolver = {
+      // This function is not called when a product calls resolveByExtension
+      // This is just a wrapper for ACJS to be able to call the product implementation
+      // Calls from the product will bypass this method and call the product implementation directly
+      resolveByExtension: (callback) => {
+        this._contentResolver = callback;
+        jwtActions.registerContentResolver({callback: callback});
+      }
+    }
+    this.getContentResolver = () => {
+      return this._contentResolver;
+    };
+    this.registerProvider = (componentName, component) => {
+      ModuleProviders.registerProvider(componentName, component);
+    };
+    this.getProvider = (componentName) => {
+      return ModuleProviders.getProvider(componentName);
+    };
+    // We are attaching an instance of ACJSAdaptor to the host so that products are able
+    // to retrieve the identical instance of ACJSAdaptor that ACJS is using.
+    // The product can override the framework adaptor by calling setFrameworkAdaptor().
+    this.frameworkAdaptor = acjsFrameworkAdaptor;
+  }
+  /**
+  * creates an extension
+  * returns an object with extension and iframe attributes
+  * designed for use with non DOM implementations such as react.
+  */
+  createExtension(extension) {
+    extension.options = extension.options || {};
+    extension.options.noDom = true;
+    let createdExtension = simpleXdmUtils.createSimpleXdmExtension(extension);
+    AnalyticsAction.trackIframeBridgeStart(createdExtension.extension);
+    return createdExtension;
+  }
+
+  /**
+   * registers an existing extension with this host
+   * Used when the extension has been created by a sub host
+   */
+  registerExistingExtension(extension_id, data){
+    return simpleXDM.registerExistingExtension(extension_id, data);
+  }
+
+  /**
+   * The product is responsible for setting the framework adaptor.
+   * @param frameworkAdaptor the framework adaptor to use.
+   */
+  setFrameworkAdaptor(frameworkAdaptor) {
+    this.frameworkAdaptor = frameworkAdaptor;
+  }
+
+  getFrameworkAdaptor() {
+    return this.frameworkAdaptor;
+  }
+
+  _cleanExtension(extension){
+    return util.pick(extension, ['id', 'addon_key', 'key', 'options', 'url']);
+  }
+
+  onIframeEstablished (callback) {
+    var wrapper = function(data){
+      callback.call({}, {
+        $el: data.$el,
+        extension: this._cleanExtension(data.extension)
+      });
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:iframe-bridge-established', callback._wrapper);
+  }
+
+  offIframeEstablished (callback) {
+    if(callback._wrapper){
+      EventDispatcher.unregister('after:iframe-bridge-established', callback._wrapper);
+    } else {
+      throw new Error('cannot unregister event dispatch listener without _wrapper reference');
+    }
+  }
+
+  onIframeUnload(callback){
+    EventDispatcher.register('after:iframe-unload', (data) => {
+      callback.call({}, {
+        $el: data.$el,
+        extension: this._cleanExtension(data.extension)
+      });
+    });
+  }
+
+  onPublicEventDispatched(callback) {
+    var wrapper = function(data){
+      callback.call({}, {
+        type: data.type,
+        event: data.event,
+        extension: this._cleanExtension(data.sender)
+      });
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:event-public-dispatch', callback._wrapper);
+  }
+
+  offPublicEventDispatched(callback) {
+    if(callback._wrapper){
+      EventDispatcher.unregister('after:event-public-dispatch', callback._wrapper);
+    } else {
+      throw new Error('cannot unregister event dispatch listener without _wrapper reference');
+    }
+  }
+
+  onKeyEvent (extension_id, key, modifiers, callback) {
+    DomEventActions.registerKeyEvent({extension_id, key, modifiers, callback});
+  }
+
+  offKeyEvent (extension_id, key, modifiers, callback) {
+    DomEventActions.unregisterKeyEvent({extension_id, key, modifiers, callback});
+  }
+
+  onFrameClick (handleIframeClick) {
+    if (typeof handleIframeClick !== 'function') {
+      throw new Error('handleIframeClick must be a function');
+    }
+    DomEventActions.registerClickHandler(handleIframeClick);
+  }
+
+  offFrameClick () {
+    DomEventActions.unregisterClickHandler();
+  }
+
+  destroy (extension_id){
+    IframeActions.notifyIframeDestroyed({id: extension_id});
+  }
+
+  defineModule (name, methods) {
+    ModuleActions.defineCustomModule(name, methods);
+  }
+
+  isModuleDefined (moduleName) {
+    return simpleXDM.isModuleDefined(moduleName);
+  }
+
+  broadcastEvent (type, targetSpec, event) {
+    EventActions.broadcast(type, targetSpec, event);
+  }
+
+  getExtensions (filter) {
+    return simpleXDM.getExtensions(filter);
+  }
+
+  trackDeprecatedMethodUsed(methodUsed, extension) {
+    AnalyticsAction.trackDeprecatedMethodUsed(methodUsed, extension);
+  }
+
+  trackAnalyticsEvent(name, values) {
+    AnalyticsAction.trackExternalEvent(name, values);
+  }
+
+  trackContentResolverEvent(success, extra) {
+    AnalyticsAction.trackContentResolverEvent(success, extra);
+  }
+
+  notifyContentResolverFailed(extension) {
+    EventDispatcher.dispatch('notify-content-resolver-failed', extension);
+  }
+
+  setJwtClockSkew(skew) {
+    jwtActions.setClockSkew(skew);
+  }
+
+  isJwtExpired(jwtString, tokenOnly) {
+    if(tokenOnly) {
+      return jwtUtil.isJwtExpired(jwtString);
+    }
+    return UrlUtils.isJwtExpired(jwtString);
+  }
+
+  hasJwt(url) {
+    return UrlUtils.hasJwt(url);
+  }
+
+  getBooleanFeatureFlag(flagName) {
+    return getBooleanFeatureFlag(flagName);
+  }
+
+  // set configuration option system wide for all extensions
+  // can be either key,value or an object
+  setExtensionConfigurationOptions(obj, value) {
+    ExtensionConfigurationOptionsStore.set(obj, value);
+  }
+
+  getExtensionConfigurationOption(val) {
+    return ExtensionConfigurationOptionsStore.get(val);
+  }
+
+  onIframeTimeout (callback) {
+    var wrapper = function(data){
+      callback.call({}, {
+        extension: this._cleanExtension(data.extension)
+      });
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:iframe-bridge-timeout', callback._wrapper);
+  }
+
+  offIframeTimeout (callback) {
+    if(callback._wrapper){
+      EventDispatcher.unregister('after:iframe-bridge-timeout', callback._wrapper);
+    } else {
+      throw new Error('cannot unregister event dispatch listener without _wrapper reference');
+    }
+  }
+
+  onIframePerformanceTelemetry (callback) {
+    var wrapper = function(data){
+      callback.call({}, {
+        metrics: data.metrics,
+        extension: this._cleanExtension(data.extension)
+      });
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:analytics-iframe-performance', callback._wrapper);
+  }
+
+  offIframePerformanceTelemetry (callback) {
+    if(callback._wrapper){
+      EventDispatcher.unregister('after:analytics-iframe-performance', callback._wrapper);
+    } else {
+      throw new Error('cannot unregister event dispatch listener without _wrapper reference');
+    }
+  }
+
+  onIframeVisible (callback) {
+    var wrapper = function(extension){
+      callback.call({}, {
+        extension: this._cleanExtension(extension)
+      });
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:iframe-visible', callback._wrapper);
+  }
+
+  offIframeVisible (callback) {
+    if(callback._wrapper){
+      EventDispatcher.unregister('after:iframe-visible', callback._wrapper);
+    } else {
+      throw new Error('cannot unregister event dispatch listener without _wrapper reference');
+    }
+  }
+
+  onContentResolverEvent (callback) {
+    var wrapper = function(data) {
+      callback.call({}, data);
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:analytics-content-resolver-track', callback._wrapper);
+  }
+
+  offContentResolverEvent (callback) {
+    if(callback._wrapper){
+      EventDispatcher.unregister('after:analytics-content-resolver-track', callback._wrapper);
+    } else {
+      throw new Error('cannot unregister event dispatch listener without _wrapper reference');
+    }
+  }
+
+  onForwardAnalyticsEvent(callback) {
+    var wrapper = function(eventType, eventData) {
+      callback.call({}, eventType, eventData);
+    };
+    callback._wrapper = wrapper.bind(this);
+    EventDispatcher.register('after:analytics-forward-event', callback._wrapper);
+  }
+}
+
+export default new HostApi();

package/src/host/iframe-create.js

@@ -0,0 +1,7 @@
+import IframeContainerComponent from './components/iframe_container';
+
+function create(extension) {
+  return IframeContainerComponent.createExtension(extension);
+}
+
+export default create;

package/src/host/index.js

@@ -0,0 +1,108 @@
+import EventDispatcher from './dispatchers/event_dispatcher';
+import './components/loading_indicator';
+import events from './modules/events';
+import dialog from './modules/dialog';
+import env from './modules/env';
+import inlineDialog from './modules/inline-dialog';
+import messages from './modules/messages';
+import flag from './modules/flag';
+import analytics from './modules/analytics';
+import scrollPosition from './modules/scroll-position';
+import dropdown from './modules/dropdown';
+import host from './modules/host';
+import theming from './modules/theming';
+import page from './modules/page';
+import HostApi from './host-api';
+import './components/inline_dialog_webitem';
+import './components/dialog_webitem';
+import './components/dialog_extension';
+import simpleXDM from 'simple-xdm/host';
+import getBooleanFeatureFlag from './utils/feature-flag';
+import { observeIframeRemoval } from './utils/removal-observer';
+import DomEventActions from './actions/dom_event_actions';
+import AnalyticsAction from './actions/analytics_action';
+
+/**
+ * Private namespace for host-side code.
+ * @type {*|{}}
+ * @private
+ * @deprecated use AMD instead of global namespaces. The only thing that should be on _AP is _AP.define and _AP.require.
+ */
+if (!window._AP) {
+  window._AP = {};
+}
+
+/*
+ * Add version
+ */
+if (!window._AP.version) {
+  window._AP.version = '%%GULP_INJECT_VERSION%%';
+}
+
+simpleXDM.defineModule('messages', messages);
+simpleXDM.defineModule('flag', flag);
+simpleXDM.defineModule('dialog', dialog);
+simpleXDM.defineModule('inlineDialog', inlineDialog);
+simpleXDM.defineModule('env', env);
+simpleXDM.defineModule('events', events);
+simpleXDM.defineModule('_analytics', analytics);
+simpleXDM.defineModule('scrollPosition', scrollPosition);
+simpleXDM.defineModule('dropdown', dropdown);
+simpleXDM.defineModule('host', host);
+simpleXDM.defineModule('theming', theming);
+simpleXDM.defineModule('page', page);
+
+EventDispatcher.register('module-define-custom', function (data) {
+  simpleXDM.defineModule(data.name, data.methods);
+});
+
+simpleXDM.registerRequestNotifier(function (data) {
+  var dispatchEvent = () => {
+    if (data.type === 'req') {
+      const registeredExtension = simpleXDM.getExtensions(
+        (ext) => ext.extension_id === data.extension_id
+      )[0];
+      if (registeredExtension) {
+        const extension = registeredExtension.extension;
+        EventDispatcher.dispatch('method-invoked', {
+          ...data,
+          extension,
+        });
+      }
+    }
+  };
+
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(dispatchEvent, { timeout: 1000 });
+  } else {
+    dispatchEvent();
+  }
+});
+
+function onDocumentReady() {
+  observeIframeRemoval();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', onDocumentReady)
+} else {
+  onDocumentReady();
+}
+
+if (getBooleanFeatureFlag('acjs_iframe_click_analytics')) {
+  DomEventActions.registerClickHandler(function (iframe, data) {
+    var iframeInfo = JSON.parse(iframe.name || '{}')
+    var iframeInfoOptions = iframeInfo.options || {}
+    var analyticsData = {
+      moduleLocation: iframeInfoOptions.moduleLocation,
+      moduleType: iframeInfoOptions.moduleType,
+      addonKey: data.addon_key,
+      baseUrl: iframeInfoOptions.origin,
+    };
+    AnalyticsAction.trackIframeClick(analyticsData);
+  });
+}
+
+simpleXDM.setFeatureFlagGetter(getBooleanFeatureFlag);
+
+export default HostApi;

package/src/host/module-providers.js

@@ -0,0 +1,13 @@
+class ModuleProviders {
+  constructor(){
+    this._providers = {};
+    this.registerProvider = (name, provider) => {
+      this._providers[name] = provider;
+    };
+    this.getProvider = (name) => {
+      return this._providers[name];
+    };
+  }
+}
+
+export default new ModuleProviders();

package/src/host/modules/_featureFlag.js

@@ -0,0 +1,42 @@
+import simpleXDM from 'simple-xdm/host';
+import getBooleanFeatureFlag from '../utils/feature-flag';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+const allowedPlatformFeatureFlags = [
+  'platform-visual-refresh-icons',
+  'acjs_new_font'
+]
+
+function isPlatformAllowedFeatureFlag(flagName) {
+  return allowedPlatformFeatureFlags.includes(flagName);
+}
+
+function isAllowListedFeatureFlag(flagName) {
+  return flagName.indexOf('acjs-iframe-allowlist') === 0;
+}
+
+let defined = false;
+export default function defineFeatureFlagModule() {
+  if (defined) {
+    return;
+  }
+  defined = true;
+
+  const featureFlagModule = {
+    getBooleanFeatureFlag(flagName) {
+      return new Promise((resolve, reject) => {
+        if(isPlatformAllowedFeatureFlag(flagName)) {
+          resolve(fg(flagName))
+        } else {
+          if (!isAllowListedFeatureFlag(flagName)) {
+            reject(new Error('Only allowlisted flags can be accessed from the iframe.'))
+            return;
+          }
+          resolve(getBooleanFeatureFlag(flagName))
+        }
+      })
+    }
+  }
+  simpleXDM.returnsPromise(featureFlagModule.getBooleanFeatureFlag);
+  simpleXDM.defineModule('_featureFlag', featureFlagModule)
+}

package/src/host/modules/_performance.js

@@ -0,0 +1,54 @@
+import simpleXDM from 'simple-xdm/host';
+
+let performanceModuleDefined = false;
+export const ADDON_KEY_CODEBARREL = 'com.codebarrel.addons.automation';
+
+/**
+ * This is a temporary module for Code Barrel that will be removed when no longer needed.
+ */
+export default function definePerformanceModule() {
+  if (performanceModuleDefined) {
+    return;
+  }
+  performanceModuleDefined = true;
+
+  function isPerformanceModuleAllowed(cb) {
+    return cb._context.extension.addon_key === ADDON_KEY_CODEBARREL
+  }
+
+  const performanceModule = {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/web/api/performance/timing
+     * @returns {Promise<PerformanceTiming>}
+     */
+    getPerformanceTiming(cb) {
+      return new Promise((resolve, reject) =>  {
+        if (!isPerformanceModuleAllowed(cb)) {
+          reject(new Error('This is a restricted API'));
+        }
+        // We need to parse + stringify otherwise we get an empty object
+        resolve(JSON.parse(JSON.stringify(window.performance.timing)));
+      });
+    },
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
+     * @returns {Promise<PerformanceNavigationTiming[] | void>}
+     */
+    getPerformanceNavigationTiming(cb) {
+      return new Promise((resolve, reject) =>  {
+        if (!isPerformanceModuleAllowed(cb)) {
+          reject(new Error('This is a restricted API'));
+        }
+        if (!window.PerformanceNavigationTiming) {
+          resolve(undefined);
+        }
+        const timing = window.performance.getEntriesByType('navigation');
+        resolve(JSON.parse(JSON.stringify(timing)));
+      })
+    }
+  }
+
+  simpleXDM.returnsPromise(performanceModule.getPerformanceTiming);
+  simpleXDM.returnsPromise(performanceModule.getPerformanceNavigationTiming)
+  simpleXDM.defineModule('_performance', performanceModule)
+}

package/src/host/modules/analytics.js

@@ -0,0 +1,17 @@
+import AnalyticsAction from '../actions/analytics_action';
+import util from '../util';
+
+export default {
+  trackDeprecatedMethodUsed: function (methodUsed, callback) {
+    callback = util.last(arguments);
+    AnalyticsAction.trackDeprecatedMethodUsed(methodUsed, callback._context.extension);
+  },
+  trackIframePerformanceMetrics: function trackIframePerformanceMetrics(metrics, callback) {
+    callback = util.last(arguments);
+    AnalyticsAction.trackIframePerformanceMetrics(metrics, callback._context.extension);
+  },
+  trackWebVitals(metrics, callback) {
+    callback = util.last(arguments);
+    AnalyticsAction.trackWebVitals(metrics, callback._context.extension);
+  }
+}