@atlassian/atlassian-connect-js 5.3.190

package/src/host/components/flag.js

@@ -0,0 +1,102 @@
+import $ from '../dollar';
+import FlagActions from '../actions/flag_actions';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+const FLAGID_PREFIX = 'ap-flag-';
+const FLAG_CLASS = 'ac-aui-flag';
+const FLAG_ACTION_CLASS = 'ac-flag-actions';
+
+class Flag {
+
+  cleanKey(dirtyKey) {
+    var cleanFlagKeyRegExp = new RegExp('^' + FLAGID_PREFIX + '(.+)$');
+    var matches = dirtyKey.match(cleanFlagKeyRegExp);
+    if(matches && matches[1]) {
+      return matches[1];
+    }
+    return null;
+  }
+
+  _toHtmlString(str) {
+    if($.type(str) === 'string'){
+      return str;
+    } else if($.type(str) === 'object' && (str instanceof $) ){
+      return str.html();
+    }
+  }
+
+  _renderBody(body){
+    var body = this._toHtmlString(body);
+    var $body = $('<div />').html(body);
+    $('<p />').addClass(FLAG_ACTION_CLASS).appendTo($body);
+    return $body.html();
+  }
+
+  _renderActions($flag, flagId, actions) {
+    var $actionContainer = $flag.find('.' + FLAG_ACTION_CLASS);
+    actions = actions || {};
+    var $action;
+
+    Object.getOwnPropertyNames(actions).forEach((key) => {
+      $action = $('<a />')
+        .attr('href', '#')
+        .data({
+          'key': key,
+          'flag_id': flagId
+        })
+        .text(actions[key]);
+      $actionContainer.append($action);
+    }, this);
+    return $flag;
+  }
+
+  render (options) {
+    bindFlagDomEvents();
+    var _id = FLAGID_PREFIX + options.id;
+    var auiFlag = AJS.flag({
+      type: options.type,
+      title: options.title,
+      body: this._renderBody(options.body),
+      close: options.close
+    });
+    auiFlag.setAttribute('id', _id);
+    var $auiFlag = $(auiFlag);
+    this._renderActions($auiFlag, options.id, options.actions);
+    $auiFlag.addClass(FLAG_CLASS);
+    $auiFlag.close = auiFlag.close;
+    return $auiFlag;
+  }
+
+  close (id) {
+    var f = document.getElementById(id);
+    f.close();
+  }
+
+}
+
+var FlagComponent = new Flag();
+var flagDomEventsBound = false;
+function bindFlagDomEvents(){
+  if(flagDomEventsBound) {
+    return;
+  }
+  $(document).on('aui-flag-close', (e) => {
+    const _id = e.target.id;
+    var cleanFlagId = FlagComponent.cleanKey(_id);
+    FlagActions.closed(cleanFlagId);
+  });
+
+  $(document).on('click', '.' + FLAG_ACTION_CLASS, (e) => {
+    var $target = $(e.target);
+    var actionKey = $target.data('key');
+    var flagId = $target.data('flag_id');
+    FlagActions.actionInvoked(actionKey, flagId);
+  });
+  flagDomEventsBound = true;
+}
+
+
+EventDispatcher.register('flag-close', (data) => {
+  FlagComponent.close(data.id);
+});
+
+export default FlagComponent;

package/src/host/components/iframe.js

@@ -0,0 +1,130 @@
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import IframeActions from '../actions/iframe_actions';
+import $ from '../dollar';
+import util from '../util';
+import simpleXDM from 'simple-xdm/host';
+import urlUtil from '../utils/url';
+import JwtActions from '../actions/jwt_actions';
+import iframeUtils from '../utils/iframe';
+import simpleXdmUtils from '../utils/simplexdm';
+import { Flags } from '../utils/feature-flag';
+
+const CONTAINER_CLASSES = ['ap-container'];
+
+class Iframe {
+
+  constructor () {
+    this._contentResolver = false;
+  }
+
+  setContentResolver(callback) {
+    this._contentResolver = callback;
+  }
+
+  resize(width, height, $el){
+    width = util.stringToDimension(width);
+    height = util.stringToDimension(height);
+    $el.css({
+      width: width,
+      height: height
+    });
+    $el.trigger('resized', {width: width, height: height});
+  }
+
+  simpleXdmExtension(extension, $container) {
+    if(!extension.url || (urlUtil.hasJwt(extension.url) && urlUtil.isJwtExpired(extension.url))){
+      if(this._contentResolver){
+        JwtActions.requestRefreshUrl({
+          extension: extension,
+          resolver: this._contentResolver,
+          $container: $container
+        });
+      } else {
+        console.error('JWT is expired and no content resolver was specified');
+      }
+    } else {
+      this._appendExtension($container, this._simpleXdmCreate(extension));
+    }
+  }
+
+  _simpleXdmCreate(extension){
+    var simpleXdmAttributes = simpleXdmUtils.createSimpleXdmExtension(extension);
+    extension.id = simpleXdmAttributes.iframeAttributes.id;
+    extension.$el = this.render(simpleXdmAttributes.iframeAttributes);
+    return extension;
+  }
+
+  _appendExtension($container, extension){
+    var existingFrame = $container.find('iframe');
+    if(existingFrame.length > 0) {
+      existingFrame.destroy();
+    }
+    if (extension.options.hideIframeUntilLoad) {
+      extension.$el
+        .css({visibility: 'hidden'})
+        .load(() => {
+          extension.$el
+            .css({visibility: ''});
+        });
+    }
+    $container.prepend(extension.$el);
+    IframeActions.notifyIframeCreated(extension.$el, extension);
+  }
+
+  _appendExtensionError($container, text, traceId) {
+    var $error = $('<div class="connect-resolve-error"></div>');
+    var $additionalText = $('<p />').text(text);
+    $error.append('<p class="error">Error: The content resolver threw the following error:</p>');
+    $error.append($additionalText);
+
+    if (Flags.getBooleanFeatureFlag('display_trace_for_confluence_top_errors') && traceId) {
+      $error.append(`<br><p class="error-trace-id">Trace: ${traceId}</p>`);
+    }
+
+    $container.prepend($error);
+  }
+
+  resolverResponse(data) {
+    var simpleExtension = this._simpleXdmCreate(data.extension);
+    this._appendExtension(data.$container, simpleExtension);
+  }
+
+  resolverFailResponse(data) {
+    this._appendExtensionError(data.$container, data.errorText, data.errorTraceId);
+  }
+
+  render(attributes){
+    attributes = attributes || {};
+    attributes.referrerpolicy = 'no-referrer';
+    return $('<iframe />').attr(attributes).addClass('ap-iframe');
+  }
+}
+
+var IframeComponent = new Iframe();
+
+EventDispatcher.register('iframe-resize', function(data){
+  IframeComponent.resize(data.width, data.height, data.$el);
+});
+
+EventDispatcher.register('content-resolver-register-by-extension', function(data){
+  IframeComponent.setContentResolver(data.callback);
+});
+
+EventDispatcher.register('jwt-url-refreshed', function(data) {
+  IframeComponent.resolverResponse(data);
+});
+
+EventDispatcher.register('jwt-url-refreshed-failed', function(data) {
+  IframeComponent.resolverFailResponse(data);
+});
+
+
+EventDispatcher.register('after:iframe-bridge-established', function(data) {
+  if(!data.extension.options.noDom){
+    data.$el[0].bridgeEstablished = true;
+  } else {
+    data.extension.options.bridgeEstablished = true;
+  }
+});
+
+export default IframeComponent;

package/src/host/components/iframe_container.js

@@ -0,0 +1,38 @@
+import $ from '../dollar';
+import IframeComponent from './iframe';
+import LoadingIndicatorComponent from './loading_indicator';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+
+const CONTAINER_CLASSES = ['ap-iframe-container'];
+
+class IframeContainer {
+
+  createExtension(extension, options) {
+    var $container = this._renderContainer();
+    if(!options || options.loadingIndicator !== false){
+      $container.append(this._renderLoadingIndicator());
+    }
+    IframeComponent.simpleXdmExtension(extension, $container);
+    return $container;
+  }
+
+  _renderContainer(attributes){
+    var container = $('<div />').attr(attributes || {});
+    container.addClass(CONTAINER_CLASSES.join(' '));
+    return container;
+  }
+
+  _renderLoadingIndicator(){
+    return LoadingIndicatorComponent.render();
+  }
+
+}
+
+var IframeContainerComponent = new IframeContainer();
+
+EventDispatcher.register('iframe-create', (data) => {
+  var id = 'embedded-' + data.extension.id;
+  data.extension.$el.parents('.ap-iframe-container').attr('id', id);
+});
+
+export default IframeContainerComponent;

package/src/host/components/inline_dialog.js

@@ -0,0 +1,108 @@
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import InlineDialogActions from '../actions/inline_dialog_actions';
+import $ from '../dollar';
+import util from '../util';
+
+class InlineDialog {
+
+  resize(data){
+    var width = util.stringToDimension(data.width);
+    var height = util.stringToDimension(data.height);
+    var $content = data.$el.find('.contents');
+    if($content.length === 1){
+      $content.css({
+        width: width,
+        height: height
+      });
+      InlineDialogActions.refresh(data.$el);
+    }
+  }
+
+  refresh($el){
+    if (!$el.is(':visible')) {
+      return
+    }
+    $el[0].popup.reset();
+  }
+
+  _getInlineDialog($el){
+    return AJS.InlineDialog($el);
+  }
+  _renderContainer(){
+    return $('<div />').addClass('aui-inline-dialog-contents');
+  }
+  _displayInlineDialog(data){
+    InlineDialogActions.created({
+      $el: data.$el,
+      trigger: data.trigger,
+      extension: data.extension
+    });
+  }
+  hideInlineDialog($el){
+    $el.hide();
+  }
+
+  closeInlineDialog(){
+    $('.aui-inline-dialog').filter(function(){
+      return $(this).find('.ap-iframe-container').length > 0;
+    }).hide();
+  }
+
+  render(data){
+    var $inlineDialog = $(document.getElementById('inline-dialog-' + data.id));
+
+    if ($inlineDialog.length !== 0) {
+      $inlineDialog.remove();
+    }
+
+    var $el = AJS.InlineDialog(
+      data.bindTo,
+      //assign unique id to inline Dialog
+      data.id,
+      ($placeholder, trigger, showInlineDialog) => {
+        $placeholder.append(data.$content);
+        this._displayInlineDialog({
+          extension: data.extension,
+          $el: $placeholder,
+          trigger: trigger
+        });
+        showInlineDialog();
+      },
+      data.inlineDialogOptions
+    );
+
+    // Increase z-index so it shows above the Jira project sidebar
+    $el.css('z-index', 1000);
+
+    return $el;
+  }
+
+}
+
+var InlineDialogComponent = new InlineDialog();
+
+EventDispatcher.register('iframe-resize', function(data) {
+  var container = data.$el.parents('.aui-inline-dialog');
+  if(container.length === 1) {
+    InlineDialogComponent.resize({
+      width: data.width,
+      height: data.height,
+      $el: container
+    });
+  }
+});
+
+EventDispatcher.register('inline-dialog-refresh', function(data){
+  InlineDialogComponent.refresh(data.$el);
+});
+
+EventDispatcher.register('inline-dialog-hide', function(data) {
+  InlineDialogComponent.hideInlineDialog(data.$el);
+});
+
+EventDispatcher.register('inline-dialog-close', function(data) {
+  InlineDialogComponent.closeInlineDialog();
+});
+
+
+export default InlineDialogComponent;

package/src/host/components/inline_dialog_webitem.js

@@ -0,0 +1,157 @@
+import WebItemActions from '../actions/webitem_actions';
+import InlineDialogWebItemActions from '../actions/inline_dialog_webitem_actions';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import InlineDialogComponent from './inline_dialog';
+import WebitemComponent from './webitem';
+import WebItemUtils from '../utils/webitem';
+import IframeContainer from './iframe_container';
+import $ from '../dollar';
+import IframeCreate from '../iframe-create';
+import Util from '../util';
+import urlUtils from '../utils/url';
+import { getAccessNarrowingSpaceContext } from '../utils/access-narrowing-context';
+
+const ITEM_NAME = 'inline-dialog';
+const SELECTOR = '.ap-inline-dialog';
+const WEBITEM_UID_KEY = 'inline-dialog-target-uid';
+
+export class InlineDialogWebItem {
+  constructor(){
+    this._inlineDialogWebItemSpec = {
+      name: ITEM_NAME,
+      selector: SELECTOR,
+      triggers: ['mouseenter', 'click']
+    };
+    this._inlineDialogWebItems = {};
+  }
+
+  getWebItem(){
+    return this._inlineDialogWebItemSpec;
+  }
+
+  _createInlineDialog(data){
+    var $inlineDialog = InlineDialogComponent.render({
+      extension: data.extension,
+      id: data.id,
+      bindTo: data.$target,
+      $content: $('<div />'),
+      inlineDialogOptions: data.extension.options
+    });
+
+    return $inlineDialog;
+  }
+
+  /**
+   * @param {WebItemInvokedEventData} data
+   */
+  triggered(data) {
+    // don't trigger on hover, when hover is not specified.
+    const eventType = data.eventType;
+    const onHover = data.extension.options.onHover;
+    if (eventType !== 'click' && !onHover) {
+      return;
+    }
+    const $target = data.$target;
+    var webitemId = $target.data(WEBITEM_UID_KEY);
+
+    EventDispatcher.dispatch('analytics-inline-dialog-opened', {
+      extension: data.extension,
+      eventType: eventType,
+      onHover: onHover
+    })
+
+    if (eventType === 'click' && !onHover) {
+      if ($target.attr('data-inline-created') === 'true') {
+        // Let AUI handle the click event, otherwise we would destroy and recreate the dialog
+        // This will lead to the dialog being hidden immediately after it was opened
+        return;
+      } else {
+        // We have to handle the first click event to set up the dialog
+        // We set this property to ignore subsequent clicks and let AUI handle them
+        $target.attr('data-inline-created', 'true');
+      }
+    }
+
+    var $inlineDialog = this._createInlineDialog({
+      id: webitemId,
+      extension: data.extension,
+      $target: $target,
+      options: data.extension.options || {}
+    });
+
+    $inlineDialog.show();
+  }
+
+  opened(data){
+    var $existingFrame = data.$el.find('iframe');
+    var isExistingFrame = ($existingFrame && $existingFrame.length === 1);
+    // existing iframe is already present and src is still valid (either no jwt or jwt has not expired).
+    if(isExistingFrame){
+      const src = $existingFrame.attr('src');
+      const srcPresent = (src.length > 0);
+      if(srcPresent) {
+        const srcHasJWT = urlUtils.hasJwt(src);
+        const srcHasValidJWT = srcHasJWT && !urlUtils.isJwtExpired(src);
+        if(srcHasValidJWT || !srcHasJWT) {
+          return false;
+        }
+      }
+    }
+    const dialogExtension = getAccessNarrowingSpaceContext(data.extension);
+    const contentRequest = WebitemComponent.requestContent(dialogExtension);
+    if(!contentRequest){
+      console.warn('no content resolver found');
+      return false;
+    }
+    contentRequest.then(function(content){
+      content.options = content.options || {};
+      Util.extend(content.options, {
+        autoresize: true,
+        widthinpx: true
+      });
+
+      InlineDialogWebItemActions.addExtension({
+        $el: data.$el,
+        extension: content
+      });
+    });
+    return true;
+  }
+
+  addExtension(data){
+    var addon = IframeCreate(data.extension);
+    data.$el.empty().append(addon);
+  }
+
+  /**
+   * @param {WebItemInvokedEventData} data
+   */
+  createIfNotExists(data) {
+    const $target = data.$target;
+    var uid = $target.data(WEBITEM_UID_KEY);
+
+    if(!uid) {
+      uid = WebItemUtils.uniqueId();
+      $target.data(WEBITEM_UID_KEY, uid);
+    }
+  }
+
+}
+
+let inlineDialogInstance = new InlineDialogWebItem();
+let webitem = inlineDialogInstance.getWebItem();
+EventDispatcher.register('before:webitem-invoked:' + webitem.name, function(data){
+  inlineDialogInstance.createIfNotExists(data);
+});
+EventDispatcher.register('webitem-invoked:' + webitem.name, function(data){
+  inlineDialogInstance.triggered(data);
+});
+EventDispatcher.register('inline-dialog-opened', function(data){
+  inlineDialogInstance.opened(data);
+});
+EventDispatcher.register('inline-dialog-extension', function(data){
+  inlineDialogInstance.addExtension(data);
+});
+WebItemActions.addWebItem(webitem);
+
+export default inlineDialogInstance;

package/src/host/components/loading_indicator.js

@@ -0,0 +1,110 @@
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import LoadingIndicatorActions from '../actions/loading_indicator_actions';
+import $ from '../dollar';
+
+const LOADING_INDICATOR_CLASS = 'ap-status-indicator';
+
+const LOADING_STATUSES = {
+  loading: '<div class="ap-loading"><div class="small-spinner"></div>Loading app...</div>',
+  'load-timeout': '<div class="ap-load-timeout"><div class="small-spinner"></div>App is not responding. Wait or <a href="#" class="ap-btn-cancel">cancel</a>?</div>',
+  'load-error': 'App failed to load.'
+};
+
+const LOADING_TIMEOUT = 12000;
+
+class LoadingIndicator {
+  constructor () {
+    this._stateRegistry = {};
+  }
+
+  _loadingContainer($iframeContainer){
+    return $iframeContainer.find('.' + LOADING_INDICATOR_CLASS);
+  }
+
+  render() {
+    var container = document.createElement('div');
+    container.classList.add(LOADING_INDICATOR_CLASS);
+    container.innerHTML = LOADING_STATUSES.loading;
+    var $container = $(container);
+    this._startSpinner($container);
+    return $container;
+  }
+
+  _startSpinner($container) {
+    // TODO: AUI or spin.js broke something. This is bad but ironically matches v3's implementation.
+    setTimeout(() => {
+      var spinner = $container.find('.small-spinner');
+      if (spinner.length && spinner.spin) {
+        spinner.spin({lines: 12, length: 3, width: 2, radius: 3, trail: 60, speed: 1.5, zIndex: 1});
+      }
+    }, 10);
+  }
+
+  hide($iframeContainer, extensionId){
+    this._clearTimeout(extensionId);
+    this._loadingContainer($iframeContainer)[0].style.display = 'none';
+  }
+
+  cancelled($iframeContainer, extensionId){
+    var status = LOADING_STATUSES['load-error'];
+    this._loadingContainer($iframeContainer).empty().text(status);
+  }
+
+  _setupTimeout($container, extension){
+    this._stateRegistry[extension.id] = setTimeout(() => {
+      LoadingIndicatorActions.timeout($container, extension);
+    }, LOADING_TIMEOUT);
+  }
+
+  _clearTimeout(extensionId) {
+    if(this._stateRegistry[extensionId]) {
+      clearTimeout(this._stateRegistry[extensionId]);
+      delete this._stateRegistry[extensionId];
+    }
+  }
+
+  timeout($iframeContainer, extensionId){
+    var status = $(LOADING_STATUSES['load-timeout']);
+    var container = this._loadingContainer($iframeContainer);
+    container.empty().append(status);
+    this._startSpinner(container);
+    $('a.ap-btn-cancel', container).click(function () {
+      LoadingIndicatorActions.cancelled($iframeContainer, extensionId);
+    });
+    this._clearTimeout(extensionId);
+    return container;
+  }
+}
+
+var LoadingComponent = new LoadingIndicator();
+
+EventDispatcher.register('iframe-create', (data) => {
+  if(!data.extension.options.noDom) {
+    LoadingComponent._setupTimeout(data.$el.parents('.ap-iframe-container'), data.extension);
+  }
+});
+
+EventDispatcher.register('iframe-bridge-established', (data) => {
+  if(!data.extension.options.noDom) {
+    LoadingComponent.hide(data.$el.parents('.ap-iframe-container'), data.extension.id);
+  }
+});
+
+EventDispatcher.register('iframe-bridge-timeout', (data) => {
+  if(!data.extension.options.noDom) {
+    LoadingComponent.timeout(data.$el, data.extension.id);
+  }
+});
+
+EventDispatcher.register('iframe-bridge-cancelled', (data) => {
+  if(!data.extension.options.noDom) {
+    LoadingComponent.cancelled(data.$el, data.extension.id);
+  }
+});
+
+EventDispatcher.register('iframe-destroyed', function (data) {
+  LoadingComponent._clearTimeout(data.extension.extension_id);
+});
+
+
+export default LoadingComponent;