@atlaskit/user-picker 9.0.1 → 9.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 9.0.2
+
+### Patch Changes
+
+- [`85c0dcfe911`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85c0dcfe911) - Added analytics event when the sources tooltip is displayed for an external user
+
 ## 9.0.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.startSession = exports.selectEvent = exports.searchedEvent = exports.focusEvent = exports.failedEvent = exports.deleteEvent = exports.createAndFireEventInElementsChannel = exports.clearEvent = exports.cancelEvent = void 0;
+exports.userInfoEvent = exports.startSession = exports.selectEvent = exports.searchedEvent = exports.focusEvent = exports.failedEvent = exports.deleteEvent = exports.createAndFireEventInElementsChannel = exports.clearEvent = exports.cancelEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -173,6 +173,15 @@ var failedEvent = function failedEvent(props, _, session, journeyId) {
 
 exports.failedEvent = failedEvent;
 
+var userInfoEvent = function userInfoEvent(sources, accountId) {
+  return createEvent('ui', 'displayed', 'userInfo', {
+    sources: sources,
+    accountId: accountId
+  });
+};
+
+exports.userInfoEvent = userInfoEvent;
+
 function queryLength(state) {
   return state.inputValue.length;
 }

package/dist/cjs/components/ExternalUserOption/main.js

@@ -33,6 +33,10 @@ var _tokens = require("@atlaskit/tokens");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../../analytics");
+
 var _AvatarItemOption = require("../AvatarItemOption");
 
 var _SizeableAvatar = require("../SizeableAvatar");
@@ -63,21 +67,21 @@ var emailDomainWrapper = (0, _core.css)({
 });
 exports.emailDomainWrapper = emailDomainWrapper;
 
-var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ExternalUserOption, _React$PureComponent);
+var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(ExternalUserOptionImpl, _React$PureComponent);
 
-  var _super = _createSuper(ExternalUserOption);
+  var _super = _createSuper(ExternalUserOptionImpl);
 
-  function ExternalUserOption() {
+  function ExternalUserOptionImpl() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, ExternalUserOption);
+    (0, _classCallCheck2.default)(this, ExternalUserOptionImpl);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPrimaryText", function () {
       var name = _this.props.user.name;
       return (0, _core.jsx)("span", {
@@ -117,16 +121,33 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
         name: name
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireEvent", function (eventCreator) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+
+      if (createAnalyticsEvent) {
+        (0, _analytics.createAndFireEventInElementsChannel)(eventCreator.apply(void 0, args))(createAnalyticsEvent);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onShow", function () {
+      var user = _this.props.user;
+
+      _this.fireEvent(_analytics.userInfoEvent, user.sources, user.id);
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSourcesInfoTooltip", function () {
       return _this.props.user.isExternal ? (0, _core.jsx)(_tooltip.default, {
         content: _this.formattedTooltipContent(),
-        position: 'right-start'
+        position: 'right-start',
+        onShow: _this.onShow
       }, (0, _core.jsx)(_InfoIcon.default, null)) : undefined;
     });
     return _this;
   }
 
-  (0, _createClass2.default)(ExternalUserOption, [{
+  (0, _createClass2.default)(ExternalUserOptionImpl, [{
     key: "render",
     value: function render() {
       return (0, _core.jsx)(_ExternalAvatarItemOption.ExternalAvatarItemOption, {
@@ -152,7 +173,8 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   }]);
-  return ExternalUserOption;
+  return ExternalUserOptionImpl;
 }(_react.default.PureComponent);
 
+var ExternalUserOption = (0, _analyticsNext.withAnalyticsEvents)()(ExternalUserOptionImpl);
 exports.ExternalUserOption = ExternalUserOption;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.1",
+	"version": "9.0.2",
 	"sideEffects": false
 }

package/dist/es2019/analytics.js

@@ -115,6 +115,10 @@ export const searchedEvent = (props, state, session, journeyId) => {
 };
 export const failedEvent = (props, _, session, journeyId) => createEvent('operational', 'failed', 'userPicker', { ...createDefaultPickerAttributes(props, session, journeyId)
 });
+export const userInfoEvent = (sources, accountId) => createEvent('ui', 'displayed', 'userInfo', {
+  sources,
+  accountId
+});
 
 function queryLength(state) {
   return state.inputValue.length;

package/dist/es2019/components/ExternalUserOption/main.js

@@ -6,6 +6,8 @@ import { css, jsx } from '@emotion/core';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
 import { textWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
@@ -23,9 +25,10 @@ export const imageContainer = css({
 export const emailDomainWrapper = css({
   fontWeight: 'bold'
 });
-export class ExternalUserOption extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+
+class ExternalUserOptionImpl extends React.PureComponent {
+  constructor(..._args) {
+    super(..._args);
 
     _defineProperty(this, "getPrimaryText", () => {
       const {
@@ -73,9 +76,27 @@ export class ExternalUserOption extends React.PureComponent {
       });
     });
 
+    _defineProperty(this, "fireEvent", (eventCreator, ...args) => {
+      const {
+        createAnalyticsEvent
+      } = this.props;
+
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel(eventCreator(...args))(createAnalyticsEvent);
+      }
+    });
+
+    _defineProperty(this, "onShow", () => {
+      const {
+        user
+      } = this.props;
+      this.fireEvent(userInfoEvent, user.sources, user.id);
+    });
+
     _defineProperty(this, "getSourcesInfoTooltip", () => this.props.user.isExternal ? jsx(Tooltip, {
       content: this.formattedTooltipContent(),
-      position: 'right-start'
+      position: 'right-start',
+      onShow: this.onShow
     }, jsx(InfoIcon, null)) : undefined);
   }
 
@@ -103,4 +124,6 @@ export class ExternalUserOption extends React.PureComponent {
     }, sourceData => jsx(SourcesTooltipContent, sourceData));
   }
 
-}
+}
+
+export const ExternalUserOption = withAnalyticsEvents()(ExternalUserOptionImpl);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.1",
+	"version": "9.0.2",
 	"sideEffects": false
 }

package/dist/esm/analytics.js

@@ -135,6 +135,12 @@ export var searchedEvent = function searchedEvent(props, state, session, journey
 export var failedEvent = function failedEvent(props, _, session, journeyId) {
   return createEvent('operational', 'failed', 'userPicker', _objectSpread({}, createDefaultPickerAttributes(props, session, journeyId)));
 };
+export var userInfoEvent = function userInfoEvent(sources, accountId) {
+  return createEvent('ui', 'displayed', 'userInfo', {
+    sources: sources,
+    accountId: accountId
+  });
+};
 
 function queryLength(state) {
   return state.inputValue.length;

package/dist/esm/components/ExternalUserOption/main.js

@@ -17,6 +17,8 @@ import { css, jsx } from '@emotion/core';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
 import { textWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
@@ -34,21 +36,22 @@ export var imageContainer = css({
 export var emailDomainWrapper = css({
   fontWeight: 'bold'
 });
-export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ExternalUserOption, _React$PureComponent);
 
-  var _super = _createSuper(ExternalUserOption);
+var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(ExternalUserOptionImpl, _React$PureComponent);
 
-  function ExternalUserOption() {
+  var _super = _createSuper(ExternalUserOptionImpl);
+
+  function ExternalUserOptionImpl() {
     var _this;
 
-    _classCallCheck(this, ExternalUserOption);
+    _classCallCheck(this, ExternalUserOptionImpl);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
 
     _defineProperty(_assertThisInitialized(_this), "getPrimaryText", function () {
       var name = _this.props.user.name;
@@ -92,17 +95,36 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "fireEvent", function (eventCreator) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+
+      if (createAnalyticsEvent) {
+        createAndFireEventInElementsChannel(eventCreator.apply(void 0, args))(createAnalyticsEvent);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onShow", function () {
+      var user = _this.props.user;
+
+      _this.fireEvent(userInfoEvent, user.sources, user.id);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getSourcesInfoTooltip", function () {
       return _this.props.user.isExternal ? jsx(Tooltip, {
         content: _this.formattedTooltipContent(),
-        position: 'right-start'
+        position: 'right-start',
+        onShow: _this.onShow
       }, jsx(InfoIcon, null)) : undefined;
     });
 
     return _this;
   }
 
-  _createClass(ExternalUserOption, [{
+  _createClass(ExternalUserOptionImpl, [{
     key: "render",
     value: function render() {
       return jsx(ExternalAvatarItemOption, {
@@ -129,5 +151,7 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 
-  return ExternalUserOption;
-}(React.PureComponent);
+  return ExternalUserOptionImpl;
+}(React.PureComponent);
+
+export var ExternalUserOption = withAnalyticsEvents()(ExternalUserOptionImpl);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.0.1",
+	"version": "9.0.2",
 	"sideEffects": false
 }

package/dist/types/analytics.d.ts

@@ -21,3 +21,4 @@ export declare const cancelEvent: EventCreator;
 export declare const selectEvent: EventCreator;
 export declare const searchedEvent: EventCreator;
 export declare const failedEvent: EventCreator;
+export declare const userInfoEvent: (sources: string[], accountId: string) => AnalyticsEventPayload;

package/dist/types/components/ExternalUserOption/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const AsyncExternalUserOption: React.LazyExoticComponent<typeof import("./main").ExternalUserOption>;
+declare const AsyncExternalUserOption: React.LazyExoticComponent<React.ForwardRefExoticComponent<Pick<import("./main").ExternalUserOptionProps, "user" | "status" | "isSelected"> & React.RefAttributes<any>>>;
 export default AsyncExternalUserOption;

package/dist/types/components/ExternalUserOption/main.d.ts

@@ -1,18 +1,12 @@
 /** @jsx jsx */
 import React from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { ExternalUser } from '../../types';
 export declare const imageContainer: import("@emotion/utils").SerializedStyles;
 export declare const emailDomainWrapper: import("@emotion/utils").SerializedStyles;
-export declare type ExternalUserOptionProps = {
+export declare type ExternalUserOptionProps = WithAnalyticsEventsProps & {
     user: ExternalUser;
     status?: string;
     isSelected: boolean;
 };
-export declare class ExternalUserOption extends React.PureComponent<ExternalUserOptionProps> {
-    render(): JSX.Element;
-    private getPrimaryText;
-    private renderSecondaryText;
-    private renderAvatar;
-    private getSourcesInfoTooltip;
-    private formattedTooltipContent;
-}
+export declare const ExternalUserOption: React.ForwardRefExoticComponent<Pick<ExternalUserOptionProps, "user" | "status" | "isSelected"> & React.RefAttributes<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -73,7 +73,7 @@
     "faker": "^4.1.0",
     "mock-apollo-client": "^0.1.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "techstack": {
     "@repo/internal": {