@atlaskit/user-picker 8.8.2 → 8.8.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 8.8.3
+
+### Patch Changes
+
+- [`3553b21ec20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3553b21ec20) - Render time of user picker list is now tracked with UFO
+
 ## 8.8.2
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -25,12 +25,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _ufo = require("@atlaskit/ufo");
+
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
+var _uuid = require("uuid");
+
 var _analytics = require("../analytics");
 
 var _batch = require("./batch");
@@ -39,6 +43,8 @@ var _i18n = require("./i18n");
 
 var _utils = require("./utils");
 
+var _ufoExperiences = require("../util/ufoExperiences");
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -233,6 +239,18 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         });
       }
     }, 200));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "abortOptionsShownUfoExperience", function () {
+      if (_this.optionsShownUfoExperienceInstance.state.id === _ufo.UFOExperienceState.STARTED.id) {
+        // There may be an existing UFO timing running from previous key entry or focus,
+        // so abort it and restart it just in case.
+        _this.optionsShownUfoExperienceInstance.abort();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startOptionsShownUfoExperience", function () {
+      _this.abortOptionsShownUfoExperience();
+
+      _this.optionsShownUfoExperienceInstance.start();
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "executeLoadOptions", function (search) {
       var loadOptions = _this.props.loadOptions;
 
@@ -253,6 +271,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         _this.startSession();
       }
 
+      _this.startOptionsShownUfoExperience();
+
       (0, _utils.callCallback)(_this.props.onFocus, _this.getSessionId());
 
       _this.setState({
@@ -288,6 +308,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       _this.resetInputState();
 
+      _this.abortOptionsShownUfoExperience();
+
       _this.setState({
         menuIsOpen: false,
         options: []
@@ -313,6 +335,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
           inputValue: search
         });
 
+        _this.startOptionsShownUfoExperience();
+
         _this.executeLoadOptions(search);
       }
     });
@@ -411,6 +435,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       inputValue: props.search || '',
       resolving: false
     };
+    _this.optionsShownUfoExperienceInstance = _ufoExperiences.userPickerOptionsShownUfoExperience.getInstance((0, _uuid.v4)());
     return _this;
   }
 
@@ -434,7 +459,9 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(_, prevState) {
       var _this$state2 = this.state,
           menuIsOpen = _this$state2.menuIsOpen,
-          options = _this$state2.options; // load options when the picker open
+          options = _this$state2.options,
+          resolving = _this$state2.resolving,
+          count = _this$state2.count; // load options when the picker open
 
       if (menuIsOpen && !prevState.menuIsOpen) {
         if (!this.session) {
@@ -459,6 +486,10 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
           this.session.inputChangeTime = Date.now();
         }
       }
+
+      if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_ufo.UFOExperienceState.STARTED.id, _ufo.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+        this.optionsShownUfoExperienceInstance.success();
+      }
     }
   }, {
     key: "render",

package/dist/cjs/util/ufoExperiences.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userPickerRenderedUfoExperience = exports.UfoErrorBoundary = void 0;
+exports.userPickerRenderedUfoExperience = exports.userPickerOptionsShownUfoExperience = exports.UfoErrorBoundary = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -33,6 +33,14 @@ var userPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('user-picker
   performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
 });
 exports.userPickerRenderedUfoExperience = userPickerRenderedUfoExperience;
+var userPickerOptionsShownUfoExperience = new _ufo.ConcurrentExperience('user-picker-options-shown', {
+  platform: {
+    component: 'user-picker'
+  },
+  type: _ufo.ExperienceTypes.Operation,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+});
+exports.userPickerOptionsShownUfoExperience = userPickerOptionsShownUfoExperience;
 
 var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(UfoErrorBoundary, _React$Component);

package/dist/cjs/version.json

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

package/dist/es2019/components/BaseUserPicker.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
+import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
 
 const loadingMessage = () => null;
 
@@ -198,6 +201,19 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
     }, 200));
 
+    _defineProperty(this, "abortOptionsShownUfoExperience", () => {
+      if (this.optionsShownUfoExperienceInstance.state.id === UFOExperienceState.STARTED.id) {
+        // There may be an existing UFO timing running from previous key entry or focus,
+        // so abort it and restart it just in case.
+        this.optionsShownUfoExperienceInstance.abort();
+      }
+    });
+
+    _defineProperty(this, "startOptionsShownUfoExperience", () => {
+      this.abortOptionsShownUfoExperience();
+      this.optionsShownUfoExperienceInstance.start();
+    });
+
     _defineProperty(this, "executeLoadOptions", search => {
       const {
         loadOptions
@@ -220,6 +236,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.startSession();
       }
 
+      this.startOptionsShownUfoExperience();
       callCallback(this.props.onFocus, this.getSessionId());
       this.setState({
         menuIsOpen: true
@@ -253,6 +270,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
 
       this.resetInputState();
+      this.abortOptionsShownUfoExperience();
       this.setState({
         menuIsOpen: false,
         options: []
@@ -276,6 +294,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.setState({
           inputValue: search
         });
+        this.startOptionsShownUfoExperience();
         this.executeLoadOptions(search);
       }
     });
@@ -373,6 +392,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       inputValue: props.search || '',
       resolving: false
     };
+    this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
   }
 
   componentDidMount() {
@@ -393,7 +413,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   componentDidUpdate(_, prevState) {
     const {
       menuIsOpen,
-      options
+      options,
+      resolving,
+      count
     } = this.state; // load options when the picker open
 
     if (menuIsOpen && !prevState.menuIsOpen) {
@@ -419,6 +441,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         this.session.inputChangeTime = Date.now();
       }
     }
+
+    if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+      this.optionsShownUfoExperienceInstance.success();
+    }
   }
 
   render() {

package/dist/es2019/util/ufoExperiences.js

@@ -7,6 +7,13 @@ export const userPickerRenderedUfoExperience = new ConcurrentExperience('user-pi
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export const userPickerOptionsShownUfoExperience = new ConcurrentExperience('user-picker-options-shown', {
+  platform: {
+    component: 'user-picker'
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export class UfoErrorBoundary extends React.Component {
   componentDidCatch() {
     const instance = userPickerRenderedUfoExperience.getInstance(this.props.id);

package/dist/es2019/version.json

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

package/dist/esm/components/BaseUserPicker.js

@@ -18,13 +18,16 @@ 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; } }
 
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
+import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
 
 var loadingMessage = function loadingMessage() {
   return null;
@@ -224,6 +227,20 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
     }, 200));
 
+    _defineProperty(_assertThisInitialized(_this), "abortOptionsShownUfoExperience", function () {
+      if (_this.optionsShownUfoExperienceInstance.state.id === UFOExperienceState.STARTED.id) {
+        // There may be an existing UFO timing running from previous key entry or focus,
+        // so abort it and restart it just in case.
+        _this.optionsShownUfoExperienceInstance.abort();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "startOptionsShownUfoExperience", function () {
+      _this.abortOptionsShownUfoExperience();
+
+      _this.optionsShownUfoExperienceInstance.start();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "executeLoadOptions", function (search) {
       var loadOptions = _this.props.loadOptions;
 
@@ -245,6 +262,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         _this.startSession();
       }
 
+      _this.startOptionsShownUfoExperience();
+
       callCallback(_this.props.onFocus, _this.getSessionId());
 
       _this.setState({
@@ -282,6 +301,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
 
       _this.resetInputState();
 
+      _this.abortOptionsShownUfoExperience();
+
       _this.setState({
         menuIsOpen: false,
         options: []
@@ -309,6 +330,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           inputValue: search
         });
 
+        _this.startOptionsShownUfoExperience();
+
         _this.executeLoadOptions(search);
       }
     });
@@ -414,6 +437,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       inputValue: props.search || '',
       resolving: false
     };
+    _this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
     return _this;
   }
 
@@ -437,7 +461,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     value: function componentDidUpdate(_, prevState) {
       var _this$state2 = this.state,
           menuIsOpen = _this$state2.menuIsOpen,
-          options = _this$state2.options; // load options when the picker open
+          options = _this$state2.options,
+          resolving = _this$state2.resolving,
+          count = _this$state2.count; // load options when the picker open
 
       if (menuIsOpen && !prevState.menuIsOpen) {
         if (!this.session) {
@@ -462,6 +488,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           this.session.inputChangeTime = Date.now();
         }
       }
+
+      if (menuIsOpen && (!_.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [UFOExperienceState.STARTED.id, UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+        this.optionsShownUfoExperienceInstance.success();
+      }
     }
   }, {
     key: "render",

package/dist/esm/util/ufoExperiences.js

@@ -17,6 +17,13 @@ export var userPickerRenderedUfoExperience = new ConcurrentExperience('user-pick
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export var userPickerOptionsShownUfoExperience = new ConcurrentExperience('user-picker-options-shown', {
+  platform: {
+    component: 'user-picker'
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(UfoErrorBoundary, _React$Component);
 

package/dist/esm/version.json

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

package/dist/types/components/BaseUserPicker.d.ts

@@ -19,6 +19,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private selectRef;
     private session?;
     private journeyId?;
+    private optionsShownUfoExperienceInstance;
     constructor(props: BaseUserPickerProps);
     private getSessionId;
     private withSelectRef;
@@ -32,6 +33,8 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private addOptions;
     private handleLoadOptionsError;
     private debouncedLoadOptions;
+    abortOptionsShownUfoExperience: () => void;
+    startOptionsShownUfoExperience: () => void;
     private executeLoadOptions;
     private handleFocus;
     private resetInputState;

package/dist/types/util/ufoExperiences.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ConcurrentExperience } from '@atlaskit/ufo';
 export declare const userPickerRenderedUfoExperience: ConcurrentExperience;
+export declare const userPickerOptionsShownUfoExperience: ConcurrentExperience;
 export declare class UfoErrorBoundary extends React.Component<{
     id: string;
 }> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "8.8.2",
+  "version": "8.8.3",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"