@atlaskit/profilecard 16.12.1 → 17.1.0

package/dist/esm/client/UserProfileCardClient.js

@@ -15,7 +15,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import { userRequestAnalytics } from '../util/analytics';
+import { getPageTime } from '../util/performance';
 import CachingClient from './CachingClient';
+import { getErrorAttributes } from './errorUtils';
 import { graphqlQuery } from './graphqlUtils';
 /**
  * Transform response from GraphQL
@@ -38,7 +41,6 @@ export var modifyResponse = function modifyResponse(response) {
   return {
     isBot: data.isBot,
     isCurrentUser: data.isCurrentUser,
-    isNotMentionable: data.isNotMentionable,
     status: data.status,
     statusModifiedDate: data.statusModifiedDate || undefined,
     avatarUrl: data.avatarUrl || undefined,
@@ -123,7 +125,7 @@ var UserProfileCardClient = /*#__PURE__*/function (_CachingClient) {
     }()
   }, {
     key: "getProfile",
-    value: function getProfile(cloudId, userId) {
+    value: function getProfile(cloudId, userId, analytics) {
       var _this2 = this;
 
       if (!userId) {
@@ -138,13 +140,31 @@ var UserProfileCardClient = /*#__PURE__*/function (_CachingClient) {
       }
 
       return new Promise(function (resolve, reject) {
+        var startTime = getPageTime();
+
+        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
+            }));
+          }
+
           resolve(data);
         }).catch(function (error) {
+          if (analytics) {
+            analytics(userRequestAnalytics('failed', _objectSpread({
+              duration: getPageTime() - startTime
+            }, getErrorAttributes(error))));
+          }
+
           reject(error);
         });
       });

package/dist/esm/client/errorUtils.js

@@ -0,0 +1,17 @@
+var IGNORED_ERRORS = ['NotPermitted', 'Gone'];
+
+function isIgnoredError(error) {
+  return !!error && IGNORED_ERRORS.includes(error.reason);
+}
+
+export var getErrorAttributes = function getErrorAttributes(error) {
+  var _error$response, _error$response$heade;
+
+  var traceId = !!error ? (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$heade = _error$response.headers) === null || _error$response$heade === void 0 ? void 0 : _error$response$heade.get('atl-traceid') : undefined;
+  return {
+    errorStatus: error === null || error === void 0 ? void 0 : error.code,
+    errorReason: error === null || error === void 0 ? void 0 : error.reason,
+    isSLOFailure: !isIgnoredError(error),
+    traceId: traceId !== null && traceId !== void 0 ? traceId : undefined
+  };
+};

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

@@ -1,86 +1,41 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import AkButton from '@atlaskit/button/custom-theme-button';
+import React, { useEffect } from 'react';
+import Button from '@atlaskit/button/standard-button';
 import IconError from '@atlaskit/icon/glyph/cross-circle';
 import { ErrorText, ErrorTitle, ErrorWrapper } from '../../styled/Error';
+import { profileCardRendered } from '../../util/analytics';
 
-var ErrorMessage = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ErrorMessage, _React$PureComponent);
-
-  var _super = _createSuper(ErrorMessage);
-
-  function ErrorMessage() {
-    var _this;
-
-    _classCallCheck(this, ErrorMessage);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "renderNotFound", function () {
+var ErrorMessage = function ErrorMessage(props) {
+  var errorType = props.errorType || {
+    reason: 'default'
+  };
+  var errorReason = errorType.reason;
+  var fireAnalytics = props.fireAnalytics,
+      reload = props.reload;
+  var hasRetry = !!reload;
+  useEffect(function () {
+    fireAnalytics(profileCardRendered('user', 'error', {
+      hasRetry: hasRetry,
+      errorType: errorReason
+    }));
+  }, [errorReason, fireAnalytics, hasRetry]);
+
+  var errorContent = function errorContent() {
+    if (errorReason === 'NotFound') {
       return /*#__PURE__*/React.createElement(ErrorTitle, null, "The user is no longer available for the site");
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderDefault", function () {
-      return /*#__PURE__*/React.createElement(ErrorTitle, null, "Oops, looks like we\u2019re having issues", /*#__PURE__*/React.createElement("br", null), _this.props.reload ? /*#__PURE__*/React.createElement(ErrorText, null, "Try again and we\u2019ll give it another shot") : null);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderRetryButton", function () {
-      return _this.props.reload ? /*#__PURE__*/React.createElement(AkButton, {
-        appearance: "link",
-        onClick: _this.props.reload
-      }, "Try again") : null;
-    });
-
-    return _this;
-  }
-
-  _createClass(ErrorMessage, [{
-    key: "renderErrorContent",
-    value: function renderErrorContent() {
-      var errorType = this.props.errorType || {
-        reason: 'default'
-      };
-
-      switch (errorType.reason) {
-        case 'NotFound':
-          return this.renderNotFound();
-
-        default:
-          return this.renderDefault();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(IconError, {
-        label: "icon error",
-        size: "xlarge"
-      }), this.renderErrorContent(), this.renderRetryButton());
     }
-  }]);
-
-  return ErrorMessage;
-}(React.PureComponent);
-
-_defineProperty(ErrorMessage, "defaultProps", {
-  errorType: {
-    reason: 'default'
-  }
-});
 
-export { ErrorMessage as default };
+    return /*#__PURE__*/React.createElement(ErrorTitle, null, "Oops, looks like we\u2019re having issues", /*#__PURE__*/React.createElement("br", null), reload && /*#__PURE__*/React.createElement(ErrorText, null, "Try again and we\u2019ll give it another shot"));
+  };
+
+  return /*#__PURE__*/React.createElement(ErrorWrapper, {
+    "data-testid": "profilecard-error"
+  }, /*#__PURE__*/React.createElement(IconError, {
+    label: "icon error",
+    size: "xlarge"
+  }), errorContent(), reload && /*#__PURE__*/React.createElement(Button, {
+    appearance: "link",
+    onClick: reload
+  }, "Try again"));
+};
+
+export default ErrorMessage;

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

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import Spinner from '@atlaskit/spinner';
 import { CardContent, CardHeader, CardWrapper, LoadingWrapper } from '../../styled/TeamCard';
-import { teamProfileCardRendered } from '../../util/analytics';
+import { profileCardRendered } from '../../util/analytics';
 export default (function (props) {
   var analytics = props.analytics;
   useEffect(function () {
     analytics(function (duration) {
-      return teamProfileCardRendered('spinner', {
+      return profileCardRendered('team', 'spinner', {
         duration: duration
       });
     });

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

@@ -21,7 +21,7 @@ import messages from '../../messages';
 import { AnimatedKudosButton, KudosBlobAnimation } from '../../styled/Card';
 import { ErrorWrapper, TeamErrorText, TeamErrorTitle } from '../../styled/Error';
 import { ActionButtons, AvatarSection, CardContent, CardHeader, CardWrapper, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
-import { errorRetryClicked, moreActionsClicked, moreMembersClicked, teamActionClicked, teamAvatarClicked, teamProfileCardRendered } from '../../util/analytics';
+import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { ErrorIllustration } from '../Error';
 import TeamLoadingState from './TeamLoadingState';
@@ -98,7 +98,7 @@ var TeamMembers = function TeamMembers(_ref) {
 function onActionClick(action, analytics, index) {
   return function (event) {
     analytics(function (duration) {
-      return teamActionClicked({
+      return actionClicked('team', {
         duration: duration,
         hasHref: !!action.link,
         hasOnClick: !!action.callback,
@@ -152,7 +152,7 @@ var ExtraActions = function ExtraActions(_ref3) {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
       analytics(function (duration) {
-        return moreActionsClicked({
+        return moreActionsClicked('team', {
           duration: duration,
           numActions: count + 2
         });
@@ -243,7 +243,7 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     analytics(function (duration) {
       var _team$members;
 
-      return teamProfileCardRendered('content', {
+      return profileCardRendered('team', 'content', {
         duration: duration,
         numActions: allActions.length,
         memberCount: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length,
@@ -276,7 +276,7 @@ var ErrorMessage = function ErrorMessage(_ref6) {
   var hasRetry = !!clientFetchProfile;
   useEffect(function () {
     analytics(function (duration) {
-      return teamProfileCardRendered('error', {
+      return profileCardRendered('team', 'error', {
         duration: duration,
         hasRetry: hasRetry
       });

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

@@ -20,7 +20,7 @@ import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import _filterActions from '../../internal/filterActions';
 import messages from '../../messages';
-import { fireEvent, teamCardTriggered, teamProfileCardRendered } from '../../util/analytics';
+import { cardTriggered, fireEvent, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
 import { getPageTime } from '../../util/performance';
@@ -119,7 +119,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         _this.showProfilecard(0);
 
         if (!_this.state.visible) {
-          _this.fireAnalytics(teamCardTriggered('click'));
+          _this.fireAnalytics(cardTriggered('team', 'click'));
         }
       }
     });
@@ -132,7 +132,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       if (!_this.state.visible) {
         _this.openedByHover = true;
 
-        _this.fireAnalytics(teamCardTriggered('hover'));
+        _this.fireAnalytics(cardTriggered('team', 'hover'));
       }
 
       _this.showProfilecard(DELAY_MS_SHOW);
@@ -234,7 +234,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
     });
 
     _defineProperty(_assertThisInitialized(_this), "onErrorBoundary", function () {
-      _this.fireAnalytics(teamProfileCardRendered('errorBoundary', {
+      _this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
         duration: 0
       }));
 

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

@@ -1,22 +1,52 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["triggerRef", "isSelected", "testId"];
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import messages from '../../messages';
 import { OverflowActionButtonsWrapper } from '../../styled/Card';
+import { moreActionsClicked } from '../../util/analytics';
+export var ACTION_OVERFLOW_THRESHOLD = 2;
 export var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      setOpen = _useState2[1];
+
+  var actions = props.actions,
+      onItemClick = props.onItemClick,
+      fireAnalyticsWithDuration = props.fireAnalyticsWithDuration;
+  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
+          });
+        });
+      }
+
+      return nextOpen;
+    });
+  }, [numActions, fireAnalyticsWithDuration]);
+  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, {
+    "data-testid": "profilecard-actions-overflow"
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    onOpenChange: onOpenChange,
     placement: 'bottom-end',
-    trigger: function trigger(_ref) {
-      var triggerRef = _ref.triggerRef,
-          isSelected = _ref.isSelected,
-          testId = _ref.testId,
-          providedProps = _objectWithoutProperties(_ref, _excluded);
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          isSelected = _ref2.isSelected,
+          testId = _ref2.testId,
+          providedProps = _objectWithoutProperties(_ref2, _excluded);
 
       return /*#__PURE__*/React.createElement(Button, _extends({
         type: "button"
@@ -27,7 +57,7 @@ export var OverflowProfileCardButtons = function OverflowProfileCardButtons(prop
         })
       }));
     }
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, props.actions.map(function (action) {
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map(function (action, index) {
     return /*#__PURE__*/React.createElement(DropdownItem, {
       key: action.id,
       onClick: function onClick(event) {
@@ -35,7 +65,7 @@ export var OverflowProfileCardButtons = function OverflowProfileCardButtons(prop
           args[_key - 1] = arguments[_key];
         }
 
-        props.onItemClick(action, args, event);
+        onItemClick(action, args, event, index);
       },
       href: action.link
     }, action.label);