Renamed NavbarDropdown to SidebarHeaderDropdown and switched it to react-bootstrap (#4109)

webapp/components/sidebar_header.jsx

@@ -1,24 +1,18 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import NavbarDropdown from './navbar_dropdown.jsx';
-import 'bootstrap';
+import React from 'react';
 
-import PreferenceStore from 'stores/preference_store.jsx';
-
-import * as Utils from 'utils/utils.jsx';
 import Client from 'client/web_client.jsx';
-import Constants from 'utils/constants.jsx';
-
-const Preferences = Constants.Preferences;
-const TutorialSteps = Constants.TutorialSteps;
+import PreferenceStore from 'stores/preference_store.jsx';
+import * as Utils from 'utils/utils.jsx';
 
+import SidebarHeaderDropdown from './sidebar_header_dropdown.jsx';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
+import {Preferences, TutorialSteps} from 'utils/constants.jsx';
 import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
 
-import React from 'react';
-
 export default class SidebarHeader extends React.Component {
     constructor(props) {
         super(props);
@@ -28,34 +22,31 @@ export default class SidebarHeader extends React.Component {
 
         this.state = this.getStateFromStores();
     }
+
     componentDidMount() {
         PreferenceStore.addChangeListener(this.onPreferenceChange);
     }
+
     componentWillUnmount() {
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
     }
+
     getStateFromStores() {
         const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, this.props.currentUser.id, 999);
 
         return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile()};
     }
+
     onPreferenceChange() {
         this.setState(this.getStateFromStores());
     }
+
     toggleDropdown(e) {
         e.preventDefault();
-        if (this.refs.dropdown.blockToggle) {
-            this.refs.dropdown.blockToggle = false;
-            return;
-        }
-        const menu = document.querySelector('.team__header .dropdown-toggle');
-        const isOpen = menu.parentElement.classList.toggle('open');
-        menu.setAttribute('aria-expanded', isOpen);
 
-        if (!isOpen) {
-            document.querySelector('.sidebar--left .dropdown-menu').scrollTop = 0;
-        }
+        this.refs.dropdown.toggleDropdown();
     }
+
     render() {
         var me = this.props.currentUser;
         var profilePicture = null;
@@ -99,13 +90,12 @@ export default class SidebarHeader extends React.Component {
                         </OverlayTrigger>
                     </div>
                 </a>
-                <NavbarDropdown
+                <SidebarHeaderDropdown
                     ref='dropdown'
                     teamType={this.props.teamType}
                     teamDisplayName={this.props.teamDisplayName}
                     teamName={this.props.teamName}
                     currentUser={this.props.currentUser}
-                    toggleDropdown={this.toggleDropdown}
                 />
             </div>
         );