@atlaskit/emoji 64.7.0 → 65.1.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlaskit/emoji
 
+## 65.1.0
+
+### Minor Changes
+
+- [`cceb3262363`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cceb3262363) - [ux] Show preview below the scrollable emoji box
+
+### Patch Changes
+
+- [`641bf010d2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/641bf010d2a) - Added JSDoc comments for exposing props
+- [`c47218c565a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c47218c565a) - Convert the demo resource control to functional componment
+
+## 65.0.0
+
+### Major Changes
+
+- [`06232e0f8dd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/06232e0f8dd) - [ux] Opt In SSR for Resourced Emoji and Emoji Placeholder with EmojiResource interfaces
+
+### Minor Changes
+
+- [`34155ee7563`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34155ee7563) - add sampling for 2 ufo experiences to reduce volume of analytics
+- [`11f56527739`](https://bitbucket.org/atlassian/atlassian-frontend/commits/11f56527739) - Export emoji placeholder class name
+
+### Patch Changes
+
+- [`cd92dca3d5c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd92dca3d5c) - minor improvements on upload emoji and add more tests
+- Updated dependencies
+
+## 64.7.1
+
+### Patch Changes
+
+- [`6e01776f0b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e01776f0b7) - remove placeholder when lazy load emoji
+- [`6e01776f0b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e01776f0b7) - fix placeholder issue in lazy loaded emoji by removing it and re-write the anlytics tracking around it
+- [`c3f9e9bce1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3f9e9bce1c) - Add custom information to failure and abort events for UFO experiences
+- Updated dependencies
+
 ## 64.7.0
 
 ### Minor Changes

package/dist/cjs/api/EmojiResource.js

@@ -45,7 +45,7 @@ var _EmojiRepository = _interopRequireDefault(require("./EmojiRepository"));
 
 var _SiteEmojiResource = _interopRequireDefault(require("./media/SiteEmojiResource"));
 
-var _analytics = require("../util/analytics");
+var _ufoExperiences = require("../util/analytics/ufoExperiences");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -81,66 +81,228 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     _this = _super.call(this);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activeLoaders", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "retries", new Map());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isInitialised", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptimisticImageURL", function (emojiId) {
+      if (_this.emojiProviderConfig.optimisticImageApi) {
+        return _this.emojiProviderConfig.optimisticImageApi.getUrl(emojiId);
+      }
+
+      return;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isLoaded", function () {
       return _this.activeLoaders === 0 && _this.emojiRepository;
     });
+    _this.emojiProviderConfig = config;
     _this.recordConfig = config.recordConfig;
-    _this.currentUser = config.currentUser; // Ensure order is retained by tracking until all done.
+    _this.currentUser = config.currentUser;
 
-    var emojiResponses = [];
-    _this.activeLoaders = config.providers.length;
-    config.providers.forEach(function (provider, index) {
-      var providerType = _this.getProviderType(provider);
+    if ((0, _storageAvailable.default)('localStorage')) {
+      _this.selectedTone = _this.loadStoredTone();
+    }
 
-      _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).start();
+    if (config.providers.length === 0) {
+      throw new Error('No providers specified');
+    }
 
-      _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).addMetadata({
-        type: providerType
-      });
+    return _this;
+  }
 
-      var loader = new _EmojiLoader.default(provider);
-      var emojis = loader.loadEmoji();
-      emojis.then(function (emojiResponse) {
-        emojiResponses[index] = emojiResponse;
+  (0, _createClass2.default)(EmojiResource, [{
+    key: "fetchEmojiProvider",
+    value: function fetchEmojiProvider(force) {
+      var _this2 = this;
 
-        _this.initEmojiRepository(emojiResponses);
+      // unless (re-)fetch is being forced, fetching will only
+      // happen if no emojiRepository exists
+      // in case this method is called and emojiRepository has already been populated
+      // the method will just return the existing emojiRepository
+      if (force || !this.emojiRepository && !this.isInitialised) {
+        this.isInitialised = true; // Ensure order is retained by tracking until all done.
+
+        var emojiResponses = [];
+        this.activeLoaders = this.emojiProviderConfig.providers.length;
+        this.emojiProviderConfig.providers.forEach( /*#__PURE__*/function () {
+          var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(provider, index) {
+            var providerType, loader, emojis;
+            return _regenerator.default.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    providerType = _this2.getProviderType(provider);
+                    (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).start({
+                      samplingRate: _constants.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP
+                    });
+                    (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).addMetadata({
+                      type: providerType
+                    });
+                    loader = new _EmojiLoader.default(provider);
+                    emojis = loader.loadEmoji();
+                    _context.next = 7;
+                    return emojis.then(function (emojiResponse) {
+                      emojiResponses[index] = emojiResponse;
+
+                      _this2.initEmojiRepository(emojiResponses);
+
+                      _this2.initSiteEmojiResource(emojiResponse, provider).then(function () {
+                        _this2.activeLoaders--;
+
+                        _this2.performRetries();
+
+                        _this2.refreshLastFilter(); // if not site emoji it would still resolve
+                        // TODO: improve the logic in future
+
+
+                        (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).success();
+                      });
+                    }).catch(function (reason) {
+                      _this2.activeLoaders--;
+
+                      _this2.notifyError(reason);
+
+                      (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).failure({
+                        metadata: {
+                          reason: reason,
+                          source: 'EmojiProvider',
+                          data: {
+                            providerUrl: provider.url
+                          }
+                        }
+                      });
+                    });
+
+                  case 7:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          return function (_x, _x2) {
+            return _ref.apply(this, arguments);
+          };
+        }());
+      }
 
-        _this.initSiteEmojiResource(emojiResponse, provider).then(function () {
-          _this.activeLoaders--;
+      return Promise.resolve(this.emojiRepository);
+    }
+  }, {
+    key: "fetchByEmojiId",
+    value: function () {
+      var _fetchByEmojiId = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(emojiId, optimistic) {
+        var _emoji, provider, loader, loadEmoji, _emoji2, emoji;
 
-          _this.performRetries();
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(this.emojiRepository && this.isLoaded())) {
+                  _context2.next = 6;
+                  break;
+                }
 
-          _this.refreshLastFilter(); // if not site emoji it would still resolve
-          // TODO: improve the logic in future
+                _context2.next = 3;
+                return this.findByEmojiId(emojiId);
 
+              case 3:
+                _emoji = _context2.sent;
 
-          _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).success();
-        });
-      }).catch(function (reason) {
-        _this.activeLoaders--;
+                if (!_emoji) {
+                  _context2.next = 6;
+                  break;
+                }
 
-        _this.notifyError(reason);
+                return _context2.abrupt("return", Promise.resolve(this.getMediaEmojiDescriptionURLWithInlineToken(_emoji)));
 
-        _analytics.ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
-          metadata: {
-            reason: reason
-          }
-        });
-      });
-    });
+              case 6:
+                if (!(this.emojiProviderConfig.singleEmojiApi && optimistic)) {
+                  _context2.next = 29;
+                  break;
+                }
 
-    if ((0, _storageAvailable.default)('localStorage')) {
-      _this.selectedTone = _this.loadStoredTone();
-    }
+                // if config has singleEmojiApi then fetch single emoji
+                provider = {
+                  url: this.emojiProviderConfig.singleEmojiApi.getUrl(emojiId),
+                  securityProvider: this.emojiProviderConfig.singleEmojiApi.securityProvider
+                };
+                loader = new _EmojiLoader.default(provider);
+                _context2.prev = 9;
+                _context2.next = 12;
+                return loader.loadEmoji();
+
+              case 12:
+                loadEmoji = _context2.sent;
+
+                if (loadEmoji.emojis[0]) {
+                  _context2.next = 15;
+                  break;
+                }
 
-    if (config.providers.length === 0) {
-      throw new Error('No providers specified');
-    }
+                return _context2.abrupt("return");
 
-    return _this;
-  }
+              case 15:
+                if (this.siteEmojiResource) {
+                  _context2.next = 18;
+                  break;
+                }
 
-  (0, _createClass2.default)(EmojiResource, [{
+                _context2.next = 18;
+                return this.initSiteEmojiResource(loadEmoji, provider);
+
+              case 18:
+                return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(loadEmoji.emojis[0]));
+
+              case 21:
+                _context2.prev = 21;
+                _context2.t0 = _context2["catch"](9);
+                _context2.next = 25;
+                return this.findByEmojiId(emojiId);
+
+              case 25:
+                _emoji2 = _context2.sent;
+
+                if (_emoji2) {
+                  _context2.next = 28;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 28:
+                return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(_emoji2));
+
+              case 29:
+                _context2.next = 31;
+                return this.findByEmojiId(emojiId);
+
+              case 31:
+                emoji = _context2.sent;
+
+                if (emoji) {
+                  _context2.next = 34;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 34:
+                return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(emoji));
+
+              case 35:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[9, 21]]);
+      }));
+
+      function fetchByEmojiId(_x3, _x4) {
+        return _fetchByEmojiId.apply(this, arguments);
+      }
+
+      return fetchByEmojiId;
+    }()
+  }, {
     key: "getProviderType",
     value: function getProviderType(provider) {
       if (provider.url.includes('/site')) {
@@ -238,11 +400,11 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "retryIfLoading",
     value: function retryIfLoading(retry, defaultResponse) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!this.isLoaded()) {
         return new Promise(function (resolve, reject) {
-          _this2.retries.set(retry, {
+          _this3.retries.set(retry, {
             resolve: resolve,
             reject: reject
           });
@@ -265,40 +427,40 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "getMediaEmojiDescriptionURLWithInlineToken",
     value: function () {
-      var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emoji) {
+      var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(emoji) {
         var tokenisedMediaPath;
-        return _regenerator.default.wrap(function _callee$(_context) {
+        return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 if (!(this.siteEmojiResource && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
-                  _context.next = 5;
+                  _context3.next = 5;
                   break;
                 }
 
-                _context.next = 3;
+                _context3.next = 3;
                 return this.siteEmojiResource.generateTokenisedMediaURL(emoji);
 
               case 3:
-                tokenisedMediaPath = _context.sent;
-                return _context.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
+                tokenisedMediaPath = _context3.sent;
+                return _context3.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
                   representation: _objectSpread(_objectSpread({}, emoji.representation), {}, {
                     mediaPath: tokenisedMediaPath
                   })
                 }));
 
               case 5:
-                return _context.abrupt("return", emoji);
+                return _context3.abrupt("return", emoji);
 
               case 6:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
 
-      function getMediaEmojiDescriptionURLWithInlineToken(_x) {
+      function getMediaEmojiDescriptionURLWithInlineToken(_x5) {
         return _getMediaEmojiDescriptionURLWithInlineToken.apply(this, arguments);
       }
 
@@ -352,7 +514,7 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "findByShortName",
     value: function findByShortName(shortName) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (this.isLoaded()) {
         // Wait for all emoji to load before looking by shortName (to ensure correct priority)
@@ -360,13 +522,13 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
       }
 
       return this.retryIfLoading(function () {
-        return _this3.findByShortName(shortName);
+        return _this4.findByShortName(shortName);
       }, undefined);
     }
   }, {
     key: "findByEmojiId",
     value: function findByEmojiId(emojiId) {
-      var _this4 = this;
+      var _this5 = this;
 
       var id = emojiId.id,
           shortName = emojiId.shortName;
@@ -387,10 +549,10 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
                 if (!emoji) {
                   // if not, fallback to searching by shortName to
                   // at least render an alternative
-                  return _this4.findByShortName(shortName);
+                  return _this5.findByShortName(shortName);
                 }
 
-                _this4.addUnknownEmoji(emoji);
+                _this5.addUnknownEmoji(emoji);
 
                 return emoji;
               });
@@ -407,59 +569,59 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
       }
 
       return this.retryIfLoading(function () {
-        return _this4.findByEmojiId(emojiId);
+        return _this5.findByEmojiId(emojiId);
       }, undefined);
     }
   }, {
     key: "findById",
     value: function findById(id) {
-      var _this5 = this;
+      var _this6 = this;
 
       if (this.isLoaded()) {
         return this.emojiRepository.findById(id);
       }
 
       return this.retryIfLoading(function () {
-        return _this5.findById(id);
+        return _this6.findById(id);
       }, undefined);
     }
   }, {
     key: "findInCategory",
     value: function findInCategory(categoryId) {
-      var _this6 = this;
+      var _this7 = this;
 
       if (this.isLoaded()) {
         return Promise.resolve(this.emojiRepository.findInCategory(categoryId));
       }
 
       return this.retryIfLoading(function () {
-        return _this6.findInCategory(categoryId);
+        return _this7.findInCategory(categoryId);
       }, []);
     }
   }, {
     key: "getAsciiMap",
     value: function getAsciiMap() {
-      var _this7 = this;
+      var _this8 = this;
 
       if (this.isLoaded()) {
         return Promise.resolve(this.emojiRepository.getAsciiMap());
       }
 
       return this.retryIfLoading(function () {
-        return _this7.getAsciiMap();
+        return _this8.getAsciiMap();
       }, new Map());
     }
   }, {
     key: "getFrequentlyUsed",
     value: function getFrequentlyUsed(options) {
-      var _this8 = this;
+      var _this9 = this;
 
       if (this.isLoaded()) {
         return Promise.resolve(this.emojiRepository.getFrequentlyUsed(options));
       }
 
       return this.retryIfLoading(function () {
-        return _this8.getFrequentlyUsed(options);
+        return _this9.getFrequentlyUsed(options);
       }, []);
     }
     /**
@@ -497,12 +659,12 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "deleteSiteEmoji",
     value: function deleteSiteEmoji(emoji) {
-      var _this9 = this;
+      var _this10 = this;
 
       if (this.siteEmojiResource && emoji.id) {
         return this.siteEmojiResource.deleteEmoji(emoji).then(function (success) {
-          if (success && _this9.emojiRepository) {
-            _this9.emojiRepository.delete(emoji);
+          if (success && _this10.emojiRepository) {
+            _this10.emojiRepository.delete(emoji);
 
             return true;
           }
@@ -516,7 +678,7 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
       }
 
       return this.retryIfLoading(function () {
-        return _this9.deleteSiteEmoji(emoji);
+        return _this10.deleteSiteEmoji(emoji);
       }, false);
     }
   }, {
@@ -545,14 +707,14 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "calculateDynamicCategories",
     value: function calculateDynamicCategories() {
-      var _this10 = this;
+      var _this11 = this;
 
       if (this.isLoaded()) {
         return Promise.resolve(this.emojiRepository.getDynamicCategoryList());
       }
 
       return this.retryIfLoading(function () {
-        return _this10.calculateDynamicCategories();
+        return _this11.calculateDynamicCategories();
       }, []);
     }
   }, {
@@ -579,18 +741,18 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
   var _super2 = _createSuper(UploadingEmojiResource);
 
   function UploadingEmojiResource(config) {
-    var _this11;
+    var _this12;
 
     (0, _classCallCheck2.default)(this, UploadingEmojiResource);
-    _this11 = _super2.call(this, config);
-    _this11.allowUpload = !!config.allowUpload;
-    return _this11;
+    _this12 = _super2.call(this, config);
+    _this12.allowUpload = !!config.allowUpload;
+    return _this12;
   }
 
   (0, _createClass2.default)(UploadingEmojiResource, [{
     key: "isUploadSupported",
     value: function isUploadSupported() {
-      var _this12 = this;
+      var _this13 = this;
 
       if (!this.allowUpload) {
         return Promise.resolve(false);
@@ -601,23 +763,24 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
       }
 
       return this.retryIfLoading(function () {
-        return _this12.isUploadSupported();
+        return _this13.isUploadSupported();
       }, false);
     }
   }, {
     key: "uploadCustomEmoji",
     value: function uploadCustomEmoji(upload) {
-      var _this13 = this;
+      var _this14 = this;
 
+      var retry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       return this.isUploadSupported().then(function (supported) {
-        if (!supported || !_this13.siteEmojiResource) {
+        if (!supported || !_this14.siteEmojiResource) {
           return Promise.reject('No media api support is configured');
         }
 
-        return _this13.siteEmojiResource.uploadEmoji(upload).then(function (emoji) {
-          _this13.addUnknownEmoji(emoji);
+        return _this14.siteEmojiResource.uploadEmoji(upload, retry).then(function (emoji) {
+          _this14.addUnknownEmoji(emoji);
 
-          _this13.refreshLastFilter();
+          _this14.refreshLastFilter();
 
           return emoji;
         });
@@ -626,14 +789,14 @@ var UploadingEmojiResource = /*#__PURE__*/function (_EmojiResource) {
   }, {
     key: "prepareForUpload",
     value: function prepareForUpload() {
-      var _this14 = this;
+      var _this15 = this;
 
       if (this.siteEmojiResource) {
         this.siteEmojiResource.prepareForUpload();
       }
 
       return this.retryIfLoading(function () {
-        return _this14.prepareForUpload();
+        return _this15.prepareForUpload();
       }, undefined);
     }
   }]);

package/dist/cjs/api/media/SiteEmojiResource.js

@@ -177,11 +177,13 @@ var SiteEmojiResource = /*#__PURE__*/function () {
     }
   }, {
     key: "uploadEmoji",
-    value: function uploadEmoji(upload, progressCallback) {
+    value: function uploadEmoji(upload) {
       var _this2 = this;
 
+      var retry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var progressCallback = arguments.length > 2 ? arguments[2] : undefined;
       var startTime = Date.now();
-      return this.tokenManager.getToken('upload').then(function (uploadToken) {
+      return this.tokenManager.getToken('upload', retry).then(function (uploadToken) {
         var tokenLoadTime = Date.now() - startTime;
         (0, _logger.default)('upload token load time', tokenLoadTime);
         return new Promise(function (resolve, reject) {

package/dist/cjs/api/media/TokenManager.js

@@ -36,6 +36,13 @@ var TokenManager = /*#__PURE__*/function () {
 
       return false;
     }
+  }, {
+    key: "fetchNewToken",
+    value: function fetchNewToken(type) {
+      return _utilServiceSupport.utils.requestService(this.siteServiceConfig, {
+        path: "token/".concat(type)
+      });
+    }
   }, {
     key: "addToken",
     value: function addToken(type, mediaApiToken) {
@@ -64,22 +71,16 @@ var TokenManager = /*#__PURE__*/function () {
         }
 
         if (activeTokenRefresh) {
-          // refresh already active, return that
+          // refresh token promise already active, return that
           return activeTokenRefresh;
-        } // clear expired token
-
-
-        tokenDetail.mediaApiToken = undefined;
-      }
+        }
+      } // request a new token and track the promise for future requests until completed
 
-      var path = "token/".concat(type); // request a new token and track the promise for future requests until completed
 
-      tokenDetail.activeTokenRefresh = _utilServiceSupport.utils.requestService(this.siteServiceConfig, {
-        path: path
-      }).then(function (mediaApiToken) {
+      tokenDetail.activeTokenRefresh = this.fetchNewToken(type).then(function (token) {
+        tokenDetail.mediaApiToken = token;
         tokenDetail.activeTokenRefresh = undefined;
-        tokenDetail.mediaApiToken = mediaApiToken;
-        return mediaApiToken;
+        return token;
       });
       return tokenDetail.activeTokenRefresh;
     }