@atlaskit/editor-plugin-mentions 24.0.1 → 24.0.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-mentions
 
+## 24.0.2
+
+### Patch Changes
+
+- [`534c9253b7fab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/534c9253b7fab) -
+  Add operational mention avatar failure events and reasons behind
+  `platform_editor_mention_avatar_observability`, covering image failures, provider failures,
+  missing avatar URLs, and missing providers. Events identify the editor or renderer surface without
+  adding mention user data. Successful image loads emit no events.
+- Updated dependencies
+
 ## 24.0.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionAvatarRenderer.js

@@ -14,9 +14,18 @@ var avatarSize = 16;
  * No React root or editor portal is created for individual mention nodes.
  */
 var mentionAvatarRenderer = exports.mentionAvatarRenderer = function mentionAvatarRenderer(_ref) {
-  var container = _ref.container;
+  var container = _ref.container,
+    onFailure = _ref.onFailure;
   var image;
   var fallback;
+  var failureReported = false;
+  var currentUrl;
+  var reportFailure = function reportFailure() {
+    if (!failureReported) {
+      failureReported = true;
+      onFailure === null || onFailure === void 0 || onFailure();
+    }
+  };
   var unbindImageError;
   var removeImage = function removeImage() {
     var _unbindImageError, _image;
@@ -32,6 +41,7 @@ var mentionAvatarRenderer = exports.mentionAvatarRenderer = function mentionAvat
     container.classList.remove(fallbackAvatarClassName);
   };
   var showFallback = function showFallback() {
+    reportFailure();
     removeImage();
     removeFallback();
     fallback = container.ownerDocument.createTextNode('@');
@@ -54,6 +64,10 @@ var mentionAvatarRenderer = exports.mentionAvatarRenderer = function mentionAvat
         removeImage();
         return;
       }
+      if (!image || currentUrl !== avatarUrl) {
+        failureReported = false;
+        currentUrl = avatarUrl;
+      }
       if (!image) {
         image = container.ownerDocument.createElement('img');
         image.alt = '';

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -165,17 +165,36 @@ var getNewState = function getNewState(isHighlighted, isRestricted, isDisabled)
 };
 var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   function MentionNodeView(node, config) {
-    var _this$domElement$quer,
-      _api$mention$sharedSt,
-      _this = this;
+    var _this = this,
+      _this$domElement$quer,
+      _api$mention$sharedSt;
     (0, _classCallCheck2.default)(this, MentionNodeView);
     (0, _defineProperty2.default)(this, "hasAvatarSlot", false);
     (0, _defineProperty2.default)(this, "isDestroyed", false);
+    (0, _defineProperty2.default)(this, "reportAvatarFailure", function (reason) {
+      if (!_this.isDestroyed && (0, _fg.fg)('platform_editor_mention_avatar_observability')) {
+        var _this$config$api;
+        var payload = {
+          action: 'failed',
+          actionSubject: 'mentionAvatar',
+          eventType: 'operational',
+          attributes: {
+            componentName: 'mention',
+            reason: reason,
+            surface: 'editor'
+          }
+        };
+        (_this$config$api = _this.config.api) === null || _this$config$api === void 0 || (_this$config$api = _this$config$api.analytics) === null || _this$config$api === void 0 || _this$config$api.actions.fireAnalyticsEvent(payload, _constants.ELEMENTS_CHANNEL);
+      }
+    });
     var options = config.options,
       api = config.api,
       portalProviderAPI = config.portalProviderAPI,
       editorView = config.editorView;
-    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_avatar') || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_graphql_provider'));
+    var hasProvider = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
+    var canReportMissingProvider = !hasProvider && (0, _fg.fg)('platform_editor_mention_avatar_observability');
+    var isAvatarEnabled = (hasProvider || canReportMissingProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_avatar') || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_graphql_provider'));
+    this.hasAvatarSlot = hasProvider && isAvatarEnabled;
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
@@ -183,6 +202,9 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
+    if (canReportMissingProvider && isAvatarEnabled) {
+      this.reportAvatarFailure('missing_provider');
+    }
     this.domElement = dom instanceof HTMLElement ? dom : undefined;
     this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(".".concat(primitiveClassName))) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
     this.mentionTextElement = this.mentionPrimitiveElement;
@@ -192,7 +214,10 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       var avatarContainer = (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.querySelector(".".concat(avatarContainerClassName));
       if (avatarContainer) {
         this.mentionAvatar = (0, _mentionAvatarRenderer.mentionAvatarRenderer)({
-          container: avatarContainer
+          container: avatarContainer,
+          onFailure: function onFailure() {
+            return _this.reportAvatarFailure('image_load_failed');
+          }
         });
         this.resolveMentionAvatar(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
       }
@@ -504,7 +529,19 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
         }
         (_this3$mentionAvatar = _this3.mentionAvatar) === null || _this3$mentionAvatar === void 0 || _this3$mentionAvatar.render(data);
       };
+      var failureReported = false;
       mentionNodeDataProvider.getMentionData(mention, function (payload) {
+        if (_this3.isDestroyed) {
+          return;
+        }
+        if (!failureReported && (payload.error || payload.data && !payload.data.avatarUrl)) {
+          failureReported = true;
+          if (payload.error) {
+            _this3.reportAvatarFailure('provider_failed');
+          } else if (payload.data && !payload.data.avatarUrl) {
+            _this3.reportAvatarFailure('missing_avatar_url');
+          }
+        }
         if (payload.data) {
           applyData(payload.data);
         }

package/dist/cjs/pm-plugins/main.js

@@ -44,7 +44,7 @@ var ACTIONS = exports.ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "24.0.0";
+var PACKAGE_VERSION = "24.0.1";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/es2019/nodeviews/mentionAvatarRenderer.js

@@ -8,10 +8,19 @@ const avatarSize = 16;
  * No React root or editor portal is created for individual mention nodes.
  */
 export const mentionAvatarRenderer = ({
-  container
+  container,
+  onFailure
 }) => {
   let image;
   let fallback;
+  let failureReported = false;
+  let currentUrl;
+  const reportFailure = () => {
+    if (!failureReported) {
+      failureReported = true;
+      onFailure === null || onFailure === void 0 ? void 0 : onFailure();
+    }
+  };
   let unbindImageError;
   const removeImage = () => {
     var _unbindImageError, _image;
@@ -27,6 +36,7 @@ export const mentionAvatarRenderer = ({
     container.classList.remove(fallbackAvatarClassName);
   };
   const showFallback = () => {
+    reportFailure();
     removeImage();
     removeFallback();
     fallback = container.ownerDocument.createTextNode('@');
@@ -50,6 +60,10 @@ export const mentionAvatarRenderer = ({
         removeImage();
         return;
       }
+      if (!image || currentUrl !== avatarUrl) {
+        failureReported = false;
+        currentUrl = avatarUrl;
+      }
       if (!image) {
         image = container.ownerDocument.createElement('img');
         image.alt = '';

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -7,7 +7,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 // oxlint-disable-next-line import/no-duplicates
 
-import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
+import { ELEMENTS_CHANNEL, UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
 import { isResolvingMentionProvider } from '@atlaskit/mention/is-resolving-mention-provider';
 import { isRestricted } from '@atlaskit/mention/is-restricted';
 import { MentionNameStatus } from '@atlaskit/mention/types';
@@ -132,13 +132,32 @@ export class MentionNodeView {
     var _this$domElement$quer, _api$mention$sharedSt;
     _defineProperty(this, "hasAvatarSlot", false);
     _defineProperty(this, "isDestroyed", false);
+    _defineProperty(this, "reportAvatarFailure", reason => {
+      if (!this.isDestroyed && fg('platform_editor_mention_avatar_observability')) {
+        var _this$config$api, _this$config$api$anal;
+        const payload = {
+          action: 'failed',
+          actionSubject: 'mentionAvatar',
+          eventType: 'operational',
+          attributes: {
+            componentName: 'mention',
+            reason,
+            surface: 'editor'
+          }
+        };
+        (_this$config$api = this.config.api) === null || _this$config$api === void 0 ? void 0 : (_this$config$api$anal = _this$config$api.analytics) === null || _this$config$api$anal === void 0 ? void 0 : _this$config$api$anal.actions.fireAnalyticsEvent(payload, ELEMENTS_CHANNEL);
+      }
+    });
     const {
       options,
       api,
       portalProviderAPI,
       editorView
     } = config;
-    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (isExperimentEnabled('platform_editor_mention_node_avatar') || isExperimentEnabled('platform_editor_mention_node_graphql_provider'));
+    const hasProvider = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
+    const canReportMissingProvider = !hasProvider && fg('platform_editor_mention_avatar_observability');
+    const isAvatarEnabled = (hasProvider || canReportMissingProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (isExperimentEnabled('platform_editor_mention_node_avatar') || isExperimentEnabled('platform_editor_mention_node_graphql_provider'));
+    this.hasAvatarSlot = hasProvider && isAvatarEnabled;
     const {
       dom,
       contentDOM
@@ -147,6 +166,9 @@ export class MentionNodeView {
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
+    if (canReportMissingProvider && isAvatarEnabled) {
+      this.reportAvatarFailure('missing_provider');
+    }
     this.domElement = dom instanceof HTMLElement ? dom : undefined;
     this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(`.${primitiveClassName}`)) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
     this.mentionTextElement = this.mentionPrimitiveElement;
@@ -156,7 +178,8 @@ export class MentionNodeView {
       const avatarContainer = (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.querySelector(`.${avatarContainerClassName}`);
       if (avatarContainer) {
         this.mentionAvatar = mentionAvatarRenderer({
-          container: avatarContainer
+          container: avatarContainer,
+          onFailure: () => this.reportAvatarFailure('image_load_failed')
         });
         this.resolveMentionAvatar(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
       }
@@ -411,7 +434,19 @@ export class MentionNodeView {
       }
       (_this$mentionAvatar = this.mentionAvatar) === null || _this$mentionAvatar === void 0 ? void 0 : _this$mentionAvatar.render(data);
     };
+    let failureReported = false;
     mentionNodeDataProvider.getMentionData(mention, payload => {
+      if (this.isDestroyed) {
+        return;
+      }
+      if (!failureReported && (payload.error || payload.data && !payload.data.avatarUrl)) {
+        failureReported = true;
+        if (payload.error) {
+          this.reportAvatarFailure('provider_failed');
+        } else if (payload.data && !payload.data.avatarUrl) {
+          this.reportAvatarFailure('missing_avatar_url');
+        }
+      }
       if (payload.data) {
         applyData(payload.data);
       }

package/dist/es2019/pm-plugins/main.js

@@ -33,7 +33,7 @@ export const ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "24.0.0";
+const PACKAGE_VERSION = "24.0.1";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/esm/nodeviews/mentionAvatarRenderer.js

@@ -8,9 +8,18 @@ var avatarSize = 16;
  * No React root or editor portal is created for individual mention nodes.
  */
 export var mentionAvatarRenderer = function mentionAvatarRenderer(_ref) {
-  var container = _ref.container;
+  var container = _ref.container,
+    onFailure = _ref.onFailure;
   var image;
   var fallback;
+  var failureReported = false;
+  var currentUrl;
+  var reportFailure = function reportFailure() {
+    if (!failureReported) {
+      failureReported = true;
+      onFailure === null || onFailure === void 0 || onFailure();
+    }
+  };
   var unbindImageError;
   var removeImage = function removeImage() {
     var _unbindImageError, _image;
@@ -26,6 +35,7 @@ export var mentionAvatarRenderer = function mentionAvatarRenderer(_ref) {
     container.classList.remove(fallbackAvatarClassName);
   };
   var showFallback = function showFallback() {
+    reportFailure();
     removeImage();
     removeFallback();
     fallback = container.ownerDocument.createTextNode('@');
@@ -48,6 +58,10 @@ export var mentionAvatarRenderer = function mentionAvatarRenderer(_ref) {
         removeImage();
         return;
       }
+      if (!image || currentUrl !== avatarUrl) {
+        failureReported = false;
+        currentUrl = avatarUrl;
+      }
       if (!image) {
         image = container.ownerDocument.createElement('img');
         image.alt = '';

package/dist/esm/nodeviews/mentionNodeView.js

@@ -13,7 +13,7 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 // oxlint-disable-next-line import/no-duplicates
 
-import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
+import { ELEMENTS_CHANNEL, UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
 import { isResolvingMentionProvider } from '@atlaskit/mention/is-resolving-mention-provider';
 import { isRestricted } from '@atlaskit/mention/is-restricted';
 import { MentionNameStatus } from '@atlaskit/mention/types';
@@ -160,17 +160,36 @@ var getNewState = function getNewState(isHighlighted, isRestricted, isDisabled)
 };
 export var MentionNodeView = /*#__PURE__*/function () {
   function MentionNodeView(node, config) {
-    var _this$domElement$quer,
-      _api$mention$sharedSt,
-      _this = this;
+    var _this = this,
+      _this$domElement$quer,
+      _api$mention$sharedSt;
     _classCallCheck(this, MentionNodeView);
     _defineProperty(this, "hasAvatarSlot", false);
     _defineProperty(this, "isDestroyed", false);
+    _defineProperty(this, "reportAvatarFailure", function (reason) {
+      if (!_this.isDestroyed && fg('platform_editor_mention_avatar_observability')) {
+        var _this$config$api;
+        var payload = {
+          action: 'failed',
+          actionSubject: 'mentionAvatar',
+          eventType: 'operational',
+          attributes: {
+            componentName: 'mention',
+            reason: reason,
+            surface: 'editor'
+          }
+        };
+        (_this$config$api = _this.config.api) === null || _this$config$api === void 0 || (_this$config$api = _this$config$api.analytics) === null || _this$config$api === void 0 || _this$config$api.actions.fireAnalyticsEvent(payload, ELEMENTS_CHANNEL);
+      }
+    });
     var options = config.options,
       api = config.api,
       portalProviderAPI = config.portalProviderAPI,
       editorView = config.editorView;
-    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (isExperimentEnabled('platform_editor_mention_node_avatar') || isExperimentEnabled('platform_editor_mention_node_graphql_provider'));
+    var hasProvider = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
+    var canReportMissingProvider = !hasProvider && fg('platform_editor_mention_avatar_observability');
+    var isAvatarEnabled = (hasProvider || canReportMissingProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && (isExperimentEnabled('platform_editor_mention_node_avatar') || isExperimentEnabled('platform_editor_mention_node_graphql_provider'));
+    this.hasAvatarSlot = hasProvider && isAvatarEnabled;
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
@@ -178,6 +197,9 @@ export var MentionNodeView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
+    if (canReportMissingProvider && isAvatarEnabled) {
+      this.reportAvatarFailure('missing_provider');
+    }
     this.domElement = dom instanceof HTMLElement ? dom : undefined;
     this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(".".concat(primitiveClassName))) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
     this.mentionTextElement = this.mentionPrimitiveElement;
@@ -187,7 +209,10 @@ export var MentionNodeView = /*#__PURE__*/function () {
       var avatarContainer = (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.querySelector(".".concat(avatarContainerClassName));
       if (avatarContainer) {
         this.mentionAvatar = mentionAvatarRenderer({
-          container: avatarContainer
+          container: avatarContainer,
+          onFailure: function onFailure() {
+            return _this.reportAvatarFailure('image_load_failed');
+          }
         });
         this.resolveMentionAvatar(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
       }
@@ -499,7 +524,19 @@ export var MentionNodeView = /*#__PURE__*/function () {
         }
         (_this3$mentionAvatar = _this3.mentionAvatar) === null || _this3$mentionAvatar === void 0 || _this3$mentionAvatar.render(data);
       };
+      var failureReported = false;
       mentionNodeDataProvider.getMentionData(mention, function (payload) {
+        if (_this3.isDestroyed) {
+          return;
+        }
+        if (!failureReported && (payload.error || payload.data && !payload.data.avatarUrl)) {
+          failureReported = true;
+          if (payload.error) {
+            _this3.reportAvatarFailure('provider_failed');
+          } else if (payload.data && !payload.data.avatarUrl) {
+            _this3.reportAvatarFailure('missing_avatar_url');
+          }
+        }
         if (payload.data) {
           applyData(payload.data);
         }

package/dist/esm/pm-plugins/main.js

@@ -36,7 +36,7 @@ export var ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "24.0.0";
+var PACKAGE_VERSION = "24.0.1";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/types/nodeviews/mentionAvatarRenderer.d.ts

@@ -7,6 +7,7 @@ export interface MentionAvatarController {
  * Populates the fixed-size avatar slot owned by the vanilla ProseMirror NodeView.
  * No React root or editor portal is created for individual mention nodes.
  */
-export declare const mentionAvatarRenderer: ({ container, }: {
+export declare const mentionAvatarRenderer: ({ container, onFailure, }: {
     container: HTMLElement;
+    onFailure?: () => void;
 }) => MentionAvatarController;

package/dist/types/nodeviews/mentionNodeView.d.ts

@@ -60,6 +60,7 @@ export declare class MentionNodeView implements NodeView {
     private syncDisabledTooltip;
     private setTextContent;
     private setVisibleText;
+    private reportAvatarFailure;
     private resolveMentionAvatar;
     private shouldHighlightMention;
     private updateState;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "24.0.1",
+	"version": "24.0.2",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/teams-app-config": "^3.1.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^210.0.0",
+		"@atlaskit/tmp-editor-statsig": "^211.0.0",
 		"@atlaskit/tokens": "^20.1.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/user-picker": "^14.0.0",
@@ -76,6 +76,10 @@
 		"wait-for-expect": "^1.2.0"
 	},
 	"platform-feature-flags": {
+		"platform_editor_mention_avatar_observability": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"editor-disable-feature": {
 			"type": "boolean",
 			"referenceOnly": true