@atlassian/atlassian-connect-js 5.3.190

package/src/host/components/dialog.js

@@ -0,0 +1,447 @@
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import DomEventActions from '../actions/dom_event_actions';
+import DialogActions from '../actions/dialog_actions';
+import dialogUtils from '../utils/dialog';
+import IframeComponent from './iframe';
+import Button from './button';
+import ButtonActions from '../actions/button_actions';
+import Util from '../util';
+import $ from '../dollar';
+import HostApi from '../host-api';
+
+const DLGID_PREFIX = 'ap-dialog-';
+const DIALOG_CLASS = 'ap-aui-dialog2';
+const DLGID_REGEXP = new RegExp(`^${DLGID_PREFIX}[0-9A-Za-z]+$`);
+const DIALOG_SIZES = ['small', 'medium', 'large', 'xlarge', 'fullscreen', 'maximum'];
+const DIALOG_BUTTON_CLASS = 'ap-aui-dialog-button';
+const DIALOG_BUTTON_CUSTOM_CLASS = 'ap-dialog-custom-button';
+const DIALOG_FOOTER_CLASS = 'aui-dialog2-footer';
+const DIALOG_FOOTER_ACTIONS_CLASS = 'aui-dialog2-footer-actions';
+const DIALOG_HEADER_ACTIONS_CLASS = 'header-control-panel';
+const DIALOG_ERROR_CLOSE_BTN_ID = 'dialog-error-close-btn';
+
+function getActiveDialog() {
+  const $el = AJS.LayerManager.global.getTopLayer();
+  if ($el && DLGID_REGEXP.test($el.attr('id'))) {
+    const dialog = AJS.dialog2($el);
+    dialog._id = dialog.$el.attr('id').replace(DLGID_PREFIX, '');
+    return dialog;
+  }
+}
+
+function getActionBar($dialog) {
+  var $actionBar = $dialog.find('.' + DIALOG_HEADER_ACTIONS_CLASS);
+  if(!$actionBar.length) {
+    $actionBar = $dialog.find('.' + DIALOG_FOOTER_ACTIONS_CLASS);
+  }
+  return $actionBar;
+}
+
+function getButtonByIdentifier(id, $dialog) {
+  const $actionBar = getActionBar($dialog);
+  return $actionBar.find('.aui-button').filter(function () {
+    return Button.getIdentifier(this) === id;
+  });
+}
+
+class Dialog {
+  constructor () {
+  }
+
+  _renderHeaderCloseBtn() {
+    const $close = $('<a />').addClass('aui-dialog2-header-close');
+    const $closeBtn = $('<span />').addClass('aui-icon aui-icon-small aui-iconfont-close-dialog').text('Close');
+    $close.append($closeBtn);
+    return $close;
+  }
+  //v3 ask DT about this DOM.
+  _renderFullScreenHeader($header, options) {
+    var $titleContainer = $('<div />').addClass('header-title-container aui-item expanded');
+    var $title = $('<div />').append($('<span />').addClass('header-title').text(options.header || ''));
+    $titleContainer.append($title);
+    $header.append($titleContainer).append(this._renderHeaderActions(options.actions, options.extension));
+    return $header;
+  }
+
+  _renderHeader(options){
+    const $header = $('<header />').addClass('aui-dialog2-header');
+    if(options.size === 'fullscreen') {
+      return this._renderFullScreenHeader($header, options);
+    }
+    if(options.header) {
+      const $title = $('<h2 />').addClass('aui-dialog2-header-main').text(options.header);
+      $header.append($title);
+    }
+    $header.append(this._renderHeaderCloseBtn());
+    return $header;
+  }
+
+  _renderHeaderActions(actions, extension) {
+    const $headerControls = $('<div />').addClass('aui-item ' + DIALOG_HEADER_ACTIONS_CLASS);
+    actions[0].additionalClasses = ['aui-icon', 'aui-icon-small', 'aui-iconfont-success'];
+    actions[1].additionalClasses = ['aui-icon', 'aui-icon-small', 'aui-iconfont-close-dialog'];
+    const $actions = this._renderActionButtons(actions, extension);
+    $actions.forEach(($action) => {
+      $headerControls.append($action);
+    });
+    return $headerControls;
+  }
+
+  _renderContent($content){
+    const $el = $('<div />').addClass('aui-dialog2-content');
+    if($content) {
+      $el.append($content);
+    }
+    return $el;
+  }
+
+  _renderFooter(options) {
+    const $footer = $('<footer />').addClass(DIALOG_FOOTER_CLASS);
+    if(options.size !== 'fullscreen') {
+      const $actions = this._renderFooterActions(options.actions, options.extension);
+      $footer.append($actions);
+    }
+    if(options.hint) {
+      const $hint = $('<div />').addClass('aui-dialog2-footer-hint').text(options.hint);
+      $footer.append($hint);
+    }
+    return $footer;
+  }
+
+  _renderActionButtons(actions, extension) {
+    var actionButtons = [];
+    [...actions].forEach(action => {
+      actionButtons.push(
+        this._renderDialogButton({
+          text: action.text,
+          name: action.name,
+          type: action.type,
+          additionalClasses: action.additionalClasses,
+          custom: action.custom || false,
+          identifier: action.identifier,
+          immutable: action.immutable,
+          disabled: action.disabled || false
+        }, extension)
+      );
+    });
+    return actionButtons;
+  }
+
+  _renderFooterActions(actions, extension) {
+    const $actions = $('<div />').addClass(DIALOG_FOOTER_ACTIONS_CLASS);
+    const $buttons = this._renderActionButtons(actions, extension);
+    $buttons.forEach(($button) => {
+      $actions.append($button);
+    });
+    return $actions;
+  }
+
+  _renderDialogButton(options, extension) {
+    options.additionalClasses = options.additionalClasses || [];
+    options.additionalClasses.push(DIALOG_BUTTON_CLASS);
+    if(options.custom) {
+      options.additionalClasses.push(DIALOG_BUTTON_CUSTOM_CLASS);
+    }
+    const $button = Button.render(options);
+    $button.extension = extension;
+    return $button;
+  }
+
+  /**
+  {
+    id: 'some-dialog-id',
+    title: 'some header',
+    hint: 'some footer hint',
+    $content: $(<div />).text('my content'),
+    actions: []
+  }
+  **/
+  render(options){
+    var originalOptions = Util.extend({}, options);
+    var sanitizedOptions = dialogUtils.sanitizeOptions(options);
+    const $dialog = $('<section />').attr({
+      role: 'dialog',
+      id: DLGID_PREFIX + sanitizedOptions.id
+    });
+    $dialog.attr('data-aui-modal', 'true');
+    $dialog.data({
+      'aui-remove-on-hide': true,
+      'extension': sanitizedOptions.extension
+    });
+    $dialog.addClass('aui-layer aui-dialog2 ' + DIALOG_CLASS);
+
+    if (DIALOG_SIZES.indexOf(sanitizedOptions.size) >= 0) {
+      $dialog.addClass('aui-dialog2-' + sanitizedOptions.size);
+    }
+
+    if(sanitizedOptions.size === 'fullscreen' || sanitizedOptions.size === 'maximum') {
+      if(sanitizedOptions.chrome) {
+        $dialog.addClass('ap-header-controls');
+      }
+      $dialog.addClass('aui-dialog2-maximum');
+    }
+
+    $dialog.append(this._renderContent(sanitizedOptions.$content));
+
+    if (sanitizedOptions.chrome) {
+      $dialog.prepend(this._renderHeader({
+        header: sanitizedOptions.header,
+        actions: sanitizedOptions.actions,
+        size: sanitizedOptions.size
+      }));
+
+      $dialog.append(this._renderFooter({
+        extension: sanitizedOptions.extension,
+        actions: sanitizedOptions.actions,
+        hint: sanitizedOptions.hint,
+        size: sanitizedOptions.size
+      }));
+    } else {
+      $dialog.addClass('aui-dialog2-chromeless');
+    }
+
+    const dialog = AJS.dialog2($dialog);
+    dialog._id = sanitizedOptions.id;
+    if (sanitizedOptions.size === 'fullscreen') {
+      sanitizedOptions.height = sanitizedOptions.width = '100%';
+    }
+    if (!sanitizedOptions.size || sanitizedOptions.size === 'fullscreen') {
+      AJS.layer($dialog).changeSize(sanitizedOptions.width, sanitizedOptions.height);
+    }
+    if (sanitizedOptions.onHide) {
+      dialog.on('hide', sanitizedOptions.onHide);
+    }
+    dialog.show();
+    dialog.$el.data('extension', sanitizedOptions.extension);
+    dialog.$el.data('originalOptions', originalOptions);
+    return $dialog;
+  }
+
+  setIframeDimensions($iframe){
+    IframeComponent.resize('100%', '100%', $iframe);
+  }
+
+  getActive(){
+    return getActiveDialog();
+  }
+
+  buttonIsEnabled(identifier) {
+    const dialog = getActiveDialog();
+    if (dialog) {
+      const $button = getButtonByIdentifier(identifier, dialog.$el);
+      return Button.isEnabled($button);
+    }
+  }
+
+  buttonIsVisible(identifier) {
+    const dialog = getActiveDialog();
+    if (dialog) {
+      const $button = getButtonByIdentifier(identifier, dialog.$el);
+      return Button.isVisible($button);
+    }
+  }
+
+  /**
+  * takes either a target spec or a filter function
+  * returns all matching dialogs
+  */
+  getByExtension(extension) {
+    var filterFunction;
+    if(typeof extension === 'function') {
+      filterFunction = extension;
+    } else {
+      var keys = Object.getOwnPropertyNames(extension);
+      filterFunction = function(dialog) {
+        var dialogData = $(dialog).data('extension');
+        return keys.every((key) => {
+          return dialogData[key] === extension[key];
+        });
+      };
+    }
+
+    return $('.' + DIALOG_CLASS).toArray().filter(filterFunction).map(($el) => {
+      return AJS.dialog2($el);
+    });
+  }
+
+  // add user defined button to an existing dialog
+  addButton(extension, options) {
+    options.custom = true;
+    var $button = this._renderDialogButton(options, extension);
+    var $dialog = this.getByExtension({
+      addon_key: extension.addon_key,
+      key: extension.key
+    })[0].$el;
+    var $actionBar = getActionBar($dialog);
+    $actionBar.append($button);
+    return $dialog;
+  }
+
+  renderErrorState(extension) {
+    const $dialog = this.getByExtension({
+      addon_key: extension.addon_key,
+      key: extension.key,
+    })[0].$el;
+
+    // Fullscreen dialogs already render a close button in the header
+    if ($dialog.hasClass('aui-dialog2-fullscreen')) {
+      return;
+    }
+
+    // Replace maximum size with xlarge - for better UI experience + less code changes required
+    if ($dialog.hasClass('aui-dialog2-maximum')) {
+      $dialog.removeClass('aui-dialog2-maximum');
+      $dialog.addClass('aui-dialog2-xlarge');
+    }
+
+    $dialog.removeClass('aui-dialog2-chromeless');
+
+    const $footerActions = $dialog.find(`.${DIALOG_FOOTER_ACTIONS_CLASS}`);
+    const closeButtonExists = $dialog.find(`#${DIALOG_ERROR_CLOSE_BTN_ID}`).length > 0;
+
+    if (!closeButtonExists) {
+      const closeButtonOptions = {
+        name: 'close',
+        id: 'dialog-error-close-btn',
+        text: 'Close',
+        type: 'primary',
+        disabled: false,
+      };
+
+      if ($footerActions.length) {
+        const $closeButton = this._renderDialogButton(closeButtonOptions, extension);
+        $footerActions.append($closeButton);
+      } else {
+        $dialog.append(
+          this._renderFooter({
+            extension: extension,
+            actions: [closeButtonOptions],
+          })
+        );
+      }
+    }
+  }
+}
+
+const DialogComponent = new Dialog();
+
+EventDispatcher.register('iframe-bridge-established', (data) => {
+  if(data.extension.options.isDialog){
+    let callback;
+    const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+    const dialogProvider = frameworkAdaptor.getProviderByModuleName('dialog');
+    if (dialogProvider) {
+      callback = dialogProvider.close;
+      dialogProvider.setButtonDisabled('submit', false);
+    } else {
+      DialogActions.toggleButton({
+        identifier: 'submit',
+        enabled: true
+      });
+      callback = () => {
+        DialogActions.close({
+          dialog: getActiveDialog(),
+          extension: data.extension
+        });
+      }
+    }
+
+    if(!data.extension.options.preventDialogCloseOnEscape){
+      DomEventActions.registerKeyEvent({
+        extension_id: data.extension.id,
+        key: 27,
+        callback
+      });
+
+      EventDispatcher.registerOnce('dialog-close', (d) => {
+        DomEventActions.unregisterKeyEvent({
+          extension_id: data.extension.id,
+          key: 27
+        });
+      });
+    }
+  }
+});
+
+EventDispatcher.register('dialog-close-active', (data) => {
+  var activeDialog = getActiveDialog();
+  if(activeDialog){
+    DialogActions.close({
+      customData: data.customData,
+      dialog: activeDialog,
+      extension: data.extension
+    });
+  }
+});
+
+EventDispatcher.register('dialog-close', (data) => {
+  if (data.dialog) {
+    data.dialog.hide();
+  }
+});
+
+EventDispatcher.register('dialog-button-toggle', (data) => {
+  const dialog = getActiveDialog();
+  if (dialog) {
+    const $button = getButtonByIdentifier(data.identifier, dialog.$el);
+    ButtonActions.toggle($button, !data.enabled);
+  }
+});
+
+EventDispatcher.register('dialog-button-toggle-visibility', (data) => {
+  const dialog = getActiveDialog();
+  if (dialog) {
+    const $button = getButtonByIdentifier(data.identifier, dialog.$el);
+    ButtonActions.toggleVisibility($button, data.hidden);
+  }
+});
+
+EventDispatcher.register('button-clicked', (data) => {
+  var $button = data.$el;
+  if($button.hasClass(DIALOG_BUTTON_CLASS)) {
+    var $dialog = $button.parents('.' + DIALOG_CLASS);
+    var $iframe = $dialog.find('iframe');
+    if ($iframe.length && $iframe[0].bridgeEstablished) {
+      DialogActions.clickButton(Button.getIdentifier($button), $button, $dialog.data('extension'));
+    } else {
+      DialogActions.close({
+        dialog: getActiveDialog(),
+        extension: $button.extension
+      });
+    }
+  }
+});
+
+if($.fn) {
+  EventDispatcher.register('iframe-create', (data) => {
+    if(data.extension.options && data.extension.options.isDialog){
+      DialogComponent.setIframeDimensions(data.extension.$el);
+    }
+  });
+
+  EventDispatcher.register('dialog-button-add', (data) => {
+    DialogComponent.addButton(data.extension, data.button);
+  });
+
+  EventDispatcher.register('host-window-resize', Util.debounce(() => {
+    $('.' + DIALOG_CLASS).each((i, dialog) => {
+      var $dialog = $(dialog);
+      var sanitizedOptions = dialogUtils.sanitizeOptions($dialog.data('originalOptions'));
+      dialog.style.width = sanitizedOptions.width;
+      dialog.style.height = sanitizedOptions.height;
+    });
+  }, 100));
+}
+
+
+DomEventActions.registerWindowKeyEvent({
+  keyCode: 27,
+  callback: () => {
+    DialogActions.closeActive({
+      customData: {},
+      extension: null
+    });
+  }
+});
+
+export default DialogComponent;

package/src/host/components/dialog_extension.js

@@ -0,0 +1,106 @@
+import DialogComponent from './dialog';
+import IframeContainerComponent from './iframe_container';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import HostApi from '../host-api';
+import EventActions from '../actions/event_actions';
+import dialogUtils from '../utils/dialog';
+import getBooleanFeatureFlag from '../utils/feature-flag';
+import { getAccessNarrowingSpaceContext } from '../utils/access-narrowing-context';
+
+class DialogExtension {
+
+  render(extension, dialogOptions){
+    extension.options = extension.options || {};
+    dialogOptions = dialogOptions || {};
+    extension.options.isDialog = true;
+    extension.options.dialogId = dialogOptions.id;
+    extension.options.callbackExtensionId = extension.callback_extension_id;
+    extension.options.preventDialogCloseOnEscape = dialogOptions.closeOnEscape === false;
+    extension.options.hostFrameOffset = dialogOptions.hostFrameOffset;
+    extension.options.hideIframeUntilLoad = true;
+    var $iframeContainer = IframeContainerComponent.createExtension(extension);
+    var $dialog = DialogComponent.render({
+      extension:  extension,
+      $content:   $iframeContainer,
+      chrome:     dialogOptions.chrome,
+      width:      dialogOptions.width,
+      height:     dialogOptions.height,
+      size:       dialogOptions.size,
+      header:     dialogOptions.header,
+      hint:       dialogOptions.hint,
+      submitText: dialogOptions.submitText,
+      cancelText: dialogOptions.cancelText,
+      buttons:    dialogOptions.buttons,
+      onHide:     dialogOptions.onHide
+    });
+    return $dialog;
+  }
+
+
+  renderErrorState(extension) {
+    DialogComponent.renderErrorState(extension);
+  }
+
+  getActiveDialog(){
+    return DialogComponent.getActive();
+  }
+
+  buttonIsEnabled(identifier) {
+    return DialogComponent.buttonIsEnabled(identifier);
+  }
+
+  buttonIsVisible(identifier) {
+    return DialogComponent.buttonIsVisible(identifier);
+  }
+
+  getByExtension(extension) {
+    if(typeof extension === 'string'){
+      extension = {
+        id: extension
+      };
+    }
+    return DialogComponent.getByExtension(extension);
+  }
+
+}
+
+var DialogExtensionComponent = new DialogExtension();
+EventDispatcher.register('dialog-extension-open', function(data){
+  const dialogExtension = getAccessNarrowingSpaceContext(data.extension);
+  let dialogOptions = dialogUtils.sanitizeOptions(data.options);
+
+  const frameworkAdaptor = HostApi.getFrameworkAdaptor();
+  const dialogProvider = frameworkAdaptor.getProviderByModuleName('dialog');
+  if (dialogProvider) {
+    // this function should move.
+    const getOnClickFunction = action => {
+      const key = dialogExtension.key;
+      const addon_key = dialogExtension.addon_key;
+      const eventData = {
+        button: {
+          identifier: action.identifier,
+          name: action.identifier,
+          text: action.text
+        }
+      };
+      if (['submit', 'cancel'].indexOf(action.identifier) >= 0) {
+        EventActions.broadcast(`dialog.${action.identifier}`, {addon_key, key}, eventData);
+      }
+      EventActions.broadcast('dialog.button.click', {addon_key, key}, eventData);
+    };
+
+
+    dialogExtension.options.preventDialogCloseOnEscape = dialogOptions.closeOnEscape === false;
+    dialogOptions.actions.map(action => action.onClick = getOnClickFunction.bind(null, action));
+    dialogProvider.create(dialogOptions, dialogExtension);
+
+  } else {
+    DialogExtensionComponent.render(dialogExtension, data.options);
+  }
+});
+
+EventDispatcher.register('notify-content-resolver-failed', function (extension) {
+  DialogExtensionComponent.renderErrorState(extension);
+});
+
+export default DialogExtensionComponent;

package/src/host/components/dialog_webitem.js

@@ -0,0 +1,69 @@
+import WebItemActions from '../actions/webitem_actions';
+import EventDispatcher from '../dispatchers/event_dispatcher';
+import WebItemUtils from '../utils/webitem';
+import DialogExtensionActions from '../actions/dialog_extension_actions';
+import $ from '../dollar';
+import Util from '../util';
+import {Flags} from '../utils/feature-flag';
+
+const ITEM_NAME = 'dialog';
+const SELECTOR = '.ap-dialog';
+const TRIGGERS = ['click'];
+const WEBITEM_UID_KEY = 'dialog-target-uid';
+const DEFAULT_WEBITEM_OPTIONS = {
+  chrome: true
+};
+
+class DialogWebItem {
+  constructor(){
+    this._dialogWebItem = {
+      name: ITEM_NAME,
+      selector: SELECTOR,
+      triggers: TRIGGERS
+    };
+  }
+
+  getWebItem(){
+    return this._dialogWebItem;
+  }
+
+  _dialogOptions(options){
+    return Util.extend({}, DEFAULT_WEBITEM_OPTIONS, options || {});
+  }
+
+  /**
+   * @param {WebItemInvokedEventData} data
+   */
+  triggered(data) {
+    const $target = data.$target;
+
+    var webitemId = $target.data(WEBITEM_UID_KEY);
+    var dialogOptions = this._dialogOptions(data.extension.options);
+    dialogOptions.id = webitemId;
+    DialogExtensionActions.open(data.extension, dialogOptions);
+  }
+
+  /**
+   * @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 dialogInstance = new DialogWebItem();
+let webitem = dialogInstance.getWebItem();
+EventDispatcher.register('webitem-invoked:' + webitem.name, function(data){
+  dialogInstance.triggered(data);
+});
+EventDispatcher.register('before:webitem-invoked:' + webitem.name, dialogInstance.createIfNotExists);
+
+WebItemActions.addWebItem(webitem);
+export default dialogInstance;