From f27c97e1ccbe524d946c57ad0435aa0d4761bda0 Mon Sep 17 00:00:00 2001
From: Hossein Ahmadian-Yazdi <hahmadia@users.noreply.github.com>
Date: Mon, 2 Dec 2019 15:13:22 -0500
Subject: [PATCH] [MM-20164] Member to Admin not updating has been fixed in
 Channnel Member Dropdown (#4274)

* [MM-20164] Fixed going from system admin to member not updating dropdown menu

* fix linting errors

* fix test

* Updated tests and approach to problem

* added comments and fixed linting

* Fix lint

* remove baseurl

* Fix baseurl

* updated cypress test

* Fix linting
---
 actions/websocket_actions.jsx                 |  2 +
 .../popover_list_members.jsx                  |  1 +
 components/user_list_row/user_list_row.jsx    |  1 +
 ...dates_manage_channel_members_modal_spec.js | 51 +++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 e2e/cypress/integration/channel/user_to_admin_updates_manage_channel_members_modal_spec.js

diff --git a/actions/websocket_actions.jsx b/actions/websocket_actions.jsx
index 7a7b0ecae177..ceaefa9fe7b8 100644
--- a/actions/websocket_actions.jsx
+++ b/actions/websocket_actions.jsx
@@ -973,9 +973,11 @@ function handleUserRoleUpdated(msg) {
 
     if (user) {
         const roles = msg.data.roles;
+        const newRoles = roles.split(' ');
         const demoted = user.roles.includes(Constants.PERMISSIONS_SYSTEM_ADMIN) && !roles.includes(Constants.PERMISSIONS_SYSTEM_ADMIN);
 
         store.dispatch({type: UserTypes.RECEIVED_PROFILE, data: {...user, roles}});
+        dispatch(loadRolesIfNeeded(newRoles));
 
         if (demoted && global.location.pathname.startsWith('/admin_console')) {
             redirectUserToDefaultTeam();
diff --git a/components/popover_list_members/popover_list_members.jsx b/components/popover_list_members/popover_list_members.jsx
index add7d62603ef..2a51834597cf 100644
--- a/components/popover_list_members/popover_list_members.jsx
+++ b/components/popover_list_members/popover_list_members.jsx
@@ -163,6 +163,7 @@ export default class PopoverListMembers extends React.Component {
                 >
                     <button
                         className='btn btn-link'
+                        data-testid='membersModal'
                         onClick={this.showMembersModal}
                     >
                         {membersName}
diff --git a/components/user_list_row/user_list_row.jsx b/components/user_list_row/user_list_row.jsx
index b5c295f2b4b8..d13324e497d7 100644
--- a/components/user_list_row/user_list_row.jsx
+++ b/components/user_list_row/user_list_row.jsx
@@ -119,6 +119,7 @@ export default class UserListRow extends React.Component {
                     {this.props.extraInfo}
                 </div>
                 <div
+                    data-testid='userListItemActions'
                     className='more-modal__actions'
                 >
                     {buttons}
diff --git a/e2e/cypress/integration/channel/user_to_admin_updates_manage_channel_members_modal_spec.js b/e2e/cypress/integration/channel/user_to_admin_updates_manage_channel_members_modal_spec.js
new file mode 100644
index 000000000000..661efd209b76
--- /dev/null
+++ b/e2e/cypress/integration/channel/user_to_admin_updates_manage_channel_members_modal_spec.js
@@ -0,0 +1,51 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+import users from '../../fixtures/users.json';
+
+const demoteToMember = (user) => {
+    cy.externalRequest({user: users.sysadmin, method: 'put', path: `users/${user.id}/roles`, data: {roles: 'system_user'}});
+};
+
+const promoteToSysAdmin = (user) => {
+    cy.externalRequest({user: users.sysadmin, method: 'put', path: `users/${user.id}/roles`, data: {roles: 'system_user system_admin'}});
+};
+
+describe('View Members modal', () => {
+    it('MM-20164 - Going from a Member to an Admin should update the modal', () => {
+        cy.apiLogin('user-1');
+        cy.apiGetMe().then((res) => {
+            // # Make user a regular member
+            demoteToMember(res.body);
+
+            // # Visit Town square and go to view members modal
+            cy.visit('/');
+            cy.get('#sidebarItem_town-square').click({force: true});
+            cy.get('#member_popover').click();
+            cy.findByTestId('membersModal').click();
+
+            // * Check to see if no drop down menu exists
+            cy.findAllByTestId('userListItemActions').then((el) => {
+                expect(el[0].childElementCount).equal(0);
+                cy.wrap(el[0]).should('not.be.visible');
+            });
+
+            // Promote user to a system admin
+            promoteToSysAdmin(res.body);
+
+            // * Check to see if a drop now exists now
+            cy.findAllByTestId('userListItemActions').then((el) => {
+                expect(el[0].childElementCount).equal(1);
+                cy.wrap(el[0]).should((children) => {
+                    expect(children).contain('Channel Member');
+                });
+            });
+        });
+    });
+});