1 files changed, 139 insertions, 46 deletions

diff --git a/webapp/components/sidebar_header_dropdown.jsx b/webapp/components/sidebar_header_dropdown.jsx
index a0a0205be..baa8aae7b 100644
--- a/webapp/components/sidebar_header_dropdown.jsx
+++ b/webapp/components/sidebar_header_dropdown.jsx
@@ -14,6 +14,7 @@ import AboutBuildModal from './about_build_modal.jsx';
 import SidebarHeaderDropdownButton from './sidebar_header_dropdown_button.jsx';
 import TeamMembersModal from './team_members_modal.jsx';
 import UserSettingsModal from './user_settings/user_settings_modal.jsx';
+import AddUsersToTeam from './add_users_to_team.jsx';
 
 import {Constants, WebrtcActionTypes} from 'utils/constants.jsx';
 
@@ -43,6 +44,8 @@ export default class SidebarHeaderDropdown extends React.Component {
         this.handleAboutModal = this.handleAboutModal.bind(this);
         this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
         this.toggleAccountSettingsModal = this.toggleAccountSettingsModal.bind(this);
+        this.showAddUsersToTeamModal = this.showAddUsersToTeamModal.bind(this);
+        this.hideAddUsersToTeamModal = this.hideAddUsersToTeamModal.bind(this);
         this.showInviteMemberModal = this.showInviteMemberModal.bind(this);
         this.showGetTeamInviteLinkModal = this.showGetTeamInviteLinkModal.bind(this);
         this.showTeamMembersModal = this.showTeamMembersModal.bind(this);
@@ -61,7 +64,8 @@ export default class SidebarHeaderDropdown extends React.Component {
             showAboutModal: false,
             showDropdown: false,
             showTeamMembersModal: false,
-            showUserSettingsModal: false
+            showUserSettingsModal: false,
+            showAddUsersToTeamModal: false
         };
     }
 
@@ -102,6 +106,21 @@ export default class SidebarHeaderDropdown extends React.Component {
         });
     }
 
+    showAddUsersToTeamModal(e) {
+        e.preventDefault();
+
+        this.setState({
+            showAddUsersToTeamModal: true,
+            showDropdown: false
+        });
+    }
+
+    hideAddUsersToTeamModal() {
+        this.setState({
+            showAddUsersToTeamModal: false
+        });
+    }
+
     showInviteMemberModal(e) {
         e.preventDefault();
 
@@ -181,6 +200,7 @@ export default class SidebarHeaderDropdown extends React.Component {
         const currentUser = this.props.currentUser;
         let teamLink = '';
         let inviteLink = '';
+        let addMemberToTeam = '';
         let manageLink = '';
         let sysAdminLink = '';
         let isAdmin = false;
@@ -204,7 +224,22 @@ export default class SidebarHeaderDropdown extends React.Component {
                     >
                         <FormattedMessage
                             id='navbar_dropdown.inviteMember'
-                            defaultMessage='Invite New Member'
+                            defaultMessage='Send Email Invite'
+                        />
+                    </a>
+                </li>
+            );
+
+            addMemberToTeam = (
+                <li>
+                    <a
+                        id='addUsersToTeam'
+                        href='#'
+                        onClick={this.showAddUsersToTeamModal}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.addMemberToTeam'
+                            defaultMessage='Add Members to Team'
                         />
                     </a>
                 </li>
@@ -230,9 +265,11 @@ export default class SidebarHeaderDropdown extends React.Component {
                 if (config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
                     teamLink = null;
                     inviteLink = null;
+                    addMemberToTeam = null;
                 } else if (config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
                     teamLink = null;
                     inviteLink = null;
+                    addMemberToTeam = null;
                 }
             }
         }
@@ -416,10 +453,8 @@ export default class SidebarHeaderDropdown extends React.Component {
             );
         }
 
-        let nativeAppDivider = null;
         let nativeAppLink = null;
         if (global.window.mm_config.AppDownloadLink && !UserAgent.isMobileApp()) {
-            nativeAppDivider = <li className='divider'/>;
             nativeAppLink = (
                 <li>
                     <Link
@@ -447,6 +482,92 @@ export default class SidebarHeaderDropdown extends React.Component {
             );
         }
 
+        let addUsersToTeamModal;
+        if (this.state.showAddUsersToTeamModal) {
+            addUsersToTeamModal = (
+                <AddUsersToTeam
+                    onModalDismissed={this.hideAddUsersToTeamModal}
+                />
+            );
+        }
+
+        const accountSettings = (
+            <li>
+                <a
+                    id='accountSettings'
+                    href='#'
+                    onClick={this.toggleAccountSettingsModal}
+                >
+                    <FormattedMessage
+                        id='navbar_dropdown.accountSettings'
+                        defaultMessage='Account Settings'
+                    />
+                </a>
+            </li>
+        );
+
+        const about = (
+            <li>
+                <a
+                    href='#'
+                    onClick={this.handleAboutModal}
+                >
+                    <FormattedMessage
+                        id='navbar_dropdown.about'
+                        defaultMessage='About Mattermost'
+                    />
+                </a>
+            </li>
+        );
+
+        const logout = (
+            <li>
+                <a
+                    id='logout'
+                    href='#'
+                    onClick={() => GlobalActions.emitUserLoggedOutEvent()}
+                >
+                    <FormattedMessage
+                        id='navbar_dropdown.logout'
+                        defaultMessage='Logout'
+                    />
+                </a>
+            </li>
+        );
+
+        const customEmoji = this.renderCustomEmojiLink();
+
+        // Dividers.
+        let inviteDivider = null;
+        if (inviteLink || teamLink || addMemberToTeam) {
+            inviteDivider = <li className='divider'/>;
+        }
+
+        let teamDivider = null;
+        if (teamSettings || manageLink || teams) {
+            teamDivider = <li className='divider'/>;
+        }
+
+        let backstageDivider = null;
+        if (integrationsLink || customEmoji) {
+            backstageDivider = <li className='divider'/>;
+        }
+
+        let sysAdminDivider = null;
+        if (sysAdminLink) {
+            sysAdminDivider = <li className='divider'/>;
+        }
+
+        let helpDivider = null;
+        if (helpLink || reportLink || nativeAppLink || about) {
+            helpDivider = <li className='divider'/>;
+        }
+
+        let logoutDivider = null;
+        if (logout) {
+            logoutDivider = <li className='divider'/>;
+        }
+
         return (
             <Dropdown
                 id='sidebar-header-dropdown'
@@ -460,56 +581,27 @@ export default class SidebarHeaderDropdown extends React.Component {
                     onClick={this.toggleDropdown}
                 />
                 <Dropdown.Menu>
-                    <li>
-                        <a
-                            id='accountSettings'
-                            href='#'
-                            onClick={this.toggleAccountSettingsModal}
-                        >
-                            <FormattedMessage
-                                id='navbar_dropdown.accountSettings'
-                                defaultMessage='Account Settings'
-                            />
-                        </a>
-                    </li>
+                    {accountSettings}
+                    {inviteDivider}
                     {inviteLink}
                     {teamLink}
-                    <li>
-                        <a
-                            id='logout'
-                            href='#'
-                            onClick={() => GlobalActions.emitUserLoggedOutEvent()}
-                        >
-                            <FormattedMessage
-                                id='navbar_dropdown.logout'
-                                defaultMessage='Logout'
-                            />
-                        </a>
-                    </li>
-                    <li className='divider'/>
-                    {integrationsLink}
-                    {this.renderCustomEmojiLink()}
-                    <li className='divider'/>
+                    {addMemberToTeam}
+                    {teamDivider}
                     {teamSettings}
                     {manageLink}
-                    {sysAdminLink}
                     {teams}
-                    <li className='divider'/>
+                    {backstageDivider}
+                    {integrationsLink}
+                    {customEmoji}
+                    {sysAdminDivider}
+                    {sysAdminLink}
+                    {helpDivider}
                     {helpLink}
                     {reportLink}
-                    <li>
-                        <a
-                            href='#'
-                            onClick={this.handleAboutModal}
-                        >
-                            <FormattedMessage
-                                id='navbar_dropdown.about'
-                                defaultMessage='About Mattermost'
-                            />
-                        </a>
-                    </li>
-                    {nativeAppDivider}
                     {nativeAppLink}
+                    {about}
+                    {logoutDivider}
+                    {logout}
                     <UserSettingsModal
                         show={this.state.showUserSettingsModal}
                         onModalDismissed={() => this.setState({showUserSettingsModal: false})}
@@ -519,6 +611,7 @@ export default class SidebarHeaderDropdown extends React.Component {
                         show={this.state.showAboutModal}
                         onModalDismissed={this.aboutModalDismissed}
                     />
+                    {addUsersToTeamModal}
                 </Dropdown.Menu>
             </Dropdown>
         );