@atlaskit/emoji 66.1.2 → 67.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/emoji
 
+## 67.0.0
+
+### Major Changes
+
+- [`f25b0c5379b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f25b0c5379b) - Drop support for legacy React Context, and create new EmojiCommonProvider to provide emoji provider
+- [`62789954243`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62789954243) - react-virutlaized has been replaced with @tanstack/react-virutal in @atlaskit/emoji
+
+### Minor Changes
+
+- [`c7649c62641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c7649c62641) - add getEmojiProvider in EmojiResource to return emoji provider
+- [`1d41bbc2965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d41bbc2965) - This changeset introduces non breaking changes to support ssr within the loader emoji component
+- [`b7678f756b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7678f756b3) - useEmoji hook introduced to work along side EmojiCommonProvider
+
+### Patch Changes
+
+- [`d9b8aef8963`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9b8aef8963) - Remove resolution of optimistic image url inside resourced emoji
+- [`2d8e77c92f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d8e77c92f0) - Remove export from useEmoji hook
+- [`157052c5719`](https://bitbucket.org/atlassian/atlassian-frontend/commits/157052c5719) - improve sampling algorithm in ufo analytics, and add lazyload metadata to emoji rendered ufo analytics
+- [`004378db934`](https://bitbucket.org/atlassian/atlassian-frontend/commits/004378db934) - Fix VirtualList component force rendering while been unmounted and re-mounted in the DOM
+- Updated dependencies
+
 ## 66.1.2
 
 ### Patch Changes

package/dist/cjs/api/EmojiResource.js

@@ -31,14 +31,14 @@ var _utilServiceSupport = require("@atlaskit/util-service-support");
 
 var _constants = require("../util/constants");
 
+var _logger = _interopRequireDefault(require("../util/logger"));
+
 var _typeHelpers = require("../util/type-helpers");
 
 var _storageAvailable = _interopRequireDefault(require("../util/storage-available"));
 
 var _types = require("../types");
 
-var _logger = _interopRequireDefault(require("../util/logger"));
-
 var _EmojiLoader = _interopRequireDefault(require("./EmojiLoader"));
 
 var _EmojiRepository = _interopRequireDefault(require("./EmojiRepository"));
@@ -90,7 +90,7 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
       return;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isLoaded", function () {
-      return _this.activeLoaders === 0 && _this.emojiRepository;
+      return _this.activeLoaders === 0 && !!_this.emojiRepository;
     });
     _this.emojiProviderConfig = config;
     _this.recordConfig = config.recordConfig;
@@ -104,121 +104,212 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
       throw new Error('No providers specified');
     }
 
+    _this.activeLoaders = _this.emojiProviderConfig.providers.length;
+    _this.emojiResponses = [];
     return _this;
   }
+  /**
+   * Get the emoji provider from Emoji Resource
+   * @returns Promise<EmojiProvider>
+   */
+
 
   (0, _createClass2.default)(EmojiResource, [{
+    key: "getEmojiProvider",
+    value: function () {
+      var _getEmojiProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var options,
+            _args = arguments;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {
+                  fetchAtStart: true
+                };
+
+                if (!options.fetchAtStart) {
+                  _context.next = 11;
+                  break;
+                }
+
+                _context.prev = 2;
+                _context.next = 5;
+                return this.fetchEmojiProvider();
+
+              case 5:
+                _context.next = 11;
+                break;
+
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](2);
+                (0, _logger.default)(_context.t0);
+                return _context.abrupt("return", Promise.resolve(this));
+
+              case 11:
+                return _context.abrupt("return", Promise.resolve(this));
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this, [[2, 7]]);
+      }));
+
+      function getEmojiProvider() {
+        return _getEmojiProvider.apply(this, arguments);
+      }
+
+      return getEmojiProvider;
+    }()
+  }, {
+    key: "fetchIndividualProvider",
+    value: function () {
+      var _fetchIndividualProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(provider, index) {
+        var providerType, loader, emojiResponse;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                providerType = this.getProviderType(provider);
+                _context2.prev = 1;
+                (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); // fetch emoji from provider url and denormalise
+
+                _context2.next = 7;
+                return loader.loadEmoji();
+
+              case 7:
+                emojiResponse = _context2.sent;
+                (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).success(); // setup emoji repository
+
+                this.emojiResponses[index] = emojiResponse;
+                this.initEmojiRepository(this.emojiResponses);
+                _context2.next = 13;
+                return this.initSiteEmojiResource(emojiResponse, provider);
+
+              case 13:
+                this.activeLoaders--;
+                this.performRetries();
+                this.refreshLastFilter();
+                _context2.next = 25;
+                break;
+
+              case 18:
+                _context2.prev = 18;
+                _context2.t0 = _context2["catch"](1);
+                this.activeLoaders--;
+                this.notifyError(_context2.t0);
+                (0, _ufoExperiences.sampledUfoEmojiResourceFetched)(providerType).failure({
+                  metadata: {
+                    reason: _context2.t0,
+                    source: 'EmojiProvider',
+                    providerUrl: provider.url
+                  }
+                });
+                (0, _logger.default)("failed to fetch emoji provider for ".concat(provider.url), _context2.t0);
+                throw new Error("failed to fetch emoji from ".concat(provider.url));
+
+              case 25:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[1, 18]]);
+      }));
+
+      function fetchIndividualProvider(_x, _x2) {
+        return _fetchIndividualProvider.apply(this, arguments);
+      }
+
+      return fetchIndividualProvider;
+    }()
+  }, {
     key: "fetchEmojiProvider",
-    value: function fetchEmojiProvider(force) {
-      var _this2 = this;
-
-      // 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',
-                          providerUrl: provider.url
-                        }
-                      });
-                    });
-
-                  case 7:
-                  case "end":
-                    return _context.stop();
+    value: function () {
+      var _fetchEmojiProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var _this2 = this;
+
+        var force,
+            _args3 = arguments;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                force = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : false;
+
+                if (!(force || !this.emojiRepository && !this.isInitialised)) {
+                  _context3.next = 6;
+                  break;
                 }
-              }
-            }, _callee);
-          }));
 
-          return function (_x, _x2) {
-            return _ref.apply(this, arguments);
-          };
-        }());
+                this.isInitialised = true;
+                this.emojiResponses = []; // fetch emoji providers
+
+                _context3.next = 6;
+                return Promise.all(this.emojiProviderConfig.providers.map(function (provider, index) {
+                  return _this2.fetchIndividualProvider(provider, index);
+                }));
+
+              case 6:
+                return _context3.abrupt("return", Promise.resolve(this.emojiRepository));
+
+              case 7:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function fetchEmojiProvider() {
+        return _fetchEmojiProvider.apply(this, arguments);
       }
 
-      return Promise.resolve(this.emojiRepository);
-    }
+      return fetchEmojiProvider;
+    }()
   }, {
     key: "fetchByEmojiId",
     value: function () {
-      var _fetchByEmojiId = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(emojiId, optimistic) {
+      var _fetchByEmojiId = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(emojiId, optimistic) {
         var _emoji, provider, loader, loadEmoji, _emoji2, emoji;
 
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator.default.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
                 if (!(this.emojiRepository && this.isLoaded())) {
-                  _context2.next = 8;
+                  _context4.next = 8;
                   break;
                 }
 
-                _context2.next = 3;
+                _context4.next = 3;
                 return this.findByEmojiId(emojiId);
 
               case 3:
-                _emoji = _context2.sent;
+                _emoji = _context4.sent;
 
                 if (!_emoji) {
-                  _context2.next = 8;
+                  _context4.next = 8;
                   break;
                 }
 
-                _context2.next = 7;
+                _context4.next = 7;
                 return this.getMediaEmojiDescriptionURLWithInlineToken(_emoji);
 
               case 7:
-                return _context2.abrupt("return", _context2.sent);
+                return _context4.abrupt("return", _context4.sent);
 
               case 8:
                 if (!(this.emojiProviderConfig.singleEmojiApi && optimistic)) {
-                  _context2.next = 31;
+                  _context4.next = 31;
                   break;
                 }
 
@@ -228,74 +319,74 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
                   securityProvider: this.emojiProviderConfig.singleEmojiApi.securityProvider
                 };
                 loader = new _EmojiLoader.default(provider);
-                _context2.prev = 11;
-                _context2.next = 14;
+                _context4.prev = 11;
+                _context4.next = 14;
                 return loader.loadEmoji();
 
               case 14:
-                loadEmoji = _context2.sent;
+                loadEmoji = _context4.sent;
 
                 if (loadEmoji.emojis[0]) {
-                  _context2.next = 17;
+                  _context4.next = 17;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context4.abrupt("return");
 
               case 17:
                 if (this.siteEmojiResource) {
-                  _context2.next = 20;
+                  _context4.next = 20;
                   break;
                 }
 
-                _context2.next = 20;
+                _context4.next = 20;
                 return this.initSiteEmojiResource(loadEmoji, provider);
 
               case 20:
-                return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(loadEmoji.emojis[0]));
+                return _context4.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(loadEmoji.emojis[0]));
 
               case 23:
-                _context2.prev = 23;
-                _context2.t0 = _context2["catch"](11);
-                _context2.next = 27;
+                _context4.prev = 23;
+                _context4.t0 = _context4["catch"](11);
+                _context4.next = 27;
                 return this.findByEmojiId(emojiId);
 
               case 27:
-                _emoji2 = _context2.sent;
+                _emoji2 = _context4.sent;
 
                 if (_emoji2) {
-                  _context2.next = 30;
+                  _context4.next = 30;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context4.abrupt("return");
 
               case 30:
-                return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(_emoji2));
+                return _context4.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(_emoji2));
 
               case 31:
-                _context2.next = 33;
+                _context4.next = 33;
                 return this.findByEmojiId(emojiId);
 
               case 33:
-                emoji = _context2.sent;
+                emoji = _context4.sent;
 
                 if (emoji) {
-                  _context2.next = 36;
+                  _context4.next = 36;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context4.abrupt("return");
 
               case 36:
-                return _context2.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(emoji));
+                return _context4.abrupt("return", this.getMediaEmojiDescriptionURLWithInlineToken(emoji));
 
               case 37:
               case "end":
-                return _context2.stop();
+                return _context4.stop();
             }
           }
-        }, _callee2, this, [[11, 23]]);
+        }, _callee4, this, [[11, 23]]);
       }));
 
       function fetchByEmojiId(_x3, _x4) {
@@ -429,37 +520,37 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "getMediaEmojiDescriptionURLWithInlineToken",
     value: function () {
-      var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(emoji) {
+      var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(emoji) {
         var tokenisedMediaPath;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
+        return _regenerator.default.wrap(function _callee5$(_context5) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context5.prev = _context5.next) {
               case 0:
                 if (!(this.siteEmojiResource && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
-                  _context3.next = 5;
+                  _context5.next = 5;
                   break;
                 }
 
-                _context3.next = 3;
+                _context5.next = 3;
                 return this.siteEmojiResource.generateTokenisedMediaURL(emoji);
 
               case 3:
-                tokenisedMediaPath = _context3.sent;
-                return _context3.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
+                tokenisedMediaPath = _context5.sent;
+                return _context5.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
                   representation: _objectSpread(_objectSpread({}, emoji.representation), {}, {
                     mediaPath: tokenisedMediaPath
                   })
                 }));
 
               case 5:
-                return _context3.abrupt("return", emoji);
+                return _context5.abrupt("return", emoji);
 
               case 6:
               case "end":
-                return _context3.stop();
+                return _context5.stop();
             }
           }
-        }, _callee3, this);
+        }, _callee5, this);
       }));
 
       function getMediaEmojiDescriptionURLWithInlineToken(_x5) {

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

@@ -35,7 +35,7 @@ var _constants = require("../../util/constants");
 
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
-var _useEmojiContext = require("../../hooks/useEmojiContext");
+var _useEmoji2 = require("../../hooks/useEmoji");
 
 var _analytics2 = require("../../util/analytics/analytics");
 
@@ -104,7 +104,9 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
       inValidImage = _useState4[0],
       setInvalidImage = _useState4[1];
 
-  var context = (0, _useEmojiContext.useEmojiContext)();
+  var _useEmoji = (0, _useEmoji2.useEmoji)(),
+      emojiProvider = _useEmoji.emojiProvider;
+
   var loadEmoji = (0, _react.useCallback)(function (emojiProvider) {
     (0, _logger.default)('Loading image via media cache', emoji.shortName);
     (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_START);
@@ -126,10 +128,10 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
     });
   }, [emoji]);
   (0, _react.useEffect)(function () {
-    if (context && context.emoji.emojiProvider) {
-      loadEmoji(context.emoji.emojiProvider);
+    if (emojiProvider) {
+      loadEmoji(emojiProvider);
     }
-  }, [context, loadEmoji]);
+  }, [emojiProvider, loadEmoji]);
 
   var handleLoadError = function handleLoadError(_emojiId) {
     (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({

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

@@ -42,7 +42,8 @@ var DeleteButton = function DeleteButton(props) {
     }),
     onClick: props.onClick,
     appearance: "subtle-link",
-    spacing: "none"
+    spacing: "none",
+    testId: "emoji-delete-button"
   }));
 };
 

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

@@ -180,7 +180,10 @@ var ImageEmoji = function ImageEmoji(props) {
       className = props.className,
       showTooltip = props.showTooltip,
       showDelete = props.showDelete,
-      shouldBeInteractive = props.shouldBeInteractive;
+      shouldBeInteractive = props.shouldBeInteractive,
+      onLoadSuccess = props.onLoadSuccess,
+      disableLazyLoad = props.disableLazyLoad,
+      autoWidth = props.autoWidth;
 
   var _useInView = (0, _useInView3.useInView)({
     triggerOnce: true
@@ -221,7 +224,7 @@ var ImageEmoji = function ImageEmoji(props) {
   if (fitToHeight && width && height) {
     // Presize image, to prevent reflow due to size changes after loading
     sizing = {
-      width: fitToHeight / height * width,
+      width: autoWidth ? 'auto' : fitToHeight / height * width,
       height: fitToHeight
     };
   }
@@ -230,19 +233,26 @@ var ImageEmoji = function ImageEmoji(props) {
     handleImageError(props, event);
   };
 
-  var markStartLoadFromMountedTime = (0, _react.useCallback)(function () {
+  var onLoad = function onLoad() {
     var mountedMark = ufoExp.metrics.marks.find(function (mark) {
       return mark.name === _types.UfoEmojiTimings.MOUNTED_END;
-    });
-    ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
-  }, [ufoExp]);
+    }); // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
 
-  var onLoad = function onLoad() {
-    // onload could trigger before onBeforeLoad when emojis in viewport at start, so we need to mark onload start manually.
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_START)) {
-      markStartLoadFromMountedTime();
+      ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_START, mountedMark === null || mountedMark === void 0 ? void 0 : mountedMark.time);
     }
 
+    var loadedStartMark = ufoExp.metrics.marks.find(function (mark) {
+      return mark.name === _types.UfoEmojiTimings.ONLOAD_START;
+    });
+
+    if (mountedMark && loadedStartMark) {
+      ufoExp.addMetadata({
+        lazyLoad: loadedStartMark.time > mountedMark.time
+      });
+    } // onload_start
+
+
     if (!(0, _ufoExperiences.hasUfoMarked)(ufoExp, _types.UfoEmojiTimings.ONLOAD_END)) {
       ufoExp.mark(_types.UfoEmojiTimings.ONLOAD_END);
     }
@@ -252,6 +262,10 @@ var ImageEmoji = function ImageEmoji(props) {
         IBSupported: _browserSupport.isIntersectionObserverSupported
       }
     });
+
+    if (onLoadSuccess) {
+      onLoadSuccess(emoji);
+    }
   };
 
   var onBeforeLoad = (0, _react.useCallback)(function () {
@@ -267,7 +281,7 @@ var ImageEmoji = function ImageEmoji(props) {
   }, [inView, onBeforeLoad]);
   var emojiNode = (0, _react2.jsx)("img", (0, _extends2.default)({
     //@ts-ignore
-    loading: "lazy",
+    loading: disableLazyLoad ? 'eager' : 'lazy',
     src: src,
     key: src,
     alt: emoji.shortName,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.EmojiActions = void 0;
+exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -40,12 +40,19 @@ var _styles = require("./styles");
 var _styles2 = require("../picker/styles");
 
 /** @jsx jsx */
+var emojiActionsTestId = 'emoji-actions';
+exports.emojiActionsTestId = emojiActionsTestId;
+var uploadEmojiTestId = 'upload-emoji'; // Generic Type for the wrapped functional component
+
+exports.uploadEmojiTestId = uploadEmojiTestId;
+
 var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
       uploadEnabled = props.uploadEnabled,
       formatMessage = props.intl.formatMessage;
   return (0, _react2.jsx)(_react.Fragment, null, uploadEnabled && (0, _react2.jsx)("div", {
-    css: _styles.addCustomEmoji
+    css: _styles.addCustomEmoji,
+    "data-testid": uploadEmojiTestId
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
     return (0, _react2.jsx)(_standardButton.default, {
       onClick: onOpenUpload,
@@ -161,7 +168,7 @@ var EmojiActions = function EmojiActions(props) {
   }
 
   return (0, _react2.jsx)("div", {
-    "data-testid": "emoji-actions",
+    "data-testid": emojiActionsTestId,
     css: previewFooterClassnames,
     onMouseLeave: onMouseLeaveHandler
   }, (0, _react2.jsx)("div", {