MM-61437: [Shared Channels] Disable DM button from profile for shared channel user (#30903)

webapp/channels/src/components/profile_popover/profile_popover_other_user_row.test.tsx

@@ -0,0 +1,133 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {screen} from '@testing-library/react';
+import React from 'react';
+
+import {renderWithContext} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
+
+import type {GlobalState} from 'types/store';
+
+import ProfilePopoverOtherUserRow from './profile_popover_other_user_row';
+
+describe('components/ProfilePopoverOtherUserRow', () => {
+    const baseProps = {
+        user: TestHelper.getUserMock({id: 'user1'}),
+        fullname: 'User One',
+        currentUserId: 'currentUser',
+        haveOverrideProp: false,
+        handleShowDirectChannel: jest.fn(),
+        returnFocus: jest.fn(),
+        handleCloseModals: jest.fn(),
+        hide: jest.fn(),
+    };
+
+    const initialState = {
+        entities: {
+            general: {
+                config: {
+                    FeatureFlagEnableSharedChannelsDMs: 'false',
+                },
+            },
+        },
+    } as unknown as GlobalState;
+
+    test('should show message button for regular users', () => {
+        renderWithContext(
+            <ProfilePopoverOtherUserRow
+                {...baseProps}
+            />,
+            initialState,
+        );
+
+        expect(screen.getByText('Message')).toBeInTheDocument();
+    });
+
+    test('should show message button for remote users when EnableSharedChannelsDMs is enabled', () => {
+        const remoteUser = {
+            ...baseProps.user,
+            remote_id: 'remote1',
+        };
+
+        const state = {
+            ...initialState,
+            entities: {
+                ...initialState.entities,
+                general: {
+                    ...initialState.entities?.general,
+                    config: {
+                        ...initialState.entities?.general?.config,
+                        FeatureFlagEnableSharedChannelsDMs: 'true',
+                    },
+                },
+            },
+        };
+
+        renderWithContext(
+            <ProfilePopoverOtherUserRow
+                {...baseProps}
+                user={remoteUser}
+            />,
+            state,
+        );
+
+        expect(screen.getByText('Message')).toBeInTheDocument();
+    });
+
+    test('should hide message button for remote users when EnableSharedChannelsDMs is disabled', () => {
+        const remoteUser = {
+            ...baseProps.user,
+            remote_id: 'remote1',
+        };
+
+        const state = {
+            ...initialState,
+            entities: {
+                ...initialState.entities,
+                general: {
+                    ...initialState.entities?.general,
+                    config: {
+                        ...initialState.entities?.general?.config,
+                        FeatureFlagEnableSharedChannelsDMs: 'false',
+                    },
+                },
+            },
+        };
+
+        renderWithContext(
+            <ProfilePopoverOtherUserRow
+                {...baseProps}
+                user={remoteUser}
+            />,
+            state,
+        );
+
+        expect(screen.queryByText('Message')).not.toBeInTheDocument();
+    });
+
+    test('should show message button for local users when EnableSharedChannelsDMs is disabled', () => {
+        const state = {
+            ...initialState,
+            entities: {
+                ...initialState.entities,
+                general: {
+                    ...initialState.entities?.general,
+                    config: {
+                        ...initialState.entities?.general?.config,
+                        FeatureFlagEnableSharedChannelsDMs: 'false',
+                    },
+                },
+            },
+        };
+
+        renderWithContext(
+            <ProfilePopoverOtherUserRow
+                {...baseProps}
+            />,
+            state,
+        );
+
+        expect(screen.getByText('Message')).toBeInTheDocument();
+    });
+});

webapp/channels/src/components/profile_popover/profile_popover_other_user_row.tsx

@@ -3,12 +3,17 @@
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import {useSelector} from 'react-redux';
 
 import type {UserProfile} from '@mattermost/types/users';
 
+import {getFeatureFlagValue} from 'mattermost-redux/selectors/entities/general';
+
 import ProfilePopoverAddToChannel from 'components/profile_popover/profile_popover_add_to_channel';
 import ProfilePopoverCallButtonWrapper from 'components/profile_popover/profile_popover_call_button_wrapper';
 
+import type {GlobalState} from 'types/store';
+
 type Props = {
     user: UserProfile;
     fullname: string;
@@ -30,26 +35,34 @@ const ProfilePopoverOtherUserRow = ({
     hide,
     fullname,
 }: Props) => {
+    const isSharedChannelsDMsEnabled = useSelector((state: GlobalState) => getFeatureFlagValue(state, 'EnableSharedChannelsDMs') === 'true');
+
     if (user.id === currentUserId || haveOverrideProp) {
         return null;
     }
 
+    // Hide Message button for remote users when EnableSharedChannelsDMs feature flag is off
+    const isRemoteUser = Boolean(user.remote_id);
+    const showMessageButton = isSharedChannelsDMsEnabled || !isRemoteUser;
+
     return (
         <div className='user-popover__bottom-row-container'>
-            <button
-                type='button'
-                className='btn btn-primary btn-sm'
-                onClick={handleShowDirectChannel}
-            >
-                <i
-                    className='icon icon-send'
-                    aria-hidden='true'
-                />
-                <FormattedMessage
-                    id='user_profile.send.dm'
-                    defaultMessage='Message'
-                />
-            </button>
+            {showMessageButton && (
+                <button
+                    type='button'
+                    className='btn btn-primary btn-sm'
+                    onClick={handleShowDirectChannel}
+                >
+                    <i
+                        className='icon icon-send'
+                        aria-hidden='true'
+                    />
+                    <FormattedMessage
+                        id='user_profile.send.dm'
+                        defaultMessage='Message'
+                    />
+                </button>
+            )}
             <div className='user-popover__bottom-row-end'>
                 <ProfilePopoverAddToChannel
                     handleCloseModals={handleCloseModals}

webapp/channels/src/sass/components/_post.scss

@@ -1276,7 +1276,7 @@
         .shared-user-icon {
             width: 16px;
             height: 20px;
-            margin: 0 0 0 4px;
+            margin: 0 0 0 2px;
             color: rgba(var(--center-channel-color-rgb), 0.75);
             font-size: 16px;
             line-height: 20px;