MM-58452-Update system console with shared indicator (#28131)

* update system console with shared indicator

* lint fixes, test fixes, i18 fixes

* minor tweeks

* Update webapp/channels/src/components/channel_members_rhs/member.tsx

Co-authored-by: Caleb Roseland <caleb@calebroseland.com>

---------

Co-authored-by: Caleb Roseland <caleb@calebroseland.com>

webapp/channels/src/components/admin_console/system_users/system_users.tsx

@@ -165,7 +165,10 @@ function SystemUsers(props: Props) {
 
     function handleRowClick(userId: UserReport['id']) {
         if (userId.length !== 0) {
-            history.push(`/admin_console/user_management/user/${userId}`);
+            const remoteID = userReports.find((userReport) => userReport.id === userId)?.remote_id;
+            if (!remoteID) {
+                history.push(`/admin_console/user_management/user/${userId}`);
+            }
         }
     }
 
@@ -403,16 +406,21 @@ function SystemUsers(props: Props) {
                     id: 'admin.system_users.list.actions',
                     defaultMessage: 'Actions',
                 }),
-                cell: (info: CellContext<UserReport, null>) => (
+                cell: (info: CellContext<UserReport, null>) => {
-                    <SystemUsersListAction
+                    if (info.row.original?.remote_id?.length) {
-                        rowIndex={info.cell.row.index}
+                        return (<></>);
-                        tableId={tableId}
+                    }
-                        user={info.row.original}
+                    return (
-                        currentUser={props.currentUser}
+                        <SystemUsersListAction
-                        updateUser={(updatedUser) => updateUserReport(info.row.original.id, updatedUser)}
+                            rowIndex={info.cell.row.index}
-                        onError={(error) => updateUserReport(info.row.original.id, {error})}
+                            tableId={tableId}
-                    />
+                            user={info.row.original}
-                ),
+                            currentUser={props.currentUser}
+                            updateUser={(updatedUser) => updateUserReport(info.row.original.id, updatedUser)}
+                            onError={(error) => updateUserReport(info.row.original.id, {error})}
+                        />
+                    );
+                },
                 enableHiding: false,
                 enablePinning: true,
                 enableSorting: false,

webapp/channels/src/components/admin_console/team_channel_settings/channel/list/__snapshots__/channel_list.test.tsx.snap

@@ -979,8 +979,7 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
               className="group-name overflow--ellipsis row-content"
               data-testid="channel-display-name"
             >
-              <SharedChannelIndicator
+              <GlobeIcon
-                channelType="O"
                 className="channel-icon"
               />
               <span
@@ -988,6 +987,11 @@ exports[`admin_console/team_channel_settings/channel/ChannelList should match sn
               >
                 DN
               </span>
+              <SharedChannelIndicator
+                channelType="O"
+                className="channel-icon"
+                withTooltip={true}
+              />
             </span>,
             "team": <span
               className="group-description row-content"

webapp/channels/src/components/admin_console/team_channel_settings/channel/list/channel_list.tsx

@@ -203,14 +203,13 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
                 );
             }
 
-            if (channel.shared) {
+            const sharedChannelIcon = channel.shared ? (
-                iconToDisplay = (
+                <SharedChannelIndicator
-                    <SharedChannelIndicator
+                    className='channel-icon'
-                        className='channel-icon'
+                    channelType={channel.type}
-                        channelType={channel.type}
+                    withTooltip={true}
-                    />
+                />
-                );
+            ) : null;
-            }
 
             return {
                 cells: {
@@ -224,6 +223,7 @@ export default class ChannelList extends React.PureComponent<ChannelListProps, C
                             <span className='TeamList_channelDisplayName'>
                                 {channel.display_name}
                             </span>
+                            {sharedChannelIcon}
                         </span>
                     ),
                     team: (

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

@@ -80,32 +80,7 @@ exports[`components/channel_members_dropdown should match snapshot for dropdown
 </MenuWrapper>
 `;
 
-exports[`components/channel_members_dropdown should match snapshot for dropdown with shared user 1`] = `
+exports[`components/channel_members_dropdown should match snapshot for dropdown with shared user 1`] = `<Fragment />`;
-<div
-  className="more-modal__shared-actions"
->
-  <WithTooltip
-    id="sharedTooltip"
-    placement="bottom"
-    title={
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="From trusted organizations"
-        id="shared_user_indicator.tooltip"
-      />
-    }
-  >
-    <span>
-      <MemoizedFormattedMessage
-        defaultMessage="Shared Member"
-        id="channel_members_dropdown.shared_member"
-      />
-      <i
-        className="shared-user-icon icon-circle-multiple-outline"
-      />
-    </span>
-  </WithTooltip>
-</div>
-`;
 
 exports[`components/channel_members_dropdown should match snapshot for group_constrained channel 1`] = `
 <div>

webapp/channels/src/components/channel_members_dropdown/channel_members_dropdown.tsx

@@ -15,7 +15,6 @@ import LeaveChannelModal from 'components/leave_channel_modal';
 import DropdownIcon from 'components/widgets/icons/fa_dropdown_icon';
 import Menu from 'components/widgets/menu/menu';
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
-import WithTooltip from 'components/with_tooltip';
 
 import {Constants, ModalIdentifiers} from 'utils/constants';
 import * as Utils from 'utils/utils';
@@ -154,28 +153,7 @@ export default function ChannelMembersDropdown({
     const currentRole = renderRole(isChannelAdmin, isGuest);
 
     if (user.remote_id) {
-        return (
+        return (<></>);
-            <div className='more-modal__shared-actions'>
-                <WithTooltip
-                    id='sharedTooltip'
-                    placement='bottom'
-                    title={
-                        <FormattedMessage
-                            id='shared_user_indicator.tooltip'
-                            defaultMessage='From trusted organizations'
-                        />
-                    }
-                >
-                    <span>
-                        <FormattedMessage
-                            id='channel_members_dropdown.shared_member'
-                            defaultMessage='Shared Member'
-                        />
-                        <i className='shared-user-icon icon-circle-multiple-outline'/>
-                    </span>
-                </WithTooltip>
-            </div>
-        );
     }
 
     const canMakeUserChannelMember = canChangeMemberRoles && isChannelAdmin;

webapp/channels/src/components/channel_members_rhs/member.tsx

@@ -16,6 +16,7 @@ import ChannelMembersDropdown from 'components/channel_members_dropdown';
 import CustomStatusEmoji from 'components/custom_status/custom_status_emoji';
 import ProfilePicture from 'components/profile_picture';
 import ProfilePopover from 'components/profile_popover';
+import SharedChannelIndicator from 'components/shared_channel_indicator';
 import GuestTag from 'components/widgets/tag/guest_tag';
 import WithTooltip from 'components/with_tooltip';
 
@@ -85,6 +86,12 @@ const RoleChooser = styled.div`
     }
 `;
 
+const SharedIcon = styled.span`
+    margin: 0 0 0 4px;
+    font-size: 16px;
+    line-height: 20px;
+`;
+
 interface Props {
     className?: string;
     channel: Channel;
@@ -128,6 +135,15 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
                     <DisplayName>
                         {member.displayName}
                         {isGuest(member.user.roles) && <GuestTag/>}
+                        {member.user.remote_id &&
+                        (
+                            <SharedIcon>
+                                <SharedChannelIndicator
+                                    channelType={'O'}
+                                    withTooltip={true}
+                                />
+                            </SharedIcon>
+                        )}
                     </DisplayName>
                     {
                         member.displayName === member.user.username ? null : <Username>{'@'}{member.user.username}</Username>

webapp/channels/src/i18n/en.json

@@ -3154,7 +3154,6 @@
   "channel_members_dropdown.make_channel_members": "Make Channel Members",
   "channel_members_dropdown.menuAriaLabel": "Change the role of channel member",
   "channel_members_dropdown.remove_from_channel": "Remove from Channel",
-  "channel_members_dropdown.shared_member": "Shared Member",
   "channel_members_modal.addNew": " Add Members",
   "channel_members_modal.members": " Members",
   "channel_members_rhs.action_bar.add_button": "Add",