@atlassian/atlassian-connect-js 5.3.190

package/src/plugin/events.js

@@ -0,0 +1,246 @@
+import AP from 'simple-xdm/combined';
+
+/**
+ * The Events module provides a mechanism for emitting and receiving events.<br>
+ *
+ * A event emitted by `emit` method will only be received by the modules defined in the same add-on.<br>
+ * Public events that emitted by `emitPublic` are used for cross add-on communication.
+ * They can be received by any add-on modules that are currently presented on the page.
+ *
+ * This module is currently not supported on mobile. See
+ * <a href='https://jira.atlassian.com/browse/JRACLOUD-79910'>JRACLOUD-79910</a> for more details.
+ *
+ * <h3>Basic example</h3>
+ * Add-on A:
+ * ```
+ * // The following will create an alert message every time the event `customEvent` is triggered.
+ * AP.events.on('customEvent', function(){
+ *   alert('event fired');
+ * });
+ *
+ *
+ * AP.events.emit('customEvent');
+ * AP.events.emitPublic('customPublicEvent');
+ * ```
+ *
+ *
+ * Add-on B:
+ * ```
+ * // The following will create an alert message every time the event `customPublicEvent` is triggered by add-on A.
+ * AP.events.onPublic('customPublicEvent', function(){
+ *   alert('public event fired');
+ * });
+ * ```
+ *
+ * @name Events
+ * @module
+ */
+
+class Events {
+  constructor(){
+    this._events = {};
+    this.ANY_PREFIX = '_any';
+    this.methods = ['off', 'offAll', 'offAny', 'on', 'onAny', 'once'];
+  }
+
+  _anyListener(data, callback){
+    var eventName = callback._context.eventName;
+    var any = this._events[this.ANY_PREFIX] || [];
+    var byName = this._events[eventName] || [];
+
+    if(!Array.isArray(data)){
+      data = [data];
+    }
+
+    any.forEach((handler) => {
+      //clone data before modifying
+      var args = data.slice(0);
+      args.unshift(eventName);
+      args.push({
+        args: data,
+        name: eventName
+      });
+      handler.apply(null, args);
+    });
+
+    byName.forEach((handler) => {
+      handler.apply(null, data);
+    });
+  }
+
+  off(name, listener){
+    if (this._events[name]) {
+      var index = this._events[name].indexOf(listener);
+      if (index > -1) {
+        this._events[name].splice(index, 1);
+      }
+      if(this._events[name].length === 0) {
+        delete this._events[name];
+      }
+    }
+  }
+
+  offAll(name){
+    delete this._events[name];
+  }
+
+  offAny(listener){
+    this.off(this.ANY_PREFIX, listener);
+  }
+
+  on(name, listener){
+    if(!this._events[name]){
+      this._events[name] = [];
+    }
+    this._events[name].push(listener);
+  }
+  onAny(listener){
+    this.on(this.ANY_PREFIX, listener);
+  }
+  once(name, listener){
+    var _that = this;
+    function runOnce() {
+      listener.apply(null, arguments);
+      _that.off(name, runOnce);
+    }
+    this.on(name, runOnce);
+  }
+  /**
+   * Adds a listener for all occurrences of an event of a particular name.<br>
+   * Listener arguments include any arguments passed to `events.emit`, followed by an object describing the complete event information.
+   * @name on
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The event name to subscribe the listener to
+   * @param {Function} listener A listener callback to subscribe to the event name
+   */
+
+  /**
+   * Adds a listener for all occurrences of a public event of a particular name.<br>
+   * Listener arguments include any arguments passed to `events.emitPublic`, followed by an object describing the complete event information.<br>
+   * Event emitter's information will be passed to the first argument of the filter function. The listener callback will only be called when filter function returns `true`.
+   * @name onPublic
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The event name to subscribe the listener to
+   * @param {Function} listener A listener callback to subscribe to the event name
+   * @param {Function} [filter] A filter function to filter the events. Callback will always be called when a matching event occurs if the filter is unspecified
+   */
+
+  /**
+   * Adds a listener for one occurrence of an event of a particular name.<br>
+   * Listener arguments include any argument passed to `events.emit`, followed by an object describing the complete event information.
+   * @name once
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The event name to subscribe the listener to
+   * @param {Function} listener A listener callback to subscribe to the event name
+   */
+
+  /**
+   * Adds a listener for one occurrence of a public event of a particular name.<br>
+   * Listener arguments include any argument passed to `events.emit`, followed by an object describing the complete event information.<br>
+   * Event emitter's information will be passed to the first argument of the filter function. The listener callback will only be called when filter function returns `true`.
+   * @name oncePublic
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The event name to subscribe the listener to
+   * @param {Function}listener A listener callback to subscribe to the event name
+   * @param {Function} [filter] A filter function to filter the events. Callback will always be called when a matching event occurs if the filter is unspecified
+   */
+
+  /**
+   * Adds a listener for all occurrences of any event, regardless of name.<br>
+   * Listener arguments begin with the event name, followed by any arguments passed to `events.emit`, followed by an object describing the complete event information.
+   * @name onAny
+   * @method
+   * @memberof module:Events#
+   * @param {Function} listener A listener callback to subscribe for any event name
+   */
+
+  /**
+   * Adds a listener for all occurrences of any event, regardless of name.<br>
+   * Listener arguments begin with the event name, followed by any arguments passed to `events.emit`, followed by an object describing the complete event information.<br>
+   * Event emitter's information will be passed to the first argument of the filter function. The listener callback will only be called when filter function returns `true`.
+   * @name onAnyPublic
+   * @method
+   * @memberof module:Events#
+   * @param {Function} listener A listener callback to subscribe for any event name
+   * @param {Function} [filter] A filter function to filter the events. Callback will always be called when a matching event occurs if the filter is unspecified
+   */
+
+  /**
+   * Removes a particular listener for an event.
+   * @name off
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The event name to unsubscribe the listener from
+   * @param {Function} listener The listener callback to unsubscribe from the event name
+   */
+
+  /**
+   * Removes a particular listener for a public event.
+   * @name offPublic
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The event name to unsubscribe the listener from
+   * @param {Function} listener The listener callback to unsubscribe from the event name
+   */
+
+  /**
+   * Removes all listeners from an event name, or unsubscribes all event-name-specific listeners
+   * if no name if given.
+   * @name offAll
+   * @method
+   * @memberof module:Events#
+   * @param {String} [name] The event name to unsubscribe all listeners from
+   */
+
+  /**
+   * Removes all listeners from a public event name, or unsubscribes all event-name-specific listeners for public events
+   * if no name if given.
+   * @name offAllPublic
+   * @method
+   * @memberof module:Events#
+   * @param {String} [name] The event name to unsubscribe all listeners from
+   */
+
+  /**
+   * Removes an `any` event listener.
+   * @name offAny
+   * @method
+   * @memberof module:Events#
+   * @param {Function} listener A listener callback to unsubscribe from any event name
+   */
+
+  /**
+   * Removes an `anyPublic` event listener.
+   * @name offAnyPublic
+   * @method
+   * @memberof module:Events#
+   * @param {Function} listener A listener callback to unsubscribe from any event name
+   */
+
+  /**
+   * Emits an event on this bus, firing listeners by name as well as all 'any' listeners.<br>
+   * Arguments following the name parameter are captured and passed to listeners.
+   * @name emit
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The name of event to emit
+   * @param {String[]} args 0 or more additional data arguments to deliver with the event
+   */
+
+  /**
+   * Emits a public event on this bus, firing listeners by name as well as all 'anyPublic' listeners.<br>
+   * The event can be received by any add-on modules that are currently presented on the page.<br>
+   * Arguments following the name parameter are captured and passed to listeners.
+   * @name emitPublic
+   * @method
+   * @memberof module:Events#
+   * @param {String} name The name of event to emit
+   * @param {String[]} args 0 or more additional data arguments to deliver with the event
+   */
+}
+
+export default Events;

package/src/plugin/extension_configuration_options_store.js

@@ -0,0 +1,27 @@
+// duplicated from ./host/stores/extension_configuration_options_store
+// due to a huge build size difference
+
+import util from './util';
+
+class ExtensionConfigurationOptionsStore {
+  constructor() {
+    this.store = {};
+  }
+  set(obj, val) {
+    if(val) {
+      var toSet = {};
+      toSet[obj] = val;
+    } else {
+      toSet = obj;
+    }
+    util.extend(this.store, toSet);
+  }
+  get(key) {
+    if(key) {
+      return this.store[key];
+    }
+    return util.extend({}, this.store); //clone
+  }
+}
+
+export default new ExtensionConfigurationOptionsStore();

package/src/plugin/featureFlag.js

@@ -0,0 +1,8 @@
+import AP from 'simple-xdm/combined';
+
+export async function getBooleanFeatureFlagIframe(flagName) {
+  if (AP._featureFlag && AP._featureFlag.getBooleanFeatureFlag) {
+    return AP._featureFlag.getBooleanFeatureFlag(flagName);
+  }
+  return false;
+}

package/src/plugin/index.js

@@ -0,0 +1,118 @@
+import AP from 'simple-xdm/combined';
+import deprecate from './deprecate';
+import $ from './dollar';
+import consumerOptions from 'simple-xdm/src/plugin/consumer-options';
+import EventsInstance from './events-instance';
+import PublicEventsInstance from './public-events';
+import './dialog';
+import AMD from './amd';
+import Meta from './meta';
+import Theming, {loadLegacyTextColorStyles} from './theming';
+import _util from './util';
+import ExtensionConfigurationOptionsStore from './extension_configuration_options_store';
+import analytics from './analytics';
+import { setBooleanFeatureFlagResolver } from '@atlaskit/platform-feature-flags';
+
+AP._hostModules._dollar = $;
+AP._hostModules['inline-dialog'] = AP._hostModules.inlineDialog;
+
+if (consumerOptions.get('sizeToParent') === true) {
+  AP.env && AP.env.sizeToParent(consumerOptions.get('hideFooter') === true);
+} else {
+  AP.env && AP.env.hideFooter(consumerOptions.get('hideFooter') === true);
+}
+
+if (consumerOptions.get('base') === true) {
+  AP.env && AP.env.getLocation(loc => {
+    $('head').append({ tag: 'base', href: loc, target: '_parent' });
+  });
+}
+
+$.each(EventsInstance.methods, (i, method) => {
+  if (AP._hostModules && AP._hostModules.events) {
+    AP._hostModules.events[method] = AP.events[method] = EventsInstance[method].bind(EventsInstance);
+    AP._hostModules.events[method + 'Public'] = AP.events[method + 'Public'] = PublicEventsInstance[method].bind(PublicEventsInstance);
+  }
+});
+
+AP.define = deprecate((...args) => AMD.define(...args), 'AP.define()', null, '5.0');
+
+AP.require = deprecate((...args) => AMD.require(...args), 'AP.require()', null, '5.0');
+
+var margin = AP._data.options.isDialog ? '10px 10px 0 10px' : '0';
+if (consumerOptions.get('margin') !== false) {
+  var setBodyMargin = function() {
+    if (document.body) {
+      document.body.style.setProperty('margin', margin, 'important');
+    }
+  }
+  setBodyMargin(); // Try to set it straight away
+  window.addEventListener('DOMContentLoaded', setBodyMargin); // If it doesn't exist now (likely) we can set it later
+}
+
+AP.Meta = {
+  get: Meta.getMeta
+};
+AP.meta = Meta.getMeta;
+AP.localUrl = Meta.localUrl;
+
+AP._hostModules._util = AP._util = {
+  each: _util.each,
+  log: _util.log,
+  decodeQueryComponent: _util.decodeQueryComponent,
+  bind: _util.bind,
+  unbind: _util.unbind,
+  extend: _util.extend,
+  trim: _util.trim,
+  debounce: _util.debounce,
+  isFunction: _util.isFunction,
+  handleError: _util.handleError
+};
+
+if (AP.defineModule) {
+  AP.defineModule('env', {
+    resize: function(w, h, callback) {
+      var iframe = document.getElementById(callback._context.extension_id);
+      iframe.style.width = w + (typeof w === 'number' ? 'px' : '');
+      iframe.style.height = h + (typeof h === 'number' ? 'px' : '');
+    }
+  });
+}
+
+if (AP._data && AP._data.origin) {
+  AP.registerAny(function(data, callback) {
+    // dialog.close event doesn't have event data
+    if (data && data.event && data.sender) {
+      PublicEventsInstance._anyListener(data, callback);
+    } else {
+      EventsInstance._anyListener(data, callback);
+    }
+  });
+}
+
+const WEB_VITALS_TIMEOUT = 10000; // 10 seconds
+analytics.setupWebVitals(WEB_VITALS_TIMEOUT);
+
+// Sets up theme-related event listeners but DOES NOT react to them.
+// The Connect app has to call AP.theming.initializeTheming() to start reacting to theme changes in the host.
+Theming.initializeThemeListeners();
+// Also load in the confluence macro body stylesheet
+loadLegacyTextColorStyles()
+
+// Reads platform feature flags from the parent and sets them as global variables.
+setBooleanFeatureFlagResolver((flagName) => AP._data.options.platformFeatureFlags?.[flagName] || false);
+
+// gets the global options from the parent iframe (if present) so they can propagate to future sub-iframes.
+ExtensionConfigurationOptionsStore.set(AP._data.options.globalOptions);
+
+if (document.readyState === 'complete') {
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(analytics.sendMetrics, { timeout: 1000 });
+  } else {
+    analytics.sendMetrics();
+  }
+} else {
+  window.addEventListener('load', analytics.sendMetrics);
+}
+
+export default AP;

package/src/plugin/meta.js

@@ -0,0 +1,14 @@
+import $ from './dollar';
+
+function getMeta(name) {
+  return $(`meta[name='ap-${name}']`).attr('content');
+}
+
+export default {
+  getMeta: getMeta,
+
+  localUrl: function(path) {
+    const url = getMeta('local-base-url');
+    return typeof url === 'undefined' || typeof path === 'undefined' ? url : `${url}${path}`;
+  }
+}

package/src/plugin/public-events.js

@@ -0,0 +1,73 @@
+import Events from './events';
+import AP from 'simple-xdm/combined';
+
+class PublicEvents extends Events {
+  constructor(){
+    super();
+    this.methods = ['offPublic', 'offAllPublic', 'offAnyPublic', 'onPublic', 'onAnyPublic', 'oncePublic'];
+  }
+
+  _filterEval(filter, toCompare){
+    var value = true;
+    if(!filter){
+      return value;
+    }
+    switch(typeof filter) {
+    case 'function':
+      value = Boolean(filter.call(null, toCompare));
+      break;
+    case 'object':
+      value = Object.getOwnPropertyNames(filter).every(function(prop){
+        return toCompare[prop] === filter[prop];
+      });
+      break;
+    }
+    return value;
+  }
+
+  once(name, listener, filter) {
+    var that = this;
+    function runOnce(data) {
+      listener.apply(null, data);
+      that.off(name, runOnce);
+    }
+    this.on(name, runOnce, filter);
+  }
+
+  on(name, listener, filter){
+    listener._wrapped = function(data){
+      if(this._filterEval(filter, data.sender)) {
+        listener.apply(null, data.event);
+      }
+    }.bind(this);
+    super.on(name, listener._wrapped);
+  }
+
+  off(name, listener) {
+    if(listener._wrapped) {
+      super.off(name, listener._wrapped);
+    } else {
+      super.off(name, listener);
+    }
+  }
+
+  onAny(listener, filter) {
+    listener._wrapped = function(data){
+      if(data.sender && this._filterEval(filter, data.sender)) {
+        listener.apply(null, data.event);
+      }
+    };
+    super.onAny(listener._wrapped);
+  }
+
+  offAny(listener) {
+    if(listener._wrapped) {
+      super.offAny(name, listener._wrapped);
+    } else {
+      super.offAny(name, listener);
+    }
+  }
+
+}
+
+export default new PublicEvents;

package/src/plugin/theming.js

@@ -0,0 +1,211 @@
+import AP from 'simple-xdm/combined';
+import { setGlobalTheme } from '@atlaskit/tokens';
+import { getBooleanFeatureFlagIframe } from './featureFlag';
+
+// The CDN URL is now dynamic since we now serve all.js for both commercial and in FedRamp
+// It will be injected during the build process
+// eslint-disable-next-line no-undef
+const CDN_DOMAIN = process.env.CDN_DOMAIN;
+const CDN_URL = `https://${CDN_DOMAIN}`;
+
+function appendStyle({ rel, href, as, type, crossOrigin, id, attr }) {
+  const link = document.createElement('link');
+
+  if (rel) {
+    link.rel = rel;
+  }
+
+  if (href) {
+    link.href = href;
+  }
+
+  if (as) {
+    link.as = as;
+  }
+
+  if (type) {
+    link.type = type;
+  }
+
+  if (crossOrigin) {
+    link.crossOrigin = crossOrigin
+  }
+
+  if (id && attr) {
+    link.dataset[attr] = id
+  }
+
+  document.head.appendChild(link);
+}
+
+function themeLoader(id) {
+  const stylesheetUrl = `${CDN_URL}/themes/atlaskit-tokens_${id}.css`;
+
+  if (document.querySelector(`link[href="${stylesheetUrl}"]`)) {
+    return;
+  }
+
+  appendStyle({
+    rel: 'stylesheet',
+    id,
+    attr: 'theme',
+    href: stylesheetUrl,
+  })
+}
+
+function appendSurface(surface) {
+  document.documentElement.dataset.surface = surface;
+
+  if (document.querySelector('link[data-surface]')) {
+    return;
+  }
+
+  appendStyle({
+    rel: 'stylesheet',
+    id: surface,
+    attr: 'surface',
+    href: `${CDN_URL}/surfaces.css`
+  })
+}
+
+function removeSurface() {
+  delete document.documentElement.dataset.surface;
+}
+
+export async function loadLegacyTextColorStyles() {
+  if (AP._data.options.moduleType !== 'dynamicContentMacros') {
+    return;
+  }
+  loadLegacyTextColorStylesCdn(); // Load via Connect CDN stylesheet
+}
+
+export function loadLegacyTextColorStylesCdn() {
+  if (document.querySelector('link[data-legacy-text-colors]')) {
+    return;
+  }
+  appendStyle({
+    rel: 'stylesheet',
+    id: 'legacy-text-colors',
+    attr: 'legacyTextColors',
+    href: `${CDN_URL}/legacy-text-colors.css`
+  })
+}
+
+async function setTheme(options) {
+  await setGlobalTheme(options, themeLoader); // Load via Connect CDN stylesheet
+}
+
+let hasRegisteredCSPViolationHandler = false;
+function registerCSPViolationHandler() {
+  if (hasRegisteredCSPViolationHandler) {
+    return;
+  }
+  hasRegisteredCSPViolationHandler = true;
+
+  window.addEventListener('securitypolicyviolation', (event) => {
+    if (event.blockedURI.includes(CDN_DOMAIN)) {
+      console.warn(`CSP violation detected for ${event.violatedDirective} in app ${event.documentURI}
+Please add ${CDN_URL} to your security policy for script-src and style-src.
+See https://developer.atlassian.com/platform/marketplace/security-requirements/#connect-apps for details.`);
+    }
+  });
+
+}
+
+async function preloadWebFonts(data) {
+  try {
+    const hasRefreshedTypography = data && data.initialTheme && data.initialTheme.typography === 'typography-refreshed';
+    const isInNewFontCohort = await getBooleanFeatureFlagIframe('acjs_new_font')
+    if (!isInNewFontCohort || !hasRefreshedTypography) {
+      return;
+    }
+
+    const fontRoot = 'https://ds-cdn.prod-east.frontend.public.atl-paas.net'
+    const woffUrl = `${fontRoot}/assets/fonts/atlassian-sans/v2/AtlassianSans-latin.woff2`
+    const cssUrl = `${fontRoot}/assets/font-rules/v4/atlassian-fonts.css`
+
+    if (!document.querySelector(`link[href="${fontRoot}"]`)) {
+      appendStyle({ rel: 'preconnect', href: fontRoot });
+    }
+
+    if (!document.querySelector(`link[href="${woffUrl}"]`)) {
+      appendStyle({
+        rel: 'preload',
+        href: woffUrl,
+        as: 'font',
+        type: 'font/woff2',
+        crossOrigin: 'true'
+      })
+    }
+
+    if (!document.querySelector(`link[href="${cssUrl}"]`)) {
+      appendStyle({
+        rel: 'preload stylesheet',
+        href: cssUrl,
+        as: 'style',
+        crossOrigin: 'true'
+      })
+    }
+  } catch (_err) {
+    // do nothing with the error
+  }
+}
+
+const Theming = {
+  isThemingEnabled: false,
+  forceNoCleanup: false,
+
+  async onThemeInitialized(data) {
+    Theming.isThemingEnabled = true;
+    Theming.forceNoCleanup = data.forceNoCleanup || false;
+    registerCSPViolationHandler()
+    preloadWebFonts(data);
+    await Theming.onThemeChanged(data);
+    if (window.AP && window.AP.theming && window.AP.theming._finishedInitTheming) {
+      window.AP.theming._finishedInitTheming();
+    }
+  },
+
+  async onThemeChanged(data) {
+    if (!Theming.isThemingEnabled) {
+      return;
+    }
+
+    const newTheme = data.initialTheme || data.newTheme;
+
+    if (!newTheme || Object.keys(newTheme).length === 0) {
+      if (Theming.forceNoCleanup) {
+        await setTheme({ colorMode: 'light' });
+        removeSurface();
+        return;
+      }
+
+      removeSurface();
+      document.documentElement.removeAttribute('data-theme');
+      document.documentElement.removeAttribute('data-color-mode');
+      return;
+    }
+
+    await setTheme(newTheme);
+
+    // Remove existing surface styles.
+    removeSurface();
+    if (!!data.surface) {
+      // Surface styles must be applied after themes for specificity.
+      appendSurface(data.surface);
+    }
+  },
+
+  initializeThemeListeners() {
+    if (!AP.theming) {
+      return;
+    }
+
+    AP.register({
+      theme_initialized: Theming.onThemeInitialized,
+      theme_changed: Theming.onThemeChanged,
+    });
+  },
+};
+
+export default Theming;