MM-58451 Add/Update Shared Channel indicator locations (#28130)

* update shared channel sidebar

* implement for direct channels

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/searchable_channel_list.tsx

@@ -129,14 +129,6 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
 
         if (isArchivedChannel(channel)) {
             channelTypeIcon = <ArchiveOutlineIcon size={18}/>;
-        } else if (channel.shared) {
-            channelTypeIcon = (
-                <SharedChannelIndicator
-                    className='shared-channel-icon'
-                    channelType={channel.type}
-                    withTooltip={true}
-                />
-            );
         } else if (isPrivateChannel(channel)) {
             channelTypeIcon = <LockOutlineIcon size={18}/>;
         } else {
@@ -206,6 +198,14 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             </button>
         );
 
+        const sharedChannelIcon = channel.shared ? (
+            <SharedChannelIndicator
+                className='shared-channel-icon'
+                channelType={channel.type}
+                withTooltip={true}
+            />
+        ) : null;
+
         return (
             <div
                 className='more-modal__row'
@@ -220,6 +220,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                     <div className='style--none more-modal__name'>
                         {channelTypeIcon}
                         <span id='channelName'>{channel.display_name}</span>
+                        {sharedChannelIcon}
                     </div>
                     {channelPurposeContainer}
                 </div>

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_base_channel/__snapshots__/sidebar_base_channel.test.tsx.snap

@@ -26,7 +26,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_base_channel should match sn
   icon={
     <SidebarBaseChannelIcon
       channelType="O"
-      isSharedChannel={false}
     />
   }
   label="channel_display_name"
@@ -60,7 +59,6 @@ exports[`components/sidebar/sidebar_channel/sidebar_base_channel should match sn
   icon={
     <SidebarBaseChannelIcon
       channelType="P"
-      isSharedChannel={false}
     />
   }
   label="channel_display_name"
@@ -95,9 +93,9 @@ exports[`components/sidebar/sidebar_channel/sidebar_base_channel should match sn
   icon={
     <SidebarBaseChannelIcon
       channelType="O"
-      isSharedChannel={true}
     />
   }
+  isSharedChannel={true}
   label="channel_display_name"
   link="/team_name/channels/"
 />
@@ -130,9 +128,9 @@ exports[`components/sidebar/sidebar_channel/sidebar_base_channel should match sn
   icon={
     <SidebarBaseChannelIcon
       channelType="P"
-      isSharedChannel={true}
     />
   }
+  isSharedChannel={true}
   label="channel_display_name"
   link="/team_name/channels/"
 />

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_base_channel/sidebar_base_channel.tsx

@@ -50,7 +50,6 @@ const SidebarBaseChannel = ({
 
     const channelIcon = (
         <SidebarBaseChannelIcon
-            isSharedChannel={Boolean(channel.shared)}
             channelType={channel.type}
         />
     );
@@ -70,6 +69,7 @@ const SidebarBaseChannel = ({
             ariaLabelPrefix={ariaLabelPrefix}
             channelLeaveHandler={channelLeaveHandler!}
             icon={channelIcon}
+            isSharedChannel={channel.shared}
         />
     );
 };

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_base_channel/sidebar_base_channel_icon.tsx

@@ -5,28 +5,15 @@ import React from 'react';
 
 import type {ChannelType} from '@mattermost/types/channels';
 
-import SharedChannelIndicator from 'components/shared_channel_indicator';
-
 import Constants from 'utils/constants';
 
 type Props = {
-    isSharedChannel: boolean;
     channelType: ChannelType;
 }
 
 const SidebarBaseChannelIcon = ({
-    isSharedChannel,
     channelType,
 }: Props) => {
-    if (isSharedChannel) {
-        return (
-            <SharedChannelIndicator
-                className='icon'
-                channelType={channelType}
-                withTooltip={true}
-            />
-        );
-    }
     if (channelType === Constants.OPEN_CHANNEL) {
         return (
             <i className='icon icon-globe'/>

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx

@@ -10,6 +10,7 @@ import type {Channel} from '@mattermost/types/channels';
 import {mark, trackEvent} from 'actions/telemetry_actions';
 
 import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
+import SharedChannelIndicator from 'components/shared_channel_indicator';
 import {ChannelsAndDirectMessagesTour} from 'components/tours/onboarding_tour';
 import WithTooltip from 'components/with_tooltip';
 
@@ -61,6 +62,7 @@ type Props = {
     hasUrgent: boolean;
     rhsState?: RhsState;
     rhsOpen?: boolean;
+    isSharedChannel?: boolean;
 
     actions: {
         markMostRecentPostInChannelAsUnread: (channelId: string) => void;
@@ -223,6 +225,14 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
             />
         ) : null;
 
+        const sharedChannelIcon = this.props.isSharedChannel ? (
+            <SharedChannelIndicator
+                className='icon'
+                channelType={channel.type}
+                withTooltip={true}
+            />
+        ) : null;
+
         const content = (
             <>
                 <SidebarChannelIcon
@@ -238,6 +248,7 @@ export default class SidebarChannelLink extends React.PureComponent<Props, State
                         pluggableName='SidebarChannelLinkLabel'
                         channel={this.props.channel}
                     />
+                    {sharedChannelIcon}
                 </div>
                 <ChannelPencilIcon id={channel.id}/>
                 <ChannelMentionBadge

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_direct_channel/__snapshots__/sidebar_direct_channel.test.tsx.snap

@@ -31,6 +31,7 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
       wrapperClass="DirectChannel__profile-picture"
     />
   }
+  isSharedChannel={false}
   label="channel_display_name"
   link="/team_name/messages/@some-user"
   teammateId="user_id"
@@ -69,6 +70,7 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
       wrapperClass="DirectChannel__profile-picture"
     />
   }
+  isSharedChannel={false}
   label="channel_display_name"
   link="/team_name/messages/@some-user"
   teammateId="user_id"
@@ -106,6 +108,7 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
       wrapperClass="DirectChannel__profile-picture"
     />
   }
+  isSharedChannel={false}
   label="channel_display_name (you)"
   link="/team_name/messages/@some-user"
   teammateId="user_id"
@@ -139,6 +142,7 @@ exports[`components/sidebar/sidebar_channel/sidebar_direct_channel should match
       className="icon icon-archive-outline"
     />
   }
+  isSharedChannel={false}
   label="channel_display_name"
   link="/team_name/messages/@some-user"
   teammateId="user_id"

webapp/channels/src/components/sidebar/sidebar_channel/sidebar_direct_channel/sidebar_direct_channel.tsx

@@ -110,6 +110,7 @@ class SidebarDirectChannel extends React.PureComponent<Props> {
                 label={displayName}
                 channelLeaveHandler={this.handleLeaveChannel}
                 icon={this.getIcon()}
+                isSharedChannel={teammate.remote_id !== undefined}
             />
         );
     }

webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap

@@ -50,10 +50,6 @@ exports[`components/UserProfile should match snapshot, when user is shared 1`] =
   >
     nickname
   </ProfilePopoverController>
-  <SharedUserIndicator
-    className="shared-user-icon"
-    id="sharedUserIndicator-user_id"
-  />
 </Fragment>
 `;
 

webapp/channels/src/components/user_profile/user_profile.tsx

@@ -31,7 +31,6 @@ export default function UserProfile({
     userId,
     channelId,
     overwriteIcon,
-    isShared,
 }: Props) {
     let name: ReactNode;
     if (user && displayUsername) {
@@ -62,8 +61,12 @@ export default function UserProfile({
     }
 
     let profileImg = '';
+    let userIsRemote = false;
     if (user) {
         profileImg = imageURLForUser(user.id, user.last_picture_update);
+        if (user.remote_id) {
+            userIsRemote = true;
+        }
     }
 
     return (
@@ -81,10 +84,11 @@ export default function UserProfile({
             >
                 {name}
             </ProfilePopover>
-            {(isShared) &&
+            {userIsRemote &&
             <SharedUserIndicator
                 id={`sharedUserIndicator-${userId}`}
                 className='shared-user-icon'
+                withTooltip={true}
             />
             }
             {(user && user.is_bot) && <BotTag/>}