@atlaskit/profilecard 15.8.2 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @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
+
+- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+
+## 16.0.1
+
+### Patch Changes
+
+- [`82099b76445`](https://bitbucket.org/atlassian/atlassian-frontend/commits/82099b76445) - Add optional `testId` prop to `ProfileCardTrigger` to ease testing
+
+## 16.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
 ## 15.8.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/client/UserProfileCardClient.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.modifyResponse = void 0;
+exports.modifyResponse = exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

package/dist/cjs/client/index.js

@@ -25,13 +25,13 @@ Object.defineProperty(exports, "UserProfileClient", {
     return _UserProfileCardClient.default;
   }
 });
+exports.default = void 0;
 Object.defineProperty(exports, "modifyResponse", {
   enumerable: true,
   get: function get() {
     return _UserProfileCardClient.modifyResponse;
   }
 });
-exports.default = void 0;
 
 var _CachingClient = _interopRequireDefault(require("./CachingClient"));
 

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

@@ -19,7 +19,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
@@ -103,7 +103,7 @@ var TeamMembers = function TeamMembers(_ref) {
 
     isMoreMembersOpen.current = !isOpen;
   }, [analytics, count]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TeamCard.MemberCount, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, message, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TeamCard.MemberCount, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, message, {
     values: {
       count: count
     }
@@ -256,7 +256,7 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
       viewProfileLink = _ref5.viewProfileLink,
       viewProfileOnClick = _ref5.viewProfileOnClick;
   var allActions = [{
-    label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamViewProfile),
+    label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamViewProfile),
     link: viewProfileLink,
     callback: viewProfileOnClick,
     id: 'view-profile'
@@ -320,12 +320,12 @@ var ErrorMessage = function ErrorMessage(_ref6) {
   }, [analytics, clientFetchProfile]);
   return /*#__PURE__*/_react.default.createElement(_Error.ErrorWrapper, {
     "data-testid": "team-profilecard-error"
-  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorTitle, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Error2.ErrorIllustration, null), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorTitle, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorTitle)), /*#__PURE__*/_react.default.createElement(_Error.TeamErrorText, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorText)), clientFetchProfile && /*#__PURE__*/_react.default.createElement(_TeamCard.ActionButtons, null, /*#__PURE__*/_react.default.createElement(_TeamCard.WrappedButton, null, /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
     testId: "client-fetch-profile-button",
     shouldFitContainer: true,
     onClick: retry,
     isLoading: isLoading
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.teamErrorButton)))));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamErrorButton)))));
 };
 
 var TeamProfileCard = function TeamProfileCard(props) {

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

@@ -27,7 +27,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 
@@ -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",
@@ -178,7 +190,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }, this.getDisabledAccountName()), hasDisabledAccountLozenge && /*#__PURE__*/_react.default.createElement(_Card.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: "default",
         isBold: true
-      }, status === 'inactive' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.inactiveAccountMsg), status === 'closed' && /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.closedAccountMsg))), /*#__PURE__*/_react.default.createElement(_Card.DisabledInfo, null, this.getDisabledAccountDesc()), status === 'inactive' && /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
+      }, status === 'inactive' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.inactiveAccountMsg), status === 'closed' && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.closedAccountMsg))), /*#__PURE__*/_react.default.createElement(_Card.DisabledInfo, null, this.getDisabledAccountDesc()), status === 'inactive' && /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
         icon: "companyName"
       }, companyName));
     }
@@ -193,7 +205,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       if (status === 'inactive') {
         return fullName || nickname;
       } else if (status === 'closed') {
-        return nickname || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.disabledAccountDefaultName);
+        return nickname || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.disabledAccountDefaultName);
       }
 
       return null;
@@ -216,16 +228,16 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       var secondSentence = null;
 
       if (relativeDateKey) {
-        secondSentence = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage // @ts-ignore
+        secondSentence = /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage // @ts-ignore
         , _messages.default["".concat(status, "AccountDescMsgHasDate").concat(relativeDateKey)]);
       } else {
         secondSentence =
         /*#__PURE__*/
         // @ts-ignore
-        _react.default.createElement(_reactIntl.FormattedMessage, _messages.default["".concat(status, "AccountDescMsgNoDate")]);
+        _react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default["".concat(status, "AccountDescMsgNoDate")]);
       }
 
-      return /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.default.generalDescMsgForDisabledUser), ' ', secondSentence);
+      return /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.generalDescMsgForDisabledUser), ' ', secondSentence);
     }
   }, {
     key: "renderFullNameAndPublicName",
@@ -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,
@@ -236,7 +242,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
           var ref = triggerProps.ref,
               innerProps = (0, _objectWithoutProperties2.default)(triggerProps, ["ref"]);
           return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, _this2.containerListeners, {
-            ref: ref
+            ref: ref,
+            "data-testid": _this2.props.testId
           }), _this2.props.children);
         },
         zIndex: _constants.layers.modal()