@atlaskit/profilecard 24.14.0 → 24.15.0

package/dist/cjs/components/Team/TeamLoadingState.js

@@ -6,20 +6,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _TeamTrigger = require("../../styled/TeamTrigger");
 var _analytics = require("../../util/analytics");
+var _performance = require("../../util/performance");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports.default = function _default(props) {
-  var analytics = props.analytics;
+  var analytics = props.analytics,
+    analyticsNext = props.analyticsNext;
   (0, _react.useEffect)(function () {
-    analytics(function (duration) {
-      return (0, _analytics.profileCardRendered)('team', 'spinner', {
-        duration: duration
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.spinner', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
-  }, [analytics]);
+    } else {
+      analytics(function (duration) {
+        return (0, _analytics.profileCardRendered)('team', 'spinner', {
+          duration: duration
+        });
+      });
+    }
+  }, [analytics, analyticsNext]);
   return /*#__PURE__*/_react.default.createElement(_TeamTrigger.CardWrapper, {
     testId: "team-profilecard"
   }, /*#__PURE__*/_react.default.createElement(_TeamTrigger.CardHeader, {

package/dist/cjs/components/Team/TeamProfileCard.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
@@ -30,6 +30,7 @@ var _TeamCard = require("../../styled/TeamCard");
 var _TeamTrigger = require("../../styled/TeamTrigger");
 var _analytics = require("../../util/analytics");
 var _click = require("../../util/click");
+var _performance = require("../../util/performance");
 var _Error2 = require("../Error");
 var _TeamForbiddenErrorState = _interopRequireDefault(require("./TeamForbiddenErrorState"));
 var _TeamLoadingState = _interopRequireDefault(require("./TeamLoadingState"));
@@ -39,16 +40,28 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var LARGE_MEMBER_COUNT = 50;
 var GIVE_KUDOS_ACTION_ID = 'give-kudos';
 var avatarGroupMaxCount = 9;
-function onMemberClick(callback, userId, analytics, index, hasHref) {
+function onMemberClick(callback, userId, analytics, analyticsNext, index, hasHref) {
   return function (event) {
-    analytics(function (duration) {
-      return (0, _analytics.teamAvatarClicked)({
-        duration: duration,
-        hasHref: hasHref,
-        hasOnClick: !!callback,
-        index: index
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.avatar', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasHref: hasHref,
+          hasOnClick: !!callback,
+          index: index,
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return (0, _analytics.teamAvatarClicked)({
+          duration: duration,
+          hasHref: hasHref,
+          hasOnClick: !!callback,
+          index: index
+        });
+      });
+    }
     if (callback) {
       callback(userId, event);
     }
@@ -60,6 +73,7 @@ var TeamMembers = function TeamMembers(_ref) {
     members = _ref.members,
     onUserClick = _ref.onUserClick,
     includingYou = _ref.includingYou,
+    analyticsNext = _ref.analyticsNext,
     isTriggeredByKeyboard = _ref.isTriggeredByKeyboard;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
@@ -80,15 +94,25 @@ var TeamMembers = function TeamMembers(_ref) {
   var onMoreClick = (0, _react.useCallback)(function () {
     var isOpen = isMoreMembersOpen.current;
     if (!isOpen) {
-      analytics(function (duration) {
-        return (0, _analytics.moreMembersClicked)({
-          duration: duration,
-          memberCount: count
+      if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreMembers', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            memberCount: count,
+            firedAt: Math.round((0, _performance.getPageTime)())
+          }, _analytics.PACKAGE_META_DATA);
         });
-      });
+      } else {
+        analytics(function (duration) {
+          return (0, _analytics.moreMembersClicked)({
+            duration: duration,
+            memberCount: count
+          });
+        });
+      }
     }
     isMoreMembersOpen.current = !isOpen;
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   var showMoreButtonProps = {
     onClick: onMoreClick,
     'aria-label': formatMessage(_messages.default.profileCardMoreMembersLabel, {
@@ -103,7 +127,7 @@ var TeamMembers = function TeamMembers(_ref) {
     appearance: "stack",
     data: members.map(function (member, index) {
       var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
-      var onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      var onClick = onMemberClick(onUserClick, member.id, analytics, analyticsNext, index, !!generateUserLink);
       return {
         key: member.id,
         name: member.fullName,
@@ -128,17 +152,30 @@ var TeamMembers = function TeamMembers(_ref) {
     }
   })));
 };
-function onActionClick(action, analytics, index) {
+function onActionClick(action, analytics, analyticsNext, index) {
   return function (event) {
-    analytics(function (duration) {
-      return (0, _analytics.actionClicked)('team', {
-        duration: duration,
-        hasHref: !!action.link,
-        hasOnClick: !!action.callback,
-        index: index,
-        actionId: action.id || ''
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.action', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || '',
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return (0, _analytics.actionClicked)('team', {
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || ''
+        });
+      });
+    }
     if (action.callback && (0, _click.isBasicClick)(event)) {
       event.preventDefault();
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -151,11 +188,12 @@ function onActionClick(action, analytics, index) {
 var ActionButton = function ActionButton(_ref2) {
   var action = _ref2.action,
     analytics = _ref2.analytics,
+    analyticsNext = _ref2.analyticsNext,
     index = _ref2.index;
   var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   var actionButton = /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
     key: action.id || index,
-    onClick: onActionClick(action, analytics, index),
+    onClick: onActionClick(action, analytics, analyticsNext, index),
     href: action.link || '',
     target: action.target,
     shouldFitContainer: true
@@ -167,7 +205,8 @@ var ActionButton = function ActionButton(_ref2) {
 };
 var ExtraActions = function ExtraActions(_ref3) {
   var actions = _ref3.actions,
-    analytics = _ref3.analytics;
+    analytics = _ref3.analytics,
+    analyticsNext = _ref3.analyticsNext;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -176,15 +215,25 @@ var ExtraActions = function ExtraActions(_ref3) {
   var onMoreClick = (0, _react.useCallback)(function (shouldBeOpen) {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
-      analytics(function (duration) {
-        return (0, _analytics.moreActionsClicked)('team', {
-          duration: duration,
-          numActions: count + 2
+      if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreActions', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            numActions: count + 2,
+            firedAt: Math.round((0, _performance.getPageTime)())
+          }, _analytics.PACKAGE_META_DATA);
         });
-      });
+      } else {
+        analytics(function (duration) {
+          return (0, _analytics.moreActionsClicked)('team', {
+            duration: duration,
+            numActions: count + 2
+          });
+        });
+      }
     }
     setOpen(shouldBeOpen);
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   if (!count) {
     return null;
   }
@@ -197,7 +246,7 @@ var ExtraActions = function ExtraActions(_ref3) {
     content: function content() {
       return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, actions.map(function (action, index) {
         return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
-          onClick: onActionClick(action, analytics, index + 2),
+          onClick: onActionClick(action, analytics, analyticsNext, index + 2),
           key: action.id || index,
           href: action.link
         }, action.label);
@@ -221,7 +270,8 @@ var ExtraActions = function ExtraActions(_ref3) {
 };
 var ButtonSection = function ButtonSection(_ref4) {
   var actions = _ref4.actions,
-    analytics = _ref4.analytics;
+    analytics = _ref4.analytics,
+    analyticsNext = _ref4.analyticsNext;
   if (!actions) {
     return null;
   }
@@ -231,17 +281,20 @@ var ButtonSection = function ButtonSection(_ref4) {
     return /*#__PURE__*/_react.default.createElement(ActionButton, {
       action: action,
       analytics: analytics,
+      analyticsNext: analyticsNext,
       index: index,
       key: index
     });
   }), extraActions && /*#__PURE__*/_react.default.createElement(ExtraActions, {
     actions: extraActions,
-    analytics: analytics
+    analytics: analytics,
+    analyticsNext: analyticsNext
   }));
 };
 var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
   var actions = _ref5.actions,
     analytics = _ref5.analytics,
+    analyticsNext = _ref5.analyticsNext,
     team = _ref5.team,
     viewingUserId = _ref5.viewingUserId,
     generateUserLink = _ref5.generateUserLink,
@@ -259,17 +312,33 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     return member.id === viewingUserId;
   });
   (0, _react.useEffect)(function () {
-    analytics(function (duration) {
-      var _team$members;
-      return (0, _analytics.profileCardRendered)('team', 'content', {
-        duration: duration,
-        numActions: allActions.length,
-        memberCount: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length,
-        includingYou: includingYou,
-        descriptionLength: team.description.length,
-        titleLength: team.displayName.length
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.content', function (duration) {
+        var _team$members$length, _team$members;
+        return _objectSpread({
+          duration: duration,
+          numActions: allActions.length,
+          memberCount: (_team$members$length = (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length) !== null && _team$members$length !== void 0 ? _team$members$length : null,
+          includingYou: includingYou !== null && includingYou !== void 0 ? includingYou : null,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length,
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        var _team$members2;
+        return (0, _analytics.profileCardRendered)('team', 'content', {
+          duration: duration,
+          numActions: allActions.length,
+          memberCount: (_team$members2 = team.members) === null || _team$members2 === void 0 ? void 0 : _team$members2.length,
+          includingYou: includingYou,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length
+        });
+      });
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/_react.default.createElement(_TeamTrigger.CardWrapper, {
@@ -281,6 +350,7 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     content: team.displayName
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_TeamCard.TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null))), /*#__PURE__*/_react.default.createElement(TeamMembers, {
     analytics: analytics,
+    analyticsNext: analyticsNext,
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
@@ -288,32 +358,53 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/_react.default.createElement(_TeamCard.DescriptionWrapper, null, /*#__PURE__*/_react.default.createElement(_TeamCard.Description, null, team.description)), /*#__PURE__*/_react.default.createElement(ButtonSection, {
     actions: allActions,
-    analytics: analytics
+    analytics: analytics,
+    analyticsNext: analyticsNext
   })));
 };
 var ErrorMessage = function ErrorMessage(_ref6) {
   var analytics = _ref6.analytics,
+    analyticsNext = _ref6.analyticsNext,
     clientFetchProfile = _ref6.clientFetchProfile,
     isLoading = _ref6.isLoading;
   var hasRetry = !!clientFetchProfile;
   (0, _react.useEffect)(function () {
-    analytics(function (duration) {
-      return (0, _analytics.profileCardRendered)('team', 'error', {
-        duration: duration,
-        hasRetry: hasRetry
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasRetry: hasRetry,
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
-  }, [analytics, hasRetry]);
+    } else {
+      analytics(function (duration) {
+        return (0, _analytics.profileCardRendered)('team', 'error', {
+          duration: duration,
+          hasRetry: hasRetry
+        });
+      });
+    }
+  }, [analytics, analyticsNext, hasRetry]);
   var retry = (0, _react.useCallback)(function () {
-    analytics(function (duration) {
-      return (0, _analytics.errorRetryClicked)({
-        duration: duration
+    if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.errorRetry', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          firedAt: Math.round((0, _performance.getPageTime)())
+        }, _analytics.PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return (0, _analytics.errorRetryClicked)({
+          duration: duration
+        });
+      });
+    }
     if (clientFetchProfile) {
       clientFetchProfile();
     }
-  }, [analytics, clientFetchProfile]);
+  }, [analytics, analyticsNext, clientFetchProfile]);
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
     testId: "team-profilecard-error"
   }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
@@ -328,6 +419,7 @@ var ErrorMessage = function ErrorMessage(_ref6) {
 };
 var TeamProfileCard = function TeamProfileCard(props) {
   var analytics = props.analytics,
+    analyticsNext = props.analyticsNext,
     clientFetchProfile = props.clientFetchProfile,
     hasError = props.hasError,
     isLoading = props.isLoading,
@@ -336,13 +428,15 @@ var TeamProfileCard = function TeamProfileCard(props) {
   if (hasError) {
     if ((errorType === null || errorType === void 0 ? void 0 : errorType.reason) === 'TEAMS_FORBIDDEN') {
       return /*#__PURE__*/_react.default.createElement(_TeamForbiddenErrorState.default, {
-        analytics: analytics
+        analytics: analytics,
+        analyticsNext: analyticsNext
       });
     } else {
       return /*#__PURE__*/_react.default.createElement(_TeamTrigger.CardWrapper, {
         testId: "team-profilecard"
       }, /*#__PURE__*/_react.default.createElement(ErrorMessage, {
         analytics: analytics,
+        analyticsNext: analyticsNext,
         clientFetchProfile: clientFetchProfile,
         isLoading: isLoading
       }));
@@ -350,7 +444,8 @@ var TeamProfileCard = function TeamProfileCard(props) {
   }
   if (isLoading) {
     return /*#__PURE__*/_react.default.createElement(_TeamLoadingState.default, {
-      analytics: analytics
+      analytics: analytics,
+      analyticsNext: analyticsNext
     });
   }
   if (team) {