@atlaskit/profilecard 19.1.0 → 19.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/profilecard
 
+## 19.2.0
+
+### Minor Changes
+
+- [`2af6359970f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2af6359970f) - [ux] This change (related to TSLA-521) adds an onFocus handler for the profile card trigger that performs the same behavior as onHover. The change also adds an onBlur handler.
+
+## 19.1.1
+
+### Patch Changes
+
+- [`f80d2e43a41`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f80d2e43a41) - Added traceId, errorSource and errorMessage to analytic events
+
 ## 19.1.0
 
 ### Minor Changes

package/dist/cjs/client/errorUtils.js

@@ -10,16 +10,16 @@ var IGNORED_ERRORS = [
 // Error categories from AGG
 'TEAMS_FORBIDDEN', 'TEAMS_TEAM_DELETED'];
 function isIgnoredError(error) {
-  return !!error && IGNORED_ERRORS.includes(error.reason);
+  return !!error && !!error.reason && IGNORED_ERRORS.includes(error.reason);
 }
 var getErrorAttributes = function getErrorAttributes(error) {
-  var _error$response, _error$response$heade;
-  var traceId = !!error ? (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$heade = _error$response.headers) === null || _error$response$heade === void 0 ? void 0 : _error$response$heade.get('atl-traceid') : undefined;
+  var _error$traceId;
   return {
+    errorMessage: error === null || error === void 0 ? void 0 : error.message,
     errorStatus: error === null || error === void 0 ? void 0 : error.code,
-    errorReason: error === null || error === void 0 ? void 0 : error.reason,
+    errorReason: (error === null || error === void 0 ? void 0 : error.reason) || 'default',
     isSLOFailure: !isIgnoredError(error),
-    traceId: traceId !== null && traceId !== void 0 ? traceId : undefined
+    traceId: (_error$traceId = error === null || error === void 0 ? void 0 : error.traceId) !== null && _error$traceId !== void 0 ? _error$traceId : undefined
   };
 };
 exports.getErrorAttributes = getErrorAttributes;

package/dist/cjs/client/graphqlUtils.js

@@ -29,9 +29,12 @@ function graphqlQuery(serviceUrl, query) {
     body: JSON.stringify(query)
   })).then(function (response) {
     if (!response.ok) {
+      var _response$headers;
+      var traceIdFromHeaders = response === null || response === void 0 ? void 0 : (_response$headers = response.headers) === null || _response$headers === void 0 ? void 0 : _response$headers.get('atl-traceid');
       return Promise.reject({
         code: response.status,
-        reason: response.statusText
+        reason: response.statusText,
+        traceId: traceIdFromHeaders
       });
     }
     return response;
@@ -39,11 +42,13 @@ function graphqlQuery(serviceUrl, query) {
     return response.json();
   }).then(function (json) {
     if (json.errors) {
-      var _json$errors$, _json$errors$2, _json$errors$2$extens, _json$errors$3, _json$errors$3$extens;
-      // We need to handle responses from pf-directory and AGG
+      var _json$errors$, _json$errors$2, _json$errors$2$extens, _json$errors$3, _json$errors$3$extens, _json$errors$4, _json$errors$4$extens, _json$extensions, _json$extensions$gate;
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || ((_json$errors$2 = json.errors[0]) === null || _json$errors$2 === void 0 ? void 0 : (_json$errors$2$extens = _json$errors$2.extensions) === null || _json$errors$2$extens === void 0 ? void 0 : _json$errors$2$extens.classification) || 'default',
-        code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode
+        code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode,
+        errorSource: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
+        message: json.errors[0].message,
+        traceId: (_json$extensions = json.extensions) === null || _json$extensions === void 0 ? void 0 : (_json$extensions$gate = _json$extensions.gateway) === null || _json$extensions$gate === void 0 ? void 0 : _json$extensions$gate.request_id
       });
     }
     return json.data;

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

@@ -95,6 +95,12 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         _this.fireAnalytics((0, _analytics.cardTriggered)('user', 'hover'));
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function () {
+      _this.showProfilecard();
+      if (!_this.state.visible) {
+        _this.fireAnalytics((0, _analytics.cardTriggered)('user', 'hover'));
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyPress", function (event) {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
@@ -106,7 +112,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "containerListeners", _this.props.trigger === 'hover' ? {
       onMouseEnter: _this.onMouseEnter,
-      onMouseLeave: _this.hideProfilecard
+      onMouseLeave: _this.hideProfilecard,
+      onFocus: _this.onFocus,
+      onBlur: _this.hideProfilecard
     } : {
       onClick: _this.onClick,
       onKeyPress: _this.onKeyPress
@@ -254,7 +262,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       });
       var wrapperProps = this.props.trigger === 'hover' ? {
         onMouseEnter: this.onMouseEnter,
-        onMouseLeave: this.hideProfilecard
+        onMouseLeave: this.hideProfilecard,
+        onFocus: this.onFocus
       } : {};
       return /*#__PURE__*/_react.default.createElement("div", wrapperProps, this.state.visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
         fallback: null
@@ -280,8 +289,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
           return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, _this3.containerListeners, {
             ref: ref,
             "data-testid": _this3.props.testId,
-            tabIndex: 0,
-            role: _this3.props.trigger !== 'hover' ? 'button' : ''
+            role: _this3.props.trigger !== 'hover' ? 'button' : '',
+            tabIndex: 0
           }), _this3.props.children);
         },
         zIndex: _constants.layers.modal(),

package/dist/cjs/util/analytics.js

@@ -44,7 +44,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.1.0"
+      packageVersion: "19.2.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "19.1.0"
+	"version": "19.2.0"
 }

package/dist/es2019/client/errorUtils.js

@@ -4,15 +4,15 @@ const IGNORED_ERRORS = [
 // Error categories from AGG
 'TEAMS_FORBIDDEN', 'TEAMS_TEAM_DELETED'];
 function isIgnoredError(error) {
-  return !!error && IGNORED_ERRORS.includes(error.reason);
+  return !!error && !!error.reason && IGNORED_ERRORS.includes(error.reason);
 }
 export const getErrorAttributes = error => {
-  var _error$response, _error$response$heade;
-  const traceId = !!error ? (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$heade = _error$response.headers) === null || _error$response$heade === void 0 ? void 0 : _error$response$heade.get('atl-traceid') : undefined;
+  var _error$traceId;
   return {
+    errorMessage: error === null || error === void 0 ? void 0 : error.message,
     errorStatus: error === null || error === void 0 ? void 0 : error.code,
-    errorReason: error === null || error === void 0 ? void 0 : error.reason,
+    errorReason: (error === null || error === void 0 ? void 0 : error.reason) || 'default',
     isSLOFailure: !isIgnoredError(error),
-    traceId: traceId !== null && traceId !== void 0 ? traceId : undefined
+    traceId: (_error$traceId = error === null || error === void 0 ? void 0 : error.traceId) !== null && _error$traceId !== void 0 ? _error$traceId : undefined
   };
 };

package/dist/es2019/client/graphqlUtils.js

@@ -20,19 +20,24 @@ export function graphqlQuery(serviceUrl, query, processHeaders = id) {
     body: JSON.stringify(query)
   })).then(response => {
     if (!response.ok) {
+      var _response$headers;
+      const traceIdFromHeaders = response === null || response === void 0 ? void 0 : (_response$headers = response.headers) === null || _response$headers === void 0 ? void 0 : _response$headers.get('atl-traceid');
       return Promise.reject({
         code: response.status,
-        reason: response.statusText
+        reason: response.statusText,
+        traceId: traceIdFromHeaders
       });
     }
     return response;
   }).then(response => response.json()).then(json => {
     if (json.errors) {
-      var _json$errors$, _json$errors$2, _json$errors$2$extens, _json$errors$3, _json$errors$3$extens;
-      // We need to handle responses from pf-directory and AGG
+      var _json$errors$, _json$errors$2, _json$errors$2$extens, _json$errors$3, _json$errors$3$extens, _json$errors$4, _json$errors$4$extens, _json$extensions, _json$extensions$gate;
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || ((_json$errors$2 = json.errors[0]) === null || _json$errors$2 === void 0 ? void 0 : (_json$errors$2$extens = _json$errors$2.extensions) === null || _json$errors$2$extens === void 0 ? void 0 : _json$errors$2$extens.classification) || 'default',
-        code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode
+        code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode,
+        errorSource: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
+        message: json.errors[0].message,
+        traceId: (_json$extensions = json.extensions) === null || _json$extensions === void 0 ? void 0 : (_json$extensions$gate = _json$extensions.gateway) === null || _json$extensions$gate === void 0 ? void 0 : _json$extensions$gate.request_id
       });
     }
     return json.data;

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

@@ -65,6 +65,12 @@ class ProfilecardTrigger extends React.PureComponent {
         this.fireAnalytics(cardTriggered('user', 'hover'));
       }
     });
+    _defineProperty(this, "onFocus", () => {
+      this.showProfilecard();
+      if (!this.state.visible) {
+        this.fireAnalytics(cardTriggered('user', 'hover'));
+      }
+    });
     _defineProperty(this, "onKeyPress", event => {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
@@ -76,7 +82,9 @@ class ProfilecardTrigger extends React.PureComponent {
     });
     _defineProperty(this, "containerListeners", this.props.trigger === 'hover' ? {
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.hideProfilecard
+      onMouseLeave: this.hideProfilecard,
+      onFocus: this.onFocus,
+      onBlur: this.hideProfilecard
     } : {
       onClick: this.onClick,
       onKeyPress: this.onKeyPress
@@ -210,7 +218,8 @@ class ProfilecardTrigger extends React.PureComponent {
     };
     const wrapperProps = this.props.trigger === 'hover' ? {
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.hideProfilecard
+      onMouseLeave: this.hideProfilecard,
+      onFocus: this.onFocus
     } : {};
     return /*#__PURE__*/React.createElement("div", wrapperProps, this.state.visible && /*#__PURE__*/React.createElement(Suspense, {
       fallback: null
@@ -235,8 +244,8 @@ class ProfilecardTrigger extends React.PureComponent {
         return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, this.containerListeners, {
           ref: ref,
           "data-testid": this.props.testId,
-          tabIndex: 0,
-          role: this.props.trigger !== 'hover' ? 'button' : ''
+          role: this.props.trigger !== 'hover' ? 'button' : '',
+          tabIndex: 0
         }), this.props.children);
       },
       zIndex: layers.modal(),

package/dist/es2019/util/analytics.js

@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "19.1.0",
+    packageVersion: "19.2.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "19.1.0"
+	"version": "19.2.0"
 }

package/dist/esm/client/errorUtils.js

@@ -4,15 +4,15 @@ var IGNORED_ERRORS = [
 // Error categories from AGG
 'TEAMS_FORBIDDEN', 'TEAMS_TEAM_DELETED'];
 function isIgnoredError(error) {
-  return !!error && IGNORED_ERRORS.includes(error.reason);
+  return !!error && !!error.reason && IGNORED_ERRORS.includes(error.reason);
 }
 export var getErrorAttributes = function getErrorAttributes(error) {
-  var _error$response, _error$response$heade;
-  var traceId = !!error ? (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$heade = _error$response.headers) === null || _error$response$heade === void 0 ? void 0 : _error$response$heade.get('atl-traceid') : undefined;
+  var _error$traceId;
   return {
+    errorMessage: error === null || error === void 0 ? void 0 : error.message,
     errorStatus: error === null || error === void 0 ? void 0 : error.code,
-    errorReason: error === null || error === void 0 ? void 0 : error.reason,
+    errorReason: (error === null || error === void 0 ? void 0 : error.reason) || 'default',
     isSLOFailure: !isIgnoredError(error),
-    traceId: traceId !== null && traceId !== void 0 ? traceId : undefined
+    traceId: (_error$traceId = error === null || error === void 0 ? void 0 : error.traceId) !== null && _error$traceId !== void 0 ? _error$traceId : undefined
   };
 };

package/dist/esm/client/graphqlUtils.js

@@ -23,9 +23,12 @@ export function graphqlQuery(serviceUrl, query) {
     body: JSON.stringify(query)
   })).then(function (response) {
     if (!response.ok) {
+      var _response$headers;
+      var traceIdFromHeaders = response === null || response === void 0 ? void 0 : (_response$headers = response.headers) === null || _response$headers === void 0 ? void 0 : _response$headers.get('atl-traceid');
       return Promise.reject({
         code: response.status,
-        reason: response.statusText
+        reason: response.statusText,
+        traceId: traceIdFromHeaders
       });
     }
     return response;
@@ -33,11 +36,13 @@ export function graphqlQuery(serviceUrl, query) {
     return response.json();
   }).then(function (json) {
     if (json.errors) {
-      var _json$errors$, _json$errors$2, _json$errors$2$extens, _json$errors$3, _json$errors$3$extens;
-      // We need to handle responses from pf-directory and AGG
+      var _json$errors$, _json$errors$2, _json$errors$2$extens, _json$errors$3, _json$errors$3$extens, _json$errors$4, _json$errors$4$extens, _json$extensions, _json$extensions$gate;
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || ((_json$errors$2 = json.errors[0]) === null || _json$errors$2 === void 0 ? void 0 : (_json$errors$2$extens = _json$errors$2.extensions) === null || _json$errors$2$extens === void 0 ? void 0 : _json$errors$2$extens.classification) || 'default',
-        code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode
+        code: (_json$errors$3 = json.errors[0]) === null || _json$errors$3 === void 0 ? void 0 : (_json$errors$3$extens = _json$errors$3.extensions) === null || _json$errors$3$extens === void 0 ? void 0 : _json$errors$3$extens.statusCode,
+        errorSource: (_json$errors$4 = json.errors[0]) === null || _json$errors$4 === void 0 ? void 0 : (_json$errors$4$extens = _json$errors$4.extensions) === null || _json$errors$4$extens === void 0 ? void 0 : _json$errors$4$extens.errorSource,
+        message: json.errors[0].message,
+        traceId: (_json$extensions = json.extensions) === null || _json$extensions === void 0 ? void 0 : (_json$extensions$gate = _json$extensions.gateway) === null || _json$extensions$gate === void 0 ? void 0 : _json$extensions$gate.request_id
       });
     }
     return json.data;

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

@@ -85,6 +85,12 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
         _this.fireAnalytics(cardTriggered('user', 'hover'));
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
+      _this.showProfilecard();
+      if (!_this.state.visible) {
+        _this.fireAnalytics(cardTriggered('user', 'hover'));
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
@@ -96,7 +102,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "containerListeners", _this.props.trigger === 'hover' ? {
       onMouseEnter: _this.onMouseEnter,
-      onMouseLeave: _this.hideProfilecard
+      onMouseLeave: _this.hideProfilecard,
+      onFocus: _this.onFocus,
+      onBlur: _this.hideProfilecard
     } : {
       onClick: _this.onClick,
       onKeyPress: _this.onKeyPress
@@ -244,7 +252,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       });
       var wrapperProps = this.props.trigger === 'hover' ? {
         onMouseEnter: this.onMouseEnter,
-        onMouseLeave: this.hideProfilecard
+        onMouseLeave: this.hideProfilecard,
+        onFocus: this.onFocus
       } : {};
       return /*#__PURE__*/React.createElement("div", wrapperProps, this.state.visible && /*#__PURE__*/React.createElement(Suspense, {
         fallback: null
@@ -270,8 +279,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
           return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, _this3.containerListeners, {
             ref: ref,
             "data-testid": _this3.props.testId,
-            tabIndex: 0,
-            role: _this3.props.trigger !== 'hover' ? 'button' : ''
+            role: _this3.props.trigger !== 'hover' ? 'button' : '',
+            tabIndex: 0
           }), _this3.props.children);
         },
         zIndex: layers.modal(),

package/dist/esm/util/analytics.js

@@ -38,7 +38,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.1.0"
+      packageVersion: "19.2.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "19.1.0"
+	"version": "19.2.0"
 }

package/dist/types/client/errorUtils.d.ts

@@ -1,6 +1,8 @@
-export declare const getErrorAttributes: (error?: any) => {
-    errorStatus: any;
-    errorReason: any;
+import { GraphQLError } from './graphqlUtils';
+export declare const getErrorAttributes: (error?: GraphQLError | undefined) => {
+    errorMessage: string | undefined;
+    errorStatus: number | undefined;
+    errorReason: string;
     isSLOFailure: boolean;
     traceId: string | undefined;
 };

package/dist/types/client/graphqlUtils.d.ts

@@ -4,7 +4,10 @@ interface Query {
 }
 export interface GraphQLError {
     code?: number;
-    reason: string;
+    reason?: string;
+    errorSource?: string;
+    message?: string;
+    traceId?: string;
 }
 declare type HeaderProcessor = (headers: Headers) => Headers;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "19.1.0",
+  "version": "19.2.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
     "@atlaskit/menu": "^1.5.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/spinner": "^15.4.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",