[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
2024-03-28 13:49:42 +00:00
--- a/webapp/channels/src/components/admin_console/system_users/system_users.scss
+++ b/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;
                }
--- a/webapp/channels/src/components/admin_console/system_users/system_users.tsx
+++ b/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'
--- a/webapp/channels/src/components/profile_popover/profile_popover_name/full_name.tsx
+++ b/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}
            />
--- a/webapp/channels/src/components/shared_user_indicator.tsx
+++ b/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 Tooltip from 'components/tooltip';
-
-import {Constants} from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';

 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`}
-            aria-label={intl.formatMessage({id: 'shared_user_indicator.aria_label', defaultMessage: 'shared user indicator'})}
+            className={classNames('icon icon-circle-multiple-outline', props.className)}
+            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
-            delayShow={Constants.OVERLAY_TIME_DELAY}
-            placement='bottom'
-            overlay={sharedTooltip}
+        <WithTooltip
+            id={props.id}
+            title={props.title || intl.formatMessage({id: 'shared_user_indicator.tooltip', defaultMessage: 'From trusted organizations'})}
+            placement={props.placement || 'bottom'}
        >
            {sharedIcon}
-        </OverlayTrigger>
+        </WithTooltip>
    );
 };

--- a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
+++ b/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}
        />
--- a/webapp/channels/src/components/suggestion/search_user_provider.tsx
+++ b/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}
            />
--- 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
@@ -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>
--- a/webapp/channels/src/components/user_profile/user_profile.tsx
+++ b/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}
                />
--- a/webapp/channels/src/i18n/en.json
+++ b/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",
--- a/webapp/channels/src/sass/utils/_mixins.scss
+++ b/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;
+}