@atlaskit/mention 30.0.5 → 30.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/Mention/MentionInternal.js +57 -18
  3. package/dist/cjs/util/package-version.js +1 -1
  4. package/dist/es2019/components/Mention/MentionInternal.js +38 -1
  5. package/dist/es2019/util/package-version.js +1 -1
  6. package/dist/esm/components/Mention/MentionInternal.js +58 -19
  7. package/dist/esm/util/package-version.js +1 -1
  8. package/dist/types/components/Mention/MentionInternal.d.ts +5 -0
  9. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/mention
2
2
 
3
+ ## 30.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`534c9253b7fab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/534c9253b7fab) -
8
+ Add operational mention avatar failure events and reasons behind
9
+ `platform_editor_mention_avatar_observability`, covering image failures, provider failures,
10
+ missing avatar URLs, and missing providers. Events identify the editor or renderer surface without
11
+ adding mention user data. Successful image loads emit no events.
12
+ - Updated dependencies
13
+
3
14
  ## 30.0.5
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/components/Mention/MentionInternal.js CHANGED
@@ -17,6 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
17
17
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
18
  var _react = _interopRequireDefault(require("react"));
19
19
  var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring/focus-ring"));
20
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
20
21
  var _experienceState = require("@atlaskit/ufo/experience-state");
21
22
  var _constants = require("../../_constants");
22
23
  var _isRestricted = require("../../is-restricted");
@@ -41,20 +42,48 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
41
42
  var _this;
42
43
  (0, _classCallCheck2.default)(this, MentionInternal);
43
44
  _this = _callSuper(this, MentionInternal, [props]);
45
+ (0, _defineProperty2.default)(_this, "avatarFailureReported", false);
46
+ (0, _defineProperty2.default)(_this, "avatarImageRef", /*#__PURE__*/_react.default.createRef());
44
47
  (0, _defineProperty2.default)(_this, "state", {
45
48
  hasAvatarError: false
46
49
  });
50
+ (0, _defineProperty2.default)(_this, "reportCompletedAvatarFailure", function () {
51
+ var image = _this.avatarImageRef.current;
52
+ if (image && (0, _fg.fg)('platform_editor_mention_avatar_observability') && image.complete && image.getAttribute('src')) {
53
+ if (image.naturalWidth === 0 && !_this.state.hasAvatarError) {
54
+ _this.reportAvatarFailure();
55
+ }
56
+ }
57
+ });
58
+ (0, _defineProperty2.default)(_this, "reportAvatarFailure", function () {
59
+ var _this$props$createAna, _this$props;
60
+ if (!(0, _fg.fg)('platform_editor_mention_avatar_observability') || _this.avatarFailureReported) {
61
+ return;
62
+ }
63
+ _this.avatarFailureReported = true;
64
+ (_this$props$createAna = (_this$props = _this.props).createAnalyticsEvent) === null || _this$props$createAna === void 0 || (_this$props$createAna = _this$props$createAna.call(_this$props, {
65
+ action: 'failed',
66
+ actionSubject: 'mentionAvatar',
67
+ eventType: 'operational',
68
+ attributes: {
69
+ componentName: 'mention',
70
+ reason: 'image_load_failed',
71
+ surface: 'renderer'
72
+ }
73
+ })) === null || _this$props$createAna === void 0 || _this$props$createAna.fire(_constants.ELEMENTS_CHANNEL);
74
+ });
47
75
  (0, _defineProperty2.default)(_this, "handleAvatarError", function () {
76
+ _this.reportAvatarFailure();
48
77
  _this.setState({
49
78
  hasAvatarError: true
50
79
  });
51
80
  });
52
81
  (0, _defineProperty2.default)(_this, "handleOnClick", function (e) {
53
- var _this$props = _this.props,
54
- id = _this$props.id,
55
- text = _this$props.text,
56
- onClick = _this$props.onClick,
57
- isDisabled = _this$props.isDisabled;
82
+ var _this$props2 = _this.props,
83
+ id = _this$props2.id,
84
+ text = _this$props2.text,
85
+ onClick = _this$props2.onClick,
86
+ isDisabled = _this$props2.isDisabled;
58
87
  if (isDisabled) {
59
88
  // Disabled chips do not invoke their click handler.
60
89
  return;
@@ -64,11 +93,11 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
64
93
  }
65
94
  });
66
95
  (0, _defineProperty2.default)(_this, "handleOnMouseEnter", function (e) {
67
- var _this$props2 = _this.props,
68
- id = _this$props2.id,
69
- text = _this$props2.text,
70
- onMouseEnter = _this$props2.onMouseEnter,
71
- onHover = _this$props2.onHover;
96
+ var _this$props3 = _this.props,
97
+ id = _this$props3.id,
98
+ text = _this$props3.text,
99
+ onMouseEnter = _this$props3.onMouseEnter,
100
+ onHover = _this$props3.onHover;
72
101
  if (onMouseEnter) {
73
102
  onMouseEnter(id, text, e);
74
103
  }
@@ -80,10 +109,10 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
80
109
  }, _index.ANALYTICS_HOVER_DELAY);
81
110
  });
82
111
  (0, _defineProperty2.default)(_this, "handleOnMouseLeave", function (e) {
83
- var _this$props3 = _this.props,
84
- id = _this$props3.id,
85
- text = _this$props3.text,
86
- onMouseLeave = _this$props3.onMouseLeave;
112
+ var _this$props4 = _this.props,
113
+ id = _this$props4.id,
114
+ text = _this$props4.text,
115
+ onMouseLeave = _this$props4.onMouseLeave;
87
116
  if (onMouseLeave) {
88
117
  onMouseLeave(id, text, e);
89
118
  }
@@ -92,10 +121,10 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
92
121
  }
93
122
  });
94
123
  (0, _defineProperty2.default)(_this, "getMentionType", function () {
95
- var _this$props4 = _this.props,
96
- accessLevel = _this$props4.accessLevel,
97
- isHighlighted = _this$props4.isHighlighted,
98
- isDisabled = _this$props4.isDisabled;
124
+ var _this$props5 = _this.props,
125
+ accessLevel = _this$props5.accessLevel,
126
+ isHighlighted = _this$props5.isHighlighted,
127
+ isDisabled = _this$props5.isDisabled;
99
128
  if (isDisabled) {
100
129
  return _types.MentionType.DISABLED;
101
130
  }
@@ -115,6 +144,15 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
115
144
  key: "componentDidMount",
116
145
  value: function componentDidMount() {
117
146
  _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id).success();
147
+ this.reportCompletedAvatarFailure();
148
+ }
149
+ }, {
150
+ key: "componentDidUpdate",
151
+ value: function componentDidUpdate(previousProps) {
152
+ if (previousProps.avatarUrl !== this.props.avatarUrl || previousProps.id !== this.props.id || previousProps.renderAvatarSlot !== this.props.renderAvatarSlot || previousProps.text === "@".concat(_constants.UNKNOWN_USER_ID) !== (this.props.text === "@".concat(_constants.UNKNOWN_USER_ID))) {
153
+ this.avatarFailureReported = false;
154
+ }
155
+ this.reportCompletedAvatarFailure();
118
156
  }
119
157
  }, {
120
158
  key: "componentWillUnmount",
@@ -194,6 +232,7 @@ var MentionInternal = exports.MentionInternal = /*#__PURE__*/function (_React$Pu
194
232
  className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n4ux7c"])
195
233
  }, shouldRenderAvatar ? /*#__PURE__*/_react.default.createElement("img", {
196
234
  alt: "",
235
+ ref: this.avatarImageRef,
197
236
  decoding: "async",
198
237
  draggable: false,
199
238
  height: 16,
package/dist/cjs/util/package-version.js CHANGED
@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.packageVersion = void 0;
7
- var packageVersion = exports.packageVersion = "30.0.4";
7
+ var packageVersion = exports.packageVersion = "30.0.5";
package/dist/es2019/components/Mention/MentionInternal.js CHANGED
@@ -7,8 +7,9 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
 
8
8
  import React from 'react';
9
9
  import FocusRing from '@atlaskit/focus-ring/focus-ring';
10
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
10
11
  import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
11
- import { UNKNOWN_USER_ID } from '../../_constants';
12
+ import { ELEMENTS_CHANNEL, UNKNOWN_USER_ID } from '../../_constants';
12
13
  import { isRestricted } from '../../is-restricted';
13
14
  import { MentionType } from '../../types';
14
15
  import { UnknownUserError } from '../../util/i18n';
@@ -25,10 +26,38 @@ const agentAvatarStyles = null;
25
26
  export class MentionInternal extends React.PureComponent {
26
27
  constructor(props) {
27
28
  super(props);
29
+ _defineProperty(this, "avatarFailureReported", false);
30
+ _defineProperty(this, "avatarImageRef", /*#__PURE__*/React.createRef());
28
31
  _defineProperty(this, "state", {
29
32
  hasAvatarError: false
30
33
  });
34
+ _defineProperty(this, "reportCompletedAvatarFailure", () => {
35
+ const image = this.avatarImageRef.current;
36
+ if (image && fg('platform_editor_mention_avatar_observability') && image.complete && image.getAttribute('src')) {
37
+ if (image.naturalWidth === 0 && !this.state.hasAvatarError) {
38
+ this.reportAvatarFailure();
39
+ }
40
+ }
41
+ });
42
+ _defineProperty(this, "reportAvatarFailure", () => {
43
+ var _this$props$createAna, _this$props, _this$props$createAna2;
44
+ if (!fg('platform_editor_mention_avatar_observability') || this.avatarFailureReported) {
45
+ return;
46
+ }
47
+ this.avatarFailureReported = true;
48
+ (_this$props$createAna = (_this$props = this.props).createAnalyticsEvent) === null || _this$props$createAna === void 0 ? void 0 : (_this$props$createAna2 = _this$props$createAna.call(_this$props, {
49
+ action: 'failed',
50
+ actionSubject: 'mentionAvatar',
51
+ eventType: 'operational',
52
+ attributes: {
53
+ componentName: 'mention',
54
+ reason: 'image_load_failed',
55
+ surface: 'renderer'
56
+ }
57
+ })) === null || _this$props$createAna2 === void 0 ? void 0 : _this$props$createAna2.fire(ELEMENTS_CHANNEL);
58
+ });
31
59
  _defineProperty(this, "handleAvatarError", () => {
60
+ this.reportAvatarFailure();
32
61
  this.setState({
33
62
  hasAvatarError: true
34
63
  });
@@ -99,6 +128,13 @@ export class MentionInternal extends React.PureComponent {
99
128
  }
100
129
  componentDidMount() {
101
130
  mentionRenderedUfoExperience.getInstance(this.props.id).success();
131
+ this.reportCompletedAvatarFailure();
132
+ }
133
+ componentDidUpdate(previousProps) {
134
+ if (previousProps.avatarUrl !== this.props.avatarUrl || previousProps.id !== this.props.id || previousProps.renderAvatarSlot !== this.props.renderAvatarSlot || previousProps.text === `@${UNKNOWN_USER_ID}` !== (this.props.text === `@${UNKNOWN_USER_ID}`)) {
135
+ this.avatarFailureReported = false;
136
+ }
137
+ this.reportCompletedAvatarFailure();
102
138
  }
103
139
  static getDerivedStateFromProps(props, state) {
104
140
  if (props.avatarUrl !== state.avatarUrl) {
@@ -184,6 +220,7 @@ export class MentionInternal extends React.PureComponent {
184
220
  className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n4ux7c"])
185
221
  }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
186
222
  alt: "",
223
+ ref: this.avatarImageRef,
187
224
  decoding: "async",
188
225
  draggable: false,
189
226
  height: 16,
package/dist/es2019/util/package-version.js CHANGED
@@ -1 +1 @@
1
- export const packageVersion = "30.0.4";
1
+ export const packageVersion = "30.0.5";
package/dist/esm/components/Mention/MentionInternal.js CHANGED
@@ -16,8 +16,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
16
16
 
17
17
  import React from 'react';
18
18
  import FocusRing from '@atlaskit/focus-ring/focus-ring';
19
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
19
20
  import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
20
- import { UNKNOWN_USER_ID } from '../../_constants';
21
+ import { ELEMENTS_CHANNEL, UNKNOWN_USER_ID } from '../../_constants';
21
22
  import { isRestricted } from '../../is-restricted';
22
23
  import { MentionType } from '../../types';
23
24
  import { UnknownUserError } from '../../util/i18n';
@@ -36,20 +37,48 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
36
37
  var _this;
37
38
  _classCallCheck(this, MentionInternal);
38
39
  _this = _callSuper(this, MentionInternal, [props]);
40
+ _defineProperty(_this, "avatarFailureReported", false);
41
+ _defineProperty(_this, "avatarImageRef", /*#__PURE__*/React.createRef());
39
42
  _defineProperty(_this, "state", {
40
43
  hasAvatarError: false
41
44
  });
45
+ _defineProperty(_this, "reportCompletedAvatarFailure", function () {
46
+ var image = _this.avatarImageRef.current;
47
+ if (image && fg('platform_editor_mention_avatar_observability') && image.complete && image.getAttribute('src')) {
48
+ if (image.naturalWidth === 0 && !_this.state.hasAvatarError) {
49
+ _this.reportAvatarFailure();
50
+ }
51
+ }
52
+ });
53
+ _defineProperty(_this, "reportAvatarFailure", function () {
54
+ var _this$props$createAna, _this$props;
55
+ if (!fg('platform_editor_mention_avatar_observability') || _this.avatarFailureReported) {
56
+ return;
57
+ }
58
+ _this.avatarFailureReported = true;
59
+ (_this$props$createAna = (_this$props = _this.props).createAnalyticsEvent) === null || _this$props$createAna === void 0 || (_this$props$createAna = _this$props$createAna.call(_this$props, {
60
+ action: 'failed',
61
+ actionSubject: 'mentionAvatar',
62
+ eventType: 'operational',
63
+ attributes: {
64
+ componentName: 'mention',
65
+ reason: 'image_load_failed',
66
+ surface: 'renderer'
67
+ }
68
+ })) === null || _this$props$createAna === void 0 || _this$props$createAna.fire(ELEMENTS_CHANNEL);
69
+ });
42
70
  _defineProperty(_this, "handleAvatarError", function () {
71
+ _this.reportAvatarFailure();
43
72
  _this.setState({
44
73
  hasAvatarError: true
45
74
  });
46
75
  });
47
76
  _defineProperty(_this, "handleOnClick", function (e) {
48
- var _this$props = _this.props,
49
- id = _this$props.id,
50
- text = _this$props.text,
51
- onClick = _this$props.onClick,
52
- isDisabled = _this$props.isDisabled;
77
+ var _this$props2 = _this.props,
78
+ id = _this$props2.id,
79
+ text = _this$props2.text,
80
+ onClick = _this$props2.onClick,
81
+ isDisabled = _this$props2.isDisabled;
53
82
  if (isDisabled) {
54
83
  // Disabled chips do not invoke their click handler.
55
84
  return;
@@ -59,11 +88,11 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
59
88
  }
60
89
  });
61
90
  _defineProperty(_this, "handleOnMouseEnter", function (e) {
62
- var _this$props2 = _this.props,
63
- id = _this$props2.id,
64
- text = _this$props2.text,
65
- onMouseEnter = _this$props2.onMouseEnter,
66
- onHover = _this$props2.onHover;
91
+ var _this$props3 = _this.props,
92
+ id = _this$props3.id,
93
+ text = _this$props3.text,
94
+ onMouseEnter = _this$props3.onMouseEnter,
95
+ onHover = _this$props3.onHover;
67
96
  if (onMouseEnter) {
68
97
  onMouseEnter(id, text, e);
69
98
  }
@@ -75,10 +104,10 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
75
104
  }, ANALYTICS_HOVER_DELAY);
76
105
  });
77
106
  _defineProperty(_this, "handleOnMouseLeave", function (e) {
78
- var _this$props3 = _this.props,
79
- id = _this$props3.id,
80
- text = _this$props3.text,
81
- onMouseLeave = _this$props3.onMouseLeave;
107
+ var _this$props4 = _this.props,
108
+ id = _this$props4.id,
109
+ text = _this$props4.text,
110
+ onMouseLeave = _this$props4.onMouseLeave;
82
111
  if (onMouseLeave) {
83
112
  onMouseLeave(id, text, e);
84
113
  }
@@ -87,10 +116,10 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
87
116
  }
88
117
  });
89
118
  _defineProperty(_this, "getMentionType", function () {
90
- var _this$props4 = _this.props,
91
- accessLevel = _this$props4.accessLevel,
92
- isHighlighted = _this$props4.isHighlighted,
93
- isDisabled = _this$props4.isDisabled;
119
+ var _this$props5 = _this.props,
120
+ accessLevel = _this$props5.accessLevel,
121
+ isHighlighted = _this$props5.isHighlighted,
122
+ isDisabled = _this$props5.isDisabled;
94
123
  if (isDisabled) {
95
124
  return MentionType.DISABLED;
96
125
  }
@@ -110,6 +139,15 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
110
139
  key: "componentDidMount",
111
140
  value: function componentDidMount() {
112
141
  mentionRenderedUfoExperience.getInstance(this.props.id).success();
142
+ this.reportCompletedAvatarFailure();
143
+ }
144
+ }, {
145
+ key: "componentDidUpdate",
146
+ value: function componentDidUpdate(previousProps) {
147
+ if (previousProps.avatarUrl !== this.props.avatarUrl || previousProps.id !== this.props.id || previousProps.renderAvatarSlot !== this.props.renderAvatarSlot || previousProps.text === "@".concat(UNKNOWN_USER_ID) !== (this.props.text === "@".concat(UNKNOWN_USER_ID))) {
148
+ this.avatarFailureReported = false;
149
+ }
150
+ this.reportCompletedAvatarFailure();
113
151
  }
114
152
  }, {
115
153
  key: "componentWillUnmount",
@@ -189,6 +227,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
189
227
  className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1e0c116y _1bsb1x4e _4t3i1x4e _4cvr1h6o _1bah1h6o _1o9zidpf _12l21b66 _s7n410e5", shouldApplyAgentShape && "_2rkoidpf _mkrz1l17", this.state.hasAvatarError && "_s7n4ux7c"])
190
228
  }, shouldRenderAvatar ? /*#__PURE__*/React.createElement("img", {
191
229
  alt: "",
230
+ ref: this.avatarImageRef,
192
231
  decoding: "async",
193
232
  draggable: false,
194
233
  height: 16,
package/dist/esm/util/package-version.js CHANGED
@@ -1 +1 @@
1
- export var packageVersion = "30.0.4";
1
+ export var packageVersion = "30.0.5";
package/dist/types/components/Mention/MentionInternal.d.ts CHANGED
@@ -11,9 +11,14 @@ type State = {
11
11
  };
12
12
  export declare class MentionInternal extends React.PureComponent<Props, State> {
13
13
  private hoverTimeout?;
14
+ private avatarFailureReported;
15
+ private avatarImageRef;
14
16
  state: State;
15
17
  constructor(props: Props);
16
18
  componentDidMount(): void;
19
+ componentDidUpdate(previousProps: Props): void;
20
+ private reportCompletedAvatarFailure;
21
+ private reportAvatarFailure;
17
22
  static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
18
23
  private handleAvatarError;
19
24
  private handleOnClick;
package/package.json CHANGED
@@ -45,7 +45,7 @@
45
45
  "@atlaskit/skeleton": "^4.4.0",
46
46
  "@atlaskit/tag": "^16.0.0",
47
47
  "@atlaskit/teams-avatar": "^4.1.0",
48
- "@atlaskit/tmp-editor-statsig": "^210.0.0",
48
+ "@atlaskit/tmp-editor-statsig": "^211.0.0",
49
49
  "@atlaskit/tokens": "^20.1.0",
50
50
  "@atlaskit/tooltip": "^24.3.0",
51
51
  "@atlaskit/ufo": "^2.0.0",
@@ -99,6 +99,9 @@
99
99
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
100
100
  },
101
101
  "platform-feature-flags": {
102
+ "platform_editor_mention_avatar_observability": {
103
+ "type": "boolean"
104
+ },
102
105
  "rovo_chat_mention_agents": {
103
106
  "type": "experiment",
104
107
  "referenceOnly": true
@@ -121,5 +124,5 @@
121
124
  "*.compiled.css"
122
125
  ],
123
126
  "types": "dist/types/index.d.ts",
124
- "version": "30.0.5"
127
+ "version": "30.0.6"
125
128
  }