@atlassian/atlassian-connect-js 5.3.190

package/src/host/modules/dropdown.js

@@ -0,0 +1,255 @@
+/**
+* DO NOT INCLUDE ME IN THE PUBLIC DOCUMENTATION
+* there is no AUI implementation of this
+*/
+
+import HostApi from '../host-api';
+import util from '../util';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import EventActions from '../actions/event_actions';
+import DropdownActions from '../actions/dropdown_actions';
+
+var dropdownProvider;
+
+function buildListItem(listItem) {
+  let finishedListItem = {};
+  if (typeof listItem === 'string') {
+    finishedListItem.content = listItem;
+  } else if (listItem.text && typeof listItem.text === 'string') {
+    finishedListItem.content = listItem.text;
+    if(typeof listItem.disabled === 'boolean') {
+      finishedListItem.disabled = listItem.disabled;
+    }
+    if(typeof listItem.itemId !== 'undefined') {
+      finishedListItem.itemId = listItem.itemId;
+    }
+  } else {
+    throw new Error('Unknown dropdown list item format.');
+  }
+  return finishedListItem;
+}
+
+function moduleListToApiList(list) {
+  return list.map((item) => {
+    if (item.list && Array.isArray(item.list)) {
+      let returnval = {
+        heading: item.heading
+      }
+      returnval.items = item.list.map((listitem) => {
+        return buildListItem(listitem);
+      });
+      return returnval;
+    }
+  });
+}
+
+/**
+* @class DropdownItem
+* A single item in a dropdown menu can be a string or an object
+* @param {String} itemId The id of a single dropdown item
+* @param {String} text    The text to display in the dropdown item
+*/
+
+/**
+* @module Dropdown
+* @description Dropdown menu that can go outside the iframe bounds.
+* @example
+* // create a dropdown menu with 1 section and 2 items
+* var mydropdown = {
+*   dropdownId: 'my-dropdown',
+*   list: [{
+*     heading: 'section heading',
+*     list: [
+*       {text: 'one'},
+*       {text: 'two'}
+*     ]
+*   }]
+* };
+*
+* AP.events.on('dropdown-item-selected', (data) =>{
+*   console.log('dropdown item selected', data.dropdownId, data.item);
+* });
+*
+* AP.dropdown.create(mydropdown);
+* // button is an element in our document that triggered the dropdown
+* let rect = document.querySelector('button').getBoundingClientRect();
+* AP.dropdown.showAt('my-dropdown', rect.left, rect.top, rect.width);
+*
+*/
+
+export default {
+  /**
+  * @name create
+  * @method
+  * @description Creates a new dropdown.
+  * @param {Object} options             Options of the dropdown.
+  * @param {String} options.dropdownId A unique identifier for the dropdown that will be referenced in events.
+  * @param {String} options.list        An array containing dropdown items {Dropdown~DropdownItem}
+  * @example
+  * // create a dropdown menu with 1 section and 2 items
+  * var mydropdown = {
+  *   dropdownId: 'my-dropdown',
+  *   list: [{
+  *     heading: 'section heading',
+  *     list: [
+  *       {text: 'one'},
+  *       {text: 'two'}
+  *     ]
+  *   }]
+  * };
+  *
+  * AP.dropdown.create(mydropdown);
+  */
+  create(options, callback) {
+    callback = util.last(arguments);
+    if (typeof options !== 'object') {
+      return;
+    }
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+    if (dropdownProvider) {
+      const dropdownGroups = moduleListToApiList(options.list);
+      const dropdownProviderOptions = {
+        dropdownId: options.dropdownId,
+        dropdownGroups: dropdownGroups,
+        dropdownItemNotifier: (data) => {
+          DropdownActions.itemSelected(data.dropdownId, data.item, callback._context.extension);
+        }
+      };
+      dropdownProvider.create(dropdownProviderOptions, callback._context);
+      return dropdownProviderOptions;
+    }
+  },
+
+  /**
+  * @name showAt
+  * @method
+  * @description Displays a created dropdown menu.
+  * @param {String} dropdownId   Id used when creating the dropdown
+  * @param {String} x             x position from the edge of your iframe to display
+  * @param {String} y             y position from the edge of your iframe to display
+  * @param {String} width         Optionally enforce a width for the dropdown menu
+  * @example
+  * // create a dropdown menu with 1 section and 2 items
+  * var mydropdown = {
+  *   dropdownId: 'my-dropdown',
+  *   list: [{
+  *     list:['one', 'two']
+  *   }]
+  * };
+  *
+  * AP.dropdown.create(mydropdown);
+  * // Get the button that activated the dropdown
+  * let rect = document.querySelector('button').getBoundingClientRect();
+  * AP.dropdown.showAt('my-dropdown', rect.left, rect.top, rect.width);
+  */
+  showAt(dropdownId, x, y, width) {
+    let callback = util.last(arguments);
+    let rect = {left: 0, top: 0};
+    let iframe = document.getElementById(callback._context.extension_id);
+    if(iframe) {
+      rect = iframe.getBoundingClientRect();
+    } else {
+      console.error('ACJS: no iframe found for dropdown');
+    }
+
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+    if (dropdownProvider) {
+      const dropdownProviderArgs = {
+        dropdownId: dropdownId,
+        x: x,
+        y: y,
+        width: width
+      };
+      dropdownProvider.showAt(dropdownProviderArgs, {
+        iframeDimensions: rect,
+        onItemSelection: (dropdownId, item) => {
+          DropdownActions.itemSelected(dropdownId, item, callback._context.extension);
+        }
+      });
+    }
+  },
+  /**
+  * @name hide
+  * @method
+  * @description Hide a dropdown menu
+  * @param {String} dropdownId The id of the dropdown to hide
+  * @example
+  * AP.dropdown.create('my-dropdown');
+  * AP.dropdown.hide('my-dropdown');
+  */
+  hide(id) {
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+    if (dropdownProvider) {
+      dropdownProvider.hide(id);
+    }
+  },
+
+  /**
+  * @name itemDisable
+  * @method
+  * @description Disable an item in the dropdown menu
+  * @param {String} dropdownId The id of the dropdown
+  * @param {String} itemId     The dropdown item to disable
+  * @example
+  * AP.dropdown.create('my-dropdown');
+  * AP.dropdown.itemDisable('my-dropdown', 'item-id');
+  */
+  itemDisable(dropdownId, itemId) {
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+    if (dropdownProvider) {
+      dropdownProvider.itemDisable(dropdownId, itemId);
+    }
+  },
+
+  /**
+  * @name itemEnable
+  * @method
+  * @description Hide a dropdown menu
+  * @param {String} dropdownId The id of the dropdown
+  * @param {String} itemId The id of the dropdown item to enable
+  * @example
+  * AP.dropdown.create('my-dropdown');
+  * AP.dropdown.itemEnable('my-dropdown', 'item-id');
+  */
+  itemEnable(dropdownId, itemId) {
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+    if (dropdownProvider) {
+      dropdownProvider.itemEnable(dropdownId, itemId);
+    }
+  }
+
+}
+
+
+EventDispatcher.register('dropdown-item-selected', (data) => {
+  EventActions.broadcast('dropdown-item-selected', {
+    addon_key: data.extension.addon_key,
+    key: data.extension.key
+  }, {
+    dropdownId: data.id,
+    item: data.item
+  });
+});
+
+// friendly unload with connectHost.destroy
+EventDispatcher.register('iframe-destroyed', (data) => {
+  const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+  const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+  if (dropdownProvider) {
+    dropdownProvider.destroyByExtension(data.extension.extension_id);
+  }
+});
+
+// unfriendly unload by removing the iframe from the DOM
+EventDispatcher.register('after:iframe-unload', (data) => {
+  const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+  const dropdownProvider = frameworkAdaptor.getProviderByModuleName('dropdown');
+  if (dropdownProvider) {
+    dropdownProvider.destroyByExtension(data.extension.extension_id);
+  }
+});

package/src/host/modules/env.js

@@ -0,0 +1,156 @@
+import EnvActions from '../actions/env_actions';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import util from '../util';
+import ModuleProviders from '../module-providers';
+import {Flags} from '../utils/feature-flag';
+
+var debounce = util.debounce;
+var resizeFuncHolder = {};
+// ignore resize events for iframes that use sizeToParent
+var ignoreResizeForExtension = [];
+var sizeToParentExtension = {};
+
+/**
+ * Enables apps to resize their iframes.
+ * @exports iframe
+ */
+export default {
+  /**
+   * Get the location of the current page of the host product.
+   *
+   * @param {Function} callback function (location) {...} The callback to pass the location to.
+   * @example
+   * AP.getLocation(function(location){
+   *   alert(location);
+   * });
+   */
+  getLocation: function(callback) {
+    callback = util.last(arguments);
+    let pageLocationProvider = ModuleProviders.getProvider('get-location');
+    if (typeof pageLocationProvider === 'function') {
+      callback(pageLocationProvider());
+    } else {
+      callback(window.location.href);
+    }
+  },
+  /**
+   * Resize the iframe to a width and height.
+   *
+   * Only content within an element with the class `ac-content` is resized automatically.
+   * Content without this identifier is sized according to the `body` element, and
+   * is *not* dynamically resized. The recommended DOM layout for your app is:
+   *
+   * ``` html
+   * <div class="ac-content">
+   *     <p>Hello World</p>
+   *     <div id="your-id-here">
+   *         <p>App content goes here</p>
+   *     </div>
+   *
+   *     ...this area reserved for the resize sensor divs
+   * </div>
+   * ```
+   *
+   * The resize sensor div is added on the iframe's [load event](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event).
+   * Removing the `ac-content` element after this, prevents resizing from working correctly.
+   *
+   * This method cannot be used in dialogs.
+   *
+   * @method
+   * @param {String} width   The desired width in pixels or percentage.
+   * @param {String} height  The desired height in pixels or percentage.
+   * @example
+   * AP.resize('400','400');
+   */
+  resize: function(width, height, callback) {
+    callback = util.last(arguments);
+    let addon = ModuleProviders.getProvider('addon');
+    if (addon) {
+      addon.resize(width, height, callback._context);
+    } else {
+      var iframeId = callback._context.extension.id;
+      var options = callback._context.extension.options;
+      if (ignoreResizeForExtension.indexOf(iframeId) !== -1 || (options && options.isDialog)) {
+        return false;
+      }
+
+      if (!resizeFuncHolder[iframeId]) {
+        resizeFuncHolder[iframeId] = debounce(function(dwidth, dheight, dcallback) {
+          EnvActions.iframeResize(dwidth, dheight, dcallback._context);
+        }, 50);
+      }
+
+      resizeFuncHolder[iframeId](width, height, callback);
+    }
+    return true;
+  },
+  /**
+   * Resize the iframe so that it takes up the entire page.
+   *
+   * This method is only available for general page modules.
+   *
+   * @method
+   * @example
+   * AP.sizeToParent();
+   */
+  sizeToParent: debounce(function(hideFooter, callback) {
+    callback = util.last(arguments);
+    let addon = ModuleProviders.getProvider('addon');
+    if (addon) {
+      addon.sizeToParent(hideFooter, callback._context);
+    } else {
+      // sizeToParent is only available for general-pages
+      if (callback._context.extension.options.isFullPage) {
+        // This adds border between the iframe and the page footer as the connect addon has scrolling content and can't do this
+        util.getIframeByExtensionId(callback._context.extension_id).addClass('full-size-general-page');
+        util.getIframeByExtensionId(callback._context.extension_id).addClass('sized-to-parent');
+        EnvActions.sizeToParent(callback._context.extension_id, hideFooter);
+        sizeToParentExtension[callback._context.extension_id] = { hideFooter: hideFooter };
+      } else {
+        // This is only here to support integration testing
+        // see com.atlassian.plugin.connect.test.pageobjects.RemotePage#isNotFullSize()
+        util.getIframeByExtensionId(callback._context.extension_id).addClass('full-size-general-page-fail');
+      }
+    }
+  }),
+  /**
+   * Hide the footer.
+   *
+   * @method
+   * @param {boolean} hideFooter Whether the footer should be hidden.
+   * @ignore
+   */
+  hideFooter: function(hideFooter) {
+    if (hideFooter) {
+      EnvActions.hideFooter(hideFooter);
+    }
+  }
+};
+
+const _removeIframeReferenceAfterUnloadAndDestroyed = (extensionId) => {
+  delete resizeFuncHolder[extensionId];
+  delete sizeToParentExtension[extensionId];
+  if (ignoreResizeForExtension.indexOf(extensionId) !== -1) {
+    ignoreResizeForExtension.splice(ignoreResizeForExtension.indexOf(extensionId), 1);
+  }
+}
+
+EventDispatcher.register('host-window-resize', data => {
+  Object.getOwnPropertyNames(sizeToParentExtension).forEach(extensionId => {
+    EnvActions.sizeToParent(extensionId, sizeToParentExtension[extensionId].hideFooter);
+  });
+});
+
+EventDispatcher.register('after:iframe-unload', function(data) {
+  _removeIframeReferenceAfterUnloadAndDestroyed(data.extension.id);
+});
+
+EventDispatcher.register('after:iframe-destroyed', function(data) {
+  _removeIframeReferenceAfterUnloadAndDestroyed(data.extension.extension.id);
+});
+
+EventDispatcher.register('before:iframe-size-to-parent', function(data) {
+  if (ignoreResizeForExtension.indexOf(data.extensionId) === -1) {
+    ignoreResizeForExtension.push(data.extensionId);
+  }
+});

package/src/host/modules/events.js

@@ -0,0 +1,28 @@
+import EventActions from '../actions/event_actions';
+import Util from '../util';
+
+export default {
+  emit: function(name, ...args) {
+    var callback = Util.last(args);
+    args = Util.first(args, -1);
+    EventActions.broadcast(name, {
+      addon_key: callback._context.extension.addon_key
+    }, args);
+  },
+
+  emitPublic: function(name, ...args) {
+    var callback = Util.last(args);
+    var extension = callback._context.extension;
+    args = Util.first(args, -1);
+    EventActions.broadcastPublic(name, args, extension);
+  },
+
+  emitToDataProvider: function(...args) {
+    var callback = Util.last(args);
+    var extension = callback._context.extension;
+    args = Util.first(args, -1);
+    EventActions.broadcast('dataProviderEvent', {
+      addon_key: callback._context.extension.addon_key
+    }, args);
+  },
+};

package/src/host/modules/flag.js

@@ -0,0 +1,170 @@
+/**
+* Flags are the primary method for providing system feedback in the product user interface. Messages include notifications of various kinds: alerts, confirmations, notices, warnings, info and errors.
+* @module Flag
+*/
+
+import HostApi from '../host-api';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import FlagActions from '../actions/flag_actions';
+import FlagComponent from '../components/flag';
+import util from '../util';
+import EventActions from '../actions/event_actions';
+import ModuleProviders from '../module-providers';
+import getBooleanFeatureFlag from '../utils/feature-flag';
+
+const _flags = {};
+
+/**
+* @class Flag~Flag
+* @description A flag object created by the [AP.flag]{@link module:Flag} module.
+* @example
+* // complete flag API example:
+* var outFlagId;
+* var flag = AP.flag.create({
+*   title: 'Successfully created a flag.',
+*   body: 'This is a flag.',
+*   type: 'info',
+*   actions: {
+*     'actionOne': 'action name'
+*   }
+* }, function(identifier) {
+* // Each flag will have a unique id. Save it for later.
+*   ourFlagId = identifier;
+* });
+*
+* // listen to flag events
+* AP.events.on('flag.close', function(data) {
+* // a flag was closed. data.flagIdentifier should match ourFlagId
+*   console.log('flag id: ', data.flagIdentifier);
+* });
+* AP.events.on('flag.action', function(data) {
+* // a flag action was clicked. data.actionIdentifier will be 'actionOne'
+* // data.flagIdentifier will equal ourFlagId
+*   console.log('flag id: ', data.flagIdentifier, 'flag action id', data.actionIdentifier);
+* });
+*/
+class Flag {
+  constructor(options, callback) {
+    callback = util.last(arguments);
+    if(typeof options !== 'object') {
+      return;
+    }
+    const flagId = callback._id;
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const flagProvider = frameworkAdaptor.getProviderByModuleName('flag');
+    if (flagProvider) {
+      let actions = [];
+      if (typeof options.actions === 'object') {
+        actions = Object.getOwnPropertyNames(options.actions).map(key => {
+          return {
+            actionKey: key,
+            actionText: options.actions[key],
+            executeAction: FlagActions.actionInvoked.bind(null, key, flagId)
+          };
+        });
+      }
+      let type = options.type || 'info';
+      let flagOptions = {
+        id: flagId,
+        title: options.title,
+        body: options.body,
+        actions: actions,
+        onClose: FlagActions.closed,
+        close: options.close,
+        type: type.toLowerCase()
+      };
+      this.flag = flagProvider.create(flagOptions);
+      let addonProvider = ModuleProviders.getProvider('addon');
+      if (addonProvider && addonProvider.registerUnmountCallback) {
+        addonProvider.registerUnmountCallback(this.close.bind(this), callback._context);
+      }
+    } else {
+      this.flag = FlagComponent.render({
+        type: options.type,
+        title: options.title,
+        body: AJS.escapeHtml(options.body),
+        actions: options.actions,
+        close: options.close,
+        id: flagId
+      });
+
+      FlagActions.open(this.flag.attr('id'));
+    }
+
+    this.onTriggers= {};
+    this.extension = callback._context.extension;
+    _flags[callback._id] = this;
+    callback.call(null, callback._id);
+  }
+
+  /**
+  * @name close
+  * @memberof Flag~Flag
+  * @method
+  * @description Closes the Flag.
+  * @example
+  * // Display a nice green flag using the Flags JavaScript API.
+  * var flag = AP.flag.create({
+  *   title: 'Successfully created a flag.',
+  *   body: 'This is a flag.',
+  *   type: 'info'
+  * });
+  *
+  * // Close the flag.
+  * flag.close()
+  *
+  */
+  close() {
+    this.flag.close();
+  }
+}
+
+function invokeTrigger(id, eventName, data) {
+  if (_flags[id]) {
+    let extension = _flags[id].extension;
+    data = data || {};
+    data.flagIdentifier = id;
+    const targetSpec = { id: extension.id };
+    EventActions.broadcast(eventName, targetSpec, data);
+  }
+}
+
+EventDispatcher.register('flag-closed', (data) => {
+  invokeTrigger(data.id, 'flag.close');
+  if (_flags[data.id]) {
+    delete _flags[data.id];
+  }
+});
+
+EventDispatcher.register('flag-action-invoked', (data) => {
+  invokeTrigger(data.id, 'flag.action', {actionIdentifier: data.actionId});
+});
+
+export default {
+  /**
+  * @name create
+  * @method
+  * @description Creates a new flag.
+  * @param {Object} options           Options of the flag.
+  * @param {String} options.title     The title text of the flag.
+  * @param {String} options.body      The body text of the flag.
+  * @param {String} options.type=info Sets the type of the message. Valid options are "info", "success", "warning" and "error".
+  * @param {String} options.close     The closing behaviour that this flag has. Valid options are "manual", and "auto".
+  * @param {Object} options.actions   Map of {actionIdentifier: 'Action link text'} to add to the flag. The actionIdentifier will be passed to a 'flag.action' event if the link is clicked.
+  * @returns {Flag~Flag}
+  * @example
+  * // Display a nice green flag using the Flags JavaScript API.
+  * var flag = AP.flag.create({
+  *   title: 'Successfully created a flag.',
+  *   body: 'This is a flag.',
+  *   type: 'success',
+  *   actions: {
+  *     'actionkey': 'Click me'
+  *   }
+  * });
+  */
+  create: {
+    constructor: Flag,
+    close: Flag.prototype.close
+  }
+}

package/src/host/modules/host.js

@@ -0,0 +1,19 @@
+import deprecateHost from '../deprecate';
+
+export default {
+
+  /*
+   This function could be used in Connect app for moving focus to Host app.
+   As Connect App - iframe app, it can get control. When it's happen - host app events such short-cuts
+   stop working. This function could help in this case.
+  */
+  focus: () => {
+    window.document.querySelector('a').focus({preventScroll:true});
+    window.document.querySelector('a').blur();
+  },
+
+  getSelectedText: deprecateHost(function(callback) {
+    callback('');
+    return;
+  }, 'AP.host.getSelectedText()')
+};

package/src/host/modules/inline-dialog.js

@@ -0,0 +1,33 @@
+/**
+ * The inline dialog is a wrapper for secondary content/controls to be displayed on user request. Consider this component as displayed in context to the triggering control with the dialog overlaying the page content.
+ * An inline dialog should be preferred over a modal dialog when a connection between the action has a clear benefit versus having a lower user focus.
+ *
+ * Inline dialogs can be shown via a [web item target](../../modules/web-item/#target).
+ *
+ * For more information, read about the Atlassian User Interface [inline dialog component](https://docs.atlassian.com/aui/latest/docs/inline-dialog.html).
+ * @module Inline-dialog
+ */
+import HostApi from '../host-api';
+import InlineDialogActions from '../actions/inline_dialog_actions';
+import util from '../util';
+
+export default {
+  /**
+   * Hide the inline dialog that contains the iframe where this method is called from.
+   * @memberOf module:Inline-dialog
+   * @method hide
+   * @noDemo
+   * @example
+   * AP.inlineDialog.hide();
+   */
+  hide: function(callback) {
+    callback = util.last(arguments);
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const inlineDialogProvider = frameworkAdaptor.getProviderByModuleName('inlineDialog');
+    if (inlineDialogProvider) {
+      inlineDialogProvider.hide(callback._context);
+    } else {
+      InlineDialogActions.close();
+    }
+  }
+};