@atlaskit/profilecard 24.14.1 → 24.15.0

package/dist/esm/components/Team/TeamForbiddenErrorState.js

@@ -1,20 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import messages from '../../messages';
 import { AccessLockSVGWrapper, TeamForbiddenErrorStateWrapper } from '../../styled/TeamCard';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import AccessLockSVG from '../Error/AccessLockSVG';
 export default (function (props) {
-  var analytics = props.analytics;
+  var analytics = props.analytics,
+    analyticsNext = props.analyticsNext;
   var intl = useIntl();
   useEffect(function () {
-    analytics(function (duration) {
-      return profileCardRendered('team', 'error', {
-        duration: duration
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
-  }, [analytics]);
+    } else {
+      analytics(function (duration) {
+        return profileCardRendered('team', 'error', {
+          duration: duration
+        });
+      });
+    }
+  }, [analytics, analyticsNext]);
   return /*#__PURE__*/React.createElement(TeamForbiddenErrorStateWrapper, {
     testId: "team-profilecard-forbidden-error-state"
   }, /*#__PURE__*/React.createElement(EmptyState, {

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

@@ -1,16 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { CardContent, CardHeader, CardWrapper, LoadingWrapper } from '../../styled/TeamTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export default (function (props) {
-  var analytics = props.analytics;
+  var analytics = props.analytics,
+    analyticsNext = props.analyticsNext;
   useEffect(function () {
-    analytics(function (duration) {
-      return profileCardRendered('team', 'spinner', {
-        duration: duration
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.spinner', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
-  }, [analytics]);
+    } else {
+      analytics(function (duration) {
+        return profileCardRendered('team', 'spinner', {
+          duration: duration
+        });
+      });
+    }
+  }, [analytics, analyticsNext]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
     testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {

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

@@ -1,7 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -22,24 +22,37 @@ import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../..
 import { ErrorWrapper, TeamErrorText } from '../../styled/Error';
 import { ActionButtons, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { CardContent, CardHeader, CardWrapper } from '../../styled/TeamTrigger';
-import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
+import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, PACKAGE_META_DATA, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
+import { getPageTime } from '../../util/performance';
 import { ErrorIllustration } from '../Error';
 import TeamForbiddenErrorState from './TeamForbiddenErrorState';
 import TeamLoadingState from './TeamLoadingState';
 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 teamAvatarClicked({
-        duration: duration,
-        hasHref: hasHref,
-        hasOnClick: !!callback,
-        index: index
+    if (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(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return teamAvatarClicked({
+          duration: duration,
+          hasHref: hasHref,
+          hasOnClick: !!callback,
+          index: index
+        });
+      });
+    }
     if (callback) {
       callback(userId, event);
     }
@@ -51,6 +64,7 @@ var TeamMembers = function TeamMembers(_ref) {
     members = _ref.members,
     onUserClick = _ref.onUserClick,
     includingYou = _ref.includingYou,
+    analyticsNext = _ref.analyticsNext,
     isTriggeredByKeyboard = _ref.isTriggeredByKeyboard;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -71,15 +85,25 @@ var TeamMembers = function TeamMembers(_ref) {
   var onMoreClick = useCallback(function () {
     var isOpen = isMoreMembersOpen.current;
     if (!isOpen) {
-      analytics(function (duration) {
-        return moreMembersClicked({
-          duration: duration,
-          memberCount: count
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreMembers', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            memberCount: count,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        analytics(function (duration) {
+          return moreMembersClicked({
+            duration: duration,
+            memberCount: count
+          });
+        });
+      }
     }
     isMoreMembersOpen.current = !isOpen;
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   var showMoreButtonProps = {
     onClick: onMoreClick,
     'aria-label': formatMessage(messages.profileCardMoreMembersLabel, {
@@ -94,7 +118,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,
@@ -119,17 +143,30 @@ var TeamMembers = function TeamMembers(_ref) {
     }
   })));
 };
-function onActionClick(action, analytics, index) {
+function onActionClick(action, analytics, analyticsNext, index) {
   return function (event) {
-    analytics(function (duration) {
-      return actionClicked('team', {
-        duration: duration,
-        hasHref: !!action.link,
-        hasOnClick: !!action.callback,
-        index: index,
-        actionId: action.id || ''
+    if (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(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return actionClicked('team', {
+          duration: duration,
+          hasHref: !!action.link,
+          hasOnClick: !!action.callback,
+          index: index,
+          actionId: action.id || ''
+        });
+      });
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -142,11 +179,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.createElement(LinkButton, {
     key: action.id || index,
-    onClick: onActionClick(action, analytics, index),
+    onClick: onActionClick(action, analytics, analyticsNext, index),
     href: action.link || '',
     target: action.target,
     shouldFitContainer: true
@@ -158,7 +196,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -167,15 +206,25 @@ var ExtraActions = function ExtraActions(_ref3) {
   var onMoreClick = useCallback(function (shouldBeOpen) {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
-      analytics(function (duration) {
-        return moreActionsClicked('team', {
-          duration: duration,
-          numActions: count + 2
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreActions', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            numActions: count + 2,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        analytics(function (duration) {
+          return moreActionsClicked('team', {
+            duration: duration,
+            numActions: count + 2
+          });
+        });
+      }
     }
     setOpen(shouldBeOpen);
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   if (!count) {
     return null;
   }
@@ -188,7 +237,7 @@ var ExtraActions = function ExtraActions(_ref3) {
     content: function content() {
       return /*#__PURE__*/React.createElement(MenuGroup, null, actions.map(function (action, index) {
         return /*#__PURE__*/React.createElement(LinkItem, {
-          onClick: onActionClick(action, analytics, index + 2),
+          onClick: onActionClick(action, analytics, analyticsNext, index + 2),
           key: action.id || index,
           href: action.link
         }, action.label);
@@ -212,7 +261,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;
   }
@@ -222,17 +272,20 @@ var ButtonSection = function ButtonSection(_ref4) {
     return /*#__PURE__*/React.createElement(ActionButton, {
       action: action,
       analytics: analytics,
+      analyticsNext: analyticsNext,
       index: index,
       key: index
     });
   }), extraActions && /*#__PURE__*/React.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,
@@ -250,17 +303,33 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     return member.id === viewingUserId;
   });
   useEffect(function () {
-    analytics(function (duration) {
-      var _team$members;
-      return 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 (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(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        var _team$members2;
+        return 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.createElement(CardWrapper, {
@@ -272,6 +341,7 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
     analytics: analytics,
+    analyticsNext: analyticsNext,
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
@@ -279,32 +349,53 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/React.createElement(DescriptionWrapper, null, /*#__PURE__*/React.createElement(Description, null, team.description)), /*#__PURE__*/React.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;
   useEffect(function () {
-    analytics(function (duration) {
-      return profileCardRendered('team', 'error', {
-        duration: duration,
-        hasRetry: hasRetry
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          hasRetry: hasRetry,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
-  }, [analytics, hasRetry]);
+    } else {
+      analytics(function (duration) {
+        return profileCardRendered('team', 'error', {
+          duration: duration,
+          hasRetry: hasRetry
+        });
+      });
+    }
+  }, [analytics, analyticsNext, hasRetry]);
   var retry = useCallback(function () {
-    analytics(function (duration) {
-      return errorRetryClicked({
-        duration: duration
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.errorRetry', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      analytics(function (duration) {
+        return errorRetryClicked({
+          duration: duration
+        });
+      });
+    }
     if (clientFetchProfile) {
       clientFetchProfile();
     }
-  }, [analytics, clientFetchProfile]);
+  }, [analytics, analyticsNext, clientFetchProfile]);
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
     testId: "team-profilecard-error"
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
@@ -319,6 +410,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,
@@ -327,13 +419,15 @@ var TeamProfileCard = function TeamProfileCard(props) {
   if (hasError) {
     if ((errorType === null || errorType === void 0 ? void 0 : errorType.reason) === 'TEAMS_FORBIDDEN') {
       return /*#__PURE__*/React.createElement(TeamForbiddenErrorState, {
-        analytics: analytics
+        analytics: analytics,
+        analyticsNext: analyticsNext
       });
     } else {
       return /*#__PURE__*/React.createElement(CardWrapper, {
         testId: "team-profilecard"
       }, /*#__PURE__*/React.createElement(ErrorMessage, {
         analytics: analytics,
+        analyticsNext: analyticsNext,
         clientFetchProfile: clientFetchProfile,
         isLoading: isLoading
       }));
@@ -341,7 +435,8 @@ var TeamProfileCard = function TeamProfileCard(props) {
   }
   if (isLoading) {
     return /*#__PURE__*/React.createElement(TeamLoadingState, {
-      analytics: analytics
+      analytics: analytics,
+      analyticsNext: analyticsNext
     });
   }
   if (team) {