[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 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+@import "sass/utils/_mixins";
 
 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'