@atlaskit/profilecard 16.0.0 → 16.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/profilecard
 
+## 16.2.0
+
+### Minor Changes
+
+- [`4039320b130`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4039320b130) - Support lazy loading in the ProfileCardTrigger component
+
+## 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

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/Team/lazyTeamProfileCard.js

@@ -16,10 +16,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var TeamProfileCardLazy = /*#__PURE__*/(0, _react.lazy)(function () {
-  return (// eslint-disable-next-line import/dynamic-import-chunkname
-    Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./TeamProfileCard'));
-    })
-  );
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./TeamProfileCard'));
+  });
 });
 exports.TeamProfileCardLazy = TeamProfileCardLazy;

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,7 +27,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 
@@ -37,10 +39,14 @@ var _Card = require("../../styled/Card");
 
 var _config = require("../../util/config");
 
-var _ProfileCard = _interopRequireDefault(require("./ProfileCard"));
+var _lazyProfileCard = require("./lazyProfileCard");
 
 var _UserLoadingState = _interopRequireDefault(require("./UserLoadingState"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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; }
@@ -106,7 +112,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 +131,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 +182,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(res) {
+    value: function handleClientSuccess(profileData, reportingLinesData) {
       if (!this._isMounted) {
         return;
       }
@@ -182,7 +190,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       this.setState({
         isLoading: false,
         hasError: false,
-        data: res
+        data: profileData,
+        reportingLinesData: reportingLinesData
       });
     }
   }, {
@@ -206,21 +215,26 @@ 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,
         onMouseLeave: this.hideProfilecard
       } : {};
-      return /*#__PURE__*/_react.default.createElement("div", wrapperProps, /*#__PURE__*/_react.default.createElement(_ProfileCard.default, (0, _extends2.default)({}, newProps, {
+      return /*#__PURE__*/_react.default.createElement("div", wrapperProps, this.state.visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+        fallback: null
+      }, /*#__PURE__*/_react.default.createElement(_lazyProfileCard.ProfileCardLazy, (0, _extends2.default)({}, newProps, {
         actions: this.filterActions(),
         hasError: this.state.hasError,
         errorType: this.state.error,
         withoutElevation: true
-      })));
+      }))));
     }
   }, {
     key: "renderWithTrigger",
@@ -236,7 +250,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()

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/components/User/index.js

@@ -17,33 +17,19 @@ Object.defineProperty(exports, "DELAY_MS_SHOW", {
     return _config.DELAY_MS_SHOW;
   }
 });
-Object.defineProperty(exports, "ProfileCard", {
+Object.defineProperty(exports, "ProfileCardLazy", {
   enumerable: true,
   get: function get() {
-    return _ProfileCard.default;
-  }
-});
-Object.defineProperty(exports, "ProfileCardResourced", {
-  enumerable: true,
-  get: function get() {
-    return _ProfileCardResourced.default;
-  }
-});
-Object.defineProperty(exports, "ProfileCardTrigger", {
-  enumerable: true,
-  get: function get() {
-    return _ProfileCardTrigger.default;
+    return _lazyProfileCard.ProfileCardLazy;
   }
 });
 exports.default = void 0;
 
 var _config = require("../../util/config");
 
-var _ProfileCard = _interopRequireDefault(require("./ProfileCard"));
+var _lazyProfileCard = require("./lazyProfileCard");
 
 var _ProfileCardTrigger = _interopRequireDefault(require("./ProfileCardTrigger"));
 
-var _ProfileCardResourced = _interopRequireDefault(require("./ProfileCardResourced"));
-
 var _default = _ProfileCardTrigger.default;
 exports.default = _default;