@atlaskit/profilecard 16.12.1 → 17.1.0

package/dist/es2019/client/TeamCentralCardClient.js

@@ -46,6 +46,14 @@ const buildCheckFeatureFlagQuery = (featureKey, context) => ({
   }
 });
 
+function hasTCWorkspace(config) {
+  return config.cloudId ? fetch(`/gateway/api/watermelon/organization/containsAnyWorkspace?cloudId=${config.cloudId}`).then(res => {
+    return !res || res && res.ok;
+  }) : Promise.resolve(false);
+}
+
+let isTCReadyPromiseMap = new Map();
+
 class TeamCentralCardClient extends CachingClient {
   /**
    * Simple circuit breaker to avoid making unnecessary calls to Team Central on auth failures
@@ -60,6 +68,22 @@ class TeamCentralCardClient extends CachingClient {
     this.options = options;
     this.bypassOnFailure = false;
     this.featureFlagKeys = new Map();
+    this.isTCReadyPromise = this.createTcReadyPromise(options);
+  }
+
+  createTcReadyPromise(config) {
+    if (config.cloudId) {
+      let promise = isTCReadyPromiseMap.get(config.cloudId);
+
+      if (!promise) {
+        promise = hasTCWorkspace(config);
+        isTCReadyPromiseMap.set(config.cloudId, promise);
+      }
+
+      return promise;
+    }
+
+    return Promise.resolve(true);
   }
 
   async makeFeatureFlagCheckRequest(featureKey, context) {
@@ -68,7 +92,7 @@ class TeamCentralCardClient extends CachingClient {
     }
 
     const query = buildCheckFeatureFlagQuery(featureKey, context);
-    const response = await graphqlQuery(this.options.teamCentralUrl, query);
+    const response = await graphqlQuery(`${this.options.teamCentralUrl}?operationName=isFeatureKeyEnabled`, query);
     return response.isFeatureEnabled.enabled;
   }
 
@@ -78,83 +102,101 @@ class TeamCentralCardClient extends CachingClient {
     }
 
     const query = buildReportingLinesQuery(userId);
-    const response = await graphqlQuery(this.options.teamCentralUrl, query);
+    const response = await graphqlQuery(`${this.options.teamCentralUrl}?operationName=ReportingLines`, query);
     return response.reportingLines;
   }
 
   getReportingLines(userId) {
-    if (!userId) {
-      return Promise.reject(new Error('userId missing'));
-    }
-
-    const cache = this.getCachedProfile(userId);
-
-    if (cache) {
-      return Promise.resolve(cache);
-    }
-
-    if (this.bypassOnFailure) {
-      return Promise.resolve({});
-    }
+    return this.isTCReadyPromise.then(workSpaceExists => {
+      if (workSpaceExists) {
+        if (!userId) {
+          return Promise.reject(new Error('userId missing'));
+        }
 
-    return new Promise(resolve => {
-      this.makeRequest(userId).then(data => {
-        const enhancedData = {
-          managers: this.filterReportingLinesUser(data === null || data === void 0 ? void 0 : data.managers),
-          reports: this.filterReportingLinesUser(data === null || data === void 0 ? void 0 : data.reports)
-        };
+        const cache = this.getCachedProfile(userId);
 
-        if (this.cache) {
-          this.setCachedProfile(userId, enhancedData);
+        if (cache) {
+          return Promise.resolve(cache);
         }
 
-        resolve(enhancedData);
-      }).catch(error => {
-        if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
-          // Trigger circuit breaker
-          this.bypassOnFailure = true;
+        if (this.bypassOnFailure) {
+          return Promise.resolve({});
         }
-        /**
-         * Reporting lines aren't part of the critical path of profile card.
-         * Just resolve with empty values instead of bubbling up the error.
-         */
 
+        return new Promise(resolve => {
+          this.makeRequest(userId).then(data => {
+            const enhancedData = {
+              managers: this.filterReportingLinesUser(data === null || data === void 0 ? void 0 : data.managers),
+              reports: this.filterReportingLinesUser(data === null || data === void 0 ? void 0 : data.reports)
+            };
+
+            if (this.cache) {
+              this.setCachedProfile(userId, enhancedData);
+            }
+
+            resolve(enhancedData);
+          }).catch(error => {
+            if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
+              // Trigger circuit breaker
+              this.bypassOnFailure = true;
+            }
+            /**
+             * Reporting lines aren't part of the critical path of profile card.
+             * Just resolve with empty values instead of bubbling up the error.
+             */
+
+
+            resolve({});
+          });
+        });
+      }
 
-        resolve({});
+      return Promise.resolve({
+        managers: [],
+        reports: []
       });
-    });
+    }, () => Promise.resolve({
+      managers: [],
+      reports: []
+    }));
   }
 
   getFlagEnabled(featureKey, productIdentifier) {
-    if (!featureKey) {
-      return Promise.reject(new Error('featureKey missing'));
-    }
-
-    if (this.featureFlagKeys.has(featureKey)) {
-      return Promise.resolve(this.featureFlagKeys.get(featureKey));
-    }
+    return this.isTCReadyPromise.then(workSpaceExists => {
+      if (workSpaceExists) {
+        if (!featureKey) {
+          return Promise.reject(new Error('featureKey missing'));
+        }
 
-    if (this.bypassOnFailure) {
-      return Promise.resolve(false);
-    }
+        if (this.featureFlagKeys.has(featureKey)) {
+          return Promise.resolve(this.featureFlagKeys.get(featureKey));
+        }
 
-    const context = [{
-      key: 'productIdentifier',
-      value: productIdentifier || 'unset'
-    }];
-    return new Promise(resolve => {
-      this.makeFeatureFlagCheckRequest(featureKey, context).then(enabled => {
-        this.featureFlagKeys.set(featureKey, enabled);
-        resolve(enabled);
-      }).catch(error => {
-        if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
-          // Trigger circuit breaker
-          this.bypassOnFailure = true;
+        if (this.bypassOnFailure) {
+          return Promise.resolve(false);
         }
 
-        resolve(false);
-      });
-    });
+        const context = [{
+          key: 'productIdentifier',
+          value: productIdentifier || 'unset'
+        }];
+        return new Promise(resolve => {
+          this.makeFeatureFlagCheckRequest(featureKey, context).then(enabled => {
+            this.featureFlagKeys.set(featureKey, enabled);
+            resolve(enabled);
+          }).catch(error => {
+            if ((error === null || error === void 0 ? void 0 : error.status) === 401 || (error === null || error === void 0 ? void 0 : error.status) === 403) {
+              // Trigger circuit breaker
+              this.bypassOnFailure = true;
+            }
+
+            resolve(false);
+          });
+        });
+      }
+
+      return Promise.resolve(false);
+    }, () => Promise.resolve(false));
   }
 
   filterReportingLinesUser(users = []) {

package/dist/es2019/client/TeamProfileCardClient.js

@@ -1,6 +1,7 @@
 import { teamRequestAnalytics } from '../util/analytics';
 import { getPageTime } from '../util/performance';
 import CachingClient from './CachingClient';
+import { getErrorAttributes } from './errorUtils';
 import { getTeamFromAGG } from './getTeamFromAGG';
 import { graphqlQuery } from './graphqlUtils';
 const QUERY = `query Team($teamId: String!, $organizationId: String) {
@@ -28,12 +29,6 @@ const buildTeamQuery = (teamId, orgId) => ({
   }
 });
 
-const IGNORED_ERRORS = ['NotPermitted', 'Gone'];
-
-function isRealError(error) {
-  return !IGNORED_ERRORS.includes(error.reason);
-}
-
 export default class TeamProfileCardClient extends CachingClient {
   constructor(options) {
     super(options);
@@ -91,11 +86,10 @@ export default class TeamProfileCardClient extends CachingClient {
 
         resolve(data);
       }).catch(error => {
-        if (analytics && isRealError(error)) {
+        if (analytics) {
           analytics(teamRequestAnalytics('failed', {
             duration: getPageTime() - startTime,
-            errorStatus: error.code,
-            errorReason: error.reason,
+            ...getErrorAttributes(error),
             gateway: shouldUseGateway
           }));
         }

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)))));