diff --git a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
index a8947094bf..0cf14140b8 100644
--- a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
+++ b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`components/AtMention should match snapshot when mentioning current user
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc1/image"
@@ -189,7 +189,7 @@ exports[`components/AtMention should match snapshot when mentioning user 1`] = `
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc2/image"
@@ -229,7 +229,7 @@ exports[`components/AtMention should match snapshot when mentioning user contain
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc3/image"
@@ -270,7 +270,7 @@ exports[`components/AtMention should match snapshot when mentioning user contain
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc3/image"
@@ -310,7 +310,7 @@ exports[`components/AtMention should match snapshot when mentioning user followe
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc2/image"
@@ -351,7 +351,7 @@ exports[`components/AtMention should match snapshot when mentioning user with di
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc2/image"
@@ -391,7 +391,7 @@ exports[`components/AtMention should match snapshot when mentioning user with mi
       rootClose={true}
       show={false}
     >
-      <Connect(injectIntl(ProfilePopover))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
         hide={[Function]}
         src="/api/v4/users/abc2/image"
diff --git a/webapp/channels/src/components/at_mention/at_mention.tsx b/webapp/channels/src/components/at_mention/at_mention.tsx
index 3e899ed665..52fbca7027 100644
--- a/webapp/channels/src/components/at_mention/at_mention.tsx
+++ b/webapp/channels/src/components/at_mention/at_mention.tsx
@@ -31,7 +31,6 @@ type Props = {
     groupsByName: Record<string, Group>;
     children?: React.ReactNode;
     channelId?: string;
-    hasMention?: boolean;
     disableHighlight?: boolean;
     disableGroupHighlight?: boolean;
 }
@@ -122,7 +121,6 @@ export const AtMention = (props: Props) => {
                     className='user-profile-popover'
                     userId={user.id}
                     src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
-                    hasMention={props.hasMention}
                     hide={hideOverlay}
                     channelId={props.channelId}
                 />
@@ -187,7 +185,6 @@ export const AtMention = (props: Props) => {
                             userId={groupUser.id}
                             src={Client4.getProfilePictureUrl(groupUser.id, groupUser.last_picture_update)}
                             channelId={props.channelId}
-                            hasMention={props.hasMention}
                             hide={hideGroupUserOverlay}
                             returnFocus={returnFocus}
                         />
diff --git a/webapp/channels/src/components/custom_status/custom_status_emoji.tsx b/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
index 6eb61d0810..082e1e39ff 100644
--- a/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
+++ b/webapp/channels/src/components/custom_status/custom_status_emoji.tsx
@@ -48,8 +48,7 @@ function CustomStatusEmoji({
 
     const customStatusExpired = useSelector((state: GlobalState) => isCustomStatusExpired(state, customStatus));
     const customStatusEnabled = useSelector(isCustomStatusEnabled);
-    const isCustomStatusSet = Boolean(customStatusEnabled && customStatus?.emoji && !customStatusExpired);
-    if (!isCustomStatusSet) {
+    if (!customStatusEnabled || !customStatus?.emoji || customStatusExpired) {
         return null;
     }
 
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index 2824843da8..59e8869f0f 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
@@ -44,10 +44,9 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
           <OverlayTrigger
             defaultOverlayShown={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 channelId="channel_id"
                 className="user-profile-popover"
-                hasMention={false}
                 hide={[Function]}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
@@ -67,7 +66,6 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
                 <OverlayWrapper
                   channelId="channel_id"
                   className="user-profile-popover"
-                  hasMention={false}
                   hide={[Function]}
                   intl={
                     Object {
@@ -317,10 +315,9 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
           <OverlayTrigger
             defaultOverlayShown={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 channelId="channel_id"
                 className="user-profile-popover"
-                hasMention={false}
                 hide={[Function]}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
@@ -340,7 +337,6 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
                 <OverlayWrapper
                   channelId="channel_id"
                   className="user-profile-popover"
-                  hasMention={false}
                   hide={[Function]}
                   intl={
                     Object {
@@ -596,10 +592,9 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
           <OverlayTrigger
             defaultOverlayShown={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 channelId="channel_id"
                 className="user-profile-popover"
-                hasMention={false}
                 hide={[Function]}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
@@ -619,7 +614,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                 <OverlayWrapper
                   channelId="channel_id"
                   className="user-profile-popover"
-                  hasMention={false}
                   hide={[Function]}
                   intl={
                     Object {
@@ -937,10 +931,9 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
           <OverlayTrigger
             defaultOverlayShown={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 channelId="channel_id"
                 className="user-profile-popover"
-                hasMention={false}
                 hide={[Function]}
                 src="/api/v4/users/user_id/image?_=0"
                 userId="user_id"
@@ -960,7 +953,6 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
                 <OverlayWrapper
                   channelId="channel_id"
                   className="user-profile-popover"
-                  hasMention={false}
                   hide={[Function]}
                   intl={
                     Object {
diff --git a/webapp/channels/src/components/post/user_profile.tsx b/webapp/channels/src/components/post/user_profile.tsx
index cfd36c7be4..52cae3d55f 100644
--- a/webapp/channels/src/components/post/user_profile.tsx
+++ b/webapp/channels/src/components/post/user_profile.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import type {ReactNode} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import type {Post} from '@mattermost/types/posts';
 
@@ -28,6 +28,7 @@ type Props = {
 };
 
 const PostUserProfile = (props: Props): JSX.Element | null => {
+    const intl = useIntl();
     const {post, compactDisplay, isMobileView, isConsecutivePost, enablePostUsernameOverride, isBot, isSystemMessage, colorizeUsernames} = props;
     const isFromAutoResponder = fromAutoResponder(post);
     const colorize = compactDisplay && colorizeUsernames;
@@ -55,7 +56,6 @@ const PostUserProfile = (props: Props): JSX.Element | null => {
                 userId={post.user_id}
                 channelId={post.channel_id}
                 isRHS={isRHS}
-                hasMention={true}
                 colorize={colorize}
             />
         );
@@ -67,7 +67,6 @@ const PostUserProfile = (props: Props): JSX.Element | null => {
                 userId={post.user_id}
                 channelId={post.channel_id}
                 isRHS={isRHS}
-                hasMention={true}
                 colorize={colorize}
             />
         );
@@ -77,7 +76,6 @@ const PostUserProfile = (props: Props): JSX.Element | null => {
                 userId={post.user_id}
                 channelId={post.channel_id}
                 isRHS={isRHS}
-                hasMention={true}
                 colorize={colorize}
             />
         );
@@ -108,7 +106,6 @@ const PostUserProfile = (props: Props): JSX.Element | null => {
                         channelId={post.channel_id}
                         hideStatus={true}
                         isRHS={isRHS}
-                        hasMention={true}
                         colorize={colorize}
                     />
                 </span>
@@ -135,12 +132,10 @@ const PostUserProfile = (props: Props): JSX.Element | null => {
         } else if (isSystemMessage) {
             userProfile = (
                 <UserProfile
-                    overwriteName={
-                        <FormattedMessage
-                            id='post_info.system'
-                            defaultMessage='System'
-                        />
-                    }
+                    overwriteName={intl.formatMessage({
+                        id: 'post_info.system',
+                        defaultMessage: 'System',
+                    })}
                     userId={post.user_id}
                     disablePopover={true}
                     channelId={post.channel_id}
diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
index 7cb1404380..21e0e44ac8 100644
--- a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
+++ b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap
@@ -230,7 +230,6 @@ exports[`components/post_edit_history/edited_post_item should match snapshot whe
           >
             <Connect(UserProfile)
               disablePopover={true}
-              hasMention={true}
               userId="user_id"
             />
           </div>
diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
index 9b7190a51a..046713ee53 100644
--- a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
+++ b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx
@@ -145,7 +145,6 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, theme, act
             <div className={'edit-post-history__header__username'}>
                 <UserProfileComponent
                     userId={post.user_id}
-                    hasMention={true}
                     disablePopover={true}
                     overwriteName={overwriteName}
                 />
diff --git a/webapp/channels/src/components/post_profile_picture/post_profile_picture.test.tsx b/webapp/channels/src/components/post_profile_picture/post_profile_picture.test.tsx
index 40a366516a..2c9d6c9db5 100644
--- a/webapp/channels/src/components/post_profile_picture/post_profile_picture.test.tsx
+++ b/webapp/channels/src/components/post_profile_picture/post_profile_picture.test.tsx
@@ -24,7 +24,6 @@ describe('components/PostProfilePicture', () => {
         enablePostIconOverride: true,
         compactDisplay: true,
         hasImageProxy: true,
-        isBusy: true,
         post,
         user,
         isBot: Boolean(user.is_bot),
diff --git a/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx b/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx
index 6bf0e4172f..614b8bd4f1 100644
--- a/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx
+++ b/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx
@@ -18,7 +18,6 @@ type Props = {
     compactDisplay?: boolean;
     enablePostIconOverride: boolean;
     hasImageProxy: boolean;
-    isBusy?: boolean;
     post: Post;
     status?: string;
     user: UserProfile;
@@ -81,7 +80,6 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
         const {
             availabilityStatusOnPosts,
             compactDisplay,
-            isBusy,
             post,
             user,
             isBot,
@@ -107,7 +105,6 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
         return (
             <ProfilePicture
                 hasMention={hasMention}
-                isBusy={isBusy}
                 size='md'
                 src={src}
                 profileSrc={profileSrc}
diff --git a/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx b/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx
index 8a03b68f67..402ea405d2 100644
--- a/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx
+++ b/webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx
@@ -225,7 +225,6 @@ function createDMIntroMessage(channel: Channel, centeredIntro: string, teammate?
                     <UserProfile
                         userId={teammate?.id}
                         disablePopover={false}
-                        hasMention={true}
                     />
                 </div>
                 <p className='channel-intro-text'>
diff --git a/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap b/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap
index 1c1cc92713..65f4636749 100644
--- a/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/commented_on/__snapshots__/commented_on.test.tsx.snap
@@ -16,7 +16,6 @@ exports[`components/post_view/CommentedOn should match snapshot 1`] = `
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
@@ -49,7 +48,6 @@ exports[`components/post_view/CommentedOn should match snapshot 2`] = `
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
@@ -82,7 +80,6 @@ exports[`components/post_view/CommentedOn should match snapshot 3`] = `
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
@@ -117,7 +114,6 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
@@ -150,7 +146,6 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
@@ -183,7 +178,6 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
@@ -216,7 +210,6 @@ exports[`components/post_view/CommentedOn should match snapshots for post with p
           >
             <Memo(Connect(UserProfile))
               disablePopover={false}
-              hasMention={true}
               userId=""
             />
           </a>,
diff --git a/webapp/channels/src/components/post_view/commented_on/commented_on.tsx b/webapp/channels/src/components/post_view/commented_on/commented_on.tsx
index 4c6cbd4935..04f95d11e9 100644
--- a/webapp/channels/src/components/post_view/commented_on/commented_on.tsx
+++ b/webapp/channels/src/components/post_view/commented_on/commented_on.tsx
@@ -44,7 +44,6 @@ function CommentedOn({post, parentPostUser, onCommentClick}: Props) {
     const parentUserProfile = (
         <UserProfile
             userId={parentPostUserId}
-            hasMention={true}
             disablePopover={false}
         />
     );
diff --git a/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap b/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap
index c1ba45b470..07e9833352 100644
--- a/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap
@@ -34,7 +34,6 @@ exports[`PostMessagePreview direct and group messages should render preview for
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -121,7 +120,6 @@ exports[`PostMessagePreview direct and group messages should render preview for
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -208,7 +206,6 @@ exports[`PostMessagePreview nested previews should render file preview 1`] = `
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -315,7 +312,6 @@ exports[`PostMessagePreview nested previews should render opengraph preview 1`]
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -430,7 +426,6 @@ exports[`PostMessagePreview should not render bot icon 1`] = `
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -522,7 +517,6 @@ exports[`PostMessagePreview should render bot icon 1`] = `
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -614,7 +608,6 @@ exports[`PostMessagePreview should render correctly 1`] = `
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
@@ -703,7 +696,6 @@ exports[`PostMessagePreview show render without preview when preview posts becom
       >
         <Connect(UserProfile)
           disablePopover={true}
-          hasMention={true}
           overwriteName=""
           userId="user_1"
         />
diff --git a/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx b/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx
index 6dc2d286f6..97264b369f 100644
--- a/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx
+++ b/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx
@@ -174,7 +174,6 @@ const PostMessagePreview = (props: Props) => {
                     <div className={classNames('col col__name', 'permalink--username')}>
                         <UserProfileComponent
                             userId={user?.id ?? ''}
-                            hasMention={true}
                             disablePopover={true}
                             overwriteName={previewPost.props?.override_username || ''}
                         />
diff --git a/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap b/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
index 40cc0ced20..6b4aead388 100644
--- a/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
+++ b/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
@@ -44,11 +44,9 @@ exports[`components/ProfilePicture should match snapshot, profile and src, defau
 <OverlayTrigger
   defaultOverlayShown={false}
   overlay={
-    <Memo(Connect(injectIntl(ProfilePopover)))
+    <Memo(ProfilePopover)
       className="user-profile-popover"
-      hasMention={false}
       hide={[Function]}
-      isBusy={true}
       src="http://example.com/image.png"
       userId="uid"
     />
diff --git a/webapp/channels/src/components/profile_picture/profile_picture.test.tsx b/webapp/channels/src/components/profile_picture/profile_picture.test.tsx
index 677190de52..7e8abbaf72 100644
--- a/webapp/channels/src/components/profile_picture/profile_picture.test.tsx
+++ b/webapp/channels/src/components/profile_picture/profile_picture.test.tsx
@@ -13,7 +13,6 @@ describe('components/ProfilePicture', () => {
     const baseProps: Props = {
         src: 'http://example.com/image.png',
         status: 'away',
-        isBusy: true,
     };
 
     test('should match snapshot, no user specified, default props', () => {
@@ -43,7 +42,6 @@ describe('components/ProfilePicture', () => {
         const props: Props = {
             ...baseProps,
             size: 'xl',
-            hasMention: true,
         };
         const wrapper = shallow(
             <ProfilePicture {...props}/>,
@@ -69,7 +67,6 @@ describe('components/ProfilePicture', () => {
             ...baseProps,
             username: 'username',
             size: 'xs',
-            hasMention: true,
         };
         const wrapper = shallow(
             <ProfilePicture {...props}/>,
diff --git a/webapp/channels/src/components/profile_picture/profile_picture.tsx b/webapp/channels/src/components/profile_picture/profile_picture.tsx
index 2ce0a7d4dc..373c2975fc 100644
--- a/webapp/channels/src/components/profile_picture/profile_picture.tsx
+++ b/webapp/channels/src/components/profile_picture/profile_picture.tsx
@@ -20,8 +20,6 @@ interface MMOverlayTrigger extends BaseOverlayTrigger {
 }
 
 type Props = {
-    hasMention?: boolean;
-    isBusy?: boolean;
     isEmoji?: boolean;
     profileSrc?: string;
     size?: ComponentProps<typeof Avatar>['size'];
@@ -80,10 +78,8 @@ export default class ProfilePicture extends React.PureComponent<Props> {
                             className='user-profile-popover'
                             userId={this.props.userId}
                             src={profileSrc}
-                            isBusy={this.props.isBusy}
                             hide={this.hideProfilePopover}
                             channelId={this.props.channelId}
-                            hasMention={this.props.hasMention}
                             overwriteIcon={this.props.overwriteIcon}
                             overwriteName={this.props.overwriteName}
                             fromWebhook={this.props.fromWebhook}
diff --git a/webapp/channels/src/components/profile_popover/__snapshots__/profile_popover.test.tsx.snap b/webapp/channels/src/components/profile_popover/__snapshots__/profile_popover.test.tsx.snap
deleted file mode 100644
index 1fa1c25a00..0000000000
--- a/webapp/channels/src/components/profile_popover/__snapshots__/profile_popover.test.tsx.snap
+++ /dev/null
@@ -1,4482 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/ProfilePopover should disable start call button when user is in another call 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  isUserInCall={true}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="startCallTooltip"
-              >
-                some_username is in another call
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <button
-              aria-disabled={true}
-              className="btn icon-btn icon-btn-disabled"
-              id="startCallButton"
-              type="button"
-            >
-              <PhoneInTalkIcon
-                aria-label="some_username is in another call"
-                size={18}
-              />
-            </button>
-          </OverlayTrigger>
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should hide add-to-channel option if not on team 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={false}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot for shared user 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for shared_user"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_shared_user"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="shared_user"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1"
-        data-testid="popover-fullname-shared_user"
-        key="user-popover-fullname"
-      >
-        <span
-          className="user-profile-popover__heading"
-        >
-          shared
-        </span>
-        <SharedUserIndicator
-          className="shared-user-icon"
-          withTooltip={true}
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @shared_user
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "shared",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "remote_id": "fakeuser",
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "shared_user",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "shared",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "remote_id": "fakeuser",
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "shared_user",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "shared",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "remote_id": "fakeuser",
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "shared_user",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot when calls are disabled 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={false}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot with custom status 1`] = `
-<Memo(Popover)
-  customStatus={
-    Object {
-      "duration": "today",
-      "emoji": "calendar",
-      "expires_at": "2021-05-03T23:59:59.000Z",
-      "text": "In a meeting",
-    }
-  }
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="user-popover__time-status-container"
-        id="user-popover-status"
-        key="user-popover-status"
-      >
-        <span
-          className="user-popover__subtitle"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Status"
-            id="user_profile.custom_status"
-          />
-          <Memo(ExpiryTime)
-            className="ml-1"
-            time="2021-05-03T23:59:59.000Z"
-            withinBrackets={true}
-          />
-        </span>
-        <div
-          className="d-flex align-items-center"
-        >
-          <Memo(CustomStatusEmoji)
-            emojiStyle={
-              Object {
-                "marginRight": 4,
-                "marginTop": 1,
-              }
-            }
-            showTooltip={false}
-            userID="user_id"
-          />
-          <CustomStatusText
-            className="user-popover__email"
-            text="In a meeting"
-            tooltipDirection="top"
-          />
-        </div>
-      </div>
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot with custom status expired 1`] = `
-<Memo(Popover)
-  customStatus={
-    Object {
-      "duration": "today",
-      "emoji": "calendar",
-      "expires_at": "2021-05-03T23:59:59.000Z",
-      "text": "In a meeting",
-    }
-  }
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={true}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot with custom status not set but can set 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="user-popover__time-status-container"
-        id="user-popover-status"
-        key="user-popover-status"
-      >
-        <span
-          className="user-popover__subtitle"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="Status"
-            id="user_profile.custom_status"
-          />
-        </span>
-        <button
-          className="user-popover__set-custom-status-btn"
-          onClick={[Function]}
-        >
-          <EmoticonHappyOutlineIcon
-            size={14}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Set a status"
-            id="user_profile.custom_status.set_status"
-          />
-        </button>
-      </div>
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-settings"
-      >
-        <button
-          className="btn"
-          id="editProfileButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <AccountOutlineIcon
-            aria-label="Edit Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Edit Profile"
-            id="user_profile.account.editProfile"
-          />
-        </button>
-        <OverlayTrigger
-          defaultOverlayShown={false}
-          delayShow={400}
-          overlay={
-            <Tooltip
-              id="sendMessageTooltip"
-            >
-              <Memo(MemoizedFormattedMessage)
-                defaultMessage="Send yourself a message"
-                id="user_profile.send.dm.yourself"
-              />
-            </Tooltip>
-          }
-          placement="top"
-          trigger={
-            Array [
-              "hover",
-              "focus",
-            ]
-          }
-        >
-          <button
-            className="btn icon-btn"
-            onClick={[Function]}
-            type="button"
-          >
-            <SendIcon
-              aria-label="Send Message Icon"
-              size={18}
-            />
-          </button>
-        </OverlayTrigger>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot with last active display 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={true}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="user-popover-last-active"
-        key="user-popover-last-active"
-      >
-        <MemoizedFormattedMessage
-          defaultMessage="Last online {timestamp}"
-          id="channel_header.lastOnline"
-          values={
-            Object {
-              "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                style="short"
-                units={
-                  Array [
-                    "now",
-                    "minute",
-                    "hour",
-                  ]
-                }
-                useTime={false}
-                value={1632146562846}
-              />,
-            }
-          }
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should match snapshot with no last active display because it is disabled 1`] = `
-<Memo(Popover)
-  customStatus={null}
-  enableLastActiveTime={false}
-  id="user-profile-popover"
-  isAnyModalOpen={false}
-  isCallsDefaultEnabledOnAllChannels={true}
-  isCallsEnabled={true}
-  isCustomStatusEnabled={true}
-  isCustomStatusExpired={false}
-  isInCurrentTeam={true}
-  isMobileView={false}
-  lastActivityTimestamp={1632146562846}
-  teammateNameDisplay="username"
-  timestampUnits={
-    Array [
-      "now",
-      "minute",
-      "hour",
-    ]
-  }
->
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-  <div
-    aria-label="Profile for some_username"
-    aria-modal={true}
-    className="a11y__popup"
-    onKeyDown={[Function]}
-    role="dialog"
-  >
-    <div
-      className="popover-title popover-title_height"
-    >
-      <span
-        data-testid="profilePopoverTitle_some_username"
-      >
-        <button
-          className="user-popover__close"
-          onClick={[Function]}
-        >
-          <CloseIcon
-            size={18}
-          />
-        </button>
-      </span>
-    </div>
-    <div
-      className="user-profile-popover__content"
-    >
-      <div
-        className="user-popover-image"
-        key="user-popover-image"
-      >
-        <Memo(Avatar)
-          id="userAvatar"
-          size="xxl"
-          tabIndex={-1}
-          url="src"
-          username="some_username"
-        />
-        <StatusIcon
-          button={true}
-          className="status user-popover-status"
-          status="offline"
-        />
-      </div>
-      <div
-        className="overflow--ellipsis pb-1 user-profile-popover__heading"
-        id="userPopoverUsername"
-        key="user-popover-username"
-      >
-        @some_username
-      </div>
-      <hr
-        className="divider divider--expanded"
-        key="user-popover-hr"
-      />
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable2"
-        pluggableName="PopoverUserAttributes"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-      <div
-        className="popover__row first"
-        data-toggle="tooltip"
-        key="user-popover-dm"
-      >
-        <button
-          className="btn"
-          id="messageButton"
-          onClick={[Function]}
-          type="button"
-        >
-          <SendIcon
-            aria-label="Send Message Icon"
-            size={16}
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Message"
-            id="user_profile.send.dm"
-          />
-        </button>
-        <div
-          className="popover_row-controlContainer"
-        >
-          <OverlayTrigger
-            defaultOverlayShown={false}
-            delayShow={400}
-            overlay={
-              <Tooltip
-                id="addToChannelTooltip"
-              >
-                Add to a Channel
-              </Tooltip>
-            }
-            placement="top"
-            trigger={
-              Array [
-                "hover",
-                "focus",
-              ]
-            }
-          >
-            <div>
-              <ToggleModalButton
-                ariaLabel="Add to a Channel"
-                className="btn icon-btn"
-                dialogProps={
-                  Object {
-                    "onExited": [Function],
-                    "user": Object {
-                      "auth_service": "",
-                      "bot_description": "",
-                      "create_at": 0,
-                      "delete_at": 0,
-                      "email": "",
-                      "first_name": "",
-                      "id": "user_id",
-                      "is_bot": false,
-                      "last_activity_at": 0,
-                      "last_name": "",
-                      "last_password_update": 0,
-                      "last_picture_update": 0,
-                      "locale": "",
-                      "mfa_active": false,
-                      "nickname": "",
-                      "notify_props": Object {
-                        "calls_desktop_sound": "true",
-                        "channel": "false",
-                        "comments": "never",
-                        "desktop": "default",
-                        "desktop_sound": "false",
-                        "email": "false",
-                        "first_name": "false",
-                        "highlight_keys": "",
-                        "mark_unread": "mention",
-                        "mention_keys": "",
-                        "push": "none",
-                        "push_status": "offline",
-                      },
-                      "password": "",
-                      "position": "",
-                      "props": Object {},
-                      "roles": "",
-                      "terms_of_service_create_at": 0,
-                      "terms_of_service_id": "",
-                      "update_at": 0,
-                      "username": "some_username",
-                    },
-                  }
-                }
-                dialogType={
-                  Object {
-                    "$$typeof": Symbol(react.memo),
-                    "WrappedComponent": [Function],
-                    "compare": null,
-                    "type": [Function],
-                  }
-                }
-                id="addToChannelButton"
-                modalId="add_user_to_channel"
-                onClick={[Function]}
-              >
-                <AccountPlusOutlineIcon
-                  aria-label="Add User to Channel Icon"
-                  size={18}
-                />
-              </ToggleModalButton>
-            </div>
-          </OverlayTrigger>
-          <Connect(ProfilePopoverCallButton)
-            customButton={
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delayShow={400}
-                overlay={
-                  <Tooltip
-                    id="startCallTooltip"
-                  >
-                    Start Call
-                  </Tooltip>
-                }
-                placement="top"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <button
-                  className="btn icon-btn"
-                  id="startCallButton"
-                  type="button"
-                >
-                  <PhoneInTalkIcon
-                    aria-label="Start Call"
-                    size={18}
-                  />
-                </button>
-              </OverlayTrigger>
-            }
-            userId="0"
-          />
-        </div>
-      </div>
-      <Connect(Pluggable)
-        hide={[MockFunction]}
-        key="profilePopoverPluggable3"
-        pluggableName="PopoverUserActions"
-        status="offline"
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "",
-            "id": "user_id",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "",
-            "notify_props": Object {
-              "calls_desktop_sound": "true",
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "highlight_keys": "",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some_username",
-          }
-        }
-      />
-    </div>
-  </div>
-  <span
-    onFocus={[Function]}
-    tabIndex={0}
-  />
-</Memo(Popover)>
-`;
-
-exports[`components/ProfilePopover should show the start call button when isCallsDefaultEnabledOnAllChannels, isCallsCanBeDisabledOnSpecificChannels is false and callsChannelState.enabled is true 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <injectIntl(ProfilePopover)
-    actions={
-      Object {
-        "closeModal": [MockFunction],
-        "getMembershipForEntities": [MockFunction] {
-          "calls": Array [
-            Array [
-              "team_id",
-              "0",
-              undefined,
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        },
-        "loadBot": [MockFunction],
-        "openDirectChannelToUserId": [MockFunction],
-        "openModal": [MockFunction],
-      }
-    }
-    canManageAnyChannelMembersInCurrentTeam={true}
-    currentTeamId="team_id"
-    currentUserId=""
-    enableLastActiveTime={true}
-    hide={[MockFunction]}
-    isAnyModalOpen={false}
-    isCallsCanBeDisabledOnSpecificChannels={false}
-    isCallsDefaultEnabledOnAllChannels={false}
-    isCallsEnabled={true}
-    isChannelAdmin={false}
-    isCustomStatusEnabled={true}
-    isCustomStatusExpired={false}
-    isInCurrentTeam={true}
-    isMobileView={false}
-    isTeamAdmin={false}
-    lastActivityTimestamp={1632146562846}
-    src="src"
-    teamUrl=""
-    teammateNameDisplay="username"
-    timestampUnits={
-      Array [
-        "now",
-        "minute",
-        "hour",
-      ]
-    }
-    user={
-      Object {
-        "auth_service": "",
-        "bot_description": "",
-        "create_at": 0,
-        "delete_at": 0,
-        "email": "",
-        "first_name": "",
-        "id": "user_id",
-        "is_bot": false,
-        "last_activity_at": 0,
-        "last_name": "",
-        "last_password_update": 0,
-        "last_picture_update": 0,
-        "locale": "",
-        "mfa_active": false,
-        "nickname": "",
-        "notify_props": Object {
-          "calls_desktop_sound": "true",
-          "channel": "false",
-          "comments": "never",
-          "desktop": "default",
-          "desktop_sound": "false",
-          "email": "false",
-          "first_name": "false",
-          "highlight_keys": "",
-          "mark_unread": "mention",
-          "mention_keys": "",
-          "push": "none",
-          "push_status": "offline",
-        },
-        "password": "",
-        "position": "",
-        "props": Object {},
-        "roles": "",
-        "terms_of_service_create_at": 0,
-        "terms_of_service_id": "",
-        "update_at": 0,
-        "username": "some_username",
-      }
-    }
-    userId="0"
-  >
-    <ProfilePopover
-      actions={
-        Object {
-          "closeModal": [MockFunction],
-          "getMembershipForEntities": [MockFunction] {
-            "calls": Array [
-              Array [
-                "team_id",
-                "0",
-                undefined,
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          },
-          "loadBot": [MockFunction],
-          "openDirectChannelToUserId": [MockFunction],
-          "openModal": [MockFunction],
-        }
-      }
-      canManageAnyChannelMembersInCurrentTeam={true}
-      currentTeamId="team_id"
-      currentUserId=""
-      customStatus={null}
-      enableLastActiveTime={true}
-      hasMention={false}
-      hide={[MockFunction]}
-      intl={
-        Object {
-          "$t": [Function],
-          "defaultFormats": Object {},
-          "defaultLocale": "en",
-          "defaultRichTextElements": undefined,
-          "fallbackOnEmptyString": true,
-          "formatDate": [Function],
-          "formatDateTimeRange": [Function],
-          "formatDateToParts": [Function],
-          "formatDisplayName": [Function],
-          "formatList": [Function],
-          "formatListToParts": [Function],
-          "formatMessage": [Function],
-          "formatNumber": [Function],
-          "formatNumberToParts": [Function],
-          "formatPlural": [Function],
-          "formatRelativeTime": [Function],
-          "formatTime": [Function],
-          "formatTimeToParts": [Function],
-          "formats": Object {},
-          "formatters": Object {
-            "getDateTimeFormat": [Function],
-            "getDisplayNames": [Function],
-            "getListFormat": [Function],
-            "getMessageFormat": [Function],
-            "getNumberFormat": [Function],
-            "getPluralRules": [Function],
-            "getRelativeTimeFormat": [Function],
-          },
-          "locale": "en",
-          "messages": Object {},
-          "onError": [Function],
-          "onWarn": [Function],
-          "textComponent": "span",
-          "timeZone": "Etc/UTC",
-          "wrapRichTextChunksInFragment": undefined,
-        }
-      }
-      isAnyModalOpen={false}
-      isCallsCanBeDisabledOnSpecificChannels={false}
-      isCallsDefaultEnabledOnAllChannels={false}
-      isCallsEnabled={true}
-      isChannelAdmin={false}
-      isCustomStatusEnabled={true}
-      isCustomStatusExpired={false}
-      isInCurrentTeam={true}
-      isMobileView={false}
-      isTeamAdmin={false}
-      lastActivityTimestamp={1632146562846}
-      src="src"
-      status="offline"
-      teamUrl=""
-      teammateNameDisplay="username"
-      timestampUnits={
-        Array [
-          "now",
-          "minute",
-          "hour",
-        ]
-      }
-      user={
-        Object {
-          "auth_service": "",
-          "bot_description": "",
-          "create_at": 0,
-          "delete_at": 0,
-          "email": "",
-          "first_name": "",
-          "id": "user_id",
-          "is_bot": false,
-          "last_activity_at": 0,
-          "last_name": "",
-          "last_password_update": 0,
-          "last_picture_update": 0,
-          "locale": "",
-          "mfa_active": false,
-          "nickname": "",
-          "notify_props": Object {
-            "calls_desktop_sound": "true",
-            "channel": "false",
-            "comments": "never",
-            "desktop": "default",
-            "desktop_sound": "false",
-            "email": "false",
-            "first_name": "false",
-            "highlight_keys": "",
-            "mark_unread": "mention",
-            "mention_keys": "",
-            "push": "none",
-            "push_status": "offline",
-          },
-          "password": "",
-          "position": "",
-          "props": Object {},
-          "roles": "",
-          "terms_of_service_create_at": 0,
-          "terms_of_service_id": "",
-          "update_at": 0,
-          "username": "some_username",
-        }
-      }
-      userId="0"
-    >
-      <Memo(Popover)
-        customStatus={null}
-        enableLastActiveTime={true}
-        id="user-profile-popover"
-        isAnyModalOpen={false}
-        isCallsCanBeDisabledOnSpecificChannels={false}
-        isCallsDefaultEnabledOnAllChannels={false}
-        isCallsEnabled={true}
-        isCustomStatusEnabled={true}
-        isCustomStatusExpired={false}
-        isInCurrentTeam={true}
-        isMobileView={false}
-        lastActivityTimestamp={1632146562846}
-        teammateNameDisplay="username"
-        timestampUnits={
-          Array [
-            "now",
-            "minute",
-            "hour",
-          ]
-        }
-      >
-        <Popover
-          bsClass="popover"
-          bsSize="small"
-          bsStyle="info"
-          id="user-profile-popover"
-          placement="right"
-        >
-          <div
-            className="popover popover-sm popover-info right"
-            id="user-profile-popover"
-            role="tooltip"
-            style={
-              Object {
-                "display": "block",
-                "left": undefined,
-                "top": undefined,
-              }
-            }
-          >
-            <div
-              className="arrow"
-              style={
-                Object {
-                  "left": undefined,
-                  "top": undefined,
-                }
-              }
-            />
-            <div
-              className="popover-content"
-            >
-              <span
-                onFocus={[Function]}
-                tabIndex={0}
-              />
-              <div
-                aria-label="Profile for some_username"
-                aria-modal={true}
-                className="a11y__popup"
-                onKeyDown={[Function]}
-                role="dialog"
-              >
-                <div
-                  className="popover-title popover-title_height"
-                >
-                  <span
-                    data-testid="profilePopoverTitle_some_username"
-                  >
-                    <button
-                      className="user-popover__close"
-                      onClick={[Function]}
-                    >
-                      <CloseIcon
-                        size={18}
-                      >
-                        <svg
-                          fill="currentColor"
-                          height={18}
-                          version="1.1"
-                          viewBox="0 0 24 24"
-                          width={18}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-                          />
-                        </svg>
-                      </CloseIcon>
-                    </button>
-                  </span>
-                </div>
-                <div
-                  className="user-profile-popover__content"
-                >
-                  <div
-                    className="user-popover-image"
-                    key="user-popover-image"
-                  >
-                    <Memo(Avatar)
-                      id="userAvatar"
-                      size="xxl"
-                      tabIndex={-1}
-                      url="src"
-                      username="some_username"
-                    >
-                      <img
-                        alt="some_username profile image"
-                        className="Avatar Avatar-xxl"
-                        id="userAvatar"
-                        loading="lazy"
-                        onError={[Function]}
-                        src="src"
-                        tabIndex={-1}
-                      />
-                    </Memo(Avatar)>
-                    <StatusIcon
-                      button={true}
-                      className="status user-popover-status"
-                      status="offline"
-                    >
-                      <StatusOfflineIcon
-                        className="status user-popover-status"
-                      >
-                        <span
-                          className="status user-popover-status"
-                        >
-                          <svg
-                            aria-label="Offline Icon"
-                            className="offline--icon"
-                            height="100%"
-                            role="img"
-                            style={
-                              Object {
-                                "clipRule": "evenodd",
-                                "fillRule": "evenodd",
-                                "strokeLinejoin": "round",
-                                "strokeMiterlimit": 1.41421,
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width="100%"
-                          >
-                            <path
-                              d="M10,0c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,2c4.415,0 8,3.585 8,8c0,4.415 -3.585,8 -8,8c-4.415,0 -8,-3.585 -8,-8c0,-4.415 3.585,-8 8,-8Z"
-                            />
-                          </svg>
-                        </span>
-                      </StatusOfflineIcon>
-                    </StatusIcon>
-                  </div>
-                  <div
-                    className="user-popover-last-active"
-                    key="user-popover-last-active"
-                  >
-                    <FormattedMessage
-                      defaultMessage="Last online {timestamp}"
-                      id="channel_header.lastOnline"
-                      values={
-                        Object {
-                          "timestamp": <Memo(Connect(injectIntl(Timestamp)))
-                            style="short"
-                            units={
-                              Array [
-                                "now",
-                                "minute",
-                                "hour",
-                              ]
-                            }
-                            useTime={false}
-                            value={1632146562846}
-                          />,
-                        }
-                      }
-                    >
-                      <span>
-                        Last online 
-                        <Connect(injectIntl(Timestamp))
-                          key=".$.1"
-                          style="short"
-                          units={
-                            Array [
-                              "now",
-                              "minute",
-                              "hour",
-                            ]
-                          }
-                          useTime={false}
-                          value={1632146562846}
-                        >
-                          <injectIntl(Timestamp)
-                            dispatch={[Function]}
-                            hourCycle="h12"
-                            style="short"
-                            units={
-                              Array [
-                                "now",
-                                "minute",
-                                "hour",
-                              ]
-                            }
-                            useTime={false}
-                            value={1632146562846}
-                          >
-                            <Timestamp
-                              day="2-digit"
-                              dispatch={[Function]}
-                              hour="numeric"
-                              hourCycle="h12"
-                              intl={
-                                Object {
-                                  "$t": [Function],
-                                  "defaultFormats": Object {},
-                                  "defaultLocale": "en",
-                                  "defaultRichTextElements": undefined,
-                                  "fallbackOnEmptyString": true,
-                                  "formatDate": [Function],
-                                  "formatDateTimeRange": [Function],
-                                  "formatDateToParts": [Function],
-                                  "formatDisplayName": [Function],
-                                  "formatList": [Function],
-                                  "formatListToParts": [Function],
-                                  "formatMessage": [Function],
-                                  "formatNumber": [Function],
-                                  "formatNumberToParts": [Function],
-                                  "formatPlural": [Function],
-                                  "formatRelativeTime": [Function],
-                                  "formatTime": [Function],
-                                  "formatTimeToParts": [Function],
-                                  "formats": Object {},
-                                  "formatters": Object {
-                                    "getDateTimeFormat": [Function],
-                                    "getDisplayNames": [Function],
-                                    "getListFormat": [Function],
-                                    "getMessageFormat": [Function],
-                                    "getNumberFormat": [Function],
-                                    "getPluralRules": [Function],
-                                    "getRelativeTimeFormat": [Function],
-                                  },
-                                  "locale": "en",
-                                  "messages": Object {},
-                                  "onError": [Function],
-                                  "onWarn": [Function],
-                                  "textComponent": "span",
-                                  "timeZone": "Etc/UTC",
-                                  "wrapRichTextChunksInFragment": undefined,
-                                }
-                              }
-                              minute="numeric"
-                              month="long"
-                              numeric="auto"
-                              relNearest={1}
-                              second="numeric"
-                              style="short"
-                              timeZoneName="short"
-                              units={
-                                Array [
-                                  "now",
-                                  "minute",
-                                  "hour",
-                                ]
-                              }
-                              useTime={false}
-                              value={1632146562846}
-                              weekday="long"
-                              year="numeric"
-                            >
-                              <Memo(SemanticTime)
-                                value={2021-09-20T14:02:42.846Z}
-                              >
-                                <time
-                                  dateTime="2021-09-20T14:02:42.846"
-                                >
-                                  September 20, 2021
-                                </time>
-                              </Memo(SemanticTime)>
-                            </Timestamp>
-                          </injectIntl(Timestamp)>
-                        </Connect(injectIntl(Timestamp))>
-                      </span>
-                    </FormattedMessage>
-                  </div>
-                  <div
-                    className="overflow--ellipsis pb-1 user-profile-popover__heading"
-                    id="userPopoverUsername"
-                    key="user-popover-username"
-                  >
-                    @some_username
-                  </div>
-                  <hr
-                    className="divider divider--expanded"
-                    key="user-popover-hr"
-                  />
-                  <Connect(Pluggable)
-                    hide={[MockFunction]}
-                    key="profilePopoverPluggable2"
-                    pluggableName="PopoverUserAttributes"
-                    status="offline"
-                    user={
-                      Object {
-                        "auth_service": "",
-                        "bot_description": "",
-                        "create_at": 0,
-                        "delete_at": 0,
-                        "email": "",
-                        "first_name": "",
-                        "id": "user_id",
-                        "is_bot": false,
-                        "last_activity_at": 0,
-                        "last_name": "",
-                        "last_password_update": 0,
-                        "last_picture_update": 0,
-                        "locale": "",
-                        "mfa_active": false,
-                        "nickname": "",
-                        "notify_props": Object {
-                          "calls_desktop_sound": "true",
-                          "channel": "false",
-                          "comments": "never",
-                          "desktop": "default",
-                          "desktop_sound": "false",
-                          "email": "false",
-                          "first_name": "false",
-                          "highlight_keys": "",
-                          "mark_unread": "mention",
-                          "mention_keys": "",
-                          "push": "none",
-                          "push_status": "offline",
-                        },
-                        "password": "",
-                        "position": "",
-                        "props": Object {},
-                        "roles": "",
-                        "terms_of_service_create_at": 0,
-                        "terms_of_service_id": "",
-                        "update_at": 0,
-                        "username": "some_username",
-                      }
-                    }
-                  >
-                    <Pluggable
-                      components={
-                        Object {
-                          "CallButton": Array [],
-                        }
-                      }
-                      dispatch={[Function]}
-                      hide={[MockFunction]}
-                      pluggableName="PopoverUserAttributes"
-                      status="offline"
-                      theme={
-                        Object {
-                          "awayIndicator": "#ffbc1f",
-                          "buttonBg": "#1c58d9",
-                          "buttonColor": "#ffffff",
-                          "centerChannelBg": "#ffffff",
-                          "centerChannelColor": "#3f4350",
-                          "codeTheme": "github",
-                          "dndIndicator": "#d24b4e",
-                          "errorTextColor": "#d24b4e",
-                          "linkColor": "#386fe5",
-                          "mentionBg": "#ffffff",
-                          "mentionBj": "#ffffff",
-                          "mentionColor": "#1e325c",
-                          "mentionHighlightBg": "#ffd470",
-                          "mentionHighlightLink": "#1b1d22",
-                          "newMessageSeparator": "#cc8f00",
-                          "onlineIndicator": "#3db887",
-                          "sidebarBg": "#1e325c",
-                          "sidebarHeaderBg": "#192a4d",
-                          "sidebarHeaderTextColor": "#ffffff",
-                          "sidebarTeamBarBg": "#14213e",
-                          "sidebarText": "#ffffff",
-                          "sidebarTextActiveBorder": "#5d89ea",
-                          "sidebarTextActiveColor": "#ffffff",
-                          "sidebarTextHoverBg": "#28427b",
-                          "sidebarUnreadText": "#ffffff",
-                          "type": "Denim",
-                        }
-                      }
-                      user={
-                        Object {
-                          "auth_service": "",
-                          "bot_description": "",
-                          "create_at": 0,
-                          "delete_at": 0,
-                          "email": "",
-                          "first_name": "",
-                          "id": "user_id",
-                          "is_bot": false,
-                          "last_activity_at": 0,
-                          "last_name": "",
-                          "last_password_update": 0,
-                          "last_picture_update": 0,
-                          "locale": "",
-                          "mfa_active": false,
-                          "nickname": "",
-                          "notify_props": Object {
-                            "calls_desktop_sound": "true",
-                            "channel": "false",
-                            "comments": "never",
-                            "desktop": "default",
-                            "desktop_sound": "false",
-                            "email": "false",
-                            "first_name": "false",
-                            "highlight_keys": "",
-                            "mark_unread": "mention",
-                            "mention_keys": "",
-                            "push": "none",
-                            "push_status": "offline",
-                          },
-                          "password": "",
-                          "position": "",
-                          "props": Object {},
-                          "roles": "",
-                          "terms_of_service_create_at": 0,
-                          "terms_of_service_id": "",
-                          "update_at": 0,
-                          "username": "some_username",
-                        }
-                      }
-                    />
-                  </Connect(Pluggable)>
-                  <div
-                    className="popover__row first"
-                    data-toggle="tooltip"
-                    key="user-popover-dm"
-                  >
-                    <button
-                      className="btn"
-                      id="messageButton"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <SendIcon
-                        aria-label="Send Message Icon"
-                        size={16}
-                      >
-                        <svg
-                          aria-label="Send Message Icon"
-                          fill="currentColor"
-                          height={16}
-                          version="1.1"
-                          viewBox="0 0 24 24"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M2,21L23,12L2,3V10L17,12L2,14V21Z"
-                          />
-                        </svg>
-                      </SendIcon>
-                      <FormattedMessage
-                        defaultMessage="Message"
-                        id="user_profile.send.dm"
-                      >
-                        <span>
-                          Message
-                        </span>
-                      </FormattedMessage>
-                    </button>
-                    <div
-                      className="popover_row-controlContainer"
-                    >
-                      <OverlayTrigger
-                        defaultOverlayShown={false}
-                        delayShow={400}
-                        overlay={
-                          <Tooltip
-                            id="addToChannelTooltip"
-                          >
-                            Add to a Channel
-                          </Tooltip>
-                        }
-                        placement="top"
-                        trigger={
-                          Array [
-                            "hover",
-                            "focus",
-                          ]
-                        }
-                      >
-                        <OverlayTrigger
-                          defaultOverlayShown={false}
-                          delayShow={400}
-                          overlay={
-                            <OverlayWrapper
-                              id="addToChannelTooltip"
-                              intl={
-                                Object {
-                                  "$t": [Function],
-                                  "defaultFormats": Object {},
-                                  "defaultLocale": "en",
-                                  "defaultRichTextElements": undefined,
-                                  "fallbackOnEmptyString": true,
-                                  "formatDate": [Function],
-                                  "formatDateTimeRange": [Function],
-                                  "formatDateToParts": [Function],
-                                  "formatDisplayName": [Function],
-                                  "formatList": [Function],
-                                  "formatListToParts": [Function],
-                                  "formatMessage": [Function],
-                                  "formatNumber": [Function],
-                                  "formatNumberToParts": [Function],
-                                  "formatPlural": [Function],
-                                  "formatRelativeTime": [Function],
-                                  "formatTime": [Function],
-                                  "formatTimeToParts": [Function],
-                                  "formats": Object {},
-                                  "formatters": Object {
-                                    "getDateTimeFormat": [Function],
-                                    "getDisplayNames": [Function],
-                                    "getListFormat": [Function],
-                                    "getMessageFormat": [Function],
-                                    "getNumberFormat": [Function],
-                                    "getPluralRules": [Function],
-                                    "getRelativeTimeFormat": [Function],
-                                  },
-                                  "locale": "en",
-                                  "messages": Object {},
-                                  "onError": [Function],
-                                  "onWarn": [Function],
-                                  "textComponent": "span",
-                                  "timeZone": "Etc/UTC",
-                                  "wrapRichTextChunksInFragment": undefined,
-                                }
-                              }
-                            >
-                              Add to a Channel
-                            </OverlayWrapper>
-                          }
-                          placement="top"
-                          trigger={
-                            Array [
-                              "hover",
-                              "focus",
-                            ]
-                          }
-                        >
-                          <div
-                            onBlur={[Function]}
-                            onClick={null}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                          >
-                            <ToggleModalButton
-                              ariaLabel="Add to a Channel"
-                              className="btn icon-btn"
-                              dialogProps={
-                                Object {
-                                  "onExited": [Function],
-                                  "user": Object {
-                                    "auth_service": "",
-                                    "bot_description": "",
-                                    "create_at": 0,
-                                    "delete_at": 0,
-                                    "email": "",
-                                    "first_name": "",
-                                    "id": "user_id",
-                                    "is_bot": false,
-                                    "last_activity_at": 0,
-                                    "last_name": "",
-                                    "last_password_update": 0,
-                                    "last_picture_update": 0,
-                                    "locale": "",
-                                    "mfa_active": false,
-                                    "nickname": "",
-                                    "notify_props": Object {
-                                      "calls_desktop_sound": "true",
-                                      "channel": "false",
-                                      "comments": "never",
-                                      "desktop": "default",
-                                      "desktop_sound": "false",
-                                      "email": "false",
-                                      "first_name": "false",
-                                      "highlight_keys": "",
-                                      "mark_unread": "mention",
-                                      "mention_keys": "",
-                                      "push": "none",
-                                      "push_status": "offline",
-                                    },
-                                    "password": "",
-                                    "position": "",
-                                    "props": Object {},
-                                    "roles": "",
-                                    "terms_of_service_create_at": 0,
-                                    "terms_of_service_id": "",
-                                    "update_at": 0,
-                                    "username": "some_username",
-                                  },
-                                }
-                              }
-                              dialogType={
-                                Object {
-                                  "$$typeof": Symbol(react.memo),
-                                  "WrappedComponent": [Function],
-                                  "compare": null,
-                                  "type": [Function],
-                                }
-                              }
-                              id="addToChannelButton"
-                              modalId="add_user_to_channel"
-                              onClick={[Function]}
-                            >
-                              <button
-                                aria-label="Add to a Channel dialog"
-                                className="style--none btn icon-btn"
-                                id="addToChannelButton"
-                                onClick={[Function]}
-                              >
-                                <AccountPlusOutlineIcon
-                                  aria-label="Add User to Channel Icon"
-                                  size={18}
-                                >
-                                  <svg
-                                    aria-label="Add User to Channel Icon"
-                                    fill="currentColor"
-                                    height={18}
-                                    version="1.1"
-                                    viewBox="0 0 24 24"
-                                    width={18}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M5.033,19C4.463,19,4,18.528,4,17.945c0-0.105,0.015-0.208,0.044-0.306c0.058-0.195,0.171-0.37,0.324-0.501c0.076-0.066,0.163-0.121,0.258-0.162l3.093-1.857C8.387,15.52,9.151,15.75,10,15.75s1.613-0.23,2.28-0.631l0.352,0.211
-	c0.302-0.606,0.701-1.156,1.181-1.624l-0.006-0.004c1.045-1.391,1.622-3.311,1.622-5.203C15.429,5.21,13.247,3,10,3
-	S4.571,5.21,4.571,8.5c0,1.891,0.577,3.812,1.622,5.203l-2.515,1.51C2.653,15.727,2,16.783,2,17.945C2,19.63,3.361,21,5.033,21
-	h7.776c-0.352-0.608-0.599-1.282-0.719-2H5.033z M10,5c1.894,0,3.429,1.084,3.429,3.5c0,1.482-0.485,3.117-1.353,4.163
-	c-0.548,0.66-1.247,1.087-2.076,1.087c-0.268,0-0.522-0.044-0.763-0.126c-0.12-0.041-0.237-0.092-0.35-0.151
-	c-0.226-0.119-0.437-0.272-0.633-0.453c-0.116-0.108-0.225-0.229-0.331-0.356c-0.072-0.086-0.143-0.174-0.209-0.268
-	C7.55,12.164,7.403,11.91,7.272,11.64c-0.194-0.406-0.351-0.846-0.466-1.3C6.729,10.037,6.67,9.728,6.631,9.419
-	c-0.04-0.308-0.06-0.617-0.06-0.919C6.571,6.084,8.106,5,10,5z M17,14h2v3h3v2h-3v3h-2v-3h-3v-2h3V14"
-                                    />
-                                  </svg>
-                                </AccountPlusOutlineIcon>
-                              </button>
-                            </ToggleModalButton>
-                          </div>
-                        </OverlayTrigger>
-                      </OverlayTrigger>
-                      <Connect(ProfilePopoverCallButton)
-                        customButton={
-                          <OverlayTrigger
-                            defaultOverlayShown={false}
-                            delayShow={400}
-                            overlay={
-                              <Tooltip
-                                id="startCallTooltip"
-                              >
-                                Start Call
-                              </Tooltip>
-                            }
-                            placement="top"
-                            trigger={
-                              Array [
-                                "hover",
-                                "focus",
-                              ]
-                            }
-                          >
-                            <button
-                              className="btn icon-btn"
-                              id="startCallButton"
-                              type="button"
-                            >
-                              <PhoneInTalkIcon
-                                aria-label="Start Call"
-                                size={18}
-                              />
-                            </button>
-                          </OverlayTrigger>
-                        }
-                        userId="0"
-                      >
-                        <ProfilePopoverCallButton
-                          currentUserId=""
-                          customButton={
-                            <OverlayTrigger
-                              defaultOverlayShown={false}
-                              delayShow={400}
-                              overlay={
-                                <Tooltip
-                                  id="startCallTooltip"
-                                >
-                                  Start Call
-                                </Tooltip>
-                              }
-                              placement="top"
-                              trigger={
-                                Array [
-                                  "hover",
-                                  "focus",
-                                ]
-                              }
-                            >
-                              <button
-                                className="btn icon-btn"
-                                id="startCallButton"
-                                type="button"
-                              >
-                                <PhoneInTalkIcon
-                                  aria-label="Start Call"
-                                  size={18}
-                                />
-                              </button>
-                            </OverlayTrigger>
-                          }
-                          dispatch={[Function]}
-                          pluginCallComponents={Array []}
-                          sidebarOpen={false}
-                          userId="0"
-                        />
-                      </Connect(ProfilePopoverCallButton)>
-                    </div>
-                  </div>
-                  <Connect(Pluggable)
-                    hide={[MockFunction]}
-                    key="profilePopoverPluggable3"
-                    pluggableName="PopoverUserActions"
-                    status="offline"
-                    user={
-                      Object {
-                        "auth_service": "",
-                        "bot_description": "",
-                        "create_at": 0,
-                        "delete_at": 0,
-                        "email": "",
-                        "first_name": "",
-                        "id": "user_id",
-                        "is_bot": false,
-                        "last_activity_at": 0,
-                        "last_name": "",
-                        "last_password_update": 0,
-                        "last_picture_update": 0,
-                        "locale": "",
-                        "mfa_active": false,
-                        "nickname": "",
-                        "notify_props": Object {
-                          "calls_desktop_sound": "true",
-                          "channel": "false",
-                          "comments": "never",
-                          "desktop": "default",
-                          "desktop_sound": "false",
-                          "email": "false",
-                          "first_name": "false",
-                          "highlight_keys": "",
-                          "mark_unread": "mention",
-                          "mention_keys": "",
-                          "push": "none",
-                          "push_status": "offline",
-                        },
-                        "password": "",
-                        "position": "",
-                        "props": Object {},
-                        "roles": "",
-                        "terms_of_service_create_at": 0,
-                        "terms_of_service_id": "",
-                        "update_at": 0,
-                        "username": "some_username",
-                      }
-                    }
-                  >
-                    <Pluggable
-                      components={
-                        Object {
-                          "CallButton": Array [],
-                        }
-                      }
-                      dispatch={[Function]}
-                      hide={[MockFunction]}
-                      pluggableName="PopoverUserActions"
-                      status="offline"
-                      theme={
-                        Object {
-                          "awayIndicator": "#ffbc1f",
-                          "buttonBg": "#1c58d9",
-                          "buttonColor": "#ffffff",
-                          "centerChannelBg": "#ffffff",
-                          "centerChannelColor": "#3f4350",
-                          "codeTheme": "github",
-                          "dndIndicator": "#d24b4e",
-                          "errorTextColor": "#d24b4e",
-                          "linkColor": "#386fe5",
-                          "mentionBg": "#ffffff",
-                          "mentionBj": "#ffffff",
-                          "mentionColor": "#1e325c",
-                          "mentionHighlightBg": "#ffd470",
-                          "mentionHighlightLink": "#1b1d22",
-                          "newMessageSeparator": "#cc8f00",
-                          "onlineIndicator": "#3db887",
-                          "sidebarBg": "#1e325c",
-                          "sidebarHeaderBg": "#192a4d",
-                          "sidebarHeaderTextColor": "#ffffff",
-                          "sidebarTeamBarBg": "#14213e",
-                          "sidebarText": "#ffffff",
-                          "sidebarTextActiveBorder": "#5d89ea",
-                          "sidebarTextActiveColor": "#ffffff",
-                          "sidebarTextHoverBg": "#28427b",
-                          "sidebarUnreadText": "#ffffff",
-                          "type": "Denim",
-                        }
-                      }
-                      user={
-                        Object {
-                          "auth_service": "",
-                          "bot_description": "",
-                          "create_at": 0,
-                          "delete_at": 0,
-                          "email": "",
-                          "first_name": "",
-                          "id": "user_id",
-                          "is_bot": false,
-                          "last_activity_at": 0,
-                          "last_name": "",
-                          "last_password_update": 0,
-                          "last_picture_update": 0,
-                          "locale": "",
-                          "mfa_active": false,
-                          "nickname": "",
-                          "notify_props": Object {
-                            "calls_desktop_sound": "true",
-                            "channel": "false",
-                            "comments": "never",
-                            "desktop": "default",
-                            "desktop_sound": "false",
-                            "email": "false",
-                            "first_name": "false",
-                            "highlight_keys": "",
-                            "mark_unread": "mention",
-                            "mention_keys": "",
-                            "push": "none",
-                            "push_status": "offline",
-                          },
-                          "password": "",
-                          "position": "",
-                          "props": Object {},
-                          "roles": "",
-                          "terms_of_service_create_at": 0,
-                          "terms_of_service_id": "",
-                          "update_at": 0,
-                          "username": "some_username",
-                        }
-                      }
-                    />
-                  </Connect(Pluggable)>
-                </div>
-              </div>
-              <span
-                onFocus={[Function]}
-                tabIndex={0}
-              />
-            </div>
-          </div>
-        </Popover>
-      </Memo(Popover)>
-    </ProfilePopover>
-  </injectIntl(ProfilePopover)>
-</Provider>
-`;
diff --git a/webapp/channels/src/components/profile_popover/index.test.tsx b/webapp/channels/src/components/profile_popover/index.test.tsx
new file mode 100644
index 0000000000..567c068bb1
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/index.test.tsx
@@ -0,0 +1,321 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {screen} from '@testing-library/react';
+import type {ComponentProps} from 'react';
+import React from 'react';
+
+import type {UserProfile} from '@mattermost/types/users';
+import {CustomStatusDuration} from '@mattermost/types/users';
+import type {DeepPartial} from '@mattermost/types/utilities';
+
+import {Client4} from 'mattermost-redux/client';
+import {General, Permissions} from 'mattermost-redux/constants';
+
+import {renderWithContext} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
+
+import type {GlobalState} from 'types/store';
+
+import ProfilePopover from '.';
+
+jest.mock('@mattermost/client', () => ({
+    ...jest.requireActual('@mattermost/client'),
+    Client4: class MockClient4 extends jest.requireActual('@mattermost/client').Client4 {
+        getCallsChannelState = jest.fn();
+    },
+}));
+
+type Props = ComponentProps<typeof ProfilePopover>;
+
+function renderWithPluginReducers(
+    c: Parameters<typeof renderWithContext>[0],
+    s: Parameters<typeof renderWithContext>[1],
+    o?: Parameters<typeof renderWithContext>[2],
+): ReturnType<typeof renderWithContext> {
+    const options = o || {};
+    options.pluginReducers = ['plugins-com.mattermost.calls'];
+    return renderWithContext(c, s, options);
+}
+function getBasePropsAndState(): [Props, DeepPartial<GlobalState>] {
+    const user = TestHelper.getUserMock({
+        id: 'user1',
+        first_name: 'user',
+        props: {
+            customStatus: JSON.stringify({
+                emoji: 'calendar',
+                text: 'In a meeting',
+                duration: CustomStatusDuration.DONT_CLEAR,
+            }),
+        },
+    });
+    const currentUser = TestHelper.getUserMock({id: 'currentUser', roles: 'role'});
+    const currentTeam = TestHelper.getTeamMock({id: 'currentTeam'});
+    const channel = TestHelper.getChannelMock({id: 'channelId', team_id: currentTeam.id, type: General.OPEN_CHANNEL});
+
+    const state: DeepPartial<GlobalState> = {
+        entities: {
+            users: {
+                profiles: {
+                    [user.id]: user,
+                    [currentUser.id]: currentUser,
+                },
+                statuses: {
+                    user1: 'offline',
+                },
+                currentUserId: currentUser.id,
+                lastActivity: {
+                    user1: 1,
+                },
+            },
+            teams: {
+                teams: {
+                    [currentTeam.id]: currentTeam,
+                },
+                currentTeamId: currentTeam.id,
+                membersInTeam: {
+                    [currentTeam.id]: {
+                        [user.id]: {
+                            delete_at: 0,
+                        },
+                    },
+                },
+            },
+            channels: {
+                channels: {
+                    [channel.id]: channel,
+                },
+                myMembers: {
+                    [channel.id]: {},
+                },
+            },
+            general: {
+                config: {
+                    EnableCustomUserStatuses: 'true',
+                    EnableLastActiveTime: 'true',
+                },
+            },
+            preferences: {
+                myPreferences: {},
+            },
+            groups: {
+                groups: {},
+                myGroups: [],
+            },
+            emojis: {
+                customEmoji: {},
+            },
+            posts: {
+                posts: {},
+            },
+            roles: {
+                roles: {
+                    role: {
+                        permissions: [Permissions.MANAGE_PUBLIC_CHANNEL_MEMBERS],
+                    },
+                },
+            },
+        },
+        views: {
+            rhs: {
+                isSidebarOpen: false,
+            },
+            modals: {
+                modalState: {},
+            },
+            browser: {
+                windowSize: '',
+            },
+        },
+        plugins: {
+            components: {
+                CallButton: [{}],
+            },
+            plugins: {
+                'com.mattermost.calls': {
+                    version: '0.4.2',
+                },
+            },
+        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        'plugins-com.mattermost.calls': {
+            profiles: {},
+        },
+    };
+    const props: Props = {
+        src: 'src',
+        userId: user.id,
+        hide: jest.fn(),
+        channelId: 'channelId',
+    };
+
+    return [props, state];
+}
+
+describe('components/ProfilePopover', () => {
+    (Client4.getCallsChannelState as jest.Mock).mockImplementation(async () => ({enabled: true}));
+
+    test('should mark shared user as shared', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        initialState.entities!.users!.profiles!.user1!.remote_id = 'fakeuser';
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByLabelText('shared user indicator')).toBeInTheDocument();
+    });
+
+    test('should have bot description', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        initialState.entities!.users!.profiles!.user1!.is_bot = true;
+        initialState.entities!.users!.profiles!.user1!.bot_description = 'bot description';
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByText('bot description')).toBeInTheDocument();
+    });
+
+    test('should show add-to-channel option if in a team', async () => {
+        const [props, initialState] = getBasePropsAndState();
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByLabelText('Add to a Channel dialog')).toBeInTheDocument();
+    });
+
+    test('should hide add-to-channel option if not on team', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        initialState.entities!.teams!.membersInTeam!.currentTeam = {};
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+
+        // Use find to wait for the first re-render because of the calls fetch
+        await screen.findByText('user');
+
+        expect(await screen.queryByLabelText('Add to a Channel dialog')).not.toBeInTheDocument();
+    });
+
+    test('should match props passed into PopoverUserAttributes Pluggable component', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        const mockPluginComponent = ({
+            hide,
+            status,
+            user,
+        }: {
+            hide: Props['hide'];
+            status?: string;
+            user: UserProfile;
+        }) => {
+            hide?.();
+            return (<span>{`${status} ${user.id}`}</span>);
+        };
+
+        initialState.plugins!.components!.PopoverUserAttributes = [{component: mockPluginComponent as any}];
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(props.hide).toHaveBeenCalled();
+        expect(await screen.findByText('offline user1')).toBeInTheDocument();
+    });
+
+    test('should match props passed into PopoverUserActions Pluggable component', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        const mockPluginComponent = ({
+            hide,
+            status,
+            user,
+        }: {
+            hide: Props['hide'];
+            status?: string;
+            user: UserProfile;
+        }) => {
+            hide?.();
+            return (<span>{`${status} ${user.id}`}</span>);
+        };
+
+        initialState.plugins!.components!.PopoverUserActions = [{component: mockPluginComponent as any}];
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(props.hide).toHaveBeenCalled();
+        expect(await screen.findByText('offline user1')).toBeInTheDocument();
+    });
+
+    test('should show custom status', async () => {
+        const [props, initialState] = getBasePropsAndState();
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByText('In a meeting')).toBeInTheDocument();
+    });
+
+    test('should show to set a status for the current user', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        props.userId = initialState.entities!.users!.currentUserId!;
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByText('Set a status')).toBeInTheDocument();
+    });
+
+    test('should not show custom status expired', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        const customStatus = JSON.stringify({
+            emoji: 'calendar',
+            text: 'In a meeting',
+            duration: CustomStatusDuration.TODAY,
+            expires_at: '2021-05-03T23:59:59.000Z',
+        });
+
+        initialState.entities!.users!.profiles!.user1!.props!.customStatus = customStatus;
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+
+        // Use find to wait for the first re-render because of the calls fetch
+        await screen.findByText('user');
+
+        expect(await screen.queryByText('In a meeting')).not.toBeInTheDocument();
+    });
+
+    test('should show last active display', async () => {
+        const [props, initialState] = getBasePropsAndState();
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByText('January 01, 1970')).toBeInTheDocument();
+    });
+
+    test('should not show last active display if disabled', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        initialState.entities!.general!.config!.EnableLastActiveTime = 'false';
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+
+        // Use find to wait for the first re-render because of the calls fetch
+        await screen.findByText('user');
+        expect(screen.queryByText('January 01, 1970')).not.toBeInTheDocument();
+    });
+
+    test('should show start a call button', async () => {
+        const [props, initialState] = getBasePropsAndState();
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByLabelText('Start Call')).toBeInTheDocument();
+    });
+
+    test('should not show start a call button when calls are disabled', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        initialState.plugins!.plugins = {};
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(screen.queryByLabelText('Start Call')).not.toBeInTheDocument();
+    });
+
+    test('should disable start call button when user is in another call', async () => {
+        const [props, initialState] = getBasePropsAndState();
+        (initialState as any)['plugins-com.mattermost.calls'].profiles = {fakeChannel: {currentUser: {id: 'currentUser'}}};
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        const button = (await screen.findByLabelText('Start Call')).closest('button');
+        expect(button?.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    test('should not show the start call button when isCallsDefaultEnabledOnAllChannels, isCallsCanBeDisabledOnSpecificChannels is false and callsChannelState.enabled is false', async () => {
+        (Client4.getCallsChannelState as jest.Mock).mockImplementationOnce(async () => ({enabled: false}));
+        const [props, initialState] = getBasePropsAndState();
+
+        renderWithPluginReducers(<ProfilePopover {...props}/>, initialState);
+        expect(await screen.findByLabelText('Start Call')).not.toBeInTheDocument();
+    });
+});
diff --git a/webapp/channels/src/components/profile_popover/index.ts b/webapp/channels/src/components/profile_popover/index.ts
deleted file mode 100644
index a0ebb296d5..0000000000
--- a/webapp/channels/src/components/profile_popover/index.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import type {Dispatch} from 'redux';
-
-import {
-    canManageAnyChannelMembersInCurrentTeam,
-    getCurrentChannelId,
-    getChannelByName,
-    getChannelMember,
-} from 'mattermost-redux/selectors/entities/channels';
-import {getCallsConfig, getProfilesInCalls} from 'mattermost-redux/selectors/entities/common';
-import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
-import {
-    getCurrentTeam,
-    getCurrentRelativeTeamUrl,
-    getTeamMember,
-} from 'mattermost-redux/selectors/entities/teams';
-import {getCurrentTimezone} from 'mattermost-redux/selectors/entities/timezone';
-import {displayLastActiveLabel, getCurrentUserId, getLastActiveTimestampUnits, getLastActivityForUserId, getStatusForUserId, getUser} from 'mattermost-redux/selectors/entities/users';
-
-import {openDirectChannelToUserId} from 'actions/channel_actions';
-import {closeModal, openModal} from 'actions/views/modals';
-import {getMembershipForEntities} from 'actions/views/profile_popover';
-import {isCallsEnabled} from 'selectors/calls';
-import {getRhsState, getSelectedPost} from 'selectors/rhs';
-import {getIsMobileView} from 'selectors/views/browser';
-import {makeGetCustomStatus, isCustomStatusEnabled, isCustomStatusExpired} from 'selectors/views/custom_status';
-import {isAnyModalOpen} from 'selectors/views/modals';
-
-import {getDirectChannelName} from 'utils/utils';
-
-import type {GlobalState} from 'types/store';
-
-import ProfilePopover from './profile_popover';
-
-type OwnProps = {
-    userId: string;
-    channelId?: string;
-}
-
-function getDefaultChannelId(state: GlobalState) {
-    const selectedPost = getSelectedPost(state);
-    return selectedPost.exists ? selectedPost.channel_id : getCurrentChannelId(state);
-}
-
-export function checkUserInCall(state: GlobalState, userId: string) {
-    for (const profilesMap of Object.values(getProfilesInCalls(state))) {
-        for (const profile of Object.values(profilesMap || {})) {
-            if (profile?.id === userId) {
-                return true;
-            }
-        }
-    }
-
-    return false;
-}
-
-function makeMapStateToProps() {
-    const getCustomStatus = makeGetCustomStatus();
-
-    return (state: GlobalState, {userId, channelId = getDefaultChannelId(state)}: OwnProps) => {
-        const team = getCurrentTeam(state);
-        const teamMember = getTeamMember(state, team.id, userId);
-
-        const isTeamAdmin = Boolean(teamMember && teamMember.scheme_admin);
-        const channelMember = getChannelMember(state, channelId, userId);
-
-        let isChannelAdmin = false;
-        if (getRhsState(state) !== 'search' && channelMember != null && channelMember.scheme_admin) {
-            isChannelAdmin = true;
-        }
-
-        const customStatus = getCustomStatus(state, userId);
-        const status = getStatusForUserId(state, userId);
-        const user = getUser(state, userId);
-
-        const lastActivityTimestamp = getLastActivityForUserId(state, userId);
-        const timestampUnits = getLastActiveTimestampUnits(state, userId);
-        const enableLastActiveTime = displayLastActiveLabel(state, userId);
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        const callsEnabled = isCallsEnabled(state);
-        const currentUserId = getCurrentUserId(state);
-        const callsConfig = callsEnabled ? getCallsConfig(state) : undefined;
-
-        return {
-            currentTeamId: team.id,
-            currentUserId,
-            isTeamAdmin,
-            isChannelAdmin,
-            isInCurrentTeam: Boolean(teamMember) && teamMember?.delete_at === 0,
-            canManageAnyChannelMembersInCurrentTeam: canManageAnyChannelMembersInCurrentTeam(state),
-            status,
-            teamUrl: getCurrentRelativeTeamUrl(state),
-            user,
-            modals: state.views.modals,
-            customStatus,
-            isCustomStatusEnabled: isCustomStatusEnabled(state),
-            isCustomStatusExpired: isCustomStatusExpired(state, customStatus),
-            channelId,
-            currentUserTimezone: getCurrentTimezone(state),
-            lastActivityTimestamp,
-            enableLastActiveTime,
-            timestampUnits,
-            isMobileView: getIsMobileView(state),
-            isCallsEnabled: callsEnabled,
-            isUserInCall: callsEnabled ? checkUserInCall(state, userId) : undefined,
-            isCurrentUserInCall: callsEnabled ? checkUserInCall(state, currentUserId) : undefined,
-            isCallsDefaultEnabledOnAllChannels: callsConfig?.DefaultEnabled,
-            isCallsCanBeDisabledOnSpecificChannels: callsConfig?.AllowEnableCalls,
-            dMChannel: getChannelByName(state, getDirectChannelName(currentUserId, userId)),
-            teammateNameDisplay: getTeammateNameDisplaySetting(state),
-            isAnyModalOpen: isAnyModalOpen(state),
-        };
-    };
-}
-
-function mapDispatchToProps(dispatch: Dispatch) {
-    return {
-        actions: bindActionCreators({
-            closeModal,
-            openDirectChannelToUserId,
-            openModal,
-            getMembershipForEntities,
-        }, dispatch),
-    };
-}
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(ProfilePopover);
diff --git a/webapp/channels/src/components/profile_popover/index.tsx b/webapp/channels/src/components/profile_popover/index.tsx
new file mode 100644
index 0000000000..01dcdf128c
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/index.tsx
@@ -0,0 +1,337 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {useDispatch, useSelector} from 'react-redux';
+
+import {getCurrentChannelId, getCurrentUserId} from 'mattermost-redux/selectors/entities/common';
+import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentRelativeTeamUrl, getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {getCurrentTimezone} from 'mattermost-redux/selectors/entities/timezone';
+import {getStatusForUserId, getUser} from 'mattermost-redux/selectors/entities/users';
+import type {DispatchFunc} from 'mattermost-redux/types/actions';
+import {displayUsername} from 'mattermost-redux/utils/user_utils';
+
+import {openDirectChannelToUserId} from 'actions/channel_actions';
+import * as GlobalActions from 'actions/global_actions';
+import {closeModal} from 'actions/views/modals';
+import {getMembershipForEntities} from 'actions/views/profile_popover';
+import {getSelectedPost} from 'selectors/rhs';
+import {getIsMobileView} from 'selectors/views/browser';
+import {isAnyModalOpen as getIsAnyModalOpen} from 'selectors/views/modals';
+
+import useDidUpdate from 'components/common/hooks/useDidUpdate';
+import Popover from 'components/widgets/popover';
+
+import Pluggable from 'plugins/pluggable';
+import {getHistory} from 'utils/browser_history';
+import Constants, {A11yClassNames, A11yCustomEventTypes, UserStatuses} from 'utils/constants';
+import type {A11yFocusEventDetail} from 'utils/constants';
+import * as Keyboard from 'utils/keyboard';
+import {shouldFocusMainTextbox} from 'utils/post_utils';
+import * as Utils from 'utils/utils';
+
+import type {GlobalState} from 'types/store';
+
+import ProfilePopoverActions from './profile_popover_actions';
+import ProfilePopoverAvatar from './profile_popover_avatar';
+import ProfilePopoverCustomStatus from './profile_popover_custom_status';
+import ProfilePopoverEdit from './profile_popover_edit';
+import ProfilePopoverEmail from './profile_popover_email';
+import ProfilePopoverLastActive from './profile_popover_last_active';
+import ProfilePopoverName from './profile_popover_name';
+import ProfilePopoverOverrideDisclaimer from './profile_popover_override_disclaimer';
+import ProfilePopoverTitle from './profile_popover_title';
+import ProfileTimezone from './profile_timezone';
+
+import './profile_popover.scss';
+
+export interface ProfilePopoverProps extends Omit<React.ComponentProps<typeof Popover>, 'id'> {
+
+    /**
+     * Source URL from the image to display in the popover
+     */
+    src: string;
+
+    /**
+     * Source URL from the image that should override default image
+     */
+    overwriteIcon?: string;
+
+    /**
+     * Set to true of the popover was opened from a webhook post
+     */
+    fromWebhook?: boolean;
+
+    userId: string;
+    channelId?: string;
+
+    hideStatus?: boolean;
+
+    /**
+     * Function to call to hide the popover
+     */
+    hide?: () => void;
+
+    /**
+     * Function to call to return focus to the previously focused element when the popover closes.
+     * If not provided, the popover will automatically determine the previously focused element
+     * and focus that on close. However, if the previously focused element is not correctly detected
+     * by the popover, or the previously focused element will disappear after the popover opens,
+     * it is necessary to provide this function to focus the correct element.
+     */
+    returnFocus?: () => void;
+
+    /**
+     * The overwritten username that should be shown at the top of the popover
+     */
+    overwriteName?: string;
+}
+
+function getDefaultChannelId(state: GlobalState) {
+    const selectedPost = getSelectedPost(state);
+    return selectedPost.exists ? selectedPost.channel_id : getCurrentChannelId(state);
+}
+
+/**
+ * The profile popover, or hovercard, that appears with user information when clicking
+ * on the username or profile picture of a user.
+ */
+const ProfilePopover = ({
+    returnFocus: returnFocusProp,
+    userId,
+    channelId: channelIdProp,
+    hide,
+    overwriteIcon,
+    overwriteName,
+    src,
+    hideStatus,
+    fromWebhook,
+    ...restProps
+}: ProfilePopoverProps) => {
+    const {formatMessage} = useIntl();
+
+    const dispatch = useDispatch<DispatchFunc>();
+    const user = useSelector((state: GlobalState) => getUser(state, userId));
+    const currentTeamId = useSelector((state: GlobalState) => getCurrentTeamId(state));
+    const channelId = useSelector((state: GlobalState) => (channelIdProp || getDefaultChannelId(state)));
+    const isAnyModalOpen = useSelector(getIsAnyModalOpen);
+    const isMobileView = useSelector(getIsMobileView);
+    const teamUrl = useSelector(getCurrentRelativeTeamUrl);
+    const modals = useSelector((state: GlobalState) => state.views.modals);
+    const teammateNameDisplay = useSelector(getTeammateNameDisplaySetting);
+    const status = useSelector((state: GlobalState) => getStatusForUserId(state, userId) || UserStatuses.OFFLINE);
+    const currentUserTimezone = useSelector(getCurrentTimezone);
+    const currentUserId = useSelector(getCurrentUserId);
+
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
+    const [loadingDMChannel, setLoadingDMChannel] = useState<string>();
+    const returnFocus = useMemo(() => {
+        if (returnFocusProp) {
+            return returnFocusProp;
+        }
+
+        const previouslyFocused = document.activeElement;
+        return () => {
+            document.dispatchEvent(new CustomEvent<A11yFocusEventDetail>(
+                A11yCustomEventTypes.FOCUS, {
+                    detail: {
+                        target: previouslyFocused as HTMLElement,
+                        keyboardOnly: true,
+                    },
+                },
+            ));
+        };
+    }, []);
+
+    const handleCloseModals = useCallback(() => {
+        for (const modal in modals?.modalState) {
+            if (!Object.prototype.hasOwnProperty.call(modals, modal)) {
+                continue;
+            }
+            if (modals?.modalState[modal].open) {
+                dispatch(closeModal(modal));
+            }
+        }
+    }, [modals]);
+
+    const handleShowDirectChannel = useCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        if (!user) {
+            return;
+        }
+
+        if (loadingDMChannel !== undefined) {
+            return;
+        }
+        setLoadingDMChannel(user.id);
+
+        handleCloseModals();
+        const result = await dispatch(openDirectChannelToUserId(user.id));
+        if (!result.error) {
+            if (isMobileView) {
+                GlobalActions.emitCloseRightHandSide();
+            }
+            setLoadingDMChannel(undefined);
+            hide?.();
+            getHistory().push(`${teamUrl}/messages/@${user.username}`);
+        }
+    }, [user, loadingDMChannel, handleCloseModals, isMobileView, hide, teamUrl]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (shouldFocusMainTextbox(e, document.activeElement)) {
+            hide?.();
+        } else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) {
+            returnFocus();
+        }
+    }, [hide, returnFocus]);
+
+    useEffect(() => {
+        if (currentTeamId && userId) {
+            dispatch(getMembershipForEntities(
+                currentTeamId,
+                userId,
+                channelId,
+            ));
+        }
+
+        // Focus the close button when the popover first opens, to bring the focus into the popover.
+        document.dispatchEvent(new CustomEvent<A11yFocusEventDetail>(
+            A11yCustomEventTypes.FOCUS, {
+                detail: {
+                    target: closeButtonRef.current,
+                    keyboardOnly: true,
+                },
+            },
+        ));
+    }, []);
+
+    useDidUpdate(() => {
+        hide?.();
+    }, [isAnyModalOpen]);
+
+    if (!user) {
+        return null;
+    }
+
+    const urlSrc = overwriteIcon || src;
+    const haveOverrideProp = Boolean(overwriteIcon || overwriteName);
+    const fullname = overwriteName || Utils.getFullName(user);
+
+    const displayName = displayUsername(user, teammateNameDisplay);
+
+    const tabCatcher = (
+        <span
+            tabIndex={0}
+            onFocus={(e) => (e.relatedTarget as HTMLElement).focus()}
+        />
+    );
+
+    return (
+        <Popover
+            {...restProps}
+            id='user-profile-popover'
+        >
+            {tabCatcher}
+            <div
+                role='dialog'
+                aria-label={formatMessage(
+                    {
+                        id: 'profile_popover.profileLabel',
+                        defaultMessage: 'Profile for {name}',
+                    },
+                    {name: displayName},
+                )}
+                onKeyDown={handleKeyDown}
+                className={A11yClassNames.POPUP}
+                aria-modal={true}
+            >
+                <ProfilePopoverTitle
+                    channelId={channelId}
+                    closeButtonRef={closeButtonRef}
+                    isBot={user.is_bot}
+                    returnFocus={returnFocus}
+                    roles={user.roles}
+                    userId={user.id}
+                    username={user.username}
+                    hide={hide}
+                />
+                <div className='user-profile-popover__content'>
+                    <ProfilePopoverAvatar
+                        hideStatus={hideStatus}
+                        urlSrc={urlSrc}
+                        username={user.username}
+                        status={status}
+                    />
+                    <ProfilePopoverLastActive userId={user.id}/>
+                    <ProfilePopoverName
+                        user={user}
+                        haveOverrideProp={haveOverrideProp}
+                        fullname={fullname}
+                    />
+                    <hr className='divider divider--expanded'/>
+                    <ProfilePopoverEmail
+                        email={user.email}
+                        haveOverrideProp={haveOverrideProp}
+                        isBot={user.is_bot}
+                    />
+                    <Pluggable
+                        pluggableName='PopoverUserAttributes'
+                        user={user}
+                        hide={hide}
+                        status={hideStatus ? null : status}
+                        fromWebhook={fromWebhook}
+                    />
+                    <ProfileTimezone
+                        currentUserTimezone={currentUserTimezone}
+                        profileUserTimezone={user.timezone}
+                        haveOverrideProp={haveOverrideProp}
+                    />
+                    <ProfilePopoverCustomStatus
+                        currentUserId={currentUserId}
+                        currentUserTimezone={currentUserTimezone}
+                        haveOverrideProp={haveOverrideProp}
+                        hideStatus={hideStatus}
+                        user={user}
+                        returnFocus={returnFocus}
+                        hide={hide}
+                    />
+                    <ProfilePopoverEdit
+                        currentUserId={currentUserId}
+                        handleCloseModals={handleCloseModals}
+                        handleShowDirectChannel={handleShowDirectChannel}
+                        haveOverrideProp={haveOverrideProp}
+                        returnFocus={returnFocus}
+                        userId={user.id}
+                        hide={hide}
+                    />
+                    <ProfilePopoverOverrideDisclaimer
+                        haveOverrideProp={haveOverrideProp}
+                        username={user.username}
+                    />
+                    <ProfilePopoverActions
+                        channelId={channelId}
+                        currentUserId={currentUserId}
+                        fullname={fullname}
+                        handleCloseModals={handleCloseModals}
+                        handleShowDirectChannel={handleShowDirectChannel}
+                        haveOverrideProp={haveOverrideProp}
+                        returnFocus={returnFocus}
+                        user={user}
+                        hide={hide}
+                    />
+                    <Pluggable
+                        pluggableName='PopoverUserActions'
+                        user={user}
+                        hide={hide}
+                        status={hideStatus ? null : status}
+                    />
+                </div>
+            </div>
+            {tabCatcher}
+        </Popover>
+    );
+};
+
+export default React.memo(ProfilePopover);
diff --git a/webapp/channels/src/components/profile_popover/profile_popover.test.tsx b/webapp/channels/src/components/profile_popover/profile_popover.test.tsx
deleted file mode 100644
index 34e28c34ad..0000000000
--- a/webapp/channels/src/components/profile_popover/profile_popover.test.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {Provider} from 'react-redux';
-
-import {CustomStatusDuration} from '@mattermost/types/users';
-
-import {General} from 'mattermost-redux/constants';
-
-import {checkUserInCall} from 'components/profile_popover';
-import ProfilePopover from 'components/profile_popover/profile_popover';
-
-import Pluggable from 'plugins/pluggable';
-import {mountWithIntl, shallowWithIntl} from 'tests/helpers/intl-test-helper';
-import {mockStore} from 'tests/test_store';
-import {TestHelper} from 'utils/test_helper';
-
-describe('components/ProfilePopover', () => {
-    const baseProps = {
-        userId: '0',
-        user: TestHelper.getUserMock({
-            username: 'some_username',
-        }),
-        hide: jest.fn(),
-        src: 'src',
-        currentUserId: '',
-        currentTeamId: 'team_id',
-        isChannelAdmin: false,
-        isTeamAdmin: false,
-        isInCurrentTeam: true,
-        teamUrl: '',
-        canManageAnyChannelMembersInCurrentTeam: true,
-        isCustomStatusEnabled: true,
-        isCustomStatusExpired: false,
-        isMobileView: false,
-        actions: {
-            getMembershipForEntities: jest.fn(),
-            openDirectChannelToUserId: jest.fn(),
-            openModal: jest.fn(),
-            closeModal: jest.fn(),
-            loadBot: jest.fn(),
-        },
-        lastActivityTimestamp: 1632146562846,
-        enableLastActiveTime: true,
-        timestampUnits: [
-            'now',
-            'minute',
-            'hour',
-        ],
-        isCallsEnabled: true,
-        isCallsDefaultEnabledOnAllChannels: true,
-        teammateNameDisplay: General.TEAMMATE_NAME_DISPLAY.SHOW_USERNAME,
-        isAnyModalOpen: false,
-    };
-
-    const initialState = {
-        entities: {
-            teams: {},
-            channels: {
-                channels: {},
-                myMembers: {},
-            },
-            general: {
-                config: {},
-            },
-            users: {
-                currentUserId: '',
-                profiles: {
-                    user1: {
-                        id: 'user1',
-                        roles: '',
-                    },
-                },
-            },
-            preferences: {
-                myPreferences: {},
-            },
-            groups: {
-                groups: {},
-                myGroups: [],
-            },
-            emojis: {
-                customEmoji: {},
-            },
-        },
-        plugins: {
-            components: {
-                CallButton: [],
-            },
-        },
-        views: {
-            rhs: {
-                isSidebarOpen: false,
-            },
-        },
-    };
-
-    test('should match snapshot', () => {
-        const props = {...baseProps};
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot for shared user', () => {
-        const props = {
-            ...baseProps,
-            user: TestHelper.getUserMock({
-                username: 'shared_user',
-                first_name: 'shared',
-                remote_id: 'fakeuser',
-            }),
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should have bot description', () => {
-        const props = {
-            ...baseProps,
-            user: TestHelper.getUserMock({
-                is_bot: true,
-                bot_description: 'bot description',
-            }),
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper.containsMatchingElement(
-            <div
-                key='bot-description'
-            >
-                {'bot description'}
-            </div>,
-        )).toEqual(true);
-    });
-
-    test('should hide add-to-channel option if not on team', () => {
-        const props = {...baseProps};
-        props.isInCurrentTeam = false;
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match props passed into Pluggable component', () => {
-        const hide = jest.fn();
-        const status = 'online';
-        const props = {...baseProps, hide, status};
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-
-        const pluggableProps = {
-            hide,
-            status,
-            user: props.user,
-        };
-        expect(wrapper.find(Pluggable).first().props()).toEqual({...pluggableProps, pluggableName: 'PopoverUserAttributes'});
-        expect(wrapper.find(Pluggable).last().props()).toEqual({...pluggableProps, pluggableName: 'PopoverUserActions'});
-    });
-
-    test('should match snapshot with custom status', () => {
-        const customStatus = {
-            emoji: 'calendar',
-            text: 'In a meeting',
-            duration: CustomStatusDuration.TODAY,
-            expires_at: '2021-05-03T23:59:59.000Z',
-        };
-        const props = {
-            ...baseProps,
-            customStatus,
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot with custom status not set but can set', () => {
-        const props = {
-            ...baseProps,
-            user: {
-                ...baseProps.user,
-                id: '',
-            },
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot with custom status expired', () => {
-        const customStatus = {
-            emoji: 'calendar',
-            text: 'In a meeting',
-            duration: CustomStatusDuration.TODAY,
-            expires_at: '2021-05-03T23:59:59.000Z',
-        };
-        const props = {
-            ...baseProps,
-            isCustomStatusExpired: true,
-            customStatus,
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot with last active display', () => {
-        const props = {
-            ...baseProps,
-            status: 'offline',
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot with no last active display because it is disabled', () => {
-        const props = {
-            ...baseProps,
-            enableLastActiveTime: false,
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should match snapshot when calls are disabled', () => {
-        const props = {
-            ...baseProps,
-            isCallsEnabled: false,
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should disable start call button when user is in another call', () => {
-        const props = {
-            ...baseProps,
-            isUserInCall: true,
-        };
-
-        const wrapper = shallowWithIntl(
-            <ProfilePopover {...props}/>,
-        );
-        expect(wrapper.find('#startCallButton').hasClass('icon-btn-disabled')).toBe(true);
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should show the start call button when isCallsDefaultEnabledOnAllChannels, isCallsCanBeDisabledOnSpecificChannels is false and callsChannelState.enabled is true', () => {
-        const mock = mockStore(initialState);
-        const props = {
-            ...baseProps,
-            isCallsDefaultEnabledOnAllChannels: false,
-            isCallsCanBeDisabledOnSpecificChannels: false,
-        };
-
-        const wrapper = mountWithIntl(
-            <Provider store={mock.store}>
-                <ProfilePopover {...props}/>
-            </Provider>,
-        );
-        expect(wrapper.find('ProfilePopoverCallButton').exists()).toBe(true);
-        expect(wrapper).toMatchSnapshot();
-    });
-});
-
-describe('checkUserInCall', () => {
-    test('missing state', () => {
-        expect(checkUserInCall({
-            'plugins-com.mattermost.calls': {},
-        } as any, 'userA')).toBe(false);
-    });
-
-    test('call state missing', () => {
-        expect(checkUserInCall({
-            'plugins-com.mattermost.calls': {
-                profiles: {
-                    channelID: null,
-                },
-            },
-        } as any, 'userA')).toBe(false);
-    });
-
-    test('user not in call', () => {
-        expect(checkUserInCall({
-            'plugins-com.mattermost.calls': {
-                profiles: {
-                    channelID: {
-                        sessionB: {
-                            id: 'userB',
-                        },
-                    },
-                },
-            },
-        } as any, 'userA')).toBe(false);
-    });
-
-    test('user in call', () => {
-        expect(checkUserInCall({
-            'plugins-com.mattermost.calls': {
-                profiles: {
-                    channelID: {
-                        sessionB: {
-                            id: 'userB',
-                        },
-                        sessionA: {
-                            id: 'userA',
-                        },
-                    },
-                },
-            },
-        } as any, 'userA')).toBe(true);
-    });
-});
diff --git a/webapp/channels/src/components/profile_popover/profile_popover.tsx b/webapp/channels/src/components/profile_popover/profile_popover.tsx
deleted file mode 100644
index bbf251db2a..0000000000
--- a/webapp/channels/src/components/profile_popover/profile_popover.tsx
+++ /dev/null
@@ -1,913 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import classNames from 'classnames';
-import React from 'react';
-import {FormattedMessage, injectIntl} from 'react-intl';
-import type {IntlShape} from 'react-intl';
-
-import {AccountOutlineIcon, AccountPlusOutlineIcon, CloseIcon, EmoticonHappyOutlineIcon, PhoneInTalkIcon, SendIcon} from '@mattermost/compass-icons/components';
-import type {Channel} from '@mattermost/types/channels';
-import type {UserCustomStatus, UserProfile} from '@mattermost/types/users';
-import {CustomStatusDuration} from '@mattermost/types/users';
-
-import {Client4} from 'mattermost-redux/client';
-import type {ActionResult} from 'mattermost-redux/types/actions';
-import {displayUsername, isGuest, isSystemAdmin} from 'mattermost-redux/utils/user_utils';
-
-import * as GlobalActions from 'actions/global_actions';
-
-import AddUserToChannelModal from 'components/add_user_to_channel_modal';
-import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
-import CustomStatusModal from 'components/custom_status/custom_status_modal';
-import CustomStatusText from 'components/custom_status/custom_status_text';
-import ExpiryTime from 'components/custom_status/expiry_time';
-import OverlayTrigger from 'components/overlay_trigger';
-import ProfilePopoverCallButton from 'components/profile_popover_call_button';
-import SharedUserIndicator from 'components/shared_user_indicator';
-import StatusIcon from 'components/status_icon';
-import Timestamp from 'components/timestamp';
-import ToggleModalButton from 'components/toggle_modal_button';
-import Tooltip from 'components/tooltip';
-import UserSettingsModal from 'components/user_settings/modal';
-import Popover from 'components/widgets/popover';
-import BotTag from 'components/widgets/tag/bot_tag';
-import GuestTag from 'components/widgets/tag/guest_tag';
-import Tag from 'components/widgets/tag/tag';
-import Avatar from 'components/widgets/users/avatar';
-
-import Pluggable from 'plugins/pluggable';
-import {getHistory} from 'utils/browser_history';
-import Constants, {A11yClassNames, A11yCustomEventTypes, ModalIdentifiers, UserStatuses} from 'utils/constants';
-import type {A11yFocusEventDetail} from 'utils/constants';
-import {t} from 'utils/i18n';
-import * as Keyboard from 'utils/keyboard';
-import {shouldFocusMainTextbox} from 'utils/post_utils';
-import * as Utils from 'utils/utils';
-
-import type {ModalData} from 'types/actions';
-
-import {ProfileTimezone} from './profile_localtime';
-
-import './profile_popover.scss';
-
-export interface ProfilePopoverProps extends Omit<React.ComponentProps<typeof Popover>, 'id'> {
-
-    /**
-     * Source URL from the image to display in the popover
-     */
-    src: string;
-
-    /**
-     * Source URL from the image that should override default image
-     */
-    overwriteIcon?: string;
-
-    /**
-     * Set to true of the popover was opened from a webhook post
-     */
-    fromWebhook?: boolean;
-
-    /**
-     * User the popover is being opened for
-     */
-    user?: UserProfile;
-    userId: string;
-    channelId?: string;
-
-    /**
-     * Status for the user, either 'offline', 'away', 'dnd' or 'online'
-     */
-    status?: string;
-    hideStatus?: boolean;
-
-    /**
-     * Function to call to hide the popover
-     */
-    hide?: () => void;
-
-    /**
-     * Function to call to return focus to the previously focused element when the popover closes.
-     * If not provided, the popover will automatically determine the previously focused element
-     * and focus that on close. However, if the previously focused element is not correctly detected
-     * by the popover, or the previously focused element will disappear after the popover opens,
-     * it is necessary to provide this function to focus the correct element.
-     */
-    returnFocus?: () => void;
-
-    isBusy?: boolean;
-    isMobileView: boolean;
-
-    /**
-     * Returns state of modals in redux for determing which need to be closed
-     */
-    modals?: {
-        modalState: {
-            [modalId: string]: {
-                open: boolean;
-                dialogProps: Record<string, any>;
-                dialogType: React.ComponentType;
-            };
-        };
-    };
-    currentTeamId: string;
-
-    /**
-     * @internal
-     */
-    currentUserId: string;
-    customStatus?: UserCustomStatus | null;
-    isCustomStatusEnabled: boolean;
-    isCustomStatusExpired: boolean;
-    currentUserTimezone?: string;
-
-    /**
-     * @internal
-     */
-    hasMention?: boolean;
-
-    /**
-     * @internal
-     */
-    isInCurrentTeam: boolean;
-
-    /**
-     * @internal
-     */
-    teamUrl: string;
-
-    /**
-     * @internal
-     */
-    isTeamAdmin: boolean;
-
-    /**
-     * @internal
-     */
-    isChannelAdmin: boolean;
-
-    /**
-     * @internal
-     */
-    canManageAnyChannelMembersInCurrentTeam: boolean;
-
-    /**
-     * @internal
-     */
-    teammateNameDisplay: string;
-
-    /**
-     * The overwritten username that should be shown at the top of the popover
-     */
-    overwriteName?: React.ReactNode;
-
-    /**
-     * @internal
-     */
-    actions: {
-        openModal: <P>(modalData: ModalData<P>) => void;
-        closeModal: (modalId: string) => void;
-        openDirectChannelToUserId: (userId: string) => Promise<ActionResult>;
-        getMembershipForEntities: (teamId: string, userId: string, channelId?: string) => void;
-    };
-    intl: IntlShape;
-    lastActivityTimestamp: number;
-    enableLastActiveTime: boolean;
-    timestampUnits: string[];
-    isCallsEnabled: boolean;
-    isUserInCall?: boolean;
-    isCurrentUserInCall?: boolean;
-    isCallsDefaultEnabledOnAllChannels?: boolean;
-    isCallsCanBeDisabledOnSpecificChannels?: boolean;
-    dMChannel?: Channel | null;
-    isAnyModalOpen: boolean;
-}
-type ProfilePopoverState = {
-    loadingDMChannel?: string;
-    callsChannelState?: ChannelCallsState;
-    callsDMChannelState?: ChannelCallsState;
-};
-
-type ChannelCallsState = {
-    enabled: boolean;
-    id: string;
-};
-
-/**
- * The profile popover, or hovercard, that appears with user information when clicking
- * on the username or profile picture of a user.
- */
-
-class ProfilePopover extends React.PureComponent<ProfilePopoverProps, ProfilePopoverState> {
-    closeButtonRef: React.RefObject<HTMLButtonElement>;
-    returnFocus: () => void;
-
-    static getComponentName() {
-        return 'ProfilePopover';
-    }
-    static defaultProps = {
-        hasMention: false,
-        status: UserStatuses.OFFLINE,
-        customStatus: null,
-    };
-    constructor(props: ProfilePopoverProps) {
-        super(props);
-        this.state = {
-            loadingDMChannel: undefined,
-        };
-        this.closeButtonRef = React.createRef();
-
-        if (this.props.returnFocus) {
-            this.returnFocus = this.props.returnFocus;
-        } else {
-            const previouslyFocused = document.activeElement;
-            this.returnFocus = () => {
-                document.dispatchEvent(new CustomEvent<A11yFocusEventDetail>(
-                    A11yCustomEventTypes.FOCUS, {
-                        detail: {
-                            target: previouslyFocused as HTMLElement,
-                            keyboardOnly: true,
-                        },
-                    },
-                ));
-            };
-        }
-    }
-    componentDidMount() {
-        const {currentTeamId, userId, channelId} = this.props;
-        if (currentTeamId && userId) {
-            this.props.actions.getMembershipForEntities(
-                currentTeamId,
-                userId,
-                channelId,
-            );
-        }
-        if (this.props.isCallsEnabled && this.props.dMChannel) {
-            this.getCallsChannelState(this.props.dMChannel.id).then((data) => {
-                this.setState({callsDMChannelState: data});
-            });
-        }
-
-        if (this.props.isCallsEnabled && this.props.channelId) {
-            this.getCallsChannelState(this.props.channelId).then((data) => {
-                this.setState({callsChannelState: data});
-            });
-        }
-
-        // Focus the close button when the popover first opens, to bring the focus into the popover.
-        document.dispatchEvent(new CustomEvent<A11yFocusEventDetail>(
-            A11yCustomEventTypes.FOCUS, {
-                detail: {
-                    target: this.closeButtonRef.current,
-                    keyboardOnly: true,
-                },
-            },
-        ));
-    }
-
-    componentDidUpdate(prevProps: ProfilePopoverProps) {
-        if (this.props.isAnyModalOpen !== prevProps.isAnyModalOpen) {
-            this.props.hide?.();
-        }
-    }
-
-    handleShowDirectChannel = (e: React.MouseEvent<HTMLButtonElement>) => {
-        const {actions} = this.props;
-        e.preventDefault();
-        if (!this.props.user) {
-            return;
-        }
-        const user = this.props.user;
-        if (this.state.loadingDMChannel !== undefined) {
-            return;
-        }
-        this.setState({loadingDMChannel: user.id});
-        actions.openDirectChannelToUserId(user.id).then((result: ActionResult) => {
-            if (!result.error) {
-                if (this.props.isMobileView) {
-                    GlobalActions.emitCloseRightHandSide();
-                }
-                this.setState({loadingDMChannel: undefined});
-                this.props.hide?.();
-                getHistory().push(`${this.props.teamUrl}/messages/@${user.username}`);
-            }
-        });
-        this.handleCloseModals();
-    };
-    handleEditAccountSettings = () => {
-        if (!this.props.user) {
-            return;
-        }
-        this.props.hide?.();
-        this.props.actions.openModal({
-            modalId: ModalIdentifiers.USER_SETTINGS,
-            dialogType: UserSettingsModal,
-            dialogProps: {isContentProductSettings: false, onExited: this.returnFocus},
-        });
-        this.handleCloseModals();
-    };
-    showCustomStatusModal = () => {
-        this.props.hide?.();
-        const customStatusInputModalData = {
-            modalId: ModalIdentifiers.CUSTOM_STATUS,
-            dialogType: CustomStatusModal,
-            dialogProps: {onExited: this.returnFocus},
-        };
-        this.props.actions.openModal(customStatusInputModalData);
-    };
-    handleAddToChannel = () => {
-        this.props.hide?.();
-        this.handleCloseModals();
-    };
-    handleCloseModals = () => {
-        const {modals} = this.props;
-        for (const modal in modals?.modalState) {
-            if (!Object.prototype.hasOwnProperty.call(modals, modal)) {
-                continue;
-            }
-            if (modals?.modalState[modal].open) {
-                this.props.actions.closeModal(modal);
-            }
-        }
-    };
-    handleKeyDown = (e: React.KeyboardEvent) => {
-        if (shouldFocusMainTextbox(e, document.activeElement)) {
-            this.props.hide?.();
-        } else if (Keyboard.isKeyPressed(e, Constants.KeyCodes.ESCAPE)) {
-            this.returnFocus();
-        }
-    };
-    renderCustomStatus() {
-        const {
-            customStatus,
-            isCustomStatusEnabled,
-            user,
-            currentUserId,
-            hideStatus,
-            isCustomStatusExpired,
-        } = this.props;
-        const customStatusSet = (customStatus?.text || customStatus?.emoji) && !isCustomStatusExpired;
-        const canSetCustomStatus = user?.id === currentUserId;
-        const shouldShowCustomStatus =
-            isCustomStatusEnabled &&
-            !hideStatus &&
-            (customStatusSet || canSetCustomStatus);
-        if (!shouldShowCustomStatus) {
-            return null;
-        }
-        let customStatusContent;
-        let expiryContent;
-        if (customStatusSet) {
-            const customStatusEmoji = (
-                <CustomStatusEmoji
-                    userID={this.props.user?.id}
-                    showTooltip={false}
-                    emojiStyle={{
-                        marginRight: 4,
-                        marginTop: 1,
-                    }}
-                />
-            );
-            customStatusContent = (
-                <div className='d-flex align-items-center'>
-                    {customStatusEmoji}
-                    <CustomStatusText
-                        tooltipDirection='top'
-                        text={customStatus?.text || ''}
-                        className='user-popover__email'
-                    />
-                </div>
-            );
-
-            expiryContent = customStatusSet && customStatus?.expires_at && customStatus.duration !== CustomStatusDuration.DONT_CLEAR && (
-                <ExpiryTime
-                    time={customStatus.expires_at}
-                    timezone={this.props.currentUserTimezone}
-                    className='ml-1'
-                    withinBrackets={true}
-                />
-            );
-        } else if (canSetCustomStatus) {
-            customStatusContent = (
-                <button
-                    className='user-popover__set-custom-status-btn'
-                    onClick={this.showCustomStatusModal}
-                >
-                    <EmoticonHappyOutlineIcon size={14}/>
-                    <FormattedMessage
-                        id='user_profile.custom_status.set_status'
-                        defaultMessage='Set a status'
-                    />
-                </button>
-            );
-        }
-
-        return {customStatusContent, expiryContent};
-    }
-    handleClose = () => {
-        this.props.hide?.();
-        this.returnFocus();
-    };
-    getCallsChannelState(channelId: string): Promise<ChannelCallsState> {
-        let data: Promise<ChannelCallsState>;
-        try {
-            data = Client4.getCallsChannelState(channelId);
-        } catch (error) {
-            return error;
-        }
-
-        return data;
-    }
-    render() {
-        if (!this.props.user) {
-            return null;
-        }
-
-        const keysToBeRemoved: Array<keyof ProfilePopoverProps> = ['user', 'userId', 'channelId', 'src', 'status', 'hideStatus', 'isBusy',
-            'hide', 'hasMention', 'currentUserId', 'currentTeamId', 'teamUrl', 'actions', 'isTeamAdmin',
-            'isChannelAdmin', 'canManageAnyChannelMembersInCurrentTeam', 'intl'];
-        const popoverProps: React.ComponentProps<typeof Popover> = Utils.deleteKeysFromObject({...this.props},
-            keysToBeRemoved);
-        const {formatMessage} = this.props.intl;
-        const dataContent = [];
-        const urlSrc = this.props.overwriteIcon ? this.props.overwriteIcon : this.props.src;
-        dataContent.push(
-            <div
-                className='user-popover-image'
-                key='user-popover-image'
-            >
-                <Avatar
-                    id='userAvatar'
-                    size='xxl'
-                    username={this.props.user?.username || ''}
-                    url={urlSrc}
-                    tabIndex={-1}
-                />
-                <StatusIcon
-                    className='status user-popover-status'
-                    status={this.props.hideStatus ? undefined : this.props.status}
-                    button={true}
-                />
-            </div>,
-        );
-        if (this.props.enableLastActiveTime && this.props.lastActivityTimestamp && this.props.timestampUnits) {
-            dataContent.push(
-                <div
-                    className='user-popover-last-active'
-                    key='user-popover-last-active'
-                >
-                    <FormattedMessage
-                        id='channel_header.lastOnline'
-                        defaultMessage='Last online {timestamp}'
-                        values={{
-                            timestamp: (
-                                <Timestamp
-                                    value={this.props.lastActivityTimestamp}
-                                    units={this.props.timestampUnits}
-                                    useTime={false}
-                                    style={'short'}
-                                />
-                            ),
-                        }}
-                    />
-                </div>,
-            );
-        }
-
-        const fullname = this.props.overwriteName ? this.props.overwriteName : Utils.getFullName(this.props.user);
-        const haveOverrideProp = this.props.overwriteIcon || this.props.overwriteName;
-        if (fullname) {
-            let sharedIcon;
-            if (this.props.user.remote_id) {
-                sharedIcon = (
-                    <SharedUserIndicator
-                        className='shared-user-icon'
-                        withTooltip={true}
-                    />
-                );
-            }
-            dataContent.push(
-                <div
-                    data-testid={`popover-fullname-${this.props.user.username}`}
-                    className='overflow--ellipsis pb-1'
-                    key='user-popover-fullname'
-                >
-                    <span className='user-profile-popover__heading'>{fullname}</span>
-                    {sharedIcon}
-                </div>,
-            );
-        }
-        if (this.props.user.is_bot && !haveOverrideProp) {
-            dataContent.push(
-                <div
-                    key='bot-description'
-                    className='overflow--ellipsis text-nowrap pb-1'
-                >
-                    {this.props.user.bot_description}
-                </div>,
-            );
-        }
-        const userNameClass = classNames('overflow--ellipsis pb-1', {'user-profile-popover__heading': fullname === ''});
-        const userName: React.ReactNode = `@${this.props.user.username}`;
-        dataContent.push(
-            <div
-                id='userPopoverUsername'
-                className={userNameClass}
-                key='user-popover-username'
-            >
-                {userName}
-            </div>,
-        );
-        if (this.props.user.position && !haveOverrideProp) {
-            const position = (this.props.user?.position || '').substring(
-                0,
-                Constants.MAX_POSITION_LENGTH,
-            );
-            dataContent.push(
-                <div
-                    className='text-center'
-                    key='user-popover-position'
-                >
-                    {position}
-                </div>,
-            );
-        }
-        dataContent.push(
-            <hr
-                key='user-popover-hr'
-                className='divider divider--expanded'
-            />,
-        );
-        const email = this.props.user.email || '';
-        if (email && !this.props.user.is_bot && !haveOverrideProp) {
-            dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    title={email}
-                    key='user-popover-email'
-                >
-                    <a
-                        href={'mailto:' + email}
-                        className='text-nowrap text-lowercase user-popover__email pb-1'
-                    >
-                        {email}
-                    </a>
-                </div>,
-            );
-        }
-        dataContent.push(
-            <Pluggable
-                key='profilePopoverPluggable2'
-                pluggableName='PopoverUserAttributes'
-                user={this.props.user}
-                hide={this.props.hide}
-                status={this.props.hideStatus ? null : this.props.status}
-                fromWebhook={this.props.fromWebhook}
-            />,
-        );
-        if (this.props.user.timezone && !haveOverrideProp) {
-            dataContent.push(
-                <ProfileTimezone
-                    currentUserTimezone={this.props.currentUserTimezone}
-                    profileUserTimezone={this.props.user.timezone}
-                    key='user-popover-local-time'
-                />,
-            );
-        }
-
-        const customStatusAndExpiryContent = !haveOverrideProp && this.renderCustomStatus();
-        if (customStatusAndExpiryContent) {
-            const {customStatusContent, expiryContent} = customStatusAndExpiryContent;
-            dataContent.push(
-                <div
-                    key='user-popover-status'
-                    id='user-popover-status'
-                    className='user-popover__time-status-container'
-                >
-                    <span className='user-popover__subtitle'>
-                        <FormattedMessage
-                            id='user_profile.custom_status'
-                            defaultMessage='Status'
-                        />
-                        {expiryContent}
-                    </span>
-                    {customStatusContent}
-                </div>,
-            );
-        }
-        const sendMessageTooltip = (
-            <Tooltip id='sendMessageTooltip'>
-                <FormattedMessage
-                    id='user_profile.send.dm.yourself'
-                    defaultMessage='Send yourself a message'
-                />
-            </Tooltip>
-        );
-        if (this.props.user.id === this.props.currentUserId && !haveOverrideProp) {
-            dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    key='user-popover-settings'
-                    className='popover__row first'
-                >
-                    <button
-                        id='editProfileButton'
-                        type='button'
-                        className='btn'
-                        onClick={this.handleEditAccountSettings}
-                    >
-                        <AccountOutlineIcon
-                            size={16}
-                            aria-label={formatMessage({
-                                id: t('generic_icons.edit'),
-                                defaultMessage: 'Edit Icon',
-                            })}
-                        />
-                        <FormattedMessage
-                            id='user_profile.account.editProfile'
-                            defaultMessage='Edit Profile'
-                        />
-                    </button>
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement='top'
-                        overlay={sendMessageTooltip}
-                    >
-                        <button
-                            type='button'
-                            className='btn icon-btn'
-                            onClick={this.handleShowDirectChannel}
-                        >
-                            <SendIcon
-                                size={18}
-                                aria-label={formatMessage({
-                                    id: t('user_profile.send.dm.icon'),
-                                    defaultMessage: 'Send Message Icon',
-                                })}
-                            />
-                        </button>
-                    </OverlayTrigger>
-                </div>,
-            );
-        }
-        if (haveOverrideProp) {
-            dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    key='user-popover-settings'
-                    className='popover__row first'
-                >
-                    <FormattedMessage
-                        id='user_profile.account.post_was_created'
-                        defaultMessage='This post was created by an integration from @{username}'
-                        values={{
-                            username: this.props.user.username,
-                        }}
-                    />
-                </div>,
-            );
-        }
-        const addToChannelMessage = formatMessage({
-            id: 'user_profile.add_user_to_channel',
-            defaultMessage: 'Add to a Channel',
-        });
-
-        const addToChannelButton = (
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
-                placement='top'
-                overlay={
-                    <Tooltip id='addToChannelTooltip'>
-                        {addToChannelMessage}
-                    </Tooltip>
-                }
-            >
-                <div>
-                    <ToggleModalButton
-                        id='addToChannelButton'
-                        className='btn icon-btn'
-                        ariaLabel={addToChannelMessage}
-                        modalId={ModalIdentifiers.ADD_USER_TO_CHANNEL}
-                        dialogType={AddUserToChannelModal}
-                        dialogProps={{user: this.props.user, onExited: this.returnFocus}}
-                        onClick={this.handleAddToChannel}
-                    >
-                        <AccountPlusOutlineIcon
-                            size={18}
-                            aria-label={formatMessage({
-                                id: t('user_profile.add_user_to_channel.icon'),
-                                defaultMessage: 'Add User to Channel Icon',
-                            })}
-                        />
-                    </ToggleModalButton>
-                </div>
-            </OverlayTrigger>
-        );
-
-        const renderCallButton = () => {
-            const {isCallsEnabled, isCallsDefaultEnabledOnAllChannels, isCallsCanBeDisabledOnSpecificChannels, dMChannel} = this.props;
-            if (
-                !isCallsEnabled ||
-                this.state.callsDMChannelState?.enabled === false ||
-                (!isCallsDefaultEnabledOnAllChannels && !isCallsCanBeDisabledOnSpecificChannels && this.state.callsChannelState?.enabled === false)
-            ) {
-                return null;
-            }
-
-            const disabled = this.props.isUserInCall || this.props.isCurrentUserInCall;
-            const startCallMessage = this.props.isUserInCall ? formatMessage({
-                id: t('user_profile.call.userBusy'),
-                defaultMessage: '{user} is in another call',
-            }, {user: fullname === '' ? this.props.user?.username : fullname},
-            ) : formatMessage({
-                id: t('webapp.mattermost.feature.start_call'),
-                defaultMessage: 'Start Call',
-            });
-            const iconButtonClassname = classNames('btn icon-btn', {'icon-btn-disabled': disabled});
-            const callButton = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='top'
-                    overlay={
-                        <Tooltip id='startCallTooltip'>
-                            {startCallMessage}
-                        </Tooltip>
-                    }
-                >
-                    <button
-                        id='startCallButton'
-                        type='button'
-                        aria-disabled={disabled}
-                        className={iconButtonClassname}
-                    >
-                        <PhoneInTalkIcon
-                            size={18}
-                            aria-label={startCallMessage}
-                        />
-                    </button>
-                </OverlayTrigger>
-            );
-
-            if (disabled) {
-                return callButton;
-            }
-
-            return (
-                <ProfilePopoverCallButton
-                    dmChannel={dMChannel}
-                    userId={this.props.userId}
-                    customButton={callButton}
-                />
-            );
-        };
-
-        if (this.props.user.id !== this.props.currentUserId && !haveOverrideProp) {
-            dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    key='user-popover-dm'
-                    className='popover__row first'
-                >
-                    <button
-                        id='messageButton'
-                        type='button'
-                        className='btn'
-                        onClick={this.handleShowDirectChannel}
-                    >
-                        <SendIcon
-                            size={16}
-                            aria-label={formatMessage({
-                                id: t('user_profile.send.dm.icon'),
-                                defaultMessage: 'Send Message Icon',
-                            })}
-                        />
-                        <FormattedMessage
-                            id='user_profile.send.dm'
-                            defaultMessage='Message'
-                        />
-                    </button>
-                    <div className='popover_row-controlContainer'>
-                        {(this.props.canManageAnyChannelMembersInCurrentTeam && this.props.isInCurrentTeam) ? addToChannelButton : null}
-                        {renderCallButton()}
-                    </div>
-                </div>,
-            );
-        }
-        dataContent.push(
-            <Pluggable
-                key='profilePopoverPluggable3'
-                pluggableName='PopoverUserActions'
-                user={this.props.user}
-                hide={this.props.hide}
-                status={this.props.hideStatus ? null : this.props.status}
-            />,
-        );
-        let roleTitle;
-        if (this.props.user.is_bot) {
-            roleTitle = (
-                <BotTag
-                    className='user-popover__role'
-                    size={'sm'}
-                />
-            );
-        } else if (isGuest(this.props.user.roles)) {
-            roleTitle = (
-                <GuestTag
-                    className='user-popover__role'
-                    size={'sm'}
-                />
-            );
-        } else if (isSystemAdmin(this.props.user.roles)) {
-            roleTitle = (
-                <Tag
-                    className='user-popover__role'
-                    size={'sm'}
-                    text={Utils.localizeMessage(
-                        'admin.permissions.roles.system_admin.name',
-                        'System Admin',
-                    )}
-                />
-            );
-        } else if (this.props.isTeamAdmin) {
-            roleTitle = (
-                <Tag
-                    className='user-popover__role'
-                    size={'sm'}
-                    text={Utils.localizeMessage(
-                        'admin.permissions.roles.team_admin.name',
-                        'Team Admin',
-                    )}
-                />
-            );
-        } else if (this.props.isChannelAdmin) {
-            roleTitle = (
-                <Tag
-                    className='user-popover__role'
-                    size={'sm'}
-                    text={Utils.localizeMessage(
-                        'admin.permissions.roles.channel_admin.name',
-                        'Channel Admin',
-                    )}
-                />
-            );
-        }
-        const title = (
-            <span data-testid={`profilePopoverTitle_${this.props.user.username}`}>
-                {roleTitle}
-                <button
-                    ref={this.closeButtonRef}
-                    className='user-popover__close'
-                    onClick={this.handleClose}
-                >
-                    <CloseIcon
-                        size={18}
-                    />
-                </button>
-            </span>
-        );
-
-        const displayName = displayUsername(this.props.user, this.props.teammateNameDisplay);
-        const titleClassName = classNames('popover-title', {'popover-title_height': !roleTitle});
-
-        const tabCatcher = (
-            <span
-                tabIndex={0}
-                onFocus={(e) => (e.relatedTarget as HTMLElement).focus()}
-            />
-        );
-
-        return (
-            <Popover
-                {...popoverProps}
-                id='user-profile-popover'
-            >
-                {tabCatcher}
-                <div
-                    role='dialog'
-                    aria-label={formatMessage(
-                        {
-                            id: 'profile_popover.profileLabel',
-                            defaultMessage: 'Profile for {name}',
-                        },
-                        {
-                            name: displayName,
-                        },
-                    )}
-                    onKeyDown={this.handleKeyDown}
-                    className={A11yClassNames.POPUP}
-                    aria-modal={true}
-                >
-                    <div className={titleClassName}>
-                        {title}
-                    </div>
-                    <div className='user-profile-popover__content'>
-                        {dataContent}
-                    </div>
-                </div>
-                {tabCatcher}
-            </Popover>
-        );
-    }
-}
-
-export default injectIntl(ProfilePopover);
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_actions/add_to_channel.tsx b/webapp/channels/src/components/profile_popover/profile_popover_actions/add_to_channel.tsx
new file mode 100644
index 0000000000..ae3cf8fb75
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_actions/add_to_channel.tsx
@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
+
+import {AccountPlusOutlineIcon} from '@mattermost/compass-icons/components';
+import type {UserProfile} from '@mattermost/types/users';
+
+import {canManageAnyChannelMembersInCurrentTeam as getCanManageAnyChannelMembersInCurrentTeam} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentTeam, getTeamMember} from 'mattermost-redux/selectors/entities/teams';
+
+import AddUserToChannelModal from 'components/add_user_to_channel_modal';
+import OverlayTrigger from 'components/overlay_trigger';
+import ToggleModalButton from 'components/toggle_modal_button';
+import Tooltip from 'components/tooltip';
+
+import Constants, {ModalIdentifiers} from 'utils/constants';
+
+import type {GlobalState} from 'types/store';
+
+type Props = {
+    user: UserProfile;
+    returnFocus: () => void;
+    handleCloseModals: () => void;
+    hide?: () => void;
+};
+
+function getIsInCurrentTeam(state: GlobalState, userId: string) {
+    const team = getCurrentTeam(state);
+    const teamMember = getTeamMember(state, team.id, userId);
+    return Boolean(teamMember) && teamMember?.delete_at === 0;
+}
+
+const AddToChannel = ({
+    handleCloseModals,
+    returnFocus,
+    user,
+    hide,
+}: Props) => {
+    const {formatMessage} = useIntl();
+
+    const canManageAnyChannelMembersInCurrentTeam = useSelector((state: GlobalState) => getCanManageAnyChannelMembersInCurrentTeam(state));
+    const isInCurrentTeam = useSelector((state: GlobalState) => getIsInCurrentTeam(state, user.id));
+
+    const handleAddToChannel = useCallback(() => {
+        hide?.();
+        handleCloseModals();
+    }, [hide, handleCloseModals]);
+
+    if (!canManageAnyChannelMembersInCurrentTeam || !isInCurrentTeam) {
+        return null;
+    }
+    const addToChannelMessage = formatMessage({
+        id: 'user_profile.add_user_to_channel',
+        defaultMessage: 'Add to a Channel',
+    });
+
+    return (
+        <OverlayTrigger
+            delayShow={Constants.OVERLAY_TIME_DELAY}
+            placement='top'
+            overlay={
+                <Tooltip id='addToChannelTooltip'>
+                    {addToChannelMessage}
+                </Tooltip>
+            }
+        >
+            <div>
+                <ToggleModalButton
+                    id='addToChannelButton'
+                    className='btn icon-btn'
+                    ariaLabel={addToChannelMessage}
+                    modalId={ModalIdentifiers.ADD_USER_TO_CHANNEL}
+                    dialogType={AddUserToChannelModal}
+                    dialogProps={{user, onExited: returnFocus}}
+                    onClick={handleAddToChannel}
+                >
+                    <AccountPlusOutlineIcon
+                        size={18}
+                        aria-label={formatMessage({
+                            id: 'user_profile.add_user_to_channel.icon',
+                            defaultMessage: 'Add User to Channel Icon',
+                        })}
+                    />
+                </ToggleModalButton>
+            </div>
+        </OverlayTrigger>
+    );
+};
+
+export default AddToChannel;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_actions/call_button.test.tsx b/webapp/channels/src/components/profile_popover/profile_popover_actions/call_button.test.tsx
new file mode 100644
index 0000000000..2cbdecff10
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_actions/call_button.test.tsx
@@ -0,0 +1,53 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {checkUserInCall} from './call_button';
+
+describe('checkUserInCall', () => {
+    test('missing state', () => {
+        expect(checkUserInCall({
+            'plugins-com.mattermost.calls': {},
+        } as any, 'userA')).toBe(false);
+    });
+
+    test('call state missing', () => {
+        expect(checkUserInCall({
+            'plugins-com.mattermost.calls': {
+                profiles: {
+                    channelID: null,
+                },
+            },
+        } as any, 'userA')).toBe(false);
+    });
+
+    test('user not in call', () => {
+        expect(checkUserInCall({
+            'plugins-com.mattermost.calls': {
+                profiles: {
+                    channelID: {
+                        sessionB: {
+                            id: 'userB',
+                        },
+                    },
+                },
+            },
+        } as any, 'userA')).toBe(false);
+    });
+
+    test('user in call', () => {
+        expect(checkUserInCall({
+            'plugins-com.mattermost.calls': {
+                profiles: {
+                    channelID: {
+                        sessionB: {
+                            id: 'userB',
+                        },
+                        sessionA: {
+                            id: 'userA',
+                        },
+                    },
+                },
+            },
+        } as any, 'userA')).toBe(true);
+    });
+});
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_actions/call_button.tsx b/webapp/channels/src/components/profile_popover/profile_popover_actions/call_button.tsx
new file mode 100644
index 0000000000..d8d78a1b51
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_actions/call_button.tsx
@@ -0,0 +1,150 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React, {useCallback, useEffect, useState} from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
+
+import {PhoneInTalkIcon} from '@mattermost/compass-icons/components';
+
+import {Client4} from 'mattermost-redux/client';
+import {getChannelByName} from 'mattermost-redux/selectors/entities/channels';
+import {getCallsConfig, getProfilesInCalls} from 'mattermost-redux/selectors/entities/common';
+
+import {isCallsEnabled as getIsCallsEnabled} from 'selectors/calls';
+
+import OverlayTrigger from 'components/overlay_trigger';
+import ProfilePopoverCallButton from 'components/profile_popover_call_button';
+import Tooltip from 'components/tooltip';
+
+import Constants from 'utils/constants';
+import {getDirectChannelName} from 'utils/utils';
+
+import type {GlobalState} from 'types/store';
+type Props = {
+    userId: string;
+    currentUserId: string;
+    channelId?: string;
+    fullname: string;
+    username: string;
+}
+
+type ChannelCallsState = {
+    enabled: boolean;
+    id: string;
+};
+
+export function checkUserInCall(state: GlobalState, userId: string) {
+    for (const profilesMap of Object.values(getProfilesInCalls(state))) {
+        for (const profile of Object.values(profilesMap || {})) {
+            if (profile?.id === userId) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+const CallButton = ({
+    userId,
+    currentUserId,
+    channelId,
+    fullname,
+    username,
+}: Props) => {
+    const {formatMessage} = useIntl();
+
+    const isCallsEnabled = useSelector((state: GlobalState) => getIsCallsEnabled(state));
+    const isUserInCall = useSelector((state: GlobalState) => (isCallsEnabled ? checkUserInCall(state, userId) : undefined));
+    const isCurrentUserInCall = useSelector((state: GlobalState) => (isCallsEnabled ? checkUserInCall(state, currentUserId) : undefined));
+    const callsConfig = useSelector((state: GlobalState) => (isCallsEnabled ? getCallsConfig(state) : undefined));
+    const isCallsDefaultEnabledOnAllChannels = callsConfig?.DefaultEnabled;
+    const isCallsCanBeDisabledOnSpecificChannels = callsConfig?.AllowEnableCalls;
+    const dmChannel = useSelector((state: GlobalState) => getChannelByName(state, getDirectChannelName(currentUserId, userId)));
+
+    const [callsDMChannelState, setCallsDMChannelState] = useState<ChannelCallsState>();
+    const [callsChannelState, setCallsChannelState] = useState<ChannelCallsState>();
+
+    const getCallsChannelState = useCallback((channelId: string): Promise<ChannelCallsState> => {
+        let data: Promise<ChannelCallsState>;
+        try {
+            data = Client4.getCallsChannelState(channelId);
+        } catch (error) {
+            return error;
+        }
+
+        return data;
+    }, []);
+
+    useEffect(() => {
+        if (isCallsEnabled && dmChannel) {
+            getCallsChannelState(dmChannel.id).then((data) => {
+                setCallsDMChannelState(data);
+            });
+        }
+
+        if (isCallsEnabled && channelId) {
+            getCallsChannelState(channelId).then((data) => {
+                setCallsChannelState(data);
+            });
+        }
+    }, []);
+
+    if (
+        !isCallsEnabled ||
+        callsDMChannelState?.enabled === false ||
+        (!isCallsDefaultEnabledOnAllChannels && !isCallsCanBeDisabledOnSpecificChannels && callsChannelState?.enabled === false)
+    ) {
+        return null;
+    }
+
+    const disabled = isUserInCall || isCurrentUserInCall;
+    const startCallMessage = isUserInCall ? formatMessage({
+        id: 'user_profile.call.userBusy',
+        defaultMessage: '{user} is in another call',
+    }, {user: fullname || username},
+    ) : formatMessage({
+        id: 'webapp.mattermost.feature.start_call',
+        defaultMessage: 'Start Call',
+    });
+    const iconButtonClassname = classNames('btn icon-btn', {'icon-btn-disabled': disabled});
+    const callButton = (
+        <OverlayTrigger
+            delayShow={Constants.OVERLAY_TIME_DELAY}
+            placement='top'
+            overlay={
+                <Tooltip id='startCallTooltip'>
+                    {startCallMessage}
+                </Tooltip>
+            }
+        >
+            <button
+                id='startCallButton'
+                type='button'
+                aria-disabled={disabled}
+                className={iconButtonClassname}
+            >
+                <PhoneInTalkIcon
+                    size={18}
+                    aria-label={startCallMessage}
+                />
+            </button>
+        </OverlayTrigger>
+    );
+
+    if (disabled) {
+        return callButton;
+    }
+
+    return (
+        <ProfilePopoverCallButton
+            dmChannel={dmChannel}
+            userId={userId}
+            customButton={callButton}
+        />
+    );
+};
+
+export default CallButton;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_actions/index.tsx b/webapp/channels/src/components/profile_popover/profile_popover_actions/index.tsx
new file mode 100644
index 0000000000..529f14b0d8
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_actions/index.tsx
@@ -0,0 +1,83 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {SendIcon} from '@mattermost/compass-icons/components';
+import type {UserProfile} from '@mattermost/types/users';
+
+import AddToChannel from './add_to_channel';
+import CallButton from './call_button';
+
+type Props = {
+    user: UserProfile;
+    fullname: string;
+    channelId?: string;
+    currentUserId: string;
+    haveOverrideProp: boolean;
+    handleShowDirectChannel: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    returnFocus: () => void;
+    handleCloseModals: () => void;
+    hide?: () => void;
+};
+
+const ProfilePopoverActions = ({
+    currentUserId,
+    haveOverrideProp,
+    user,
+    handleShowDirectChannel,
+    handleCloseModals,
+    returnFocus,
+    hide,
+    fullname,
+    channelId,
+}: Props) => {
+    const {formatMessage} = useIntl();
+
+    if (user.id === currentUserId || haveOverrideProp) {
+        return null;
+    }
+    return (
+        <div
+            data-toggle='tooltip'
+            className='popover__row first'
+        >
+            <button
+                id='messageButton'
+                type='button'
+                className='btn'
+                onClick={handleShowDirectChannel}
+            >
+                <SendIcon
+                    size={16}
+                    aria-label={formatMessage({
+                        id: 'user_profile.send.dm.icon',
+                        defaultMessage: 'Send Message Icon',
+                    })}
+                />
+                <FormattedMessage
+                    id='user_profile.send.dm'
+                    defaultMessage='Message'
+                />
+            </button>
+            <div className='popover_row-controlContainer'>
+                <AddToChannel
+                    handleCloseModals={handleCloseModals}
+                    returnFocus={returnFocus}
+                    user={user}
+                    hide={hide}
+                />
+                <CallButton
+                    channelId={channelId}
+                    currentUserId={currentUserId}
+                    fullname={fullname}
+                    userId={user.id}
+                    username={user.username}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default ProfilePopoverActions;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_avatar.tsx b/webapp/channels/src/components/profile_popover/profile_popover_avatar.tsx
new file mode 100644
index 0000000000..76227ec960
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_avatar.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import StatusIcon from 'components/status_icon';
+import Avatar from 'components/widgets/users/avatar';
+
+type Props = {
+    username?: string;
+    hideStatus?: boolean;
+    status?: string;
+    urlSrc: string;
+}
+const ProfilePopoverAvatar = ({
+    username,
+    hideStatus,
+    status,
+    urlSrc,
+}: Props) => {
+    return (
+        <div className='user-popover-image'>
+            <Avatar
+                id='userAvatar'
+                size='xxl'
+                username={username}
+                url={urlSrc}
+                tabIndex={-1}
+            />
+            <StatusIcon
+                className='status user-popover-status'
+                status={hideStatus ? undefined : status}
+                button={true}
+            />
+        </div>
+    );
+};
+
+export default ProfilePopoverAvatar;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx b/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx
new file mode 100644
index 0000000000..f455f9e1e2
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_custom_status.tsx
@@ -0,0 +1,127 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback, useMemo} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {useDispatch, useSelector} from 'react-redux';
+
+import {EmoticonHappyOutlineIcon} from '@mattermost/compass-icons/components';
+import type {UserProfile} from '@mattermost/types/users';
+import {CustomStatusDuration} from '@mattermost/types/users';
+
+import {openModal} from 'actions/views/modals';
+import {makeGetCustomStatus, isCustomStatusEnabled as getIsCustomStatusEnabled, isCustomStatusExpired as getIsCustomStatusExpired} from 'selectors/views/custom_status';
+
+import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
+import CustomStatusModal from 'components/custom_status/custom_status_modal';
+import CustomStatusText from 'components/custom_status/custom_status_text';
+import ExpiryTime from 'components/custom_status/expiry_time';
+
+import {ModalIdentifiers} from 'utils/constants';
+
+import type {GlobalState} from 'types/store';
+
+type Props = {
+    user: UserProfile;
+    currentUserId: string;
+    hideStatus?: boolean;
+    hide?: () => void;
+    returnFocus?: () => void;
+    currentUserTimezone?: string;
+    haveOverrideProp: boolean;
+}
+
+const emojiStyles: React.CSSProperties = {
+    marginRight: 4,
+    marginTop: 1,
+};
+const ProfilePopoverCustomStatus = ({
+    currentUserId,
+    hideStatus,
+    user,
+    hide,
+    returnFocus,
+    currentUserTimezone,
+    haveOverrideProp,
+}: Props) => {
+    const dispatch = useDispatch();
+    const getCustomStatus = useMemo(makeGetCustomStatus, []);
+    const customStatus = useSelector((state: GlobalState) => getCustomStatus(state, user.id));
+    const isCustomStatusExpired = useSelector((state: GlobalState) => getIsCustomStatusExpired(state, customStatus));
+    const isCustomStatusEnabled = useSelector((state: GlobalState) => getIsCustomStatusEnabled(state));
+
+    const showCustomStatusModal = useCallback(() => {
+        hide?.();
+        const customStatusInputModalData = {
+            modalId: ModalIdentifiers.CUSTOM_STATUS,
+            dialogType: CustomStatusModal,
+            dialogProps: {onExited: returnFocus},
+        };
+        dispatch(openModal(customStatusInputModalData));
+    }, [hide, returnFocus]);
+
+    const customStatusSet = (customStatus?.text || customStatus?.emoji) && !isCustomStatusExpired;
+    const showExpiryTime = customStatusSet && customStatus.expires_at && customStatus.duration !== CustomStatusDuration.DONT_CLEAR;
+    const canSetCustomStatus = user.id === currentUserId;
+    const shouldShowCustomStatus = isCustomStatusEnabled && !haveOverrideProp && !hideStatus && (customStatusSet || canSetCustomStatus);
+
+    if (!shouldShowCustomStatus) {
+        return null;
+    }
+
+    let customStatusContent;
+    if (customStatusSet) {
+        customStatusContent = (
+            <div className='d-flex align-items-center'>
+                <CustomStatusEmoji
+                    userID={user.id}
+                    showTooltip={false}
+                    emojiStyle={emojiStyles}
+                />
+                <CustomStatusText
+                    tooltipDirection='top'
+                    text={customStatus.text || ''}
+                    className='user-popover__email'
+                />
+            </div>
+        );
+    } else if (canSetCustomStatus) {
+        customStatusContent = (
+            <button
+                className='user-popover__set-custom-status-btn'
+                onClick={showCustomStatusModal}
+            >
+                <EmoticonHappyOutlineIcon size={14}/>
+                <FormattedMessage
+                    id='user_profile.custom_status.set_status'
+                    defaultMessage='Set a status'
+                />
+            </button>
+        );
+    }
+
+    return (
+        <div
+            id='user-popover-status'
+            className='user-popover__time-status-container'
+        >
+            <span className='user-popover__subtitle'>
+                <FormattedMessage
+                    id='user_profile.custom_status'
+                    defaultMessage='Status'
+                />
+                {showExpiryTime && (
+                    <ExpiryTime
+                        time={customStatus.expires_at!} // has to be defined since showExpiryTime is true
+                        timezone={currentUserTimezone}
+                        className='ml-1'
+                        withinBrackets={true}
+                    />
+                )}
+            </span>
+            {customStatusContent}
+        </div>
+    );
+};
+
+export default ProfilePopoverCustomStatus;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_edit.tsx b/webapp/channels/src/components/profile_popover/profile_popover_edit.tsx
new file mode 100644
index 0000000000..bad9190107
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_edit.tsx
@@ -0,0 +1,109 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {useDispatch} from 'react-redux';
+
+import {AccountOutlineIcon, SendIcon} from '@mattermost/compass-icons/components';
+
+import {openModal} from 'actions/views/modals';
+
+import OverlayTrigger from 'components/overlay_trigger';
+import Tooltip from 'components/tooltip';
+import UserSettingsModal from 'components/user_settings/modal';
+
+import Constants, {ModalIdentifiers} from 'utils/constants';
+
+type Props = {
+    userId: string;
+    currentUserId: string;
+    haveOverrideProp: boolean;
+    hide?: () => void;
+    returnFocus: () => void;
+    handleCloseModals: () => void;
+    handleShowDirectChannel: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const ProfilePopoverEdit = ({
+    userId,
+    currentUserId,
+    haveOverrideProp,
+    hide,
+    returnFocus,
+    handleCloseModals,
+    handleShowDirectChannel,
+}: Props) => {
+    const {formatMessage} = useIntl();
+    const dispatch = useDispatch();
+
+    const handleEditAccountSettings = useCallback(() => {
+        hide?.();
+        dispatch(openModal({
+            modalId: ModalIdentifiers.USER_SETTINGS,
+            dialogType: UserSettingsModal,
+            dialogProps: {isContentProductSettings: false, onExited: returnFocus},
+        }));
+        handleCloseModals();
+    }, [hide, returnFocus, handleCloseModals]);
+
+    if (userId !== currentUserId || haveOverrideProp) {
+        return null;
+    }
+
+    const sendMessageTooltip = (
+        <Tooltip id='sendMessageTooltip'>
+            <FormattedMessage
+                id='user_profile.send.dm.yourself'
+                defaultMessage='Send yourself a message'
+            />
+        </Tooltip>
+    );
+
+    return (
+        <div
+            data-toggle='tooltip'
+            className='popover__row first'
+        >
+            <button
+                id='editProfileButton'
+                type='button'
+                className='btn'
+                onClick={handleEditAccountSettings}
+            >
+                <AccountOutlineIcon
+                    size={16}
+                    aria-label={formatMessage({
+                        id: 'generic_icons.edit',
+                        defaultMessage: 'Edit Icon',
+                    })}
+                />
+                <FormattedMessage
+                    id='user_profile.account.editProfile'
+                    defaultMessage='Edit Profile'
+                />
+            </button>
+            <OverlayTrigger
+                delayShow={Constants.OVERLAY_TIME_DELAY}
+                placement='top'
+                overlay={sendMessageTooltip}
+            >
+                <button
+                    type='button'
+                    className='btn icon-btn'
+                    onClick={handleShowDirectChannel}
+                >
+                    <SendIcon
+                        size={18}
+                        aria-label={formatMessage({
+                            id: 'user_profile.send.dm.icon',
+                            defaultMessage: 'Send Message Icon',
+                        })}
+                    />
+                </button>
+            </OverlayTrigger>
+        </div>
+    );
+};
+
+export default ProfilePopoverEdit;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_email.tsx b/webapp/channels/src/components/profile_popover/profile_popover_email.tsx
new file mode 100644
index 0000000000..a8592d8196
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_email.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+type Props = {
+    email: string;
+    haveOverrideProp: boolean;
+    isBot: boolean;
+}
+const ProfilePopoverEmail = ({
+    email,
+    haveOverrideProp,
+    isBot,
+}: Props) => {
+    if (!email || isBot || haveOverrideProp) {
+        return null;
+    }
+    return (
+        <div
+            data-toggle='tooltip'
+            title={email}
+        >
+            <a
+                href={'mailto:' + email}
+                className='text-nowrap text-lowercase user-popover__email pb-1'
+            >
+                {email}
+            </a>
+        </div>
+    );
+};
+
+export default ProfilePopoverEmail;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_last_active.tsx b/webapp/channels/src/components/profile_popover/profile_popover_last_active.tsx
new file mode 100644
index 0000000000..56fb3dc3ea
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_last_active.tsx
@@ -0,0 +1,48 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {useSelector} from 'react-redux';
+
+import {displayLastActiveLabel, getLastActiveTimestampUnits, getLastActivityForUserId} from 'mattermost-redux/selectors/entities/users';
+
+import Timestamp from 'components/timestamp';
+
+import type {GlobalState} from 'types/store';
+
+type Props = {
+    userId: string;
+}
+const ProfilePopoverLastActive = ({
+    userId,
+}: Props) => {
+    const lastActivityTimestamp = useSelector((state: GlobalState) => getLastActivityForUserId(state, userId));
+    const enableLastActiveTime = useSelector<GlobalState>((state) => displayLastActiveLabel(state, userId));
+    const timestampUnits = useSelector((state: GlobalState) => getLastActiveTimestampUnits(state, userId));
+
+    if (!enableLastActiveTime) {
+        return null;
+    }
+
+    return (
+        <div className='user-popover-last-active'>
+            <FormattedMessage
+                id='channel_header.lastOnline'
+                defaultMessage='Last online {timestamp}'
+                values={{
+                    timestamp: (
+                        <Timestamp
+                            value={lastActivityTimestamp}
+                            units={timestampUnits}
+                            useTime={false}
+                            style={'short'}
+                        />
+                    ),
+                }}
+            />
+        </div>
+    );
+};
+
+export default ProfilePopoverLastActive;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_name/bot_description.tsx b/webapp/channels/src/components/profile_popover/profile_popover_name/bot_description.tsx
new file mode 100644
index 0000000000..0e41ff9e33
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_name/bot_description.tsx
@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+type Props = {
+    isBot: boolean;
+    haveOverrideProp: boolean;
+    botDescription: string;
+}
+const BotDescription = ({
+    haveOverrideProp,
+    isBot,
+    botDescription,
+}: Props) => {
+    if (!isBot || haveOverrideProp) {
+        return null;
+    }
+    return (
+        <div className='overflow--ellipsis text-nowrap pb-1'>
+            {botDescription}
+        </div>
+    );
+};
+
+export default BotDescription;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_name/full_name.tsx b/webapp/channels/src/components/profile_popover/profile_popover_name/full_name.tsx
new file mode 100644
index 0000000000..135df9198f
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_name/full_name.tsx
@@ -0,0 +1,41 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import SharedUserIndicator from 'components/shared_user_indicator';
+
+type Props = {
+    fullname: string;
+    username: string;
+    remoteId?: string;
+}
+const FullName = ({
+    fullname,
+    username,
+    remoteId,
+}: Props) => {
+    if (!fullname) {
+        return null;
+    }
+
+    let sharedIcon;
+    if (remoteId) {
+        sharedIcon = (
+            <SharedUserIndicator
+                className='shared-user-icon'
+                withTooltip={true}
+            />
+        );
+    }
+    return (
+        <div
+            data-testid={`popover-fullname-${username}`}
+            className='overflow--ellipsis pb-1'
+        >
+            <span className='user-profile-popover__heading'>{fullname}</span>
+            {sharedIcon}
+        </div>
+    );
+};
+export default FullName;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_name/index.tsx b/webapp/channels/src/components/profile_popover/profile_popover_name/index.tsx
new file mode 100644
index 0000000000..8b5ce3bf89
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_name/index.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import type {UserProfile} from '@mattermost/types/users';
+
+import BotDescription from './bot_description';
+import FullName from './full_name';
+import Position from './position';
+import UserName from './user_name';
+
+type Props = {
+    haveOverrideProp: boolean;
+    user: UserProfile;
+    fullname: string;
+}
+const ProfilePopoverName = ({
+    user,
+    haveOverrideProp,
+    fullname,
+}: Props) => {
+    return (
+        <>
+            <FullName
+                fullname={fullname}
+                remoteId={user.remote_id}
+                username={user.username}
+            />
+            <BotDescription
+                botDescription={user.bot_description}
+                haveOverrideProp={haveOverrideProp}
+                isBot={user.is_bot}
+            />
+            <UserName
+                hasFullName={Boolean(fullname)}
+                username={user.username}
+            />
+            <Position
+                haveOverrideProp={haveOverrideProp}
+                position={user.position}
+            />
+        </>
+    );
+};
+
+export default ProfilePopoverName;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_name/position.tsx b/webapp/channels/src/components/profile_popover/profile_popover_name/position.tsx
new file mode 100644
index 0000000000..58ba9b68cd
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_name/position.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import Constants from 'utils/constants';
+
+type Props = {
+    position: string;
+    haveOverrideProp: boolean;
+}
+const Position = ({
+    position,
+    haveOverrideProp,
+}: Props) => {
+    if (!position || haveOverrideProp) {
+        return null;
+    }
+    const positionToRender = (position).substring(
+        0,
+        Constants.MAX_POSITION_LENGTH,
+    );
+    return (
+        <div className='text-center'>
+            {positionToRender}
+        </div>
+    );
+};
+
+export default Position;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_name/user_name.tsx b/webapp/channels/src/components/profile_popover/profile_popover_name/user_name.tsx
new file mode 100644
index 0000000000..b4b56c7d52
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_name/user_name.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+
+type Props = {
+    hasFullName: boolean;
+    username: string;
+}
+
+const UserName = ({
+    hasFullName,
+    username,
+}: Props) => {
+    const userNameClass = classNames('overflow--ellipsis pb-1', {'user-profile-popover__heading': hasFullName});
+    return (
+        <div
+            id='userPopoverUsername'
+            className={userNameClass}
+        >
+            {`@${username}`}
+        </div>
+    );
+};
+
+export default UserName;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_override_disclaimer.tsx b/webapp/channels/src/components/profile_popover/profile_popover_override_disclaimer.tsx
new file mode 100644
index 0000000000..c0e056afdd
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_override_disclaimer.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+type Props = {
+    username: string;
+    haveOverrideProp: boolean;
+}
+const ProfilePopoverOverrideDisclaimer = ({
+    username,
+    haveOverrideProp,
+}: Props) => {
+    if (!haveOverrideProp) {
+        return null;
+    }
+
+    return (
+        <div
+            data-toggle='tooltip'
+            className='popover__row first'
+        >
+            <FormattedMessage
+                id='user_profile.account.post_was_created'
+                defaultMessage='This post was created by an integration from @{username}'
+                values={{
+                    username,
+                }}
+            />
+        </div>
+    );
+};
+
+export default ProfilePopoverOverrideDisclaimer;
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_title.tsx b/webapp/channels/src/components/profile_popover/profile_popover_title.tsx
new file mode 100644
index 0000000000..3f342982d2
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_title.tsx
@@ -0,0 +1,144 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
+
+import {CloseIcon} from '@mattermost/compass-icons/components';
+
+import {getChannelMember} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentTeam, getTeamMember} from 'mattermost-redux/selectors/entities/teams';
+import {isGuest, isSystemAdmin} from 'mattermost-redux/utils/user_utils';
+
+import {getRhsState} from 'selectors/rhs';
+
+import BotTag from 'components/widgets/tag/bot_tag';
+import GuestTag from 'components/widgets/tag/guest_tag';
+import Tag from 'components/widgets/tag/tag';
+
+import type {GlobalState} from 'types/store';
+
+type Props = {
+    isBot: boolean;
+    roles: string;
+    username: string;
+    returnFocus: () => void;
+    hide?: () => void;
+    userId: string;
+    channelId?: string;
+    closeButtonRef: React.RefObject<HTMLButtonElement>;
+}
+
+function getIsTeamAdmin(state: GlobalState, userId: string) {
+    const team = getCurrentTeam(state);
+    const teamMember = getTeamMember(state, team.id, userId);
+
+    return Boolean(teamMember && teamMember.scheme_admin);
+}
+
+function getIsChannelAdmin(state: GlobalState, userId: string, channelId?: string) {
+    if (!channelId) {
+        return false;
+    }
+
+    const channelMember = getChannelMember(state, channelId, userId);
+
+    if (getRhsState(state) !== 'search' && channelMember != null && channelMember.scheme_admin) {
+        return true;
+    }
+
+    return false;
+}
+
+const ProfilePopoverTitle = ({
+    isBot,
+    roles,
+    username,
+    returnFocus,
+    hide,
+    userId,
+    channelId,
+    closeButtonRef,
+}: Props) => {
+    const {formatMessage} = useIntl();
+
+    const isTeamAdmin = useSelector((state: GlobalState) => getIsTeamAdmin(state, userId));
+    const isChannelAdmin = useSelector((state: GlobalState) => getIsChannelAdmin(state, userId, channelId));
+
+    const handleClose = useCallback(() => {
+        hide?.();
+        returnFocus();
+    }, [hide, returnFocus]);
+
+    let roleTitle;
+    if (isBot) {
+        roleTitle = (
+            <BotTag
+                className='user-popover__role'
+                size={'sm'}
+            />
+        );
+    } else if (isGuest(roles)) {
+        roleTitle = (
+            <GuestTag
+                className='user-popover__role'
+                size={'sm'}
+            />
+        );
+    } else if (isSystemAdmin(roles)) {
+        roleTitle = (
+            <Tag
+                className='user-popover__role'
+                size={'sm'}
+                text={formatMessage({
+                    id: 'admin.permissions.roles.system_admin.name',
+                    defaultMessage: 'System Admin',
+                })}
+            />
+        );
+    } else if (isTeamAdmin) {
+        roleTitle = (
+            <Tag
+                className='user-popover__role'
+                size={'sm'}
+                text={formatMessage({
+                    id: 'admin.permissions.roles.team_admin.name',
+                    defaultMessage: 'Team Admin',
+                })}
+            />
+        );
+    } else if (isChannelAdmin) {
+        roleTitle = (
+            <Tag
+                className='user-popover__role'
+                size={'sm'}
+                text={formatMessage({
+                    id: 'admin.permissions.roles.channel_admin.name',
+                    defaultMessage: 'Channel Admin',
+                })}
+            />
+        );
+    }
+    const titleClassName = classNames('popover-title', {'popover-title_height': !roleTitle});
+
+    return (
+        <div className={titleClassName}>
+            <span data-testid={`profilePopoverTitle_${username}`}>
+                {roleTitle}
+                <button
+                    ref={closeButtonRef}
+                    className='user-popover__close'
+                    onClick={handleClose}
+                >
+                    <CloseIcon
+                        size={18}
+                    />
+                </button>
+            </span>
+        </div>
+    );
+};
+
+export default ProfilePopoverTitle;
diff --git a/webapp/channels/src/components/profile_popover/profile_localtime.tsx b/webapp/channels/src/components/profile_popover/profile_timezone.tsx
similarity index 91%
rename from webapp/channels/src/components/profile_popover/profile_localtime.tsx
rename to webapp/channels/src/components/profile_popover/profile_timezone.tsx
index 2c407e403a..4b0bf2b377 100644
--- a/webapp/channels/src/components/profile_popover/profile_localtime.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_timezone.tsx
@@ -14,6 +14,7 @@ import Timestamp from 'components/timestamp';
 type ProfileTimezoneProps = {
     profileUserTimezone?: UserTimezone;
     currentUserTimezone: string | undefined;
+    haveOverrideProp: boolean;
 }
 
 const returnTimeDiff = (
@@ -51,12 +52,15 @@ const returnTimeDiff = (
     );
 };
 
-export const ProfileTimezone = (
-    {
-        currentUserTimezone,
-        profileUserTimezone,
-    }: ProfileTimezoneProps,
-) => {
+const ProfileTimezone = ({
+    currentUserTimezone,
+    profileUserTimezone,
+    haveOverrideProp,
+}: ProfileTimezoneProps) => {
+    if (haveOverrideProp || !profileUserTimezone) {
+        return null;
+    }
+
     const profileTimezone = getUserCurrentTimezone(profileUserTimezone) || 'UTC';
     const profileTimezoneShort = profileTimezone ? DateTime.now().setZone(profileTimezone).offsetNameShort : undefined;
 
@@ -98,3 +102,5 @@ export const ProfileTimezone = (
         </div>
     );
 };
+
+export default ProfileTimezone;
diff --git a/webapp/channels/src/components/shared_user_indicator.tsx b/webapp/channels/src/components/shared_user_indicator.tsx
index c364e38135..4b93944fe6 100644
--- a/webapp/channels/src/components/shared_user_indicator.tsx
+++ b/webapp/channels/src/components/shared_user_indicator.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';
@@ -15,7 +15,14 @@ type Props = {
 };
 
 const SharedUserIndicator: React.FC<Props> = (props: Props): JSX.Element => {
-    const sharedIcon = (<i className={`${props.className || ''} icon-circle-multiple-outline`}/>);
+    const intl = useIntl();
+
+    const sharedIcon = (
+        <i
+            className={`${props.className || ''} icon-circle-multiple-outline`}
+            aria-label={intl.formatMessage({id: 'shared_user_indicator.aria_label', defaultMessage: 'shared user indicator'})}
+        />
+    );
 
     if (!props.withTooltip) {
         return sharedIcon;
diff --git a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
index 3f75708eb7..fe822b13c7 100644
--- a/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
+++ b/webapp/channels/src/components/threading/channel_threads/thread_footer/__snapshots__/thread_footer.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
             defaultOverlayShown={false}
             disabled={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 className="user-profile-popover"
                 hide={[Function]}
                 src="/api/v4/users/5/image?_=0"
@@ -312,7 +312,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
             defaultOverlayShown={false}
             disabled={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 className="user-profile-popover"
                 hide={[Function]}
                 src="/api/v4/users/4/image?_=0"
@@ -538,7 +538,7 @@ exports[`components/threading/channel_threads/thread_footer should report total
             defaultOverlayShown={false}
             disabled={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 className="user-profile-popover"
                 hide={[Function]}
                 src="/api/v4/users/3/image?_=0"
@@ -1241,7 +1241,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
             defaultOverlayShown={false}
             disabled={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 className="user-profile-popover"
                 hide={[Function]}
                 src="/api/v4/users/5/image?_=0"
@@ -1467,7 +1467,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
             defaultOverlayShown={false}
             disabled={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 className="user-profile-popover"
                 hide={[Function]}
                 src="/api/v4/users/4/image?_=0"
@@ -1693,7 +1693,7 @@ exports[`components/threading/channel_threads/thread_footer should show unread i
             defaultOverlayShown={false}
             disabled={false}
             overlay={
-              <Memo(Connect(injectIntl(ProfilePopover)))
+              <Memo(ProfilePopover)
                 className="user-profile-popover"
                 hide={[Function]}
                 src="/api/v4/users/3/image?_=0"
diff --git a/webapp/channels/src/components/user_list_row/user_list_row.tsx b/webapp/channels/src/components/user_list_row/user_list_row.tsx
index ade0b2b829..2ecacbcd36 100644
--- a/webapp/channels/src/components/user_list_row/user_list_row.tsx
+++ b/webapp/channels/src/components/user_list_row/user_list_row.tsx
@@ -130,7 +130,6 @@ const UserListRow = ({user, status, extraInfo = [], actions = [], actionProps, a
                     >
                         <UserProfile
                             userId={user.id}
-                            hasMention={true}
                             displayUsername={true}
                         />
                         {
diff --git a/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap b/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
index 6c737d8f40..12f9b3f2cc 100644
--- a/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
+++ b/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
@@ -5,12 +5,10 @@ exports[`components/UserProfile should match snapshot 1`] = `
   <OverlayTrigger
     defaultOverlayShown={false}
     overlay={
-      <Memo(Connect(injectIntl(ProfilePopover)))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
-        hasMention={false}
         hide={[Function]}
         hideStatus={false}
-        isBusy={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
@@ -39,12 +37,10 @@ exports[`components/UserProfile should match snapshot, when displayUsername is e
   <OverlayTrigger
     defaultOverlayShown={false}
     overlay={
-      <Memo(Connect(injectIntl(ProfilePopover)))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
-        hasMention={false}
         hide={[Function]}
         hideStatus={false}
-        isBusy={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
@@ -81,12 +77,10 @@ exports[`components/UserProfile should match snapshot, when user is shared 1`] =
   <OverlayTrigger
     defaultOverlayShown={false}
     overlay={
-      <Memo(Connect(injectIntl(ProfilePopover)))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
-        hasMention={false}
         hide={[Function]}
         hideStatus={false}
-        isBusy={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
@@ -119,12 +113,10 @@ exports[`components/UserProfile should match snapshot, with colorization 1`] = `
   <OverlayTrigger
     defaultOverlayShown={false}
     overlay={
-      <Memo(Connect(injectIntl(ProfilePopover)))
+      <Memo(ProfilePopover)
         className="user-profile-popover"
-        hasMention={false}
         hide={[Function]}
         hideStatus={false}
-        isBusy={false}
         overwriteName=""
         src="/api/v4/users/undefined/image?_=0"
         userId="user_id"
diff --git a/webapp/channels/src/components/user_profile/user_profile.tsx b/webapp/channels/src/components/user_profile/user_profile.tsx
index 6f6652359b..64545afce5 100644
--- a/webapp/channels/src/components/user_profile/user_profile.tsx
+++ b/webapp/channels/src/components/user_profile/user_profile.tsx
@@ -23,14 +23,12 @@ export type Props = {
     user?: UserProfileType;
     userId: string;
     displayName?: string;
-    isBusy?: boolean;
     isShared?: boolean;
-    overwriteName?: React.ReactNode;
+    overwriteName?: string;
     overwriteIcon?: string;
     disablePopover?: boolean;
     displayUsername?: boolean;
     colorize?: boolean;
-    hasMention?: boolean;
     hideStatus?: boolean;
     isMobileView: boolean;
     isRHS?: boolean;
@@ -44,7 +42,6 @@ export default class UserProfile extends PureComponent<Props> {
     static defaultProps: Partial<Props> = {
         disablePopover: false,
         displayUsername: false,
-        hasMention: false,
         hideStatus: false,
         isRHS: false,
         overwriteName: '',
@@ -66,11 +63,9 @@ export default class UserProfile extends PureComponent<Props> {
             disablePopover,
             displayName,
             displayUsername,
-            isBusy,
             isMobileView,
             isRHS,
             isShared,
-            hasMention,
             hideStatus,
             overwriteName,
             overwriteIcon,
@@ -142,10 +137,8 @@ export default class UserProfile extends PureComponent<Props> {
                             userId={userId}
                             channelId={channelId}
                             src={profileImg}
-                            isBusy={isBusy}
                             hide={this.hideProfilePopover}
                             hideStatus={hideStatus}
-                            hasMention={hasMention}
                             overwriteName={overwriteName}
                             overwriteIcon={overwriteIcon}
                         />
diff --git a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
index 58395a11b5..6e10b239b7 100644
--- a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/1/image?_=0"
@@ -266,7 +266,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/6/image?_=0"
@@ -492,7 +492,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/7/image?_=0"
@@ -862,7 +862,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/1/image?_=0"
@@ -1088,7 +1088,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/2/image?_=0"
@@ -1314,7 +1314,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/3/image?_=0"
@@ -1682,7 +1682,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/1/image?_=0"
@@ -1908,7 +1908,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/2/image?_=0"
@@ -2134,7 +2134,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
         defaultOverlayShown={false}
         disabled={false}
         overlay={
-          <Memo(Connect(injectIntl(ProfilePopover)))
+          <Memo(ProfilePopover)
             className="user-profile-popover"
             hide={[Function]}
             src="/api/v4/users/3/image?_=0"
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 0b063660f0..871d89776c 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4798,6 +4798,7 @@
   "setting_picture.select": "Select",
   "setting_picture.uploading": "Uploading...",
   "shared_channel_indicator.tooltip": "Shared with trusted organizations",
+  "shared_user_indicator.aria_label": "shared user indicator",
   "shared_user_indicator.tooltip": "From a trusted organization",
   "shortcuts.browser.channel_next": "Forward in history:\tAlt|Right",
   "shortcuts.browser.channel_next.mac": "Forward in history:\t⌘|]",
diff --git a/webapp/channels/src/selectors/views/custom_status.ts b/webapp/channels/src/selectors/views/custom_status.ts
index 09509e62b6..c7928fb21f 100644
--- a/webapp/channels/src/selectors/views/custom_status.ts
+++ b/webapp/channels/src/selectors/views/custom_status.ts
@@ -20,7 +20,7 @@ import {isDateWithinDaysRange, TimeInformation} from 'utils/utils';
 
 import type {GlobalState} from 'types/store';
 
-export function makeGetCustomStatus(): (state: GlobalState, userID?: string) => UserCustomStatus {
+export function makeGetCustomStatus(): (state: GlobalState, userID?: string) => UserCustomStatus | undefined {
     return createSelector(
         'makeGetCustomStatus',
         (state: GlobalState, userID?: string) => (userID ? getUser(state, userID) : getCurrentUser(state)),
diff --git a/webapp/channels/src/store/index.js b/webapp/channels/src/store/index.js
index ef2805aad2..a223adc0ae 100644
--- a/webapp/channels/src/store/index.js
+++ b/webapp/channels/src/store/index.js
@@ -22,9 +22,10 @@ window.Observable = Observable;
 
 const localForage = extendPrototype(baseLocalForage);
 
-export default function configureStore(preloadedState) {
+export default function configureStore(preloadedState, additionalReducers) {
+    const reducers = additionalReducers ? {...appReducers, ...additionalReducers} : appReducers;
     const store = configureServiceStore({
-        appReducers,
+        appReducers: reducers,
         getAppReducers,
         preloadedState,
     });
diff --git a/webapp/channels/src/tests/react_testing_utils.tsx b/webapp/channels/src/tests/react_testing_utils.tsx
index e986179800..938b8f328d 100644
--- a/webapp/channels/src/tests/react_testing_utils.tsx
+++ b/webapp/channels/src/tests/react_testing_utils.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import {IntlProvider} from 'react-intl';
 import {Provider} from 'react-redux';
 import {Router} from 'react-router-dom';
+import type {Reducer} from 'redux';
 
 import type {DeepPartial} from '@mattermost/types/utilities';
 
@@ -26,6 +27,7 @@ export type FullContextOptions = {
     intlMessages?: Record<string, string>;
     locale?: string;
     useMockedStore?: boolean;
+    pluginReducers?: string[];
 }
 
 export const renderWithContext = (
@@ -39,7 +41,7 @@ export const renderWithContext = (
         useMockedStore: partialOptions?.useMockedStore ?? false,
     };
 
-    const testStore = configureOrMockStore(initialState, options.useMockedStore);
+    const testStore = configureOrMockStore(initialState, options.useMockedStore, partialOptions?.pluginReducers);
 
     // Store these in an object so that they can be maintained through rerenders
     const renderState = {
@@ -82,7 +84,7 @@ export const renderWithContext = (
          * Rerenders the component after replacing the entire store state with the provided one.
          */
         replaceStoreState: (newInitialState: DeepPartial<GlobalState>) => {
-            renderState.store = configureOrMockStore(newInitialState, renderState.options.useMockedStore);
+            renderState.store = configureOrMockStore(newInitialState, renderState.options.useMockedStore, partialOptions?.pluginReducers);
 
             results.rerender(renderState.component);
         },
@@ -92,15 +94,25 @@ export const renderWithContext = (
          */
         updateStoreState: (stateDiff: DeepPartial<GlobalState>) => {
             const newInitialState = mergeObjects(renderState.store.getState(), stateDiff);
-            renderState.store = configureOrMockStore(newInitialState, renderState.options.useMockedStore);
+            renderState.store = configureOrMockStore(newInitialState, renderState.options.useMockedStore, partialOptions?.pluginReducers);
 
             results.rerender(renderState.component);
         },
     };
 };
 
-function configureOrMockStore<T>(initialState: DeepPartial<T>, useMockedStore: boolean) {
-    let testStore = configureStore(initialState);
+function configureOrMockStore<T>(initialState: DeepPartial<T>, useMockedStore: boolean, extraReducersKeys?: string[]) {
+    let testReducers;
+    if (extraReducersKeys) {
+        const newReducers: Record<string, Reducer> = {};
+        extraReducersKeys.forEach((v) => {
+            newReducers[v] = (state = null) => state;
+        });
+
+        testReducers = newReducers;
+    }
+
+    let testStore = configureStore(initialState, testReducers);
     if (useMockedStore) {
         testStore = mockStore(testStore.getState());
     }
diff --git a/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap b/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap
index 1496d526c1..4bbf9a49e4 100644
--- a/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap
+++ b/webapp/channels/src/utils/__snapshots__/message_html_to_component.test.tsx.snap
@@ -11,7 +11,6 @@ exports[`messageHtmlToComponent At mention 1`] = `
       <Memo(Connect(Component))
         disableGroupHighlight={false}
         disableHighlight={false}
-        hasMention={true}
         mentionName="joram"
       >
         @joram
@@ -29,7 +28,6 @@ exports[`messageHtmlToComponent At mention 2`] = `
     <Memo(Connect(Component))
       disableGroupHighlight={false}
       disableHighlight={true}
-      hasMention={true}
       mentionName="joram"
     >
       @joram
@@ -46,7 +44,6 @@ exports[`messageHtmlToComponent At mention with group highlight disabled 1`] = `
     <Memo(Connect(Component))
       disableGroupHighlight={false}
       disableHighlight={false}
-      hasMention={true}
       mentionName="developers"
     >
       @developers
@@ -63,7 +60,6 @@ exports[`messageHtmlToComponent At mention with group highlight disabled 2`] = `
     <Memo(Connect(Component))
       disableGroupHighlight={true}
       disableHighlight={false}
-      hasMention={true}
       mentionName="developers"
     >
       @developers
diff --git a/webapp/channels/src/utils/message_html_to_component.tsx b/webapp/channels/src/utils/message_html_to_component.tsx
index c336881480..bc3b557661 100644
--- a/webapp/channels/src/utils/message_html_to_component.tsx
+++ b/webapp/channels/src/utils/message_html_to_component.tsx
@@ -129,7 +129,6 @@ export function messageHtmlToComponent(html: string, options: Options = {}) {
                 const callAtMention = (
                     <AtMention
                         mentionName={mentionName}
-                        hasMention={true}
                         disableHighlight={!mentionHighlight}
                         disableGroupHighlight={disableGroupHighlight}
                         channelId={options.channelId}