Smart user picker

Typescript ❤️

Pick users from a ranked user list based on provided context

Install
yarn add @atlaskit/smart-user-picker
Source
Bundle
Changelog
Latest

8.0.0

Major Changes

  • #117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

    Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

  • Updated dependencies

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

Smart User Picker extends on @atlaskit/user-picker by providing a ML-backed list of suggested users when queried.

Capabilities:

  • Default provider to URS for smart-ranked user search
  • Analytics for usage and relevance
  • Default value hydrator (props.defaultValues) for Confluence and Jira (hydration for other products not supported yet).

Usage

Smart User Picker can accept all User Picker props. Please refer to @atlaskit/user-picker for styling or accessibility settings.

Import the component in your React app as follows:

import SmartUserPicker from '@atlaskit/smart-user-picker';

Single User Picker

Jira
en
Smart Picker props

Enter people or teams...

Smart User Picker Props

defaultValue import

The pre-selected values for the smart user picker. Supports only Users and Teams default value hydration. If the DefaultValue contains only an id and type (it conforms to an OptionIdentifier) then the values will be automatically hydrated. If the value has a name then it is considered hydrated and will be ignored. Uses Confluence and Jira if called from there, else uses Identity or Legion for teams. If a value could not be found, or there was a network failure during the hydration, the value will be rendered with the label 'Unknown'. Else, if there were any other error during default value hydration, no default values will be rendered, use onValueError to handle this. defaultValue differs from value in that it sets the initial value then leaves the component 'uncontrolled' whereas setting the value prop delegates responsibility for maintaining the value to the caller (i.e. listen to onChange)

@atlaskit/user-picker.DefaultValue

fieldId string required

Identifier for informing the server on where the user picker has been mounted. Unlike User Picker, the fieldId in Smart User Picker is mandatory. The server uses the fieldId to determine which model to utilize when generating suggestions. All fieldId's will be bucketed into a model that provides generic smart results, except "assignee", "mentions" which are specifically trained for Jira Assignee and @Mentions. For specifically trained models, please contact #search-plex.

baseUrl string = ""

The base URL of the site eg: hello.atlassian.net

bootstrapOptions arrayType

Hydrated user suggestions to show when the query is blank. If not provided, smart user picker will still provide a smart-ranked list of suggestions for blank queries. Please refer to @atlaskit/user-picker for OptionData type.

Array
@atlaskit/user-picker.OptionData

childObjectId string

Context information for analytics. Eg: if a user picker was put inside a comment, the childObjectId would be the ID of the comment. Optional, but please provide if available.

containerId string

  • The container Id to identify context.
  • e.g. Jira: projectId. Confluence: spaceId. Bitbucket: repositoryId.

debounceTime number = 150

Time to debounce the suggestions fetching (in milliseconds). Defaults to 150ms.

filterOptions function

Function to transform options suggested by the server before showing to the user. Can be used to filter out suggestions. The results of filterOptions are the results displayed in the suggestions UI.

function
options,
query
=> Array
@atlaskit/user-picker.OptionData

includeGroups boolean = false

Whether to include groups in the resultset. Only supported for Confluence. @default false

includeTeams boolean = false

Whether to include teams in the resultset. @default false

includeUsers boolean = true

Whether to include users in the resultset. @default true

includeNonLicensedUsers boolean = false

Whether to include non licensed users in the resultset. @default false

objectId string

An identifier of the closest context object, e.g. issueId, pageId, pullRequestId. Used for analytics. Optional, but please include if available.

onEmpty function

Custom handler to give opportunity for caller to return list of options when server returns empty list. this is called if server returns empty list. This will NOT be called if props.filterOptions returns empty list.

query => PromiseArray
@atlaskit/user-picker.OptionData

onError function

Error handler for when the server fails to suggest users and returns with an error response. error: the error. RecommendationRequest: the original recommendationRequest containing the query and other search parameters. This may be used to provide a fail over search direct to the product backend. Helper fail over clients exist under /helpers. Note that OnError results are filtered.

function
error,
request
=> One of
PromiseArray
@atlaskit/user-picker.OptionData
,
undefined

onValueError function

Error handler used to provide OptionData[] values when the server fails to hydrate the defaultValue prop's values.

function
error,
defaultValue
=> One of
PromiseArray
@atlaskit/user-picker.OptionData
,
undefined

overrideByline function

Function to generate the byline of each option. The server response is provided as an argument to the function.

option => string

prefetch boolean = false

Prefetch the list of suggested assignees before the user picker is focused. WARNING: please consider carefully before deciding to prefetch your suggestions as this will increase the load on the recommendations services (has caused HOTs). Please give #search-plex a ballpark on the expected request volume.

principalId string = "Context"

Id of the user interacting with the component. If principalId is not provided, server will extract principalId from the context header, assuming that the user is logged in when making the request. @default “context”

productAttributes union

Product-specific Attributes - you should pass in the attribute type that matches your current SupportedProduct. Currently we support additional attributes (BitbucketAttributes) for bitbucket and (ConfluenceAttributes) for Confluence.

One of
isPublicRepo boolean
workspaceIds arrayType Array
string
emailDomain string
,
isEntitledConfluenceExternalCollaborator boolean

productKey string required

Product identifier. If you are an NPF, please ensure your product has been onboarded with Cross-product user-search @see https://developer.atlassian.com/cloud/cross-product-user-search/ If you are still waiting for CPUS, you can use the people productKey in the interim.

searchQueryFilter string

Filter to be applied to the eventual query to CPUS for user suggestions. Example:account_status:"active" AND (NOT email_domain:"connect.atlassian.com") will remove inactive users from the list of suggestions.

siteId string required

Identifier for the product's tenant, also known as tenantId or cloudId

orgId string

Identifier for the organization in which to search for teams.