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>
2024-09-11 15:10:46 -06:00
--- a/webapp/channels/src/components/searchable_channel_list.tsx
+++ b/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>
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_base_channel/snapshots/sidebar_base_channel.test.tsx.snap
+++ b/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/"
 />
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_base_channel/sidebar_base_channel.tsx
+++ b/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}
        />
    );
 };
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_base_channel/sidebar_base_channel_icon.tsx
+++ b/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'/>
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_channel_link/sidebar_channel_link.tsx
+++ b/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
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_direct_channel/snapshots/sidebar_direct_channel.test.tsx.snap
+++ b/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"
--- a/webapp/channels/src/components/sidebar/sidebar_channel/sidebar_direct_channel/sidebar_direct_channel.tsx
+++ b/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}
            />
        );
    }
--- 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
@@ -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>
 `;

--- a/webapp/channels/src/components/user_profile/user_profile.tsx
+++ b/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/>}