@atlaskit/profilecard 24.13.7 → 24.14.0

package/dist/es2019/components/User/ReportingLinesDetails.js

@@ -5,12 +5,14 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
-import { reportingLinesClicked } from '../../util/analytics';
+import { PACKAGE_META_DATA, reportingLinesClicked } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -34,6 +36,7 @@ const ReportingLinesDetails = props => {
   } = useIntl();
   const {
     fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext,
     reportingLines = {},
     reportingLinesProfileUrl,
     onReportingLinesClick
@@ -45,10 +48,19 @@ const ReportingLinesDetails = props => {
   const manager = managers.length >= 1 ? managers[0] : undefined;
   const hasReports = reports.length > 0;
   const getReportingLinesOnClick = (user, userType) => onReportingLinesClick ? () => {
-    fireAnalyticsWithDuration(duration => reportingLinesClicked({
-      duration,
-      userType
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', duration => ({
+        duration,
+        userType,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => reportingLinesClicked({
+        duration,
+        userType
+      }));
+    }
     onReportingLinesClick(user);
   } : undefined;
   const onReportingLinksClick = (user, userType, href) => {
@@ -56,10 +68,19 @@ const ReportingLinesDetails = props => {
     if (onReportingLinesClick) {
       shouldPreventDefault = onReportingLinesClick(user) === false;
     }
-    fireAnalyticsWithDuration(duration => reportingLinesClicked({
-      duration,
-      userType
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', duration => ({
+        duration,
+        userType,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      fireAnalyticsWithDuration(duration => reportingLinesClicked({
+        duration,
+        userType
+      }));
+    }
     if (shouldPreventDefault) {
       return;
     }

package/dist/es2019/components/User/UserLoadingState.js

@@ -1,13 +1,23 @@
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import AkSpinner from '@atlaskit/spinner';
 import { SpinnerContainer } from '../../styled/UserTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 const UserLoadingState = ({
-  fireAnalytics
+  fireAnalytics,
+  fireAnalyticsNext
 }) => {
   useEffect(() => {
-    fireAnalytics(profileCardRendered('user', 'spinner'));
-  }, [fireAnalytics]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.spinner', {
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      });
+    } else {
+      fireAnalytics(profileCardRendered('user', 'spinner'));
+    }
+  }, [fireAnalytics, fireAnalyticsNext]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(AkSpinner, null));
 };
 export default UserLoadingState;

package/dist/es2019/components/common/LoadingState.js

@@ -1,15 +1,27 @@
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import AkSpinner from '@atlaskit/spinner';
 import { SpinnerContainer } from '../../styled/UserTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { getActionSubject, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export const LoadingState = ({
   fireAnalytics,
+  fireAnalyticsNext,
   profileType
 }) => {
   useEffect(() => {
-    if (fireAnalytics) {
-      fireAnalytics(profileCardRendered(profileType, 'spinner'));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      if (fireAnalyticsNext) {
+        fireAnalyticsNext(`ui.${getActionSubject(profileType)}.rendered.spinner`, {
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        });
+      }
+    } else {
+      if (fireAnalytics) {
+        fireAnalytics(profileCardRendered(profileType, 'spinner'));
+      }
     }
-  }, [fireAnalytics, profileType]);
+  }, [fireAnalytics, fireAnalyticsNext, profileType]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(AkSpinner, null));
 };

package/dist/es2019/components/common/ProfileCardTrigger.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
-import { cardTriggered } from '../../util/analytics';
+import { cardTriggered, getActionSubject, PACKAGE_META_DATA } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import { useProfileInfo } from '../../util/useProfileInfo';
 import { LoadingState } from './LoadingState';
 import { PopupTrigger } from './PopupTrigger';
@@ -17,7 +19,9 @@ function ProfileCardTriggerInner({
   fetchProfile,
   disabledAriaAttributes,
   profileCardType,
+  testId,
   fireAnalytics,
+  fireAnalyticsNext,
   ...popupProps
 }, ref) {
   var _popupProps$autoFocus;
@@ -57,12 +61,22 @@ function ProfileCardTriggerInner({
       if (!visible) {
         getProfileData === null || getProfileData === void 0 ? void 0 : getProfileData();
         setVisible(true);
-        if (fireAnalytics) {
-          fireAnalytics(cardTriggered(profileCardType, trigger));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          if (fireAnalyticsNext) {
+            fireAnalyticsNext(`ui.${getActionSubject(profileCardType)}.triggered`, {
+              method: trigger,
+              ...PACKAGE_META_DATA,
+              firedAt: Math.round(getPageTime())
+            });
+          }
+        } else {
+          if (fireAnalytics) {
+            fireAnalytics(cardTriggered(profileCardType, trigger));
+          }
         }
       }
     }, showDelay);
-  }, [showDelay, visible, getProfileData, fireAnalytics, profileCardType, trigger]);
+  }, [showDelay, visible, getProfileData, fireAnalytics, profileCardType, trigger, fireAnalyticsNext]);
   const onMouseEnter = useCallback(() => {
     showProfilecard();
   }, [showProfilecard]);
@@ -85,7 +99,8 @@ function ProfileCardTriggerInner({
         showProfilecard: showProfilecard,
         children: children,
         ariaLabelledBy: ariaLabelledBy,
-        trigger: trigger
+        trigger: trigger,
+        "data-testid": testId
       }));
     },
     content: () =>
@@ -94,9 +109,13 @@ function ProfileCardTriggerInner({
     React.createElement("div", {
       onMouseEnter: onMouseEnter,
       onMouseLeave: hideProfilecard,
-      onFocus: showProfilecard
-    }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
+      onFocus: showProfilecard,
+      "data-testid": "profile-card--trigger-content"
+    }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+      testId: "profilecard.profilecardtrigger.loading"
+    }, /*#__PURE__*/React.createElement(LoadingState, {
       fireAnalytics: fireAnalytics,
+      fireAnalyticsNext: fireAnalyticsNext,
       profileType: profileCardType
     })) : renderProfileCard({
       profileData,

package/dist/es2019/components/common/ProfileCardWrapper.js

@@ -6,9 +6,11 @@ const styles = xcss({
   width: '360px'
 });
 export const ProfileCardWrapper = ({
-  children
+  children,
+  testId
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles
+    xcss: styles,
+    testId: testId
   }, children);
 };

package/dist/es2019/util/analytics.js

@@ -2,6 +2,10 @@ import { getPageTime } from './performance';
 
 /** Below lines are copied from teams common analytics */
 const ANALYTICS_CHANNEL = 'peopleTeams';
+export const PACKAGE_META_DATA = {
+  packageName: "@atlaskit/profilecard",
+  packageVersion: "24.13.7"
+};
 const runItLater = cb => {
   const requestIdleCallback = window.requestIdleCallback;
   if (typeof requestIdleCallback === 'function') {
@@ -41,12 +45,12 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "24.13.6",
+    packageVersion: "24.13.7",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }
 });
-const getActionSubject = type => {
+export const getActionSubject = type => {
   switch (type) {
     case 'user':
       return USER_SUBJECT;

package/dist/esm/client/ProfileCardClient.js

@@ -37,8 +37,8 @@ var ProfileCardClient = /*#__PURE__*/function () {
     }
   }, {
     key: "getProfile",
-    value: function getProfile(cloudId, userId, analytics) {
-      return this.userClient.getProfile(cloudId, userId, analytics);
+    value: function getProfile(cloudId, userId, analytics, analyticsNext) {
+      return this.userClient.getProfile(cloudId, userId, analytics, analyticsNext);
     }
   }, {
     key: "getTeamProfile",

package/dist/esm/client/UserProfileCardClient.js

@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { print } from 'graphql';
 import gql from 'graphql-tag';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { userRequestAnalytics } from '../util/analytics';
+import { PACKAGE_META_DATA, userRequestAnalytics } from '../util/analytics';
 import { localTime } from '../util/date';
 import { getPageTime } from '../util/performance';
 import CachingClient from './CachingClient';
@@ -147,7 +147,7 @@ var UserProfileCardClient = /*#__PURE__*/function (_CachingClient) {
     }()
   }, {
     key: "getProfile",
-    value: function getProfile(cloudId, userId, analytics) {
+    value: function getProfile(cloudId, userId, analytics, analyticsNext) {
       var _this2 = this;
       if (!userId) {
         return Promise.reject(new Error('userId missing'));
@@ -159,24 +159,58 @@ var UserProfileCardClient = /*#__PURE__*/function (_CachingClient) {
       }
       return new Promise(function (resolve, reject) {
         var startTime = getPageTime();
-        if (analytics) {
-          analytics(userRequestAnalytics('triggered'));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          if (analyticsNext) {
+            analyticsNext('operational.profilecard.triggered.request', _objectSpread({
+              firedAt: Math.round(getPageTime())
+            }, PACKAGE_META_DATA));
+          }
+        } else {
+          if (analytics) {
+            analytics(userRequestAnalytics('triggered'));
+          }
         }
         _this2.makeRequest(cloudId, userId).then(function (data) {
           if (_this2.cache) {
             _this2.setCachedProfile(cacheIdentifier, data);
           }
-          if (analytics) {
-            analytics(userRequestAnalytics('succeeded', {
-              duration: getPageTime() - startTime
-            }));
+          if (fg('ptc-enable-profile-card-analytics-refactor')) {
+            if (analyticsNext) {
+              analyticsNext('operational.profilecard.succeeded.request', _objectSpread({
+                duration: getPageTime() - startTime,
+                firedAt: Math.round(getPageTime())
+              }, PACKAGE_META_DATA));
+            }
+          } else {
+            if (analytics) {
+              analytics(userRequestAnalytics('succeeded', {
+                duration: getPageTime() - startTime
+              }));
+            }
           }
           resolve(data);
         }).catch(function (error) {
-          if (analytics) {
-            analytics(userRequestAnalytics('failed', _objectSpread({
-              duration: getPageTime() - startTime
-            }, getErrorAttributes(error))));
+          if (fg('ptc-enable-profile-card-analytics-refactor')) {
+            if (analyticsNext) {
+              var errorAttributes = getErrorAttributes(error);
+              analyticsNext('operational.profilecard.failed.request', _objectSpread(_objectSpread({
+                duration: getPageTime() - startTime
+              }, errorAttributes), {}, {
+                traceId: errorAttributes.traceId || null,
+                errorCategory: errorAttributes.errorCategory || null,
+                errorType: errorAttributes.errorType || null,
+                errorPath: errorAttributes.errorPath || null,
+                errorNumber: errorAttributes.errorNumber || null,
+                errorStatusCode: errorAttributes.errorStatusCode || null,
+                firedAt: Math.round(getPageTime())
+              }, PACKAGE_META_DATA));
+            }
+          } else {
+            if (analytics) {
+              analytics(userRequestAnalytics('failed', _objectSpread({
+                duration: getPageTime() - startTime
+              }, getErrorAttributes(error))));
+            }
           }
           reject(error);
         });

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "24.13.6");
+  headers.append('atl-client-version', "24.13.7");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -59,7 +59,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "24.13.6");
+  headers.append('atl-client-version', "24.13.7");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/Agent/AgentProfileCard.js

@@ -164,6 +164,9 @@ var AgentProfileCard = function AgentProfileCard(_ref) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       errorType: errorType,
       fireAnalytics: fireAnalytics
+      // TODO: Add fireAnalyticsNext
+      ,
+      fireAnalyticsNext: function fireAnalyticsNext() {}
     }));
   }
   return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(Box, {

package/dist/esm/components/Agent/AgentProfileCardResourced.js

@@ -148,7 +148,8 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
         fetchData();
       },
       errorType: error || null,
-      fireAnalytics: function fireAnalytics() {}
+      fireAnalytics: function fireAnalytics() {},
+      fireAnalyticsNext: function fireAnalyticsNext() {}
     }));
   }
   return /*#__PURE__*/React.createElement(Suspense, {

package/dist/esm/components/Error/ErrorMessage.js

@@ -1,25 +1,38 @@
+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 Button from '@atlaskit/button/new';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Text } from '@atlaskit/primitives';
 import { ErrorTitle, ErrorWrapper } from '../../styled/Error';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
 var ErrorMessage = function ErrorMessage(props) {
   var errorType = props.errorType || {
     reason: 'default'
   };
   var errorReason = errorType.reason;
   var fireAnalytics = props.fireAnalytics,
+    fireAnalyticsNext = props.fireAnalyticsNext,
     reload = props.reload;
   var hasRetry = !!reload;
   useEffect(function () {
-    fireAnalytics(profileCardRendered('user', 'error', {
-      hasRetry: hasRetry,
-      errorType: errorReason
-    }));
-  }, [errorReason, fireAnalytics, hasRetry]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.error', _objectSpread({
+        hasRetry: hasRetry,
+        errorType: errorReason,
+        firedAt: Math.round(performance.now())
+      }, PACKAGE_META_DATA));
+    } else {
+      fireAnalytics(profileCardRendered('user', 'error', {
+        hasRetry: hasRetry,
+        errorType: errorReason
+      }));
+    }
+  }, [errorReason, fireAnalytics, fireAnalyticsNext, hasRetry]);
   var errorContent = function errorContent() {
     if (errorReason === 'NotFound') {
       return /*#__PURE__*/React.createElement(ErrorTitle, null, "The user is no longer available for the site");

package/dist/esm/components/User/OverflowProfileCardButtons.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["triggerRef", "isSelected", "testId"];
+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, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
@@ -10,7 +13,8 @@ import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import { fg } from '@atlaskit/platform-feature-flags';
 import messages from '../../messages';
 import { OverflowActionButtonsWrapper } from '../../styled/Card';
-import { moreActionsClicked } from '../../util/analytics';
+import { moreActionsClicked, PACKAGE_META_DATA } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export var ACTION_OVERFLOW_THRESHOLD = 2;
 export var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
   var intl = useIntl();
@@ -19,22 +23,33 @@ export var OverflowProfileCardButtons = function OverflowProfileCardButtons(prop
     setOpen = _useState2[1];
   var actions = props.actions,
     onItemClick = props.onItemClick,
-    fireAnalyticsWithDuration = props.fireAnalyticsWithDuration;
+    fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = props.fireAnalyticsWithDurationNext;
   var numActions = actions.length + ACTION_OVERFLOW_THRESHOLD;
   var onOpenChange = useCallback(function (_ref) {
     var nextOpen = _ref.isOpen;
     setOpen(function (prevOpen) {
       if (nextOpen && !prevOpen) {
-        fireAnalyticsWithDuration(function (duration) {
-          return moreActionsClicked('user', {
-            duration: duration,
-            numActions: numActions
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          fireAnalyticsWithDurationNext('ui.profilecard.clicked.moreActions', function (duration) {
+            return _objectSpread({
+              duration: duration,
+              numActions: numActions,
+              firedAt: Math.round(getPageTime())
+            }, PACKAGE_META_DATA);
           });
-        });
+        } else {
+          fireAnalyticsWithDuration(function (duration) {
+            return moreActionsClicked('user', {
+              duration: duration,
+              numActions: numActions
+            });
+          });
+        }
       }
       return nextOpen;
     });
-  }, [numActions, fireAnalyticsWithDuration]);
+  }, [numActions, fireAnalyticsWithDuration, fireAnalyticsWithDurationNext]);
   return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, {
     testId: "profilecard-actions-overflow"
   }, /*#__PURE__*/React.createElement(DropdownMenu, {