@atlaskit/emoji 64.2.0 → 64.4.0

package/dist/es2019/components/uploader/EmojiUploadComponent.js

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import classNames from 'classnames';
-import * as styles from './styles';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
+import { emojiUploadFooter, emojiUploadWidget } from './styles';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 export default class EmojiUploadComponent extends PureComponent {
   constructor(props) {
     super(props);
@@ -16,6 +18,10 @@ export default class EmojiUploadComponent extends PureComponent {
       const {
         emojiProvider
       } = this.props;
+      ufoExperiences['emoji-uploaded'].start();
+      ufoExperiences['emoji-uploaded'].addMetadata({
+        retry
+      });
       this.fireAnalytics(uploadConfirmButton({
         retry
       }));
@@ -77,17 +83,21 @@ export default class EmojiUploadComponent extends PureComponent {
     this.state = {};
   }
 
+  componentWillUnmount() {
+    ufoExperiences['emoji-uploaded'].abort();
+  }
+
   render() {
     const {
       uploadErrorMessage
     } = this.state;
-    const errorMessage = uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.emojiUploadWidget]),
+    const errorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
+    return jsx("div", {
+      css: emojiUploadWidget,
       ref: this.props.onUploaderRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.emojiUploadFooter])
-    }, /*#__PURE__*/React.createElement(EmojiUploadPickerWithIntl, {
+    }, jsx("div", {
+      css: emojiUploadFooter
+    }, jsx(EmojiUploadPickerWithIntl, {
       ref: this.onUploaderRef,
       onFileChooserClicked: this.onFileChooserClicked,
       onUploadCancelled: this.onUploadCancelled,

package/dist/es2019/components/uploader/styles.js

@@ -1,8 +1,8 @@
-import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
-import { emojiPickerWidth } from '../../util/constants'; // Uploader
+import { emojiPickerWidth } from '../../util/constants';
+import { css } from '@emotion/core'; // Uploader
 
-export const emojiUploadWidget = style({
+export const emojiUploadWidget = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -16,6 +16,6 @@ export const emojiUploadWidget = style({
   marginTop: '-16px'
 }); /// Footer
 
-export const emojiUploadFooter = style({
+export const emojiUploadFooter = css({
   flex: '0 0 auto'
 });

package/dist/es2019/index.js

@@ -6,18 +6,19 @@ import EmojiPicker from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';
-export { selected, selectOnHover, emojiSprite, emojiNode, emojiImage } from './components/common/styles';
+export { // renaming exports to prevent breaking changes due to renaming
+commonSelectedStyles as selected, selectOnHoverStyles as selectOnHover, emojiSprite, emojiNodeStyles as emojiNode, emojiImage } from './components/common/styles';
 import EmojiResource from './api/EmojiResource';
 import EmojiRepository from './api/EmojiRepository';
 import EmojiLoader from './api/EmojiLoader';
 import { denormaliseEmojiServiceResponse } from './api/EmojiUtils';
 import { toEmojiId, toOptionalEmojiId } from './util/type-helpers';
-import { recordSelectionFailedSli, recordSelectionSucceededSli } from './util/analytics';
+import { recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences } from './util/analytics';
 import { customCategory, defaultEmojiHeight, emojiPickerWidth, emojiPickerHeight } from './util/constants';
 import { UsageFrequencyTracker } from './api/internal/UsageFrequencyTracker';
 export { // Classes
 AbstractResource, Emoji, EmojiPlaceholder, EmojiLoader, EmojiPicker, EmojiUploader, EmojiResource, EmojiRepository, EmojiTypeAhead, ResourcedEmoji, // functions
-denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, // Constants
+denormaliseEmojiServiceResponse, toEmojiId, toOptionalEmojiId, recordSelectionFailedSli, recordSelectionSucceededSli, ufoExperiences, // Constants
 emojiPickerWidth, emojiPickerHeight, defaultEmojiHeight, customCategory, UsageFrequencyTracker, EmojiTypeAheadItem };
 export { // Enums
 SearchSort } from './types';

package/dist/es2019/types.js

@@ -33,4 +33,13 @@ export let SearchSort;
   SearchSort[SearchSort["None"] = 0] = "None";
   SearchSort[SearchSort["Default"] = 1] = "Default";
   SearchSort[SearchSort["UsageFrequency"] = 2] = "UsageFrequency";
-})(SearchSort || (SearchSort = {}));
+})(SearchSort || (SearchSort = {}));
+
+export let ProviderTypes;
+
+(function (ProviderTypes) {
+  ProviderTypes["SITE"] = "SITE";
+  ProviderTypes["STANDARD"] = "STANDARD";
+  ProviderTypes["ATLASSIAN"] = "ATLASSIAN";
+  ProviderTypes["UNKNOWN"] = "UNKNOWN";
+})(ProviderTypes || (ProviderTypes = {}));

package/dist/es2019/util/{analytics.js → analytics/analytics.js}

@@ -1,5 +1,5 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { name as packageName, version as packageVersion } from '../../version.json';
 export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 
 const createEvent = (eventType, action, actionSubject, actionSubjectId, attributes = {}) => ({
@@ -14,12 +14,16 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   }
 });
 
-export const insertionSucceeded = source => createEvent('operational', 'succeeded', 'recordEmojiSelection', undefined, {
-  source
-});
-export const insertionFailed = source => createEvent('operational', 'failed', 'recordEmojiSelection', undefined, {
-  source
-});
+export const recordSucceeded = source => {
+  return createEvent('operational', 'succeeded', 'recordEmojiSelection', undefined, {
+    source
+  });
+};
+export const recordFailed = source => {
+  return createEvent('operational', 'failed', 'recordEmojiSelection', undefined, {
+    source
+  });
+};
 
 const emojiPickerEvent = (action, attributes = {}, actionSubjectId) => createEvent('ui', action, 'emojiPicker', actionSubjectId, attributes);
 
@@ -119,15 +123,17 @@ export const typeaheadSelectedEvent = (pressed, duration, emoji, emojiList, quer
 export const typeaheadRenderedEvent = (duration, query, emojiList) => createEvent('operational', 'rendered', 'emojiTypeahead', undefined, {
   duration,
   ...extractCommonAttributes(query, emojiList)
-});
+}); // it's used in editor typeahead to fire success record analytics
+
 export const recordSelectionSucceededSli = options => () => {
   if (options && options.createAnalyticsEvent) {
-    createAndFireEvent('editor')(insertionSucceeded('typeahead'))(options.createAnalyticsEvent);
+    createAndFireEvent('editor')(recordSucceeded('typeahead'))(options.createAnalyticsEvent);
   }
-};
+}; // it's used in editor typeahead to fire failure record analytics
+
 export const recordSelectionFailedSli = options => err => {
   if (options && options.createAnalyticsEvent) {
-    createAndFireEvent('editor')(insertionFailed('typeahead'))(options.createAnalyticsEvent);
+    createAndFireEvent('editor')(recordFailed('typeahead'))(options.createAnalyticsEvent);
   }
 
   return Promise.reject(err);

package/dist/es2019/util/analytics/index.js

@@ -0,0 +1,4 @@
+export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling } from './samplingUfo';
+export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, recordFailed, recordSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent } from './analytics';
+export { sampledUfoRenderedEmoji, ufoExperiences } from './ufoExperiences';
+export { useSampledUFOComponentExperience } from './useSampledUFOComponentExperience';

package/dist/es2019/util/analytics/samplingUfo.js

@@ -0,0 +1,147 @@
+export const ufoExperiencesSampled = {};
+
+const sampleChance = (min, max) => {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export const clearSampled = () => {
+  for (const prop of Object.getOwnPropertyNames(ufoExperiencesSampled)) {
+    delete ufoExperiencesSampled[prop];
+  }
+}; // default sampling function to determine which one to be sampled
+
+export const isExperienceSampled = rate => {
+  // if invalid sampling rate provided, we sample it
+  if (rate > 1 || rate < 0) {
+    return true;
+  }
+
+  if (rate === 1) {
+    return true;
+  }
+
+  if (rate === 0) {
+    return false;
+  }
+
+  const maxCount = Math.ceil(1 / rate);
+  const chance = sampleChance(1, maxCount);
+  return chance === maxCount;
+};
+
+const hasSampledFromStart = experience => {
+  if (!ufoExperiencesSampled[experience.id]) {
+    return false;
+  }
+
+  if (experience.instanceId) {
+    // if the instance of concurrent exp has been sampled from start, allow it.
+    return ufoExperiencesSampled[experience.id].sampledInstance[experience.instanceId];
+  }
+
+  return ufoExperiencesSampled[experience.id].sampled;
+};
+
+/**
+ * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
+ *
+ * e.g. Emoji Picker contains thousands of emojis, which means will trigger a large number of renderred events without sampling
+ * @param ufoExperience
+ * @returns
+ */
+export const withSampling = ufoExperience => {
+  const init = () => {
+    if (!ufoExperiencesSampled[ufoExperience.id]) {
+      ufoExperiencesSampled[ufoExperience.id] = {
+        sampled: false,
+        sampledInstance: {}
+      };
+    }
+  };
+
+  const start = async options => {
+    // check if the experience has already sampled before
+    if (hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    const isSampled = options.samplingFunc || isExperienceSampled;
+
+    if (!isSampled(options.samplingRate)) {
+      if (ufoExperience.instanceId) {
+        ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = false;
+      }
+
+      ufoExperiencesSampled[ufoExperience.id].sampled = false;
+      return;
+    } // update sampled records
+
+
+    if (ufoExperience.instanceId) {
+      ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = true;
+      ufoExperiencesSampled[ufoExperience.id].sampled = true;
+    }
+
+    return ufoExperience.start(options.startTime);
+  };
+
+  const success = async config => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return null;
+    }
+
+    return ufoExperience.success(config);
+  };
+
+  const failure = async config => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return null;
+    }
+
+    return ufoExperience.failure(config);
+  };
+
+  const abort = async config => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return null;
+    }
+
+    return ufoExperience.abort(config);
+  };
+
+  const mark = (name, timestamp) => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.mark(name, timestamp);
+  };
+
+  const markFMP = timestamp => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.markFMP(timestamp);
+  };
+
+  const markInlineResponse = timestamp => {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.markInlineResponse(timestamp);
+  };
+
+  init();
+  return { ...ufoExperience,
+    start,
+    success,
+    failure,
+    abort,
+    mark,
+    markFMP,
+    markInlineResponse
+  };
+};

package/dist/es2019/util/analytics/ufoExperiences.js

@@ -0,0 +1,34 @@
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
+import { withSampling } from './samplingUfo'; // TODO: clean up as not needed
+
+const createRenderExperience = componentName => {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: ExperienceTypes.Load,
+    performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+  };
+};
+
+const createInlineExperience = componentName => {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: ExperienceTypes.Experience,
+    performanceType: ExperiencePerformanceTypes.InlineResult
+  };
+};
+
+export const ufoExperiences = {
+  'emoji-rendered': new ConcurrentExperience('emoji-rendered', createRenderExperience('emoji')),
+  'emoji-resource-fetched': new ConcurrentExperience('emoji-resource-fetched', createRenderExperience('emoji-provider')),
+  'emoji-picker-opened': new UFOExperience('emoji-picker-opened', createRenderExperience('emoji-picker')),
+  'emoji-selection-recorded': new UFOExperience('emoji-selection-recorded', createInlineExperience('emoji-picker')),
+  'emoji-uploaded': new UFOExperience('emoji-uploaded', createInlineExperience('emoji-picker')),
+  'emoji-searched': new UFOExperience('emoji-searched', createInlineExperience('emoji-picker'))
+};
+export const sampledUfoRenderedEmoji = emojiId => {
+  return withSampling(ufoExperiences['emoji-rendered'].getInstance(emojiId.id || emojiId.shortName));
+};

package/dist/es2019/util/analytics/useSampledUFOComponentExperience.js

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import { withSampling } from './samplingUfo';
+
+const useConstructor = callback => {
+  const hasBeenFired = useRef(false);
+
+  if (!hasBeenFired.current) {
+    callback();
+    hasBeenFired.current = true;
+  }
+
+  return null;
+};
+/**
+ * A hook to start an experience and to auto abort the experience when the parent component is unmounted.
+ * Use this instead of a direct call to `experience.start`. If you need to restart the experience
+ * simply trigger an unmount and remount of the parent component.
+ * @param experience the experience to start and abort
+ */
+
+
+export const useSampledUFOComponentExperience = (experience, samplingRate, metadata) => {
+  useEffect(() => {
+    return () => {
+      withSampling(experience).abort();
+    }; // we want this cleanup to only happen on unmount so this is a legit use of empty array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useConstructor(() => {
+    withSampling(experience).start({
+      samplingRate
+    });
+
+    if (metadata) {
+      experience.addMetadata(metadata);
+    }
+  });
+  return null;
+};

package/dist/es2019/util/constants.js

@@ -19,4 +19,8 @@ export const selectedToneStorageKey = `${localStoragePrefix}.selectedTone`;
 export const defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
 export const defaultListLimit = 50;
 export const migrationUserId = 'hipchat_migration_emoticons';
-export const analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker';
+export const analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker'; // This is the base sampling rate in Emoji
+
+export const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in ResourceEmoji which will be used in stead of base sampling rate above
+
+export const SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1; // add more sampling rate in parent components like EmojiTypeAheadItem.

package/dist/es2019/version.json

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

package/dist/esm/api/EmojiResource.js

@@ -15,10 +15,12 @@ import { AbstractResource, utils as serviceUtils } from '@atlaskit/util-service-
 import { selectedToneStorageKey } from '../util/constants';
 import { isMediaEmoji, isPromise, toEmojiId } from '../util/type-helpers';
 import storageAvailable from '../util/storage-available';
+import { ProviderTypes } from '../types';
 import debug from '../util/logger';
 import EmojiLoader from './EmojiLoader';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
+import { ufoExperiences } from '../util/analytics';
 
 /**
  * Checks if the emojiProvider can support uploading at a feature level.
@@ -59,6 +61,12 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     var emojiResponses = [];
     _this.activeLoaders = config.providers.length;
     config.providers.forEach(function (provider, index) {
+      var providerType = _this.getProviderType(provider);
+
+      ufoExperiences['emoji-resource-fetched'].getInstance(providerType).start();
+      ufoExperiences['emoji-resource-fetched'].getInstance(providerType).addMetadata({
+        type: providerType
+      });
       var loader = new EmojiLoader(provider);
       var emojis = loader.loadEmoji();
       emojis.then(function (emojiResponse) {
@@ -71,12 +79,22 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
 
           _this.performRetries();
 
-          _this.refreshLastFilter();
+          _this.refreshLastFilter(); // if not site emoji it would still resolve
+          // TODO: improve the logic in future
+
+
+          ufoExperiences['emoji-resource-fetched'].getInstance(providerType).success();
         });
       }).catch(function (reason) {
         _this.activeLoaders--;
 
         _this.notifyError(reason);
+
+        ufoExperiences['emoji-resource-fetched'].getInstance(providerType).failure({
+          metadata: {
+            reason: reason
+          }
+        });
       });
     });
 
@@ -92,6 +110,19 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }
 
   _createClass(EmojiResource, [{
+    key: "getProviderType",
+    value: function getProviderType(provider) {
+      if (provider.url.includes('/site')) {
+        return ProviderTypes.SITE;
+      } else if (provider.url.includes('/standard')) {
+        return ProviderTypes.STANDARD;
+      } else if (provider.url.includes('/atlassian')) {
+        return ProviderTypes.ATLASSIAN;
+      }
+
+      return ProviderTypes.UNKNOWN;
+    }
+  }, {
     key: "initEmojiRepository",
     value: function initEmojiRepository(emojiResponses) {
       var emojis = [];

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

@@ -178,7 +178,11 @@ var SiteEmojiResource = /*#__PURE__*/function () {
   }, {
     key: "findEmoji",
     value: function findEmoji(emojiId) {
-      var path = "../".concat(emojiId.id);
+      if (!emojiId.id) {
+        return Promise.reject(false);
+      }
+
+      var path = "../".concat(encodeURIComponent(emojiId.id));
       return emojiRequest(this.siteServiceConfig, {
         path: path
       }).then(function (serviceResponse) {
@@ -202,7 +206,11 @@ var SiteEmojiResource = /*#__PURE__*/function () {
         return Promise.reject(false);
       }
 
-      var path = "".concat(emoji.id);
+      if (!emoji.id) {
+        return Promise.reject(false);
+      }
+
+      var path = "".concat(encodeURIComponent(emoji.id));
       var requestInit = {
         method: 'DELETE'
       };

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

@@ -14,6 +14,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -21,7 +22,9 @@ import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-hel
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { EmojiContext } from '../../context/EmojiContext';
+import { UfoErrorBoundary } from './UfoErrorBoundary';
+import { sampledUfoRenderedEmoji, ufoExperiences, useSampledUFOComponentExperience } from '../../util/analytics';
+import { SAMPLING_RATE_EMOJI_RENDERED_EXP } from '../../util/constants';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -30,13 +33,24 @@ export var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render the class based CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   var placeholderSize = props.placeholderSize,
-      emojiProps = _objectWithoutProperties(props, _excluded);
+      emojiProps = _objectWithoutProperties(props, _excluded); // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
-  if (isMediaEmoji(props.emoji)) {
-    return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
-  }
 
-  return /*#__PURE__*/React.createElement(Emoji, emojiProps);
+  useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+    source: 'caching-emoji'
+  });
+
+  var emojiNode = function emojiNode() {
+    if (isMediaEmoji(props.emoji)) {
+      return /*#__PURE__*/React.createElement(CachingMediaEmoji, props);
+    }
+
+    return /*#__PURE__*/React.createElement(Emoji, emojiProps);
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: [ufoExperiences['emoji-rendered'].getInstance(props.emoji.id || props.emoji.shortName)]
+  }, emojiNode());
 };
 /**
  * Rendering a media emoji image from a cache for media emoji, with different
@@ -53,12 +67,17 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     _classCallCheck(this, CachingMediaEmoji);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, props, context);
 
     _defineProperty(_assertThisInitialized(_this), "mounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId, emoji) {
       var invalidImage = _this.state.invalidImage;
+      sampledUfoRenderedEmoji(_emojiId).failure({
+        metadata: {
+          reason: 'load error'
+        }
+      });
 
       if (invalidImage || !emoji) {
         // do nothing, bad image
@@ -80,6 +99,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.mounted = true;
+      sampledUfoRenderedEmoji(this.props.emoji).markFMP();
     }
   }, {
     key: "componentWillUnmount",
@@ -102,10 +122,6 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
     value: function loadEmoji(emoji, context, forceLoad) {
       var _this2 = this;
 
-      if (!context) {
-        return;
-      }
-
       if (!context.emoji) {
         return undefined;
       }
@@ -142,6 +158,12 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
               cachedEmoji: undefined,
               invalidImage: true
             });
+
+            sampledUfoRenderedEmoji(emoji).failure({
+              metadata: {
+                reason: 'failed to load media emoji'
+              }
+            });
           }
         });
         return undefined;
@@ -193,6 +215,8 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
   return CachingMediaEmoji;
 }(PureComponent);
 
-_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
+_defineProperty(CachingMediaEmoji, "contextTypes", {
+  emoji: PropTypes.object
+});
 
 export default CachingEmoji;

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

@@ -1,16 +1,18 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import React from 'react';
 import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
-import * as styles from './styles';
+import { emojiDeleteButton, deleteButton } from './styles';
 
 var DeleteButton = function DeleteButton(props) {
-  return /*#__PURE__*/React.createElement("span", {
-    className: styles.deleteButton
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
+  return jsx("span", {
+    css: deleteButton,
+    className: emojiDeleteButton
+  }, jsx(Button, {
+    iconBefore: jsx(CrossCircleIcon, {
       label: deleteEmojiLabel,
       primaryColor: token('color.text.subtle', N500),
       size: "small"