@atlaskit/profilecard 16.0.2 → 16.2.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/profilecard
 
+## 16.2.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 16.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/client/CachingClient.js

@@ -15,9 +15,9 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _lruFast = require("lru-fast");
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var CachingClient = /*#__PURE__*/function () {
   function CachingClient(config) {

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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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

@@ -31,9 +31,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
  * Transform response from GraphQL

package/dist/cjs/components/Error/ErrorIllustration.js

@@ -23,7 +23,7 @@ var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: (0, _tokens.token)('color.background.overlay', 'white'),
+    fill: (0, _tokens.token)('elevation.surface.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

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

@@ -55,9 +55,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var LARGE_MEMBER_COUNT = 50;
 

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,10 @@ var _Error = require("../Error");
 
 var _Icon = require("../Icon");
 
+var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
+
+var _excluded = ["text"];
+
 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 +152,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 +169,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",
@@ -250,7 +264,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
     value: function renderCustomLozenges(lozenges) {
       return lozenges.length > 0 ? /*#__PURE__*/_react.default.createElement(_Card.CustomLozengeContainer, null, lozenges.map(function (_ref, index) {
         var text = _ref.text,
-            otherProps = (0, _objectWithoutProperties2.default)(_ref, ["text"]);
+            otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
         return /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({}, otherProps, {
           key: index
         }), text);
@@ -284,7 +298,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 +310,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,
@@ -306,7 +325,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_Card.ProfileImage, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
           size: "xlarge",
           src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: (0, _tokens.token)('color.background.overlay', _colors.N0)
+          borderColor: (0, _tokens.token)('elevation.surface.overlay', _colors.N0)
         })), /*#__PURE__*/_react.default.createElement(_Card.CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.ActionsFlexSpacer, null), actions) : null));
       }
 

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

@@ -37,9 +37,9 @@ var _ProfileCard = _interopRequireDefault(require("./ProfileCard"));
 
 var _UserLoadingState = _interopRequireDefault(require("./UserLoadingState"));
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -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,13 +39,19 @@ 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 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; }
+var _excluded = ["ref"];
+
+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 _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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -106,7 +114,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 +133,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 +184,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(res) {
+    value: function handleClientSuccess(profileData, reportingLinesData) {
       if (!this._isMounted) {
         return;
       }
@@ -182,7 +192,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       this.setState({
         isLoading: false,
         hasError: false,
-        data: res
+        data: profileData,
+        reportingLinesData: reportingLinesData
       });
     }
   }, {
@@ -206,21 +217,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",
@@ -234,7 +250,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         content: this.renderCard,
         trigger: function trigger(triggerProps) {
           var ref = triggerProps.ref,
-              innerProps = (0, _objectWithoutProperties2.default)(triggerProps, ["ref"]);
+              innerProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
           return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, _this2.containerListeners, {
             ref: ref,
             "data-testid": _this2.props.testId