Skip to:

Top Bar
Sidebar
Main Content

Atlaskit

Profilecard - Profilecard trigger

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.

A React component that wraps a trigger, such that when interacted a user profile card pops up.

Usage

Using the ProfileCardTrigger

import ProfileClient from '@atlaskit/profilecard/client';
import ProfileCardTrigger from '@atlaskit/profilecard/user';

const profileClient = new ProfileClient({
  url: 'https://directory-graphql-service/endpoint' // GraphQL service endpoint
});

<ProfileCardTrigger
  cloudId="DUMMY-10ae0bf3-157e-43f7-be45-f1bb13b39048"
  userId="638454:c8dddbde-3f65-4078-946e-8f9834a3c908"
  resourceClient={profileClient}
  actions={[
    {
      label: 'View profile',
      id: 'view-profile',
      callback: () => {}
    }
  ]}
>
  <Avatar ... />
</ProfileCardTrigger>

Profilecard

Profilecard triggered by hover

Input for testing with focus

Lorem ipsum hover over me dolor sit amet

Profilecard triggered by click

Lorem ipsum click me dolor sit amet

Profilecard triggered by external prop

Lorem ipsum click me dolor sit amet

Profilecard triggered for closed account

Lorem ipsum click me dolor sit amet

Profilecard triggered for inactive account

Lorem ipsum click me dolor sit amet

Profilecard triggered for customer account

Lorem ipsum click me dolor sit amet

Counting clicks of parent container

Lorem ipsum. Parent clicked 0 times! click me dolor sit amet

Profilecard triggered for closed account and custom message and not show status lozenge

Lorem ipsum click me dolor sit amet

Profilecard trigger hidden from screen readers

Lorem ipsum or dolor sit amet

Scroll down to test focus behaviour

Hover me. ||| Click me.

ProfileCardTrigger Props

`userId` `string` `required`

`cloudId` `string`

A cloudId can be provided, and we'll verify that the target userId is an actual user in the specified site.

Instead you can omit the cloudId and we won't do such a check.

If you have a cloudId and only want to show users who are in that site then please provide it. If you're a site-less product or don't care about verifying that the shown user is in a particular site, don't provide a cloudId.

`autoFocus` `boolean`

`resourceClient` `object` `required`

flushCache  required () => undefined
getProfile  required function cloudId, 
userId, 
analytics
 => PromiseisBot boolean required 
isCurrentUser boolean 
avatarUrl string 
email string 
fullName string 
location string 
meta string 
nickname string 
companyName string 
timestring string 
status  required One of "active", 
"inactive", 
"closed"
statusModifiedDate union One of number, 
null
customLozenges arrayType Arraytext  required React.ReactNode
appearance  One of "default", 
"success", 
"removed", 
"inprogress", 
"new", 
"moved"
isBold boolean 
accountType string 
isAgent boolean 
getTeamProfile  required function teamId, 
orgId, 
fireAnalytics
 => PromiselargeAvatarImageUrl string 
smallAvatarImageUrl string 
largeHeaderImageUrl string 
smallHeaderImageUrl string 
id string required 
displayName string required 
description string required 
organizationId string 
members arrayType Arrayid string required 
fullName string required 
avatarUrl string required 
isVerified boolean 
getReportingLines  required userId => Promisemanagers arrayType ArrayaccountIdentifier string required 
identifierType union required One of "ATLASSIAN_ID", 
"BASE64_HASH", 
"UNKNOWN"
pii  name string required 
picture string 
reports arrayType ArrayaccountIdentifier string required 
identifierType union required One of "ATLASSIAN_ID", 
"BASE64_HASH", 
"UNKNOWN"
pii  name string required 
picture string 
shouldShowGiveKudos  required  => Promiseboolean
getTeamCentralBaseUrl  required teamCentralScopes => PromiseOne of string, 
undefined
getRovoAgentProfile  required function id, 
fireAnalytics
 => Promiseid string required 
identity_account_id union One of string, 
null
named_id string required 
name string required 
description union required One of string, 
null
system_prompt_template union One of string, 
null
creator_type union required One of "SYSTEM", 
"CUSTOMER", 
"THIRD_PARTY", 
"FORGE"
creator union One of string, 
null
visibility union One of "PUBLIC", 
"PRIVATE", 
null
is_default boolean required 
actor_type string required 
follow_up_prompt_template union One of string, 
null
plugin_routing_type union One of "DEFAULT", 
"SKIP", 
null
user_defined_conversation_starters union required One of Arraystring
, 
null
favourite boolean required 
favourite_count number required 
deactivated boolean 
icon union One of string, 
null
external_config_reference string 
getRovoAgentPermissions  required function id, 
fireAnalytics
 => Promisepermissions  required RecordOne of "AGENT_UPDATE", 
"AGENT_DEACTIVATE"
, permitted boolean required 
deleteAgent  required function id, 
fireAnalytics
 => Promiseundefined
setFavouriteAgent  required function id, 
isFavourite, 
fireAnalytics
 => Promiseundefined

`actions` `arrayType`

Arraycallback  ...args => any
shouldRender  data => boolean
id string 
label  required React.ReactNode
link string

`reportingLinesProfileUrl` `string`

`onReportingLinesClick` `function`

user => undefined

`position` `union`

One of "bottom-start", 
"bottom", 
"bottom-end", 
"left-start", 
"left", 
"left-end", 
"top-end", 
"top", 
"top-start", 
"right-end", 
"right", 
"right-start"

`trigger` `union`

One of "hover", 
"click"

`children` `React.ReactNode` `required`

React.ReactNode

`testId` `string`

`addFlag` `function`

flag => undefined

`ariaLabel` `string`

`ariaLabelledBy` `string`

`prepopulatedData` `object`

fullName string

`disabledAriaAttributes` `boolean`

`onVisibilityChange` `function`

isVisible => undefined

`isVisible` `boolean`

`offset` `tuple`

[number, number]

`product` `string`

`viewingUserId` `string`

`agentActions` `object`

onChatClick  () => undefined
onConversationStartersClick  starter => undefined

`ariaHideProfileTrigger` `boolean`