@atlaskit/profilecard 16.0.2 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/profilecard
 
+## 16.1.0
+
+### Minor Changes
+
+- [`a5c73ccaa58`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5c73ccaa58) - Added manager and direct reports section to profile hover card"
+
 ## 16.0.2
 
 ### Patch Changes

package/dist/cjs/client/ProfileCardClient.js

@@ -7,26 +7,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _TeamCentralCardClient = _interopRequireDefault(require("./TeamCentralCardClient"));
+
 var _TeamProfileCardClient = _interopRequireDefault(require("./TeamProfileCardClient"));
 
 var _UserProfileCardClient = _interopRequireDefault(require("./UserProfileCardClient"));
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var ProfileCardClient = /*#__PURE__*/function () {
   function ProfileCardClient(config, clients) {
     (0, _classCallCheck2.default)(this, ProfileCardClient);
     this.userClient = (clients === null || clients === void 0 ? void 0 : clients.userClient) || new _UserProfileCardClient.default(config);
     this.teamClient = (clients === null || clients === void 0 ? void 0 : clients.teamClient) || new _TeamProfileCardClient.default(config);
+    this.tcClient = maybeCreateTeamCentralClient(config, clients);
   }
 
   (0, _createClass2.default)(ProfileCardClient, [{
     key: "flushCache",
     value: function flushCache() {
+      var _this$tcClient;
+
       this.userClient.flushCache();
       this.teamClient.flushCache();
+      (_this$tcClient = this.tcClient) === null || _this$tcClient === void 0 ? void 0 : _this$tcClient.flushCache();
     }
   }, {
     key: "getProfile",
@@ -38,9 +50,30 @@ var ProfileCardClient = /*#__PURE__*/function () {
     value: function getTeamProfile(teamId, orgId, analytics) {
       return this.teamClient.getProfile(teamId, orgId, analytics);
     }
+  }, {
+    key: "getReportingLines",
+    value: function getReportingLines(userId) {
+      var _this$tcClient2;
+
+      return ((_this$tcClient2 = this.tcClient) === null || _this$tcClient2 === void 0 ? void 0 : _this$tcClient2.getReportingLines(userId)) || Promise.resolve({
+        managers: [],
+        reports: []
+      });
+    }
   }]);
   return ProfileCardClient;
 }();
 
+function maybeCreateTeamCentralClient(config, clients) {
+  if (clients !== null && clients !== void 0 && clients.teamCentralClient) {
+    return clients.teamCentralClient;
+  }
+
+  var teamCentralUrl = config.teamCentralUrl;
+  return teamCentralUrl ? new _TeamCentralCardClient.default(_objectSpread(_objectSpread({}, config), {}, {
+    teamCentralUrl: teamCentralUrl
+  })) : undefined;
+}
+
 var _default = ProfileCardClient;
 exports.default = _default;

package/dist/cjs/client/TeamCentralCardClient.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _CachingClient2 = _interopRequireDefault(require("./CachingClient"));
+
+var _graphqlUtils = require("./graphqlUtils");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var buildReportingLinesQuery = function buildReportingLinesQuery(aaid) {
+  return {
+    query: "\n    fragment ReportingLinesUserPII on UserPII {\n      name\n      picture\n    }\n\n    fragment ReportingLinesUserFragment on ReportingLinesUser {\n      accountIdentifier\n      identifierType\n      pii {\n        ...ReportingLinesUserPII\n      }\n    }\n\n    query ReportingLines($aaid: String) {\n      reportingLines(aaidOrHash: $aaid) {\n        managers {\n          ...ReportingLinesUserFragment\n        }\n        reports {\n          ...ReportingLinesUserFragment\n        }\n      }\n    }\n  ",
+    variables: {
+      aaid: aaid
+    }
+  };
+};
+
+var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
+  (0, _inherits2.default)(TeamCentralCardClient, _CachingClient);
+
+  var _super = _createSuper(TeamCentralCardClient);
+
+  /**
+   * Simple circuit breaker to avoid making unnecessary calls to Team Central on auth failures
+   * This is to handle the case where products may have provided teamCentralUrl, but the site itself
+   * doesn't actually have any TC product.
+   *
+   * There's currently no way to reset this circuit breaker, but that's fine. This is meant to
+   * catch a pretty specific edge case.
+   */
+  function TeamCentralCardClient(options) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TeamCentralCardClient);
+    _this = _super.call(this, options);
+    _this.options = options;
+    _this.bypassOnFailure = false;
+    return _this;
+  }
+
+  (0, _createClass2.default)(TeamCentralCardClient, [{
+    key: "makeRequest",
+    value: function () {
+      var _makeRequest = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(userId) {
+        var query, response;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (this.options.teamCentralUrl) {
+                  _context.next = 2;
+                  break;
+                }
+
+                throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
+
+              case 2:
+                query = buildReportingLinesQuery(userId);
+                _context.next = 5;
+                return (0, _graphqlUtils.graphqlQuery)(this.options.teamCentralUrl, query);
+
+              case 5:
+                response = _context.sent;
+                return _context.abrupt("return", response.reportingLines);
+
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function makeRequest(_x) {
+        return _makeRequest.apply(this, arguments);
+      }
+
+      return makeRequest;
+    }()
+  }, {
+    key: "getReportingLines",
+    value: function getReportingLines(userId) {
+      var _this2 = this;
+
+      if (!userId) {
+        return Promise.reject(new Error('userId missing'));
+      }
+
+      var cache = this.getCachedProfile(userId);
+
+      if (cache) {
+        return Promise.resolve(cache);
+      }
+
+      if (this.bypassOnFailure) {
+        return Promise.resolve({});
+      }
+
+      return new Promise(function (resolve) {
+        _this2.makeRequest(userId).then(function (data) {
+          var enhancedData = {
+            managers: _this2.filterReportingLinesUser(data === null || data === void 0 ? void 0 : data.managers),
+            reports: _this2.filterReportingLinesUser(data === null || data === void 0 ? void 0 : data.reports)
+          };
+
+          if (_this2.cache) {
+            _this2.setCachedProfile(userId, enhancedData);
+          }
+
+          resolve(enhancedData);
+        }).catch(function (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
+            _this2.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({});
+        });
+      });
+    }
+  }, {
+    key: "filterReportingLinesUser",
+    value: function filterReportingLinesUser() {
+      var users = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return users.filter(function (user) {
+        return user.identifierType === 'ATLASSIAN_ID';
+      });
+    }
+  }]);
+  return TeamCentralCardClient;
+}(_CachingClient2.default);
+
+var _default = TeamCentralCardClient;
+exports.default = _default;

package/dist/cjs/components/User/ProfileCard.js

@@ -55,6 +55,8 @@ var _Error = require("../Error");
 
 var _Icon = require("../Icon");
 
+var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -148,6 +150,8 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderCardDetailsDefault",
     value: function renderCardDetailsDefault() {
+      var _this4 = this;
+
       var _this$props2 = this.props,
           meta = _this$props2.meta,
           location = _this$props2.location,
@@ -163,7 +167,15 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         icon: "companyName"
       }, companyName), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
         icon: "location"
-      }, location));
+      }, location), /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
+        reportingLines: this.props.reportingLines,
+        reportingLinesProfileUrl: this.props.reportingLinesProfileUrl,
+        onReportingLinesClick: this.props.onReportingLinesClick,
+        analytics: this.props.analytics,
+        getDuration: function getDuration() {
+          return _this4.durationSince(_this4.timeOpen);
+        }
+      }));
     }
   }, {
     key: "renderCardDetailsForDisabledAccount",
@@ -284,7 +296,8 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props8 = this.props,
           fullName = _this$props8.fullName,
           status = _this$props8.status,
-          withoutElevation = _this$props8.withoutElevation;
+          withoutElevation = _this$props8.withoutElevation,
+          reportingLines = _this$props8.reportingLines;
       var cardContent = null; // @FIXME do closed users have empty fullName field?
 
       var canRender = fullName || status === 'closed';
@@ -295,10 +308,14 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       } else if (this.props.isLoading) {
         cardContent = /*#__PURE__*/_react.default.createElement(_Card.SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
       } else if (canRender) {
+        var _reportingLines$manag, _reportingLines$repor;
+
         var isDisabledUser = status === 'inactive' || status === 'closed';
         var actions = this.renderActionsButtons();
         this.callAnalytics(_analytics.AnalyticsName.PROFILE_CARD_LOADED, {
-          duration: this.durationSince(this.timeOpen)
+          duration: this.durationSince(this.timeOpen),
+          managersCount: (reportingLines === null || reportingLines === void 0 ? void 0 : (_reportingLines$manag = reportingLines.managers) === null || _reportingLines$manag === void 0 ? void 0 : _reportingLines$manag.length) || 0,
+          directReportsCount: (reportingLines === null || reportingLines === void 0 ? void 0 : (_reportingLines$repor = reportingLines.reports) === null || _reportingLines$repor === void 0 ? void 0 : _reportingLines$repor.length) || 0
         });
         cardContent = /*#__PURE__*/_react.default.createElement(_Card.CardContainer, {
           isDisabledUser: isDisabledUser,

package/dist/cjs/components/User/ProfileCardResourced.js

@@ -66,7 +66,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       isLoading: undefined,
       hasError: false,
       error: null,
-      data: null
+      data: null,
+      reportingLinesData: undefined
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "callAnalytics", function (id) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -92,8 +93,9 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        _this.props.resourceClient.getProfile(cloudId, userId).then(function (res) {
-          return _this.handleClientSuccess(res);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId), _this.props.resourceClient.getReportingLines(userId)]);
+        requests.then(function (res) {
+          return _this.handleClientSuccess(res[0], res[1]);
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -139,7 +141,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(res) {
+    value: function handleClientSuccess(profileData, reportingLinesData) {
       if (!this._isMounted) {
         return;
       }
@@ -147,7 +149,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       this.setState({
         isLoading: false,
         hasError: false,
-        data: res
+        data: profileData,
+        reportingLinesData: reportingLinesData
       });
     }
   }, {
@@ -170,8 +173,11 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
           isLoading = _this$state.isLoading,
           hasError = _this$state.hasError,
           error = _this$state.error,
-          data = _this$state.data;
-      var analytics = this.props.analytics;
+          data = _this$state.data,
+          reportingLinesData = _this$state.reportingLinesData;
+      var _this$props3 = this.props,
+          analytics = _this$props3.analytics,
+          onReportingLinesClick = _this$props3.onReportingLinesClick;
       var isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
 
       if (isFetchingOrNotStartToFetchYet) {
@@ -187,7 +193,9 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: hasError,
         errorType: error,
         clientFetchProfile: this.clientFetchProfile,
-        analytics: analytics
+        analytics: analytics,
+        reportingLines: reportingLinesData,
+        onReportingLinesClick: onReportingLinesClick
       }, data);
 
       return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_ProfileCard.default, (0, _extends2.default)({}, newProps, {

package/dist/cjs/components/User/ProfileCardTrigger.js

@@ -106,7 +106,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       isLoading: undefined,
       hasError: false,
       error: null,
-      data: null
+      data: null,
+      reportingLinesData: undefined
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clientFetchProfile", function () {
       var _this$props = _this.props,
@@ -124,8 +125,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        _this.props.resourceClient.getProfile(cloudId || '', userId).then(function (res) {
-          return _this.handleClientSuccess(res);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId || '', userId), _this.props.resourceClient.getReportingLines(userId)]);
+        requests.then(function (res) {
+          return _this.handleClientSuccess(res[0], res[1]);
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -174,7 +176,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(res) {
+    value: function handleClientSuccess(profileData, reportingLinesData) {
       if (!this._isMounted) {
         return;
       }
@@ -182,7 +184,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       this.setState({
         isLoading: false,
         hasError: false,
-        data: res
+        data: profileData,
+        reportingLinesData: reportingLinesData
       });
     }
   }, {
@@ -206,10 +209,13 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "renderProfileCard",
     value: function renderProfileCard() {
-      var newProps = _objectSpread({
+      var newProps = _objectSpread(_objectSpread({
         clientFetchProfile: this.clientFetchProfile,
         analytics: this.props.analytics
-      }, this.state.data);
+      }, this.state.data), {}, {
+        reportingLines: this.state.reportingLinesData,
+        onReportingLinesClick: this.props.onReportingLinesClick
+      });
 
       var wrapperProps = this.props.trigger === 'hover' ? {
         onMouseEnter: this.showProfilecard,

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _analytics = require("../../internal/analytics");
+
+var _messages = _interopRequireDefault(require("../../messages"));
+
+var _ReportingLines = require("../../styled/ReportingLines");
+
+function getProfileHref(userId, profileUrl) {
+  return profileUrl ? profileUrl + userId : undefined;
+}
+
+var ReportingLinesDetails = function ReportingLinesDetails(props) {
+  var _manager$pii, _manager$pii2;
+
+  var _props$reportingLines = props.reportingLines,
+      reportingLines = _props$reportingLines === void 0 ? {} : _props$reportingLines,
+      reportingLinesProfileUrl = props.reportingLinesProfileUrl,
+      onReportingLinesClick = props.onReportingLinesClick,
+      _props$analytics = props.analytics,
+      analytics = _props$analytics === void 0 ? function () {} : _props$analytics,
+      getDuration = props.getDuration;
+  var _reportingLines$manag = reportingLines.managers,
+      managers = _reportingLines$manag === void 0 ? [] : _reportingLines$manag,
+      _reportingLines$repor = reportingLines.reports,
+      reports = _reportingLines$repor === void 0 ? [] : _reportingLines$repor;
+  var manager = managers.length >= 1 ? managers[0] : undefined;
+  var hasReports = reports.length > 0;
+
+  var getReportingLinesOnClick = function getReportingLinesOnClick(user, analyticsId) {
+    return onReportingLinesClick ? function () {
+      analytics(_analytics.AnalyticsName.PROFILE_CARD_CLICK, {
+        id: analyticsId,
+        duration: getDuration()
+      });
+      onReportingLinesClick(user);
+    } : undefined;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, manager && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesHeading, {
+    style: {
+      marginBottom: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.managerSectionHeading)), /*#__PURE__*/_react.default.createElement(_ReportingLines.OffsetWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    appearance: "subtle",
+    spacing: "none",
+    href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
+    onClick: getReportingLinesOnClick(manager, 'reporting-lines-manager'),
+    isDisabled: !onReportingLinesClick
+  }, /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerSection, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    size: "xsmall",
+    src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
+  }), /*#__PURE__*/_react.default.createElement(_ReportingLines.ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesSection, null, /*#__PURE__*/_react.default.createElement(_ReportingLines.ReportingLinesHeading, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.directReportsSectionHeading)), /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+    appearance: "stack",
+    size: "small",
+    data: reports.map(function (member, index) {
+      var _member$pii, _member$pii2;
+
+      return {
+        key: member.accountIdentifier,
+        name: ((_member$pii = member.pii) === null || _member$pii === void 0 ? void 0 : _member$pii.name) || '',
+        src: (_member$pii2 = member.pii) === null || _member$pii2 === void 0 ? void 0 : _member$pii2.picture,
+        href: getProfileHref(member.accountIdentifier, reportingLinesProfileUrl),
+        onClick: getReportingLinesOnClick(member, 'reporting-lines-direct-report')
+      };
+    }),
+    maxCount: 5,
+    testId: "profilecard-reports-avatar-group"
+  })));
+};
+
+var _default = ReportingLinesDetails;
+exports.default = _default;

package/dist/cjs/messages.js

@@ -137,6 +137,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'pt.team-profile-card.error.refresh-button',
     defaultMessage: 'Try again',
     description: 'Text on a button that will try to get the data again when clicked'
+  },
+  managerSectionHeading: {
+    id: 'pt.team-profile-card.manager.heading',
+    defaultMessage: 'Manager',
+    description: "Title for a section on the profile card that show the user's direct manager"
+  },
+  directReportsSectionHeading: {
+    id: 'pt.team-profile-card.directReports.heading',
+    defaultMessage: 'Direct reports',
+    description: "Title for a section on the profile card that show the user's direct reports"
   }
 });
 var _default = messages;

package/dist/cjs/mocks/mock-profile-client.js

@@ -19,10 +19,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _TeamCentralCardClient = _interopRequireDefault(require("../client/TeamCentralCardClient"));
+
 var _UserProfileCardClient = _interopRequireDefault(require("../client/UserProfileCardClient"));
 
 var _profileData = _interopRequireDefault(require("./profile-data"));
 
+var _reportingLinesData = require("./reporting-lines-data");
+
 var _util = require("./util");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -82,16 +86,51 @@ function getMockProfileClient(BaseProfileClient, modifyResponse) {
     return MockUserClient;
   }(_UserProfileCardClient.default);
 
+  var MockTeamCentralClient = /*#__PURE__*/function (_TeamCentralCardClien) {
+    (0, _inherits2.default)(MockTeamCentralClient, _TeamCentralCardClien);
+
+    var _super2 = _createSuper(MockTeamCentralClient);
+
+    function MockTeamCentralClient() {
+      (0, _classCallCheck2.default)(this, MockTeamCentralClient);
+      return _super2.apply(this, arguments);
+    }
+
+    (0, _createClass2.default)(MockTeamCentralClient, [{
+      key: "makeRequest",
+      value: function makeRequest(userId) {
+        var timeout = (0, _util.random)(1500) + 500;
+        var matchError = userId.match(/^error:([0-9a-zA-Z\-]+)$/);
+        var error = matchError && matchError[1];
+        return new Promise(function (resolve, reject) {
+          setTimeout(function () {
+            if (error) {
+              return reject({
+                reason: error
+              });
+            }
+
+            return resolve(_reportingLinesData.reportingLinesData);
+          }, timeout);
+        });
+      }
+    }]);
+    return MockTeamCentralClient;
+  }(_TeamCentralCardClient.default);
+
   return /*#__PURE__*/function (_BaseProfileClient) {
     (0, _inherits2.default)(MockProfileClient, _BaseProfileClient);
 
-    var _super2 = _createSuper(MockProfileClient);
+    var _super3 = _createSuper(MockProfileClient);
 
     function MockProfileClient(options) {
       var clients = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       (0, _classCallCheck2.default)(this, MockProfileClient);
-      return _super2.call(this, options, _objectSpread({
-        userClient: new MockUserClient(options)
+      return _super3.call(this, options, _objectSpread({
+        userClient: new MockUserClient(options),
+        teamCentralClient: new MockTeamCentralClient(_objectSpread(_objectSpread({}, options), {}, {
+          teamCentralUrl: 'defaultTeamCentralUrl'
+        }))
       }, clients));
     }
 

package/dist/cjs/mocks/reporting-lines-data.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reportingLinesData = void 0;
+
+var _profileData = _interopRequireDefault(require("./profile-data"));
+
+var mappedProfileToReportingLines = _profileData.default.map(function (profile, index) {
+  return {
+    accountIdentifier: '123456:12345-67890-' + index,
+    identifierType: 'ATLASSIAN_ID',
+    pii: {
+      name: profile.User.fullName,
+      picture: profile.User.avatarUrl
+    }
+  };
+});
+
+var halfCount = Math.ceil(mappedProfileToReportingLines.length / 2);
+var reportingLinesData = {
+  managers: mappedProfileToReportingLines.slice(0, halfCount),
+  reports: mappedProfileToReportingLines.slice(-halfCount)
+};
+exports.reportingLinesData = reportingLinesData;