@atlaskit/profilecard 16.11.0 → 17.0.0

package/dist/es2019/client/UserProfileCardClient.js

@@ -1,4 +1,7 @@
+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
@@ -21,7 +24,6 @@ export const modifyResponse = response => {
   return {
     isBot: data.isBot,
     isCurrentUser: data.isCurrentUser,
-    isNotMentionable: data.isNotMentionable,
     status: data.status,
     statusModifiedDate: data.statusModifiedDate || undefined,
     avatarUrl: data.avatarUrl || undefined,
@@ -83,7 +85,7 @@ export default class UserProfileCardClient extends CachingClient {
     return modifyResponse(response);
   }
 
-  getProfile(cloudId, userId) {
+  getProfile(cloudId, userId, analytics) {
     if (!userId) {
       return Promise.reject(new Error('userId missing'));
     }
@@ -96,13 +98,32 @@ export default class UserProfileCardClient extends CachingClient {
     }
 
     return new Promise((resolve, reject) => {
+      const startTime = getPageTime();
+
+      if (analytics) {
+        analytics(userRequestAnalytics('triggered'));
+      }
+
       this.makeRequest(cloudId, userId).then(data => {
         if (this.cache) {
           this.setCachedProfile(cacheIdentifier, data);
         }
 
+        if (analytics) {
+          analytics(userRequestAnalytics('succeeded', {
+            duration: getPageTime() - startTime
+          }));
+        }
+
         resolve(data);
       }).catch(error => {
+        if (analytics) {
+          analytics(userRequestAnalytics('failed', {
+            duration: getPageTime() - startTime,
+            ...getErrorAttributes(error)
+          }));
+        }
+
         reject(error);
       });
     });

package/dist/es2019/client/errorUtils.js

@@ -0,0 +1,17 @@
+const IGNORED_ERRORS = ['NotPermitted', 'Gone'];
+
+function isIgnoredError(error) {
+  return !!error && IGNORED_ERRORS.includes(error.reason);
+}
+
+export const getErrorAttributes = error => {
+  var _error$response, _error$response$heade;
+
+  const 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/es2019/components/Error/ErrorMessage.js

@@ -1,47 +1,43 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
-export default class ErrorMessage extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+import { profileCardRendered } from '../../util/analytics';
 
-    _defineProperty(this, "renderNotFound", () => /*#__PURE__*/React.createElement(ErrorTitle, null, "The user is no longer available for the site"));
-
-    _defineProperty(this, "renderDefault", () => /*#__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(this, "renderRetryButton", () => this.props.reload ? /*#__PURE__*/React.createElement(AkButton, {
-      appearance: "link",
-      onClick: this.props.reload
-    }, "Try again") : null);
-  }
-
-  renderErrorContent() {
-    const errorType = this.props.errorType || {
-      reason: 'default'
-    };
-
-    switch (errorType.reason) {
-      case 'NotFound':
-        return this.renderNotFound();
-
-      default:
-        return this.renderDefault();
+const ErrorMessage = props => {
+  const errorType = props.errorType || {
+    reason: 'default'
+  };
+  const errorReason = errorType.reason;
+  const {
+    fireAnalytics,
+    reload
+  } = props;
+  const hasRetry = !!reload;
+  useEffect(() => {
+    fireAnalytics(profileCardRendered('user', 'error', {
+      hasRetry,
+      errorType: errorReason
+    }));
+  }, [errorReason, fireAnalytics, hasRetry]);
+
+  const errorContent = () => {
+    if (errorReason === 'NotFound') {
+      return /*#__PURE__*/React.createElement(ErrorTitle, null, "The user is no longer available for the site");
     }
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(IconError, {
-      label: "icon error",
-      size: "xlarge"
-    }), this.renderErrorContent(), this.renderRetryButton());
-  }
 
-}
-
-_defineProperty(ErrorMessage, "defaultProps", {
-  errorType: {
-    reason: '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/es2019/components/Team/TeamLoadingState.js

@@ -1,13 +1,13 @@
 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 (props => {
   const {
     analytics
   } = props;
   useEffect(() => {
-    analytics(duration => teamProfileCardRendered('spinner', {
+    analytics(duration => profileCardRendered('team', 'spinner', {
       duration
     }));
   }, [analytics]);

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

@@ -13,7 +13,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';
@@ -88,7 +88,7 @@ const TeamMembers = ({
 
 function onActionClick(action, analytics, index) {
   return (event, ...args) => {
-    analytics(duration => teamActionClicked({
+    analytics(duration => actionClicked('team', {
       duration,
       hasHref: !!action.link,
       hasOnClick: !!action.callback,
@@ -132,7 +132,7 @@ const ExtraActions = ({
   const onMoreClick = useCallback(shouldBeOpen => {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
-      analytics(duration => moreActionsClicked({
+      analytics(duration => moreActionsClicked('team', {
         duration,
         numActions: count + 2
       }));
@@ -209,7 +209,7 @@ const TeamProfilecardContent = ({
     analytics(duration => {
       var _team$members;
 
-      return teamProfileCardRendered('content', {
+      return profileCardRendered('team', 'content', {
         duration,
         numActions: allActions.length,
         memberCount: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length,
@@ -242,7 +242,7 @@ const ErrorMessage = ({
 }) => {
   const hasRetry = !!clientFetchProfile;
   useEffect(() => {
-    analytics(duration => teamProfileCardRendered('error', {
+    analytics(duration => profileCardRendered('team', 'error', {
       duration,
       hasRetry
     }));

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

@@ -8,7 +8,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';
@@ -89,7 +89,7 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         this.showProfilecard(0);
 
         if (!this.state.visible) {
-          this.fireAnalytics(teamCardTriggered('click'));
+          this.fireAnalytics(cardTriggered('team', 'click'));
         }
       }
     });
@@ -101,7 +101,7 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
 
       if (!this.state.visible) {
         this.openedByHover = true;
-        this.fireAnalytics(teamCardTriggered('hover'));
+        this.fireAnalytics(cardTriggered('team', 'hover'));
       }
 
       this.showProfilecard(DELAY_MS_SHOW);
@@ -197,7 +197,7 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
     });
 
     _defineProperty(this, "onErrorBoundary", () => {
-      this.fireAnalytics(teamProfileCardRendered('errorBoundary', {
+      this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
         duration: 0
       }));
       this.setState({

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

@@ -1,14 +1,40 @@
 import _extends from "@babel/runtime/helpers/extends";
-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 const ACTION_OVERFLOW_THRESHOLD = 2;
 export const OverflowProfileCardButtons = props => {
   const intl = useIntl();
-  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+  const [, setOpen] = useState(false);
+  const {
+    actions,
+    onItemClick,
+    fireAnalyticsWithDuration
+  } = props;
+  const numActions = actions.length + ACTION_OVERFLOW_THRESHOLD;
+  const onOpenChange = useCallback(({
+    isOpen: nextOpen
+  }) => {
+    setOpen(prevOpen => {
+      if (nextOpen && !prevOpen) {
+        fireAnalyticsWithDuration(duration => moreActionsClicked('user', {
+          duration,
+          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: ({
       triggerRef,
@@ -23,10 +49,10 @@ export const OverflowProfileCardButtons = props => {
         label: intl.formatMessage(messages.profileCardMoreIconLabel)
       })
     }))
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, props.actions.map(action => /*#__PURE__*/React.createElement(DropdownItem, {
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, actions.map((action, index) => /*#__PURE__*/React.createElement(DropdownItem, {
     key: action.id,
     onClick: (event, ...args) => {
-      props.onItemClick(action, args, event);
+      onItemClick(action, args, event, index);
     },
     href: action.link
   }, action.label)))));