MM-55146_fix activate/deactivate ux when ldap users (#25167)

Co-authored-by: Mattermost Build <build@mattermost.com>

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

@@ -22,6 +22,8 @@ describe('components/admin_console/system_users/system_users_dropdown/system_use
         username: 'other-user',
     });
 
+    const mockMouseEvent = TestHelper.getMockMouseButtonEvent();
+
     const requiredProps: Props = {
         user,
         mfaEnabled: true,
@@ -57,21 +59,29 @@ describe('components/admin_console/system_users/system_users_dropdown/system_use
     test('handleMakeActive() should have called updateUserActive', async () => {
         const wrapper = shallow<SystemUsersDropdown>(<SystemUsersDropdown {...requiredProps}/>);
 
-        const event = {preventDefault: jest.fn()};
-        wrapper.instance().handleMakeActive(event);
+        wrapper.instance().handleMakeActive(mockMouseEvent, false);
 
         expect(requiredProps.actions.updateUserActive).toHaveBeenCalledTimes(1);
         expect(requiredProps.actions.updateUserActive).toHaveBeenCalledWith(requiredProps.user.id, true);
     });
 
+    test('handleMakeActive() should not have called updateUserActive if user auth service is LDAP', async () => {
+        const ldapUserProps = {...requiredProps, user: {...requiredProps.user, auth_service: 'ldap'}};
+
+        const wrapper = shallow<SystemUsersDropdown>(<SystemUsersDropdown {...ldapUserProps}/>);
+
+        wrapper.instance().handleMakeActive(mockMouseEvent, true);
+
+        expect(requiredProps.actions.updateUserActive).toHaveBeenCalledTimes(0);
+    });
+
     test('handleMakeActive() should have called onError', async () => {
         const retVal = {error: {server_error_id: 'id', message: 'error'}};
         const updateUserActive = jest.fn().mockResolvedValue(retVal);
         const props = {...requiredProps, actions: {...requiredProps.actions, updateUserActive}};
         const wrapper = shallow<SystemUsersDropdown>(<SystemUsersDropdown {...props}/>);
 
-        const event = {preventDefault: jest.fn()};
-        await wrapper.instance().handleMakeActive(event);
+        await wrapper.instance().handleMakeActive(mockMouseEvent, false);
 
         expect(requiredProps.onError).toHaveBeenCalledTimes(1);
         expect(requiredProps.onError).toHaveBeenCalledWith({id: retVal.error.server_error_id, ...retVal.error});
@@ -86,6 +96,18 @@ describe('components/admin_console/system_users/system_users_dropdown/system_use
         expect(requiredProps.actions.updateUserActive).toHaveBeenCalledWith(requiredProps.user.id, false);
     });
 
+    test('handleShowDeactivateMemberModal() should not have show the deactivation modal if user auth service is LDAP', async () => {
+        const ldapUserProps = {...requiredProps, user: {...requiredProps.user, auth_service: 'ldap'}};
+
+        const wrapper = shallow<SystemUsersDropdown>(<SystemUsersDropdown {...ldapUserProps}/>);
+
+        await wrapper.instance().handleShowDeactivateMemberModal(mockMouseEvent, true);
+
+        wrapper.update();
+
+        expect(wrapper.state('showDeactivateMemberModal')).toBeFalsy();
+    });
+
     test('handleDeactivateMember() should have called onError', async () => {
         const retVal = {error: {server_error_id: 'id', message: 'error'}};
         const updateUserActive = jest.fn().mockResolvedValue(retVal);
@@ -121,8 +143,7 @@ describe('components/admin_console/system_users/system_users_dropdown/system_use
     test('handleShowDeactivateMemberModal should not call the loadBots if the setting is not true', async () => {
         const wrapper = shallow<SystemUsersDropdown>(<SystemUsersDropdown {...requiredProps}/>);
 
-        const event = {preventDefault: jest.fn()};
-        await wrapper.instance().handleShowDeactivateMemberModal(event);
+        await wrapper.instance().handleShowDeactivateMemberModal(mockMouseEvent, false);
 
         expect(requiredProps.actions.loadBots).toHaveBeenCalledTimes(0);
     });
@@ -135,8 +156,7 @@ describe('components/admin_console/system_users/system_users_dropdown/system_use
         };
         const wrapper = shallow<SystemUsersDropdown>(<SystemUsersDropdown {...{...requiredProps, config: overrideConfig, bots: {}}}/>);
 
-        const event = {preventDefault: jest.fn()};
-        await wrapper.instance().handleShowDeactivateMemberModal(event);
+        await wrapper.instance().handleShowDeactivateMemberModal(mockMouseEvent, false);
 
         expect(requiredProps.actions.loadBots).toHaveBeenCalledTimes(1);
     });

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

@@ -84,8 +84,12 @@ export default class SystemUsersDropdown extends React.PureComponent<Props, Stat
         };
     }
 
-    handleMakeActive = (e: {preventDefault: () => void}) => {
+    handleMakeActive = (e: React.MouseEvent<HTMLButtonElement>, disableActivationToggle: boolean) => {
         e.preventDefault();
+        e.stopPropagation();
+        if (disableActivationToggle) {
+            return;
+        }
         this.props.actions.updateUserActive(this.props.user.id, true).
             then(this.onUpdateActiveResult);
     };
@@ -123,8 +127,11 @@ export default class SystemUsersDropdown extends React.PureComponent<Props, Stat
         adminResetMfa(this.props.user.id, null, this.props.onError);
     };
 
-    handleShowDeactivateMemberModal = async (e: {preventDefault: () => void}) => {
+    handleShowDeactivateMemberModal = async (e: React.MouseEvent<HTMLButtonElement>, disableActivationToggle: boolean) => {
         e.preventDefault();
+        if (disableActivationToggle) {
+            return;
+        }
         if (this.shouldDisableBotsWhenOwnerIsDeactivated()) {
             await this.props.actions.loadBots(
                 Constants.Integrations.START_PAGE_NUM,
@@ -637,6 +644,12 @@ export default class SystemUsersDropdown extends React.PureComponent<Props, Stat
         const demoteToGuestModal = this.renderDemoteToGuestModal();
         const createGroupSyncablesMembershipsModal = this.renderCreateGroupSyncablesMembershipsModal();
 
+        const getExtraText = (disableActivationToggle: boolean) => {
+            return disableActivationToggle ? {
+                extraText: Utils.localizeMessage('admin.user_item.managedByLdap', 'Managed by LDAP'),
+            } : {};
+        };
+
         const {index, totalUsers} = this.props;
         return (
             <React.Fragment>
@@ -664,15 +677,17 @@ export default class SystemUsersDropdown extends React.PureComponent<Props, Stat
                     >
                         <Menu.ItemAction
                             show={showMakeActive}
-                            onClick={this.handleMakeActive}
+                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => this.handleMakeActive(e, disableActivationToggle)}
                             text={Utils.localizeMessage('admin.user_item.makeActive', 'Activate')}
                             disabled={disableActivationToggle}
+                            {...getExtraText(disableActivationToggle)}
                         />
                         <Menu.ItemAction
                             show={showMakeNotActive}
-                            onClick={this.handleShowDeactivateMemberModal}
+                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => this.handleShowDeactivateMemberModal(e, disableActivationToggle)}
                             text={Utils.localizeMessage('admin.user_item.makeInactive', 'Deactivate')}
                             disabled={disableActivationToggle}
+                            {...getExtraText(disableActivationToggle)}
                         />
                         <Menu.ItemAction
                             show={showManageRoles}

webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss

@@ -91,6 +91,20 @@
             text-overflow: ellipsis;
             white-space: nowrap;
 
+            &.disabled {
+                color: rgba(var(--center-channel-color-rgb), 0.48);
+                cursor: default;
+                pointer-events: none;
+
+                &:hover {
+                    background: none;
+                }
+
+                .icon {
+                    color: rgba(var(--center-channel-color-rgb), 0.48);
+                }
+            }
+
             &.MenuItem__with-help {
                 display: block;
                 height: auto;

webapp/channels/src/i18n/en.json

@@ -2553,6 +2553,7 @@
   "admin.user_item.makeInactive": "Deactivate",
   "admin.user_item.makeMember": "Make Team Member",
   "admin.user_item.makeTeamAdmin": "Make Team Admin",
+  "admin.user_item.managedByLdap": "Managed by LDAP",
   "admin.user_item.manageRoles": "Manage Roles",
   "admin.user_item.manageTeams": "Manage Teams",
   "admin.user_item.manageTokens": "Manage Tokens",

webapp/channels/src/utils/test_helper.ts

@@ -559,4 +559,15 @@ export class TestHelper {
             ...override,
         };
     }
+
+    public static getMockMouseButtonEvent() {
+        return {
+            preventDefault: jest.fn(),
+            stopPropagation: jest.fn(),
+            currentTarget: {
+                click: jest.fn(),
+                value: 'test value',
+            },
+        } as unknown as React.MouseEvent<HTMLButtonElement>;
+    }
 }