@atlaskit/smart-user-picker 6.0.3 → 6.0.5

package/dist/es2019/components/SmartUserPicker.js

@@ -13,21 +13,23 @@ import MessagesIntlProvider from './MessagesIntlProvider';
 import { getUserRecommendations, hydrateDefaultValues } from '../service';
 import { smartUserPickerOptionsShownUfoExperience } from '../ufoExperiences';
 const DEFAULT_DEBOUNCE_TIME_MS = 150;
-
+const ufoEndStateConfig = fieldId => {
+  return {
+    metadata: {
+      contextType: fieldId
+    }
+  };
+};
 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;
-
 const stringContains = (str, substr) => {
   if (str === null || str === undefined) {
     return false;
   }
-
   if (substr === null || substr === '' || substr === undefined) {
     return true;
   }
-
   return str.toLowerCase().includes(substr.toLowerCase());
 };
-
 const getUsersForAnalytics = users => (users || []).map(({
   id,
   type
@@ -35,13 +37,10 @@ const getUsersForAnalytics = users => (users || []).map(({
   id,
   type
 }));
-
 export class SmartUserPickerWithoutAnalytics extends React.Component {
   constructor(props) {
     var _this$props$debounceT;
-
     super(props);
-
     _defineProperty(this, "state", {
       users: [],
       loading: false,
@@ -50,7 +49,6 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
       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,
@@ -58,26 +56,20 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         this.optionsShownUfoExperienceInstance.abort();
       }
     });
-
     _defineProperty(this, "startOptionsShownUfoExperience", () => {
       this.abortOptionsShownUfoExperience();
       this.optionsShownUfoExperienceInstance.start();
     });
-
     _defineProperty(this, "fireEvent", (eventCreator, ...args) => {
       const {
         createAnalyticsEvent
       } = this.props;
-
       if (createAnalyticsEvent) {
         createAndFireEventInElementsChannel(eventCreator(this.props, this.state, ...args))(createAnalyticsEvent);
       }
     });
-
     _defineProperty(this, "filterOptions", (users, query, propFilterOptions) => propFilterOptions ? propFilterOptions(users, query) : users);
-
     _defineProperty(this, "memoizedFilterOptions", memoizeOne(this.filterOptions));
-
     _defineProperty(this, "getUsers", debounce(async () => {
       const {
         query,
@@ -127,10 +119,8 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         query,
         searchQueryFilter
       };
-
       try {
         var _await$onEmpty;
-
         this.fireEvent(requestUsersEvent);
         const recommendedUsers = await getUserRecommendations(recommendationsRequest, intl);
         const elapsedTimeMilli = window.performance.now() - startTime;
@@ -155,26 +145,22 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         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.optionsShownUfoExperienceInstance.failure(ufoEndStateConfig(this.props.fieldId));
         }
-
         this.setState({
           users: []
         });
         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.optionsShownUfoExperienceInstance.failure(ufoEndStateConfig(this.props.fieldId));
         }
-
         this.setState({
           users: defaultUsers,
           loading: false
@@ -186,17 +172,14 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         });
       }
     }, (_this$props$debounceT = this.props.debounceTime) !== null && _this$props$debounceT !== void 0 ? _this$props$debounceT : 0));
-
     _defineProperty(this, "onInputChange", (newQuery, sessionId) => {
       const query = newQuery || '';
       const {
         closed
       } = this.state;
-
       if (query === this.state.query) {
         return;
       }
-
       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.
@@ -208,21 +191,19 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
           query,
           sessionId
         });
-
         if (this.props.onInputChange) {
           this.props.onInputChange(query, sessionId);
         }
       }
     });
-
     _defineProperty(this, "filterUsers", () => {
       const {
         loading,
         users,
         query
       } = this.state;
-      const filteredUsers = this.memoizedFilterOptions(users, query, this.props.filterOptions); //If bootstrapOptions have been passed in and it is bootstrap
-
+      const filteredUsers = this.memoizedFilterOptions(users, query, this.props.filterOptions);
+      //If bootstrapOptions have been passed in and it is bootstrap
       if (this.props.bootstrapOptions && this.props.bootstrapOptions.length !== 0 && query === '') {
         const bootstrapFilteredUsers = this.memoizedFilterOptions(this.props.bootstrapOptions, query, this.props.filterOptions);
         this.fireEvent(filterUsersEvent, {
@@ -230,29 +211,26 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
           all: getUsersForAnalytics(this.props.bootstrapOptions)
         });
         return bootstrapFilteredUsers;
-      } // while when not loading just return already filtered result from server.
-
-
+      }
+      // while when not loading just return already filtered result from server.
       if (!loading) {
         return filteredUsers;
       }
-
       const queryFilteredUsers = filteredUsers.filter(user => stringContains(user.name, query));
       this.fireEvent(filterUsersEvent, {
         filtered: getUsersForAnalytics(queryFilteredUsers),
         all: getUsersForAnalytics(users)
-      }); // when loading filter previous result.
+      });
 
+      // when loading filter previous result.
       return filteredUsers;
     });
-
     _defineProperty(this, "onFocus", sessionId => {
       const state = {
         query: '',
         closed: false
       };
       this.startOptionsShownUfoExperience();
-
       if (this.state.users.length === 0) {
         state.sessionId = sessionId;
         state.loading = true;
@@ -263,36 +241,32 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
           sessionId
         });
       }
-
-      this.setState(currentState => ({ ...currentState,
+      this.setState(currentState => ({
+        ...currentState,
         ...state
       }));
-
       if (this.props.onFocus) {
         this.props.onFocus(sessionId);
       }
     });
-
     _defineProperty(this, "onBlur", sessionId => {
       this.getUsers.cancel();
-      this.abortOptionsShownUfoExperience(); // clear old users if query is populated so that on refocus,
-      // the old list is not shown
+      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 : [];
       this.setState({
         loading: false,
         closed: true,
         users
       });
-
       if (this.props.onBlur) {
         this.props.onBlur(sessionId);
       }
     });
-
     this.optionsShownUfoExperienceInstance = smartUserPickerOptionsShownUfoExperience.getInstance(props.inputId || props.fieldId);
   }
-
   async componentDidMount() {
     try {
       const value = await hydrateDefaultValues(this.props.baseUrl, this.props.defaultValue, this.props.productKey);
@@ -305,11 +279,9 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
         defaultValue: defaultValue
       });
     }
-
     const {
       prefetch
     } = this.props;
-
     if (prefetch) {
       const sessionId = uuidV4();
       this.fireEvent(mountedWithPrefetchEvent, {
@@ -320,25 +292,22 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
       });
     }
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (hasContextChanged(prevProps, this.props) || this.props.fieldId !== prevProps.fieldId) {
       this.setState({
         users: []
       });
     }
-
     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();
+        this.optionsShownUfoExperienceInstance.success(ufoEndStateConfig(this.props.fieldId));
       }
     }
   }
-
   render() {
     return /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(UserPicker, _extends({}, this.props, {
       onInputChange: this.onInputChange,
@@ -349,9 +318,9 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
       options: this.filterUsers()
     })));
   }
+}
 
-} // TODO: Smart User picker team will have to add a type annotation here
-
+// TODO: Smart User picker team will have to add a type annotation here
 _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
   baseUrl: '',
   includeUsers: true,
@@ -361,5 +330,4 @@ _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
   principalId: 'Context',
   debounceTime: DEFAULT_DEBOUNCE_TIME_MS
 });
-
 export const SmartUserPicker = withAnalyticsEvents()(injectIntl(SmartUserPickerWithoutAnalytics));

package/dist/es2019/components/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { SmartUserPicker } from './SmartUserPicker';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { useUFOConcurrentExperience, smartUserPickerRenderedUfoExperience, UfoErrorBoundary } from '../ufoExperiences';
-
 const SmartUserPickerWithIntlProvider = props => {
   const ufoId = props.inputId || props.fieldId;
   useUFOConcurrentExperience(smartUserPickerRenderedUfoExperience, ufoId);
@@ -10,5 +9,4 @@ const SmartUserPickerWithIntlProvider = props => {
     id: ufoId
   }, /*#__PURE__*/React.createElement(MessagesIntlProvider, null, /*#__PURE__*/React.createElement(SmartUserPicker, props)));
 };
-
 export default SmartUserPickerWithIntlProvider;

package/dist/es2019/config/index.js

@@ -2,17 +2,13 @@ export const config = {
   getRecommendationServiceUrl(baseUrl) {
     return baseUrl ? `${baseUrl}/gateway/api/v1/recommendations` : '/gateway/api/v1/recommendations';
   },
-
   getUsersServiceUrl(productKey, baseUrl = '') {
     return productKey === 'jira' ? `${baseUrl}/rest/api/3/user/bulk` : `${baseUrl}/wiki/rest/api/user/bulk`;
   },
-
   getGraphQLUrl(baseUrl) {
     return baseUrl ? `${baseUrl}/gateway/api/graphql` : `/gateway/api/graphql`;
   },
-
   getTeamsUrl(baseUrl) {
     return baseUrl ? `${baseUrl}/gateway/api/v3/teams` : `/gateway/api/v3/teams`;
   }
-
 };

package/dist/es2019/index.js

@@ -1,5 +1,7 @@
 export { default } from './components';
 export { getUserRecommendations, hydrateDefaultValues } from './service';
-export { //Utils
-isEmail, isTeam, isUser, isValidEmail, // Constants
+export {
+//Utils
+isEmail, isTeam, isUser, isValidEmail,
+// Constants
 EmailType, GroupType, TeamType, UserType } from '@atlaskit/user-picker';

package/dist/es2019/service/default-value-hydration-client.js

@@ -3,7 +3,6 @@ import { config } from '../config';
 import getHydratedUsersFromPrs from './users-client';
 import hydrateTeamFromLegion from './teams-client';
 import { UNKNOWN } from './constants';
-
 const getHydratedUsersFromProducts = request => {
   const url = `${config.getUsersServiceUrl(request.productKey, request.baseUrl)}`;
   let params = new URLSearchParams();
@@ -19,20 +18,16 @@ const getHydratedUsersFromProducts = request => {
     if (response.status === 200) {
       return response.json();
     }
-
     return Promise.reject({
       message: `error calling users service, statusCode=${response.status}, statusText=${response.statusText}`
     });
   }).then(request.productKey === 'jira' ? transformJiraUsers : transformConfluenceUsers);
 };
-
 const transformJiraUsers = userResponse => userResponse.values.map(transformJiraUser).filter(user => !!user).map(user => user);
-
 const transformJiraUser = item => {
   if (!item) {
     return null;
   }
-
   return {
     id: item.accountId,
     type: UserType,
@@ -41,14 +36,11 @@ const transformJiraUser = item => {
     email: item.emailAddress
   };
 };
-
 const transformConfluenceUsers = userResponse => userResponse.results.map(transformConfluenceUser).filter(user => !!user).map(user => user);
-
 const transformConfluenceUser = item => {
   if (!item) {
     return null;
   }
-
   return {
     id: item.accountId,
     type: UserType,
@@ -57,16 +49,13 @@ const transformConfluenceUser = item => {
     email: item.email
   };
 };
-
 const sortResults = (options, sortIds) => {
   const resultsMap = new Map(options.map(option => [option && option.id, option]));
   return sortIds.map(option => {
     const user = resultsMap.get(option.id);
-
     if (user) {
       return user;
     }
-
     return {
       id: option.id,
       type: option.type,
@@ -74,52 +63,45 @@ const sortResults = (options, sortIds) => {
     };
   });
 };
-
 const isOptionData = option => {
   return option.name !== undefined;
 };
-
 const hydrateTeamIds = async (baseUrl, values) => {
   if (values.length === 0) {
     return [];
   }
-
   const legionPromises = values.map(value => hydrateTeamFromLegion({
     baseUrl,
     id: value.id
   }));
   return await Promise.all(legionPromises);
 };
-
 const hydrateAccountIds = async (baseUrl, productKey, values) => {
   if (values.length === 0) {
     return [];
   }
+  const accountIds = values.map(val => val.id);
 
-  const accountIds = values.map(val => val.id); //if we are not jira or confluence then use PRS platform hydration
-
+  //if we are not jira or confluence then use PRS platform hydration
   return productKey === 'jira' || productKey === 'confluence' ? await getHydratedUsersFromProducts({
     baseUrl,
     productKey,
     accountIds
   }) : await getHydratedUsersFromPrs(baseUrl, accountIds);
 };
-
 async function hydrateDefaultValues(baseUrl, value, productKey) {
   //return if no value
   if (!value || Array.isArray(value) && value.length === 0) {
     return [];
   }
+  const values = Array.isArray(value) ? value : [value];
 
-  const values = Array.isArray(value) ? value : [value]; // return if all hydrated
-
+  // return if all hydrated
   if (!values.some(val => !isOptionData(val))) {
     return value;
   }
-
   const [hydratedUsers, hydratedTeams] = await Promise.all([hydrateAccountIds(baseUrl, productKey, values.filter(val => !isOptionData(val) && val.type === 'user')), hydrateTeamIds(baseUrl, values.filter(val => !isOptionData(val) && val.type === 'team'))]);
   const hydratedOptions = values.filter(val => isOptionData(val)).map(val => val).concat(hydratedUsers).concat(hydratedTeams);
   return sortResults(hydratedOptions, values);
 }
-
 export default hydrateDefaultValues;

package/dist/es2019/service/graphqlUtils.js

@@ -3,7 +3,6 @@ const buildHeaders = () => {
   headers.append('Content-Type', 'application/json');
   return headers;
 };
-
 /**
  * @param {string} serviceUrl - GraphQL service endpoint
  * @param {Query} query - GraphQL query
@@ -23,17 +22,14 @@ export function graphqlQuery(serviceUrl, query) {
         reason: response.statusText
       });
     }
-
     return response;
   }).then(response => response.json()).then(json => {
     if (json.errors) {
       var _json$errors$;
-
       return Promise.reject({
         reason: ((_json$errors$ = json.errors[0]) === null || _json$errors$ === void 0 ? void 0 : _json$errors$.category) || 'default'
       });
     }
-
     return json.data;
   });
 }

package/dist/es2019/service/recommendation-client.js

@@ -1,9 +1,7 @@
 import { transformUsers } from './users-transformer';
 import { config } from '../config';
-
 const getUserRecommendations = (request, intl) => {
   var _request$context, _request$context$prod;
-
   const url = config.getRecommendationServiceUrl(request.baseUrl || '');
   return fetch(url, {
     method: 'POST',
@@ -42,11 +40,9 @@ const getUserRecommendations = (request, intl) => {
     if (response.status === 200) {
       return response.json();
     }
-
     return Promise.reject({
       message: `error calling smart service, statusCode=${response.status}, statusText=${response.statusText}`
     });
   }).then(response => transformUsers(response, intl));
 };
-
 export default getUserRecommendations;

package/dist/es2019/service/teams-client.js

@@ -1,6 +1,5 @@
 import { config } from '../config';
 import { UNKNOWN_TEAM } from './constants';
-
 const transformTeam = (team, id) => {
   return {
     id,
@@ -9,7 +8,6 @@ const transformTeam = (team, id) => {
     avatarUrl: team.smallAvatarImageUrl
   };
 };
-
 const hydrateTeamFromLegion = request => {
   const url = `${config.getTeamsUrl(request.baseUrl)}/${request.id}`;
   return fetch(url, {
@@ -22,16 +20,15 @@ const hydrateTeamFromLegion = request => {
     if (response.status === 200) {
       return response.json();
     }
-
     return Promise.reject({
       message: `error calling Legion, statusCode=${response.status}, statusText=${response.statusText}`
     });
   }).then(response => {
     return transformTeam(response, request.id);
-  }).catch(() => ({ ...UNKNOWN_TEAM,
+  }).catch(() => ({
+    ...UNKNOWN_TEAM,
     // on network error, return original team with label 'Unknown'
     id: request.id
   }));
 };
-
 export default hydrateTeamFromLegion;

package/dist/es2019/service/users-client.js

@@ -1,7 +1,6 @@
 import { UNKNOWN_USER } from './constants';
 import { graphqlQuery } from './graphqlUtils';
 import { config } from '../config';
-
 /**
  * @param  {string} accountIds ids to hydrate
  * @return GraphQL Query
@@ -18,12 +17,10 @@ const buildUsersQuery = accountIds => ({
     accountIds
   }
 });
-
 const makeRequest = async (url, accountIds) => {
   const query = buildUsersQuery(accountIds);
   return await graphqlQuery(url, query);
 };
-
 const modifyResponse = users => users.map(({
   accountId,
   name,
@@ -34,7 +31,6 @@ const modifyResponse = users => users.map(({
   name,
   type: 'user'
 }));
-
 const getHydratedUsers = (baseUrl, userIds) => {
   const url = config.getGraphQLUrl(baseUrl);
   return new Promise(resolve => {
@@ -42,11 +38,11 @@ const getHydratedUsers = (baseUrl, userIds) => {
       resolve(modifyResponse(data.users));
     }).catch(() => {
       // on network error, return original list with label 'Unknown'
-      resolve(userIds.map(id => ({ ...UNKNOWN_USER,
+      resolve(userIds.map(id => ({
+        ...UNKNOWN_USER,
         id
       })));
     });
   });
 };
-
 export default getHydratedUsers;

package/dist/es2019/service/users-transformer.js

@@ -1,20 +1,16 @@
 import { TeamType, UserType, GroupType } from '@atlaskit/user-picker';
 import { messages } from '../i18n';
 var EntityType;
-
 (function (EntityType) {
   EntityType["USER"] = "USER";
   EntityType["TEAM"] = "TEAM";
   EntityType["GROUP"] = "GROUP";
 })(EntityType || (EntityType = {}));
-
 const getLozenzeProperties = (entity, intl) => {
   var _entity$attributes, _entity$attributes2;
-
   if ((_entity$attributes = entity.attributes) !== null && _entity$attributes !== void 0 && _entity$attributes.workspaceMember) {
     return intl.formatMessage(messages.memberLozengeText);
   }
-
   if ((_entity$attributes2 = entity.attributes) !== null && _entity$attributes2 !== void 0 && _entity$attributes2.isConfluenceExternalCollaborator) {
     const lozengeTooltipMessage = entity.entityType === EntityType.GROUP ? messages.guestGroupLozengeTooltip : messages.guestUserLozengeTooltip;
     return {
@@ -23,13 +19,10 @@ const getLozenzeProperties = (entity, intl) => {
       appearance: 'new'
     };
   }
-
   return undefined;
 };
-
 const transformUser = (item, intl) => {
   const type = item.entityType;
-
   if (type === EntityType.USER) {
     const user = item;
     const lozenge = getLozenzeProperties(user, intl);
@@ -42,7 +35,6 @@ const transformUser = (item, intl) => {
       lozenge: lozenge
     };
   }
-
   if (type === EntityType.TEAM) {
     const team = item;
     return {
@@ -56,7 +48,6 @@ const transformUser = (item, intl) => {
       avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl
     };
   }
-
   if (type === EntityType.GROUP) {
     const group = item;
     const lozenge = getLozenzeProperties(group, intl);
@@ -67,8 +58,6 @@ const transformUser = (item, intl) => {
       lozenge: lozenge
     };
   }
-
   return;
 };
-
 export const transformUsers = (serverResponse, intl) => (serverResponse.recommendedUsers || []).map(item => transformUser(item, intl)).filter(user => !!user).map(user => user);

package/dist/es2019/types.js

@@ -1,5 +1,4 @@
 export let EntityType;
-
 (function (EntityType) {
   EntityType["USER"] = "USER";
   EntityType["TEAM"] = "TEAM";

package/dist/es2019/ufoExperiences.js

@@ -17,23 +17,26 @@ export const smartUserPickerOptionsShownUfoExperience = new ConcurrentExperience
   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.
+  const experienceForId = experience.getInstance(id);
 
+  // Equivalent to componentWillMount - replace with @atlaskit/ufo's
+  // useUFOComponentExperience when it supports ConcurrentExperience.
   useState(() => {
     experienceForId.start();
-  }); // Replace with @atlaskit/ufo's <ExperienceSuccess> when it supports ConcurrentExperience
+  });
 
+  // Replace with @atlaskit/ufo's <ExperienceSuccess> when it supports ConcurrentExperience
   useEffect(() => {
     if (experienceForId.state !== UFOExperienceState['FAILED']) {
       experienceForId.success();
     }
-
     return () => {
       if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(experienceForId.state)) {
         experienceForId.abort();
       }
-    }; // We only want this useEffect to run once after component mount, so no deps are needed.
+    };
+
+    // We only want this useEffect to run once after component mount, so no deps are needed.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
@@ -41,9 +44,7 @@ export class UfoErrorBoundary extends React.Component {
   componentDidCatch() {
     smartUserPickerRenderedUfoExperience.getInstance(this.props.id).failure();
   }
-
   render() {
     return this.props.children;
   }
-
 }