@atlaskit/emoji 64.5.0 → 64.6.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/emoji
 
+## 64.6.0
+
+### Minor Changes
+
+- [`b926172a999`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b926172a999) - Custom Emoji Assets now load using inline media tokens preventing 401s
+
+### Patch Changes
+
+- Updated dependencies
+
+## 64.5.2
+
+### Patch Changes
+
+- [`a424e62b264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a424e62b264) - Changes to support Node 16 Typescript definitions from `@types/node`.
+
+## 64.5.1
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
 ## 64.5.0
 
 ### Minor Changes

package/admin/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/admin.js",
   "module": "../dist/esm/admin.js",
   "module:es2019": "../dist/es2019/admin.js",
+  "sideEffects": false,
   "types": "../dist/types/admin.d.ts"
 }

package/dist/cjs/api/EmojiResource.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.supportsUploadFeature = exports.default = exports.EmojiResource = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -43,6 +47,10 @@ var _SiteEmojiResource = _interopRequireDefault(require("./media/SiteEmojiResour
 
 var _analytics = require("../util/analytics");
 
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -52,13 +60,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  *
  * Follow this up with an isUploadSupported() check to see if the provider is actually
  * configured to support uploads.
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
 var supportsUploadFeature = function supportsUploadFeature(emojiProvider) {
-  var _ref = emojiProvider,
-      isUploadSupported = _ref.isUploadSupported,
-      prepareForUpload = _ref.prepareForUpload,
-      uploadCustomEmoji = _ref.uploadCustomEmoji;
-  return !!(isUploadSupported && prepareForUpload && uploadCustomEmoji);
+  var emojiUploadProvider = emojiProvider;
+  return !!emojiUploadProvider.isUploadSupported && !!emojiUploadProvider.uploadCustomEmoji && !!emojiUploadProvider.prepareForUpload;
 };
 
 exports.supportsUploadFeature = supportsUploadFeature;
@@ -248,6 +254,52 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
         (0, _get2.default)((0, _getPrototypeOf2.default)(EmojiResource.prototype), "notifyResult", this).call(this, result);
       }
     }
+    /**
+     *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+     */
+
+  }, {
+    key: "getMediaEmojiDescriptionURLWithInlineToken",
+    value: function () {
+      var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emoji) {
+        var tokenisedMediaPath;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(this.siteEmojiResource && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 3;
+                return this.siteEmojiResource.generateTokenisedMediaURL(emoji);
+
+              case 3:
+                tokenisedMediaPath = _context.sent;
+                return _context.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
+                  representation: _objectSpread(_objectSpread({}, emoji.representation), {}, {
+                    mediaPath: tokenisedMediaPath
+                  })
+                }));
+
+              case 5:
+                return _context.abrupt("return", emoji);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function getMediaEmojiDescriptionURLWithInlineToken(_x) {
+        return _getMediaEmojiDescriptionURLWithInlineToken.apply(this, arguments);
+      }
+
+      return getMediaEmojiDescriptionURLWithInlineToken;
+    }()
   }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {

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

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mediaProportionOfProgress = exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -92,12 +96,65 @@ var SiteEmojiResource = /*#__PURE__*/function () {
     this.mediaEmojiCache = new _MediaEmojiCache.default(this.tokenManager);
   }
   /**
-   * Will load media emoji, returning a new EmojiDescription if, for example,
-   * the URL has changed.
+   * Will generate an emoji media path that is inclusive of client and token within the query parameter
    */
 
 
   (0, _createClass2.default)(SiteEmojiResource, [{
+    key: "generateTokenisedMediaURL",
+    value: function () {
+      var _generateTokenisedMediaURL = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emoji) {
+        var currentMediaPathURL, currentMediaPathPARAMS, readToken;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(emoji && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
+                  _context.next = 9;
+                  break;
+                }
+
+                currentMediaPathURL = new URL(emoji.representation.mediaPath);
+                currentMediaPathPARAMS = currentMediaPathURL.searchParams;
+                _context.next = 5;
+                return this.tokenManager.getToken('read');
+
+              case 5:
+                readToken = _context.sent;
+
+                if (currentMediaPathPARAMS.get('token') !== readToken.jwt) {
+                  currentMediaPathPARAMS.set('token', readToken.jwt);
+                }
+
+                if (currentMediaPathPARAMS.get('client') !== readToken.clientId) {
+                  currentMediaPathPARAMS.set('client', readToken.clientId);
+                }
+
+                return _context.abrupt("return", currentMediaPathURL.toString());
+
+              case 9:
+                throw Error('Emoji resource is not of type Media Representation');
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function generateTokenisedMediaURL(_x) {
+        return _generateTokenisedMediaURL.apply(this, arguments);
+      }
+
+      return generateTokenisedMediaURL;
+    }()
+    /**
+     * Will load media emoji, returning a new EmojiDescription if, for example,
+     * the URL has changed.
+     */
+
+  }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {
       if (!(0, _typeHelpers.isMediaEmoji)(emoji)) {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.expireAdjustment = exports.default = void 0;
+exports.default = exports.EXPIRES_AT_LATENCY_IN_SECONDS = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -14,8 +14,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 
 // expire 30 seconds early to factor in latency, slow services, etc
-var expireAdjustment = 30;
-exports.expireAdjustment = expireAdjustment;
+var EXPIRES_AT_LATENCY_IN_SECONDS = 30;
+exports.EXPIRES_AT_LATENCY_IN_SECONDS = EXPIRES_AT_LATENCY_IN_SECONDS;
 
 var TokenManager = /*#__PURE__*/function () {
   function TokenManager(siteServiceConfig) {
@@ -25,6 +25,18 @@ var TokenManager = /*#__PURE__*/function () {
   }
 
   (0, _createClass2.default)(TokenManager, [{
+    key: "isValidToken",
+    value: function isValidToken(mediaApiToken) {
+      var nowInSeconds = Date.now() / 1000;
+      var expiresAt = mediaApiToken.expiresAt - EXPIRES_AT_LATENCY_IN_SECONDS;
+
+      if (nowInSeconds < expiresAt) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
     key: "addToken",
     value: function addToken(type, mediaApiToken) {
       this.tokens.set(type, {
@@ -46,10 +58,7 @@ var TokenManager = /*#__PURE__*/function () {
           activeTokenRefresh = _tokenDetail.activeTokenRefresh;
 
       if (mediaApiToken) {
-        var nowInSeconds = Date.now() / 1000;
-        var expiresAt = mediaApiToken.expiresAt - expireAdjustment;
-
-        if (nowInSeconds < expiresAt && !forceRefresh) {
+        if (this.isValidToken(mediaApiToken) && !forceRefresh) {
           // still valid
           return Promise.resolve(mediaApiToken);
         }

package/dist/cjs/components/common/CachingEmoji.js

@@ -29,8 +29,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _EmojiUtils = require("../../api/EmojiUtils");
-
 var _typeHelpers = require("../../util/type-helpers");
 
 var _logger = _interopRequireDefault(require("../../util/logger"));
@@ -101,55 +99,43 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     (0, _classCallCheck2.default)(this, CachingMediaEmoji);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId, emoji) {
-      var invalidImage = _this.state.invalidImage;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId) {
       (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
         metadata: {
           reason: 'load error'
         }
       });
 
-      if (invalidImage || !emoji) {
-        // do nothing, bad image
-        return;
-      }
-
       _this.setState({
-        cachedEmoji: _this.loadEmoji(emoji, _this.context, true)
+        invalidImage: true
       });
     });
     _this.state = {
-      cachedEmoji: _this.loadEmoji(props.emoji, context, false)
+      cachedEmoji: undefined
     };
+
+    _this.loadEmoji(props.emoji, context);
+
     return _this;
   }
 
   (0, _createClass2.default)(CachingMediaEmoji, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.mounted = true;
       (0, _analytics.sampledUfoRenderedEmoji)(this.props.emoji).markFMP();
     }
   }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-      if (nextProps.emoji !== this.props.emoji) {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji: this.loadEmoji(nextProps.emoji, nextContext, false)
-          });
-        }
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$state$cachedEmo;
+
+      if (this.props.emoji.shortName !== ((_this$state$cachedEmo = this.state.cachedEmoji) === null || _this$state$cachedEmo === void 0 ? void 0 : _this$state$cachedEmo.shortName)) {
+        this.loadEmoji(this.props.emoji, this.context);
       }
     }
   }, {
     key: "loadEmoji",
-    value: function loadEmoji(emoji, context, forceLoad) {
+    value: function loadEmoji(emoji, context) {
       var _this2 = this;
 
       if (!context) {
@@ -166,60 +152,38 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
         return undefined;
       }
 
-      var fitToHeight = this.props.fitToHeight;
-      var useAlt = (0, _EmojiUtils.shouldUseAltRepresentation)(emoji, fitToHeight);
-      var optimisticRendering = emojiProvider.optimisticMediaRendering(emoji, useAlt);
-
-      if (optimisticRendering && !forceLoad) {
-        (0, _logger.default)('Optimistic rendering', emoji.shortName);
-        return emoji;
-      }
-
       (0, _logger.default)('Loading image via media cache', emoji.shortName);
-      var loadedEmoji = emojiProvider.loadMediaEmoji(emoji, useAlt);
-
-      if ((0, _typeHelpers.isPromise)(loadedEmoji)) {
-        loadedEmoji.then(function (cachedEmoji) {
-          if (_this2.mounted) {
-            _this2.setState({
-              cachedEmoji: cachedEmoji,
-              invalidImage: !cachedEmoji
-            });
-          }
-        }).catch(function () {
-          if (_this2.mounted) {
-            _this2.setState({
-              cachedEmoji: undefined,
-              invalidImage: true
-            });
-
-            (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
-              metadata: {
-                reason: 'failed to load media emoji'
-              }
-            });
-          }
+      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+        _this2.setState({
+          cachedEmoji: cachedEmoji,
+          invalidImage: false
+        });
+      }).catch(function () {
+        _this2.setState({
+          cachedEmoji: undefined,
+          invalidImage: true
         });
-        return undefined;
-      }
-
-      if ((0, _typeHelpers.isEmojiDescription)(loadedEmoji)) {
-        return loadedEmoji;
-      }
 
-      return undefined;
+        (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
+          metadata: {
+            reason: 'failed to load media emoji'
+          }
+        });
+      });
     }
   }, {
     key: "render",
     value: function render() {
-      var cachedEmoji = this.state.cachedEmoji;
+      var _this$state = this.state,
+          cachedEmoji = _this$state.cachedEmoji,
+          invalidImage = _this$state.invalidImage;
       var _this$props = this.props,
           children = _this$props.children,
           placeholderSize = _this$props.placeholderSize,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var emojiComponent;
 
-      if (cachedEmoji) {
+      if (cachedEmoji && !invalidImage) {
         emojiComponent = /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, otherProps, {
           emoji: cachedEmoji,
           onLoadError: this.handleLoadError

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.5.0",
+	"version": "64.6.0",
 	"sideEffects": false
 }

package/dist/es2019/api/EmojiResource.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { AbstractResource, utils as serviceUtils } from '@atlaskit/util-service-support';
 import { selectedToneStorageKey } from '../util/constants';
-import { isMediaEmoji, isPromise, toEmojiId } from '../util/type-helpers';
+import { isMediaEmoji, isMediaRepresentation, isPromise, toEmojiId } from '../util/type-helpers';
 import storageAvailable from '../util/storage-available';
 import { ProviderTypes } from '../types';
 import debug from '../util/logger';
@@ -15,14 +15,11 @@ import { ufoExperiences } from '../util/analytics';
  *
  * Follow this up with an isUploadSupported() check to see if the provider is actually
  * configured to support uploads.
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
  */
 export const supportsUploadFeature = emojiProvider => {
-  const {
-    isUploadSupported,
-    prepareForUpload,
-    uploadCustomEmoji
-  } = emojiProvider;
-  return !!(isUploadSupported && prepareForUpload && uploadCustomEmoji);
+  const emojiUploadProvider = emojiProvider;
+  return !!emojiUploadProvider.isUploadSupported && !!emojiUploadProvider.uploadCustomEmoji && !!emojiUploadProvider.prepareForUpload;
 };
 export class EmojiResource extends AbstractResource {
   constructor(config) {
@@ -184,6 +181,23 @@ export class EmojiResource extends AbstractResource {
       super.notifyResult(result);
     }
   }
+  /**
+   *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+   */
+
+
+  async getMediaEmojiDescriptionURLWithInlineToken(emoji) {
+    if (this.siteEmojiResource && isMediaRepresentation(emoji.representation)) {
+      const tokenisedMediaPath = await this.siteEmojiResource.generateTokenisedMediaURL(emoji);
+      return { ...emoji,
+        representation: { ...emoji.representation,
+          mediaPath: tokenisedMediaPath
+        }
+      };
+    }
+
+    return emoji;
+  }
 
   loadMediaEmoji(emoji, useAlt) {
     if (!this.siteEmojiResource || !isMediaEmoji(emoji)) {

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

@@ -63,6 +63,30 @@ export default class SiteEmojiResource {
     this.tokenManager.addToken('read', mediaApiToken);
     this.mediaEmojiCache = new MediaEmojiCache(this.tokenManager);
   }
+  /**
+   * Will generate an emoji media path that is inclusive of client and token within the query parameter
+   */
+
+
+  async generateTokenisedMediaURL(emoji) {
+    if (emoji && isMediaRepresentation(emoji.representation)) {
+      const currentMediaPathURL = new URL(emoji.representation.mediaPath);
+      const currentMediaPathPARAMS = currentMediaPathURL.searchParams;
+      const readToken = await this.tokenManager.getToken('read');
+
+      if (currentMediaPathPARAMS.get('token') !== readToken.jwt) {
+        currentMediaPathPARAMS.set('token', readToken.jwt);
+      }
+
+      if (currentMediaPathPARAMS.get('client') !== readToken.clientId) {
+        currentMediaPathPARAMS.set('client', readToken.clientId);
+      }
+
+      return currentMediaPathURL.toString();
+    }
+
+    throw Error('Emoji resource is not of type Media Representation');
+  }
   /**
    * Will load media emoji, returning a new EmojiDescription if, for example,
    * the URL has changed.

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

@@ -1,12 +1,23 @@
 import { utils as serviceUtils } from '@atlaskit/util-service-support'; // expire 30 seconds early to factor in latency, slow services, etc
 
-export const expireAdjustment = 30;
+export const EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 export default class TokenManager {
   constructor(siteServiceConfig) {
     this.siteServiceConfig = siteServiceConfig;
     this.tokens = new Map();
   }
 
+  isValidToken(mediaApiToken) {
+    const nowInSeconds = Date.now() / 1000;
+    const expiresAt = mediaApiToken.expiresAt - EXPIRES_AT_LATENCY_IN_SECONDS;
+
+    if (nowInSeconds < expiresAt) {
+      return true;
+    }
+
+    return false;
+  }
+
   addToken(type, mediaApiToken) {
     this.tokens.set(type, {
       mediaApiToken
@@ -27,10 +38,7 @@ export default class TokenManager {
     } = tokenDetail;
 
     if (mediaApiToken) {
-      const nowInSeconds = Date.now() / 1000;
-      const expiresAt = mediaApiToken.expiresAt - expireAdjustment;
-
-      if (nowInSeconds < expiresAt && !forceRefresh) {
+      if (this.isValidToken(mediaApiToken) && !forceRefresh) {
         // still valid
         return Promise.resolve(mediaApiToken);
       }