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

1 files changed, 26 insertions, 1 deletions

diff --git a/webapp/components/admin_console/system_users/system_users_list.jsx b/webapp/components/admin_console/system_users/system_users_list.jsx
index 5d8837164..ccb1a39d4 100644
--- a/webapp/components/admin_console/system_users/system_users_list.jsx
+++ b/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}