PLT-6098 Added Manage Teams modal to System Console users list (#5914)

* Added Manage Teams modal to System Console users list

* Localized ManageTeamsModal

* Fixed borders between Manage Teams list items

* Updated appearance of ManageTeamsModal

* Fixed admin being redirected from system console when removing self from a team

* Sorted teams in ManageTeamsModal

* Updated Manage Teams styling

webapp/components/admin_console/system_users/system_users_dropdown.jsx

@@ -18,7 +18,8 @@ import React from 'react';
 export default class SystemUsersDropdown extends React.Component {
     static propTypes = {
         user: React.PropTypes.object.isRequired,
-        doPasswordReset: React.PropTypes.func.isRequired
+        doPasswordReset: React.PropTypes.func.isRequired,
+        doManageTeams: React.PropTypes.func.isRequired
     };
 
     constructor(props) {
@@ -28,6 +29,7 @@ export default class SystemUsersDropdown extends React.Component {
         this.handleMakeActive = this.handleMakeActive.bind(this);
         this.handleMakeNotActive = this.handleMakeNotActive.bind(this);
         this.handleMakeSystemAdmin = this.handleMakeSystemAdmin.bind(this);
+        this.handleManageTeams = this.handleManageTeams.bind(this);
         this.handleResetPassword = this.handleResetPassword.bind(this);
         this.handleResetMfa = this.handleResetMfa.bind(this);
         this.handleDemoteSystemAdmin = this.handleDemoteSystemAdmin.bind(this);
@@ -94,6 +96,12 @@ export default class SystemUsersDropdown extends React.Component {
         );
     }
 
+    handleManageTeams(e) {
+        e.preventDefault();
+
+        this.props.doManageTeams(this.props.user);
+    }
+
     handleResetPassword(e) {
         e.preventDefault();
         this.props.doPasswordReset(this.props.user);
@@ -177,6 +185,7 @@ export default class SystemUsersDropdown extends React.Component {
         let showMakeSystemAdmin = !Utils.isSystemAdmin(user.roles);
         let showMakeActive = false;
         let showMakeNotActive = !Utils.isSystemAdmin(user.roles);
+        let showManageTeams = true;
         const mfaEnabled = global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.MFA === 'true' && global.window.mm_config.EnableMultifactorAuthentication === 'true';
         const showMfaReset = mfaEnabled && user.mfa_active;
 
@@ -191,6 +200,7 @@ export default class SystemUsersDropdown extends React.Component {
             showMakeSystemAdmin = false;
             showMakeActive = true;
             showMakeNotActive = false;
+            showManageTeams = false;
         }
 
         let disableActivationToggle = false;
@@ -281,6 +291,24 @@ export default class SystemUsersDropdown extends React.Component {
             );
         }
 
+        let manageTeams = null;
+        if (showManageTeams) {
+            manageTeams = (
+                <li role='presentation'>
+                    <a
+                        role='menuitem'
+                        href='#'
+                        onClick={this.handleManageTeams}
+                    >
+                        <FormattedMessage
+                            id='admin.user_item.manageTeams'
+                            defaultMessage='Manage Teams'
+                        />
+                    </a>
+                </li>
+            );
+        }
+
         let mfaReset = null;
         if (showMfaReset) {
             mfaReset = (
@@ -404,6 +432,7 @@ export default class SystemUsersDropdown extends React.Component {
                     {makeActive}
                     {makeNotActive}
                     {makeSystemAdmin}
+                    {manageTeams}
                     {mfaReset}
                     {passwordReset}
                 </ul>

webapp/components/admin_console/system_users/system_users_list.jsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
+import ManageTeamsModal from 'components/admin_console/manage_teams_modal/manage_teams_modal.jsx';
 import ResetPasswordModal from 'components/admin_console/reset_password_modal.jsx';
 import SearchableUserList from 'components/searchable_user_list/searchable_user_list.jsx';
 
@@ -35,6 +36,9 @@ export default class SystemUsersList extends React.Component {
         this.previousPage = this.previousPage.bind(this);
         this.search = this.search.bind(this);
 
+        this.doManageTeams = this.doManageTeams.bind(this);
+        this.doManageTeamsDismiss = this.doManageTeamsDismiss.bind(this);
+
         this.doPasswordReset = this.doPasswordReset.bind(this);
         this.doPasswordResetDismiss = this.doPasswordResetDismiss.bind(this);
         this.doPasswordResetSubmit = this.doPasswordResetSubmit.bind(this);
@@ -42,6 +46,7 @@ export default class SystemUsersList extends React.Component {
         this.state = {
             page: 0,
 
+            showManageTeamsModal: false,
             showPasswordModal: false,
             user: null
         };
@@ -71,6 +76,20 @@ export default class SystemUsersList extends React.Component {
         }
     }
 
+    doManageTeams(user) {
+        this.setState({
+            showManageTeamsModal: true,
+            user
+        });
+    }
+
+    doManageTeamsDismiss() {
+        this.setState({
+            showManageTeamsModal: false,
+            user: null
+        });
+    }
+
     doPasswordReset(user) {
         this.setState({
             showPasswordModal: true,
@@ -211,7 +230,8 @@ export default class SystemUsersList extends React.Component {
                     extraInfo={extraInfo}
                     actions={[SystemUsersDropdown]}
                     actionProps={{
-                        doPasswordReset: this.doPasswordReset
+                        doPasswordReset: this.doPasswordReset,
+                        doManageTeams: this.doManageTeams
                     }}
                     nextPage={this.nextPage}
                     previousPage={this.previousPage}
@@ -220,6 +240,11 @@ export default class SystemUsersList extends React.Component {
                     term={this.props.term}
                     onTermChange={this.props.onTermChange}
                 />
+                <ManageTeamsModal
+                    user={this.state.user}
+                    show={this.state.showManageTeamsModal}
+                    onModalDismissed={this.doManageTeamsDismiss}
+                />
                 <ResetPasswordModal
                     user={this.state.user}
                     show={this.state.showPasswordModal}