[MM-57369] Remote users no longer labeled as 'remote' after updates to the System Console Users UI (#26612)

* new mixin created for text ellipsis
* shared user indicator api modified
* use shared icon indicator instead of tag

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

@@ -1,8 +1,4 @@
-@mixin textElipsis {
+@import "sass/utils/_mixins";
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
 
 table.systemUsersTable {
     thead {
@@ -44,19 +40,25 @@ table.systemUsersTable {
                 }
 
                 .displayName {
+                    display: flex;
+                    align-items: center;
                     align-self: start;
                     color: var(--sys-denim-button-bg);
                     font-weight: 600;
                     grid-area: displayName;
 
-                    @include textElipsis;
+                    @include textEllipsis;
+
+                    .icon {
+                        color: rgba(var(--sys-denim-center-channel-text-rgb), 0.8);
+                    }
                 }
 
                 .userName {
                     align-self: start;
                     grid-area: userName;
 
-                    @include textElipsis;
+                    @include textEllipsis;
                 }
 
                 .error {
@@ -64,9 +66,9 @@ table.systemUsersTable {
                     align-self: start;
                     grid-area: error;
 
-                    @include textElipsis;
+                    @include textEllipsis;
 
-                    // this need to be here, after textElipsis because
+                    // this need to be here, after textEllipsis because
                     // we need to override white-space property coming from the mixing
                     white-space: normal;
                 }

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

@@ -17,6 +17,7 @@ import Preferences from 'mattermost-redux/constants/preferences';
 import {AdminConsoleListTable, ElapsedDurationCell, PAGE_SIZES, LoadingStates} from 'components/admin_console/list_table';
 import type {TableMeta} from 'components/admin_console/list_table';
 import AlertBanner from 'components/alert_banner';
+import SharedUserIndicator from 'components/shared_user_indicator';
 import AdminHeader from 'components/widgets/admin_console/admin_header';
 
 import {getDisplayName, imageURLForUser} from 'utils/utils';
@@ -258,6 +259,7 @@ function SystemUsers(props: Props) {
                     defaultMessage: 'User details',
                 }),
                 cell: (info: CellContext<UserReportWithError, null>) => {
+                    const isRemoteUser = Boolean(info.row.original?.remote_id?.length);
                     return (
                         <div>
                             <div className='profilePictureContainer'>
@@ -272,6 +274,17 @@ function SystemUsers(props: Props) {
                                 title={getDisplayName(info.row.original)}
                             >
                                 {getDisplayName(info.row.original) || ''}
+                                {isRemoteUser && (
+                                    <SharedUserIndicator
+                                        id={`sharedUserIndicator-${info.row.original.id}`}
+                                        title={formatMessage({id: 'admin.system_users.list.userIsRemote', defaultMessage: 'Remote user'})}
+                                        ariaLabel={formatMessage({id: 'admin.system_users.list.userIsRemoteAriaLabel', defaultMessage: 'This is a remote user'})}
+                                        role='img'
+                                        className='icon-12'
+                                        withTooltip={true}
+                                        placement='top'
+                                    />
+                                )}
                             </div>
                             <div
                                 className='userName'

webapp/channels/src/components/profile_popover/profile_popover_name/full_name.tsx

@@ -23,6 +23,7 @@ const FullName = ({
     if (remoteId) {
         sharedIcon = (
             <SharedUserIndicator
+                id={`sharedUserIndicator-${username}`}
                 className='shared-user-icon'
                 withTooltip={true}
             />

webapp/channels/src/components/shared_user_indicator.tsx

@@ -1,26 +1,36 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
+import type {AriaRole, AriaAttributes} from 'react';
 import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {useIntl} from 'react-intl';
 
-import OverlayTrigger from 'components/overlay_trigger';
+import WithTooltip from 'components/with_tooltip';
-import Tooltip from 'components/tooltip';
-
-import {Constants} from 'utils/constants';
 
 type Props = {
+    id: string;
+
+    /**
+     * If not provided, the default title 'From trusted organizations' will be used for the tooltip.
+    */
+    title?: string;
+    ariaLabel?: AriaAttributes['aria-label'];
+    role?: AriaRole;
+
     className?: string;
     withTooltip?: boolean;
+    placement?: string;
 };
 
-const SharedUserIndicator: React.FC<Props> = (props: Props): JSX.Element => {
+const SharedUserIndicator = (props: Props) => {
     const intl = useIntl();
 
     const sharedIcon = (
         <i
-            className={`${props.className || ''} icon-circle-multiple-outline`}
+            className={classNames('icon icon-circle-multiple-outline', props.className)}
-            aria-label={intl.formatMessage({id: 'shared_user_indicator.aria_label', defaultMessage: 'shared user indicator'})}
+            aria-label={props.ariaLabel || intl.formatMessage({id: 'shared_user_indicator.aria_label', defaultMessage: 'shared user indicator'})}
+            role={props?.role}
         />
     );
 
@@ -28,23 +38,14 @@ const SharedUserIndicator: React.FC<Props> = (props: Props): JSX.Element => {
         return sharedIcon;
     }
 
-    const sharedTooltip = (
-        <Tooltip id='sharedTooltip'>
-            <FormattedMessage
-                id='shared_user_indicator.tooltip'
-                defaultMessage='From trusted organizations'
-            />
-        </Tooltip>
-    );
-
     return (
-        <OverlayTrigger
+        <WithTooltip
-            delayShow={Constants.OVERLAY_TIME_DELAY}
+            id={props.id}
-            placement='bottom'
+            title={props.title || intl.formatMessage({id: 'shared_user_indicator.tooltip', defaultMessage: 'From trusted organizations'})}
-            overlay={sharedTooltip}
+            placement={props.placement || 'bottom'}
         >
             {sharedIcon}
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };
 

webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx

@@ -149,6 +149,7 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
 
     const sharedIcon = item.remote_id ? (
         <SharedUserIndicator
+            id={`sharedUserIndicator-${item.id}`}
             className='shared-user-icon'
             withTooltip={true}
         />

webapp/channels/src/components/suggestion/search_user_provider.tsx

@@ -35,6 +35,7 @@ const SearchUserSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Us
     if (item.remote_id) {
         sharedIcon = (
             <SharedUserIndicator
+                id={`sharedUserIndicator-${item.id}`}
                 className='mention__shared-user-icon'
                 withTooltip={true}
             />

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

@@ -103,6 +103,7 @@ exports[`components/UserProfile should match snapshot, when user is shared 1`] =
   </OverlayTrigger>
   <SharedUserIndicator
     className="shared-user-icon"
+    id="sharedUserIndicator-user_id"
     withTooltip={true}
   />
 </Fragment>

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

@@ -118,6 +118,7 @@ export default class UserProfile extends PureComponent<Props> {
         if (isShared) {
             sharedIcon = (
                 <SharedUserIndicator
+                    id={`sharedUserIndicator-${userId}`}
                     className='shared-user-icon'
                     withTooltip={true}
                 />

webapp/channels/src/i18n/en.json

@@ -2557,6 +2557,8 @@
   "admin.system_users.list.memberSince.yesterday": "Yesterday",
   "admin.system_users.list.totalPosts": "Messages posted",
   "admin.system_users.list.userDetails": "User details",
+  "admin.system_users.list.userIsRemote": "Remote user",
+  "admin.system_users.list.userIsRemoteAriaLabel": "This is a remote user",
   "admin.system_users.mysql_stats.desc": "Use of MySQL may limit the availability of some statistics features. We recommend transitioning from MySQL to PostgreSQL to fully leverage improved performance and comprehensive analytics. While you’re still using MySQL, please use the export functionality to view all user statistics.",
   "admin.system_users.mysql_stats.dismiss": "Dismiss",
   "admin.system_users.mysql_stats.learn_more": "Learn more",

webapp/channels/src/sass/utils/_mixins.scss

@@ -414,3 +414,9 @@
         transform: translate3d(4px, 0, 0);
     }
 }
+
+@mixin textEllipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}