@atlaskit/smart-user-picker 5.0.1 → 5.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/smart-user-picker
 
+## 5.0.4
+
+### Patch Changes
+
+- [`f805f47c19a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f805f47c19a) - Smart User Picker now catches errors emitted from the optional `onError` fallback data source, and also now only sends a UFO failure event if the primary data source (URS) fails AND the `onError` prop either fails or is not provided.
+
+## 5.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.0.2
+
+### Patch Changes
+
+- [`6fc78303271`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6fc78303271) - UFO measurement of how long it takes the list of users to be shown
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/components/SmartUserPicker.js

@@ -39,6 +39,8 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
 var _reactIntlNext = require("react-intl-next");
 
+var _ufo = require("@atlaskit/ufo");
+
 var _userPicker = _interopRequireDefault(require("@atlaskit/user-picker"));
 
 var _analytics = require("../analytics");
@@ -47,6 +49,8 @@ var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvid
 
 var _service = require("../service");
 
+var _ufoExperiences = require("../ufoExperiences");
+
 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; }
@@ -89,33 +93,39 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(SmartUserPickerWithoutAnalytics);
 
-  function SmartUserPickerWithoutAnalytics() {
+  function SmartUserPickerWithoutAnalytics(props) {
     var _this$props$debounceT;
 
     var _this;
 
     (0, _classCallCheck2.default)(this, SmartUserPickerWithoutAnalytics);
-
-    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(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       users: [],
       loading: false,
-      error: false,
       closed: true,
       query: '',
       defaultValue: [],
       bootstrapOptions: []
     });
+    (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), "fireEvent", function (eventCreator) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
       if (createAnalyticsEvent) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
         }
 
         (0, _analytics.createAndFireEventInElementsChannel)(eventCreator.apply(void 0, [_this.props, _this.state].concat(args)))(createAnalyticsEvent);
@@ -126,21 +136,21 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "memoizedFilterOptions", (0, _memoizeOne.default)(_this.filterOptions));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getUsers", (0, _debounce.default)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _this$state, query, sessionId, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, closed, _this$props, baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, intl, maxOptions, objectId, onEmpty, onError, orgId, principalId, productAttributes, productKey, searchQueryFilter, siteId, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, onErrorProducedError, defaultUsers, _elapsedTimeMilli;
 
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId;
-              _this$props = _this.props, containerId = _this$props.containerId, childObjectId = _this$props.childObjectId, objectId = _this$props.objectId, principalId = _this$props.principalId, productKey = _this$props.productKey, siteId = _this$props.siteId, orgId = _this$props.orgId, baseUrl = _this$props.baseUrl, includeUsers = _this$props.includeUsers, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, maxOptions = _this$props.maxOptions, searchQueryFilter = _this$props.searchQueryFilter, onEmpty = _this$props.onEmpty, productAttributes = _this$props.productAttributes, intl = _this$props.intl;
+              _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId, closed = _this$state.closed;
+              _this$props = _this.props, baseUrl = _this$props.baseUrl, childObjectId = _this$props.childObjectId, containerId = _this$props.containerId, fieldId = _this$props.fieldId, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, includeUsers = _this$props.includeUsers, intl = _this$props.intl, maxOptions = _this$props.maxOptions, objectId = _this$props.objectId, onEmpty = _this$props.onEmpty, onError = _this$props.onError, orgId = _this$props.orgId, principalId = _this$props.principalId, productAttributes = _this$props.productAttributes, productKey = _this$props.productKey, searchQueryFilter = _this$props.searchQueryFilter, siteId = _this$props.siteId;
               maxNumberOfResults = maxOptions || 100;
               startTime = window.performance.now();
               recommendationsRequest = {
                 baseUrl: baseUrl,
                 context: {
                   containerId: containerId,
-                  contextType: _this.props.fieldId,
+                  contextType: fieldId,
                   objectId: objectId,
                   principalId: principalId,
                   productKey: productKey,
@@ -230,41 +240,87 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
                 };
               });
 
-              _context.next = 40;
+              _context.next = 58;
               break;
 
             case 31:
               _context.prev = 31;
               _context.t4 = _context["catch"](5);
 
+              if (!closed && !onError) {
+                // If the user lookup fails while the menu is open, and the consumer is not providing a
+                // fallback data source via the onError prop, then send UFO failure
+                _this.optionsShownUfoExperienceInstance.failure();
+              }
+
               _this.setState({
-                users: [],
-                error: true
+                users: []
               });
 
-              _context.next = 36;
-              return _this.props.onError ? _this.props.onError(_context.t4, recommendationsRequest) || Promise.resolve([]) : Promise.resolve([]);
+              onErrorProducedError = false;
+              defaultUsers = [];
+              _context.prev = 37;
 
-            case 36:
-              defaultUsers = _context.sent;
-              _elapsedTimeMilli = window.performance.now() - startTime;
+              if (!onError) {
+                _context.next = 47;
+                break;
+              }
+
+              _context.next = 41;
+              return onError(_context.t4, recommendationsRequest);
+
+            case 41:
+              _context.t6 = _context.sent;
+
+              if (_context.t6) {
+                _context.next = 44;
+                break;
+              }
+
+              _context.t6 = [];
+
+            case 44:
+              _context.t5 = _context.t6;
+              _context.next = 48;
+              break;
+
+            case 47:
+              _context.t5 = [];
+
+            case 48:
+              defaultUsers = _context.t5;
+              _context.next = 54;
+              break;
+
+            case 51:
+              _context.prev = 51;
+              _context.t7 = _context["catch"](37);
+              onErrorProducedError = true;
+
+            case 54:
+              if (onErrorProducedError) {
+                // Log error from fallback data source `onError` to UFO
+                _this.optionsShownUfoExperienceInstance.failure();
+              }
 
               _this.setState({
                 users: defaultUsers,
                 loading: false
               });
 
+              _elapsedTimeMilli = window.performance.now() - startTime;
+
               _this.fireEvent(_analytics.failedRequestUsersEvent, {
                 elapsedTimeMilli: _elapsedTimeMilli,
                 productAttributes: productAttributes
               });
 
-            case 40:
+            case 58:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[5, 31]]);
+      }, _callee, null, [[5, 31], [37, 51]]);
     })), (_this$props$debounceT = _this.props.debounceTime) !== null && _this$props$debounceT !== void 0 ? _this$props$debounceT : 0));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputChange", function (newQuery, sessionId) {
       var query = newQuery || '';
@@ -275,6 +331,12 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       }
 
       if (!closed) {
+        // If the input has been typed into and the dropdown has not been closed
+        // (i.e. input blurred) then start the UFO timer.
+        // If there's a previous UFO timer running for the same "options shown" experience,
+        // it will be aborted first.
+        _this.startOptionsShownUfoExperience();
+
         _this.setState({
           loading: true,
           query: query,
@@ -329,6 +391,8 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         closed: false
       };
 
+      _this.startOptionsShownUfoExperience();
+
       if (_this.state.users.length === 0) {
         state.sessionId = sessionId;
         state.loading = true;
@@ -349,7 +413,9 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onBlur", function (sessionId) {
-      _this.getUsers.cancel(); // clear old users if query is populated so that on refocus,
+      _this.getUsers.cancel();
+
+      _this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
       // the old list is not shown
 
 
@@ -365,6 +431,7 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(sessionId);
       }
     });
+    _this.optionsShownUfoExperienceInstance = _ufoExperiences.smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
     return _this;
   }
 
@@ -439,6 +506,12 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       if ((this.state.sessionId !== prevState.sessionId || this.state.query !== prevState.query) && (this.state.query !== '' || !this.props.bootstrapOptions)) {
         this.getUsers();
+      } else if (!this.state.closed && !this.state.loading) {
+        // If the component has rendered (including its dropdown list) and it
+        // is not loading anything further, send the success UFO event
+        if (![_ufo.UFOExperienceState.FAILED.id, _ufo.UFOExperienceState.SUCCEEDED.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+          this.optionsShownUfoExperienceInstance.success();
+        }
       }
     }
   }, {
@@ -460,7 +533,6 @@ var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
 exports.SmartUserPickerWithoutAnalytics = SmartUserPickerWithoutAnalytics;
 (0, _defineProperty2.default)(SmartUserPickerWithoutAnalytics, "defaultProps", {
-  onError: function onError() {},
   baseUrl: '',
   includeUsers: true,
   includeGroups: false,

package/dist/cjs/ufoExperiences.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUFOConcurrentExperience = exports.smartUserPickerRenderedUfoExperience = exports.UfoErrorBoundary = void 0;
+exports.useUFOConcurrentExperience = exports.smartUserPickerRenderedUfoExperience = exports.smartUserPickerOptionsShownUfoExperience = exports.UfoErrorBoundary = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -40,6 +40,14 @@ var smartUserPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('smart-
   performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
 });
 exports.smartUserPickerRenderedUfoExperience = smartUserPickerRenderedUfoExperience;
+var smartUserPickerOptionsShownUfoExperience = new _ufo.ConcurrentExperience('smart-user-picker-options-shown', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: _ufo.ExperienceTypes.Operation,
+  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+});
+exports.smartUserPickerOptionsShownUfoExperience = smartUserPickerOptionsShownUfoExperience;
 
 var useUFOConcurrentExperience = function useUFOConcurrentExperience(experience, id) {
   var experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "5.0.1",
+	"version": "5.0.4",
 	"sideEffects": false
 }

package/dist/es2019/components/SmartUserPicker.js

@@ -6,10 +6,12 @@ import { v4 as uuidV4 } from 'uuid';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl-next';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import UserPicker from '@atlaskit/user-picker';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../analytics';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
+import { smartUserPickerOptionsShownUfoExperience } from '../ufoExperiences';
 const DEFAULT_DEBOUNCE_TIME_MS = 150;
 
 const hasContextChanged = (oldContext, newContext) => oldContext.siteId !== newContext.siteId || oldContext.orgId !== newContext.orgId || oldContext.productKey !== newContext.productKey || oldContext.principalId !== newContext.principalId || oldContext.containerId !== newContext.containerId || oldContext.objectId !== newContext.objectId || oldContext.childObjectId !== newContext.childObjectId;
@@ -35,21 +37,33 @@ const getUsersForAnalytics = users => (users || []).map(({
 }));
 
 export class SmartUserPickerWithoutAnalytics extends React.Component {
-  constructor(..._args) {
+  constructor(props) {
     var _this$props$debounceT;
 
-    super(..._args);
+    super(props);
 
     _defineProperty(this, "state", {
       users: [],
       loading: false,
-      error: false,
       closed: true,
       query: '',
       defaultValue: [],
       bootstrapOptions: []
     });
 
+    _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, "fireEvent", (eventCreator, ...args) => {
       const {
         createAnalyticsEvent
@@ -67,25 +81,28 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
     _defineProperty(this, "getUsers", debounce(async () => {
       const {
         query,
-        sessionId
+        sessionId,
+        closed
       } = this.state;
       const {
-        containerId,
-        childObjectId,
-        objectId,
-        principalId,
-        productKey,
-        siteId,
-        orgId,
         baseUrl,
-        includeUsers,
+        childObjectId,
+        containerId,
+        fieldId,
         includeGroups,
         includeTeams,
+        includeUsers,
+        intl,
         maxOptions,
-        searchQueryFilter,
+        objectId,
         onEmpty,
+        onError,
+        orgId,
+        principalId,
         productAttributes,
-        intl
+        productKey,
+        searchQueryFilter,
+        siteId
       } = this.props;
       const maxNumberOfResults = maxOptions || 100;
       const startTime = window.performance.now();
@@ -93,7 +110,7 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         baseUrl,
         context: {
           containerId,
-          contextType: this.props.fieldId,
+          contextType: fieldId,
           objectId,
           principalId,
           productKey,
@@ -135,16 +152,34 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
           };
         });
       } catch (e) {
+        if (!closed && !onError) {
+          // If the user lookup fails while the menu is open, and the consumer is not providing a
+          // fallback data source via the onError prop, then send UFO failure
+          this.optionsShownUfoExperienceInstance.failure();
+        }
+
         this.setState({
-          users: [],
-          error: true
+          users: []
         });
-        const defaultUsers = await (this.props.onError ? this.props.onError(e, recommendationsRequest) || Promise.resolve([]) : Promise.resolve([]));
-        const elapsedTimeMilli = window.performance.now() - startTime;
+        let onErrorProducedError = false;
+        let defaultUsers = [];
+
+        try {
+          defaultUsers = onError ? (await onError(e, recommendationsRequest)) || [] : [];
+        } catch (error) {
+          onErrorProducedError = true;
+        }
+
+        if (onErrorProducedError) {
+          // Log error from fallback data source `onError` to UFO
+          this.optionsShownUfoExperienceInstance.failure();
+        }
+
         this.setState({
           users: defaultUsers,
           loading: false
         });
+        const elapsedTimeMilli = window.performance.now() - startTime;
         this.fireEvent(failedRequestUsersEvent, {
           elapsedTimeMilli,
           productAttributes
@@ -163,6 +198,11 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
       }
 
       if (!closed) {
+        // If the input has been typed into and the dropdown has not been closed
+        // (i.e. input blurred) then start the UFO timer.
+        // If there's a previous UFO timer running for the same "options shown" experience,
+        // it will be aborted first.
+        this.startOptionsShownUfoExperience();
         this.setState({
           loading: true,
           query,
@@ -211,6 +251,7 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         query: '',
         closed: false
       };
+      this.startOptionsShownUfoExperience();
 
       if (this.state.users.length === 0) {
         state.sessionId = sessionId;
@@ -233,7 +274,8 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
     });
 
     _defineProperty(this, "onBlur", sessionId => {
-      this.getUsers.cancel(); // clear old users if query is populated so that on refocus,
+      this.getUsers.cancel();
+      this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
       // the old list is not shown
 
       const users = this.state.query.length === 0 ? this.state.users : [];
@@ -247,6 +289,8 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         this.props.onBlur(sessionId);
       }
     });
+
+    this.optionsShownUfoExperienceInstance = smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
   }
 
   async componentDidMount() {
@@ -286,6 +330,12 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
 
     if ((this.state.sessionId !== prevState.sessionId || this.state.query !== prevState.query) && (this.state.query !== '' || !this.props.bootstrapOptions)) {
       this.getUsers();
+    } else if (!this.state.closed && !this.state.loading) {
+      // If the component has rendered (including its dropdown list) and it
+      // is not loading anything further, send the success UFO event
+      if (![UFOExperienceState.FAILED.id, UFOExperienceState.SUCCEEDED.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+        this.optionsShownUfoExperienceInstance.success();
+      }
     }
   }
 
@@ -303,7 +353,6 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
 } // TODO: Smart User picker team will have to add a type annotation here
 
 _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
-  onError: () => {},
   baseUrl: '',
   includeUsers: true,
   includeGroups: false,

package/dist/es2019/ufoExperiences.js

@@ -9,6 +9,13 @@ export const smartUserPickerRenderedUfoExperience = new ConcurrentExperience('sm
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export const smartUserPickerOptionsShownUfoExperience = new ConcurrentExperience('smart-user-picker-options-shown', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export const useUFOConcurrentExperience = (experience, id) => {
   const experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's
   // useUFOComponentExperience when it supports ConcurrentExperience.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "5.0.1",
+	"version": "5.0.4",
 	"sideEffects": false
 }

package/dist/esm/components/SmartUserPicker.js

@@ -23,10 +23,12 @@ import { v4 as uuidV4 } from 'uuid';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl-next';
+import { UFOExperienceState } from '@atlaskit/ufo';
 import UserPicker from '@atlaskit/user-picker';
 import { requestUsersEvent, filterUsersEvent, preparedUsersLoadedEvent, successfulRequestUsersEvent, failedRequestUsersEvent, mountedWithPrefetchEvent, createAndFireEventInElementsChannel } from '../analytics';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
+import { smartUserPickerOptionsShownUfoExperience } from '../ufoExperiences';
 var DEFAULT_DEBOUNCE_TIME_MS = 150;
 
 var hasContextChanged = function hasContextChanged(oldContext, newContext) {
@@ -61,35 +63,44 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
 
   var _super = _createSuper(SmartUserPickerWithoutAnalytics);
 
-  function SmartUserPickerWithoutAnalytics() {
+  function SmartUserPickerWithoutAnalytics(props) {
     var _this$props$debounceT;
 
     var _this;
 
     _classCallCheck(this, SmartUserPickerWithoutAnalytics);
 
-    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(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       users: [],
       loading: false,
-      error: false,
       closed: true,
       query: '',
       defaultValue: [],
       bootstrapOptions: []
     });
 
+    _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), "fireEvent", function (eventCreator) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
       if (createAnalyticsEvent) {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
         }
 
         createAndFireEventInElementsChannel(eventCreator.apply(void 0, [_this.props, _this.state].concat(args)))(createAnalyticsEvent);
@@ -103,21 +114,21 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
     _defineProperty(_assertThisInitialized(_this), "memoizedFilterOptions", memoizeOne(_this.filterOptions));
 
     _defineProperty(_assertThisInitialized(_this), "getUsers", debounce( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _this$state, query, sessionId, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, closed, _this$props, baseUrl, childObjectId, containerId, fieldId, includeGroups, includeTeams, includeUsers, intl, maxOptions, objectId, onEmpty, onError, orgId, principalId, productAttributes, productKey, searchQueryFilter, siteId, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, onErrorProducedError, defaultUsers, _elapsedTimeMilli;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId;
-              _this$props = _this.props, containerId = _this$props.containerId, childObjectId = _this$props.childObjectId, objectId = _this$props.objectId, principalId = _this$props.principalId, productKey = _this$props.productKey, siteId = _this$props.siteId, orgId = _this$props.orgId, baseUrl = _this$props.baseUrl, includeUsers = _this$props.includeUsers, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, maxOptions = _this$props.maxOptions, searchQueryFilter = _this$props.searchQueryFilter, onEmpty = _this$props.onEmpty, productAttributes = _this$props.productAttributes, intl = _this$props.intl;
+              _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId, closed = _this$state.closed;
+              _this$props = _this.props, baseUrl = _this$props.baseUrl, childObjectId = _this$props.childObjectId, containerId = _this$props.containerId, fieldId = _this$props.fieldId, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, includeUsers = _this$props.includeUsers, intl = _this$props.intl, maxOptions = _this$props.maxOptions, objectId = _this$props.objectId, onEmpty = _this$props.onEmpty, onError = _this$props.onError, orgId = _this$props.orgId, principalId = _this$props.principalId, productAttributes = _this$props.productAttributes, productKey = _this$props.productKey, searchQueryFilter = _this$props.searchQueryFilter, siteId = _this$props.siteId;
               maxNumberOfResults = maxOptions || 100;
               startTime = window.performance.now();
               recommendationsRequest = {
                 baseUrl: baseUrl,
                 context: {
                   containerId: containerId,
-                  contextType: _this.props.fieldId,
+                  contextType: fieldId,
                   objectId: objectId,
                   principalId: principalId,
                   productKey: productKey,
@@ -207,41 +218,87 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
                 };
               });
 
-              _context.next = 40;
+              _context.next = 58;
               break;
 
             case 31:
               _context.prev = 31;
               _context.t4 = _context["catch"](5);
 
+              if (!closed && !onError) {
+                // If the user lookup fails while the menu is open, and the consumer is not providing a
+                // fallback data source via the onError prop, then send UFO failure
+                _this.optionsShownUfoExperienceInstance.failure();
+              }
+
               _this.setState({
-                users: [],
-                error: true
+                users: []
               });
 
-              _context.next = 36;
-              return _this.props.onError ? _this.props.onError(_context.t4, recommendationsRequest) || Promise.resolve([]) : Promise.resolve([]);
+              onErrorProducedError = false;
+              defaultUsers = [];
+              _context.prev = 37;
 
-            case 36:
-              defaultUsers = _context.sent;
-              _elapsedTimeMilli = window.performance.now() - startTime;
+              if (!onError) {
+                _context.next = 47;
+                break;
+              }
+
+              _context.next = 41;
+              return onError(_context.t4, recommendationsRequest);
+
+            case 41:
+              _context.t6 = _context.sent;
+
+              if (_context.t6) {
+                _context.next = 44;
+                break;
+              }
+
+              _context.t6 = [];
+
+            case 44:
+              _context.t5 = _context.t6;
+              _context.next = 48;
+              break;
+
+            case 47:
+              _context.t5 = [];
+
+            case 48:
+              defaultUsers = _context.t5;
+              _context.next = 54;
+              break;
+
+            case 51:
+              _context.prev = 51;
+              _context.t7 = _context["catch"](37);
+              onErrorProducedError = true;
+
+            case 54:
+              if (onErrorProducedError) {
+                // Log error from fallback data source `onError` to UFO
+                _this.optionsShownUfoExperienceInstance.failure();
+              }
 
               _this.setState({
                 users: defaultUsers,
                 loading: false
               });
 
+              _elapsedTimeMilli = window.performance.now() - startTime;
+
               _this.fireEvent(failedRequestUsersEvent, {
                 elapsedTimeMilli: _elapsedTimeMilli,
                 productAttributes: productAttributes
               });
 
-            case 40:
+            case 58:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[5, 31]]);
+      }, _callee, null, [[5, 31], [37, 51]]);
     })), (_this$props$debounceT = _this.props.debounceTime) !== null && _this$props$debounceT !== void 0 ? _this$props$debounceT : 0));
 
     _defineProperty(_assertThisInitialized(_this), "onInputChange", function (newQuery, sessionId) {
@@ -253,6 +310,12 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
       }
 
       if (!closed) {
+        // If the input has been typed into and the dropdown has not been closed
+        // (i.e. input blurred) then start the UFO timer.
+        // If there's a previous UFO timer running for the same "options shown" experience,
+        // it will be aborted first.
+        _this.startOptionsShownUfoExperience();
+
         _this.setState({
           loading: true,
           query: query,
@@ -309,6 +372,8 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         closed: false
       };
 
+      _this.startOptionsShownUfoExperience();
+
       if (_this.state.users.length === 0) {
         state.sessionId = sessionId;
         state.loading = true;
@@ -330,7 +395,9 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (sessionId) {
-      _this.getUsers.cancel(); // clear old users if query is populated so that on refocus,
+      _this.getUsers.cancel();
+
+      _this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
       // the old list is not shown
 
 
@@ -347,6 +414,7 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
       }
     });
 
+    _this.optionsShownUfoExperienceInstance = smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
     return _this;
   }
 
@@ -421,6 +489,12 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
 
       if ((this.state.sessionId !== prevState.sessionId || this.state.query !== prevState.query) && (this.state.query !== '' || !this.props.bootstrapOptions)) {
         this.getUsers();
+      } else if (!this.state.closed && !this.state.loading) {
+        // If the component has rendered (including its dropdown list) and it
+        // is not loading anything further, send the success UFO event
+        if (![UFOExperienceState.FAILED.id, UFOExperienceState.SUCCEEDED.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+          this.optionsShownUfoExperienceInstance.success();
+        }
       }
     }
   }, {
@@ -441,7 +515,6 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
 }(React.Component); // TODO: Smart User picker team will have to add a type annotation here
 
 _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
-  onError: function onError() {},
   baseUrl: '',
   includeUsers: true,
   includeGroups: false,

package/dist/esm/ufoExperiences.js

@@ -19,6 +19,13 @@ export var smartUserPickerRenderedUfoExperience = new ConcurrentExperience('smar
   type: ExperienceTypes.Load,
   performanceType: ExperiencePerformanceTypes.PageSegmentLoad
 });
+export var smartUserPickerOptionsShownUfoExperience = new ConcurrentExperience('smart-user-picker-options-shown', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Operation,
+  performanceType: ExperiencePerformanceTypes.InlineResult
+});
 export var useUFOConcurrentExperience = function useUFOConcurrentExperience(experience, id) {
   var experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's
   // useUFOComponentExperience when it supports ConcurrentExperience.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "5.0.1",
+	"version": "5.0.4",
 	"sideEffects": false
 }

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

@@ -1,12 +1,13 @@
 /// <reference types="lodash" />
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
+import { UFOExperience } from '@atlaskit/ufo';
 import { OptionData } from '@atlaskit/user-picker';
 import { Props, State, FilterOptions } from '../types';
 export declare class SmartUserPickerWithoutAnalytics extends React.Component<Props & WrappedComponentProps, State> {
     state: State;
+    optionsShownUfoExperienceInstance: UFOExperience;
     static defaultProps: {
-        onError: () => void;
         baseUrl: string;
         includeUsers: boolean;
         includeGroups: boolean;
@@ -15,8 +16,11 @@ export declare class SmartUserPickerWithoutAnalytics extends React.Component<Pro
         principalId: string;
         debounceTime: number;
     };
+    constructor(props: Props & WrappedComponentProps);
     componentDidMount(): Promise<void>;
     componentDidUpdate(prevProps: Props, prevState: State): void;
+    abortOptionsShownUfoExperience: () => void;
+    startOptionsShownUfoExperience: () => void;
     private fireEvent;
     filterOptions: (users: OptionData[], query: string, propFilterOptions?: FilterOptions | undefined) => OptionData[];
     memoizedFilterOptions: import("memoize-one").MemoizedFn<(users: OptionData[], query: string, propFilterOptions?: FilterOptions | undefined) => OptionData[]>;

package/dist/types/types.d.ts

@@ -29,7 +29,6 @@ export interface State {
     users: OptionData[];
     loading: boolean;
     closed: boolean;
-    error: boolean;
     query: string;
     sessionId?: string;
     defaultValue?: DefaultValue;
@@ -107,7 +106,7 @@ export interface SmartProps {
      */
     filterOptions?: FilterOptions;
     /**
-     * Whether to include groups in the resultset. @default false
+     * Whether to include groups in the resultset. Only supported for Confluence. @default false
      */
     includeGroups?: boolean;
     /**

package/dist/types/ufoExperiences.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ConcurrentExperience } from '@atlaskit/ufo';
 export declare const smartUserPickerRenderedUfoExperience: ConcurrentExperience;
+export declare const smartUserPickerOptionsShownUfoExperience: ConcurrentExperience;
 export declare const useUFOConcurrentExperience: (experience: ConcurrentExperience, id: string) => void;
 export declare class UfoErrorBoundary extends React.Component<{
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-user-picker",
-  "version": "5.0.1",
+  "version": "5.0.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -24,7 +24,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/ufo": "^0.1.0",
-    "@atlaskit/user-picker": "^8.6.3",
+    "@atlaskit/user-picker": "^9.0.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
@@ -36,7 +36,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.2.0",
@@ -50,7 +50,7 @@
     "fetch-mock": "^8.0.0",
     "graphql-tag": "^2.10.1",
     "mock-apollo-client": "^0.1.0",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }