From 53ba8ec9c2bbaee510c2b1c9b5b59f9fdf44f365 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Thu, 29 Sep 2016 10:58:30 -0400 Subject: Renamed NavbarDropdown to SidebarHeaderDropdown and switched it to react-bootstrap (#4109) --- webapp/components/sidebar_header_dropdown.jsx | 498 ++++++++++++++++++++++++++ 1 file changed, 498 insertions(+) create mode 100644 webapp/components/sidebar_header_dropdown.jsx (limited to 'webapp/components/sidebar_header_dropdown.jsx') diff --git a/webapp/components/sidebar_header_dropdown.jsx b/webapp/components/sidebar_header_dropdown.jsx new file mode 100644 index 000000000..e33d6d5ec --- /dev/null +++ b/webapp/components/sidebar_header_dropdown.jsx @@ -0,0 +1,498 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import ReactDOM from 'react-dom'; +import * as Utils from 'utils/utils.jsx'; +import * as GlobalActions from 'actions/global_actions.jsx'; + +import TeamStore from 'stores/team_store.jsx'; +import UserStore from 'stores/user_store.jsx'; +import WebrtcStore from 'stores/webrtc_store.jsx'; +import AboutBuildModal from './about_build_modal.jsx'; +import TeamMembersModal from './team_members_modal.jsx'; +import ToggleModalButton from './toggle_modal_button.jsx'; +import UserSettingsModal from './user_settings/user_settings_modal.jsx'; + +import {Constants, WebrtcActionTypes} from 'utils/constants.jsx'; + +import {Dropdown} from 'react-bootstrap'; +import {FormattedMessage} from 'react-intl'; +import {Link} from 'react-router/es6'; + +import React from 'react'; + +export default class SidebarHeaderDropdown extends React.Component { + static propTypes = { + teamType: React.PropTypes.string, + teamDisplayName: React.PropTypes.string, + teamName: React.PropTypes.string, + currentUser: React.PropTypes.object + }; + + static defaultProps = { + teamType: '' + }; + + constructor(props) { + super(props); + + this.toggleDropdown = this.toggleDropdown.bind(this); + + this.handleAboutModal = this.handleAboutModal.bind(this); + this.aboutModalDismissed = this.aboutModalDismissed.bind(this); + this.toggleAccountSettingsModal = this.toggleAccountSettingsModal.bind(this); + this.showInviteMemberModal = this.showInviteMemberModal.bind(this); + this.showGetTeamInviteLinkModal = this.showGetTeamInviteLinkModal.bind(this); + + this.onTeamChange = this.onTeamChange.bind(this); + this.openAccountSettings = this.openAccountSettings.bind(this); + + this.renderCustomEmojiLink = this.renderCustomEmojiLink.bind(this); + + this.handleClick = this.handleClick.bind(this); + + this.state = { + teams: TeamStore.getAll(), + teamMembers: TeamStore.getTeamMembers(), + showDropdown: false + }; + } + + handleClick(e) { + if (WebrtcStore.isBusy()) { + WebrtcStore.emitChanged({action: WebrtcActionTypes.IN_PROGRESS}); + e.preventDefault(); + } + } + + toggleDropdown(e) { + if (e) { + e.preventDefault(); + } + + this.setState({showDropdown: !this.state.showDropdown}); + } + + handleAboutModal() { + this.setState({ + showAboutModal: true, + showDropdown: false + }); + } + + aboutModalDismissed() { + this.setState({showAboutModal: false}); + } + + toggleAccountSettingsModal(e) { + e.preventDefault(); + + this.setState({ + showUserSettingsModal: !this.state.showUserSettingsModal, + showDropdown: false + }); + } + + showInviteMemberModal(e) { + e.preventDefault(); + + this.setState({showDropdown: false}); + + GlobalActions.showInviteMemberModal(); + } + + showGetTeamInviteLinkModal(e) { + e.preventDefault(); + + this.setState({showDropdown: false}); + + GlobalActions.showGetTeamInviteLinkModal(); + } + + componentDidMount() { + TeamStore.addChangeListener(this.onTeamChange); + document.addEventListener('keydown', this.openAccountSettings); + } + + onTeamChange() { + this.setState({ + teams: TeamStore.getAll(), + teamMembers: TeamStore.getTeamMembers() + }); + } + + componentWillUnmount() { + $(ReactDOM.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown'); + TeamStore.removeChangeListener(this.onTeamChange); + document.removeEventListener('keydown', this.openAccountSettings); + } + + openAccountSettings(e) { + if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.A) { + this.toggleAccountSettingsModal(e); + } + } + + renderCustomEmojiLink() { + if (window.mm_config.EnableCustomEmoji !== 'true' || !Utils.canCreateCustomEmoji(this.props.currentUser)) { + return null; + } + + return ( +
  • + + + +
    • + ); + } + + render() { + const config = global.mm_config; + var teamLink = ''; + var inviteLink = ''; + var manageLink = ''; + var sysAdminLink = ''; + var currentUser = this.props.currentUser; + var isAdmin = false; + var isSystemAdmin = false; + var teamSettings = null; + let integrationsLink = null; + + if (!currentUser) { + return null; + } + + if (currentUser != null) { + isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser(); + isSystemAdmin = UserStore.isSystemAdminForCurrentUser(); + + inviteLink = ( +
  • + + + +
    • + ); + + if (this.props.teamType === Constants.OPEN_TEAM && config.EnableUserCreation === 'true') { + teamLink = ( +
  • + + + +
    • + ); + } + + if (global.window.mm_license.IsLicensed === 'true') { + if (config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) { + teamLink = null; + inviteLink = null; + } else if (config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) { + teamLink = null; + inviteLink = null; + } + } + } + + let membersName = ( + + ); + + if (isAdmin) { + teamSettings = ( +
  • + + + +
    • + ); + } else { + membersName = ( + + ); + } + + manageLink = ( +
  • + + {membersName} + +
    • + ); + + const integrationsEnabled = + config.EnableIncomingWebhooks === 'true' || + config.EnableOutgoingWebhooks === 'true' || + config.EnableCommands === 'true' || + (config.EnableOAuthServiceProvider === 'true' && (isSystemAdmin || config.EnableOnlyAdminIntegrations !== 'true')); + if (integrationsEnabled && (isAdmin || config.EnableOnlyAdminIntegrations !== 'true')) { + integrationsLink = ( +
  • + + + +
    • + ); + } + + if (isSystemAdmin) { + sysAdminLink = ( +
  • + + + +
    • + ); + } + + var teams = []; + + if (config.EnableTeamCreation === 'true') { + teams.push( +
  • + + + +
    • + ); + } + + teams.push( +
  • + + + +
    • + ); + + if (this.state.teamMembers && this.state.teamMembers.length > 1) { + teams.push( +
  • + ); + + for (var index in this.state.teamMembers) { + if (this.state.teamMembers.hasOwnProperty(index)) { + var teamMember = this.state.teamMembers[index]; + var team = this.state.teams[teamMember.team_id]; + + if (team.name !== this.props.teamName) { + teams.push( +
  • + + + {team.display_name} + +
    • + ); + } + } + } + } + + let helpLink = null; + if (config.HelpLink) { + helpLink = ( +
  • + + + +
    • + ); + } + + let reportLink = null; + if (config.ReportAProblemLink) { + reportLink = ( +
  • + + + +
    • + ); + } + + let nativeAppDivider = null; + let nativeAppLink = null; + if (global.window.mm_config.AppDownloadLink) { + nativeAppDivider =
  • ; + nativeAppLink = ( +
  • + + + +
    • + ); + } + + return ( + + + + + +
  • + + + +
    • + {inviteLink} + {teamLink} +
  • + + + +
    • +
  • + {integrationsLink} + {this.renderCustomEmojiLink()} +
  • + {teamSettings} + {manageLink} + {sysAdminLink} + {teams} +
  • + {helpLink} + {reportLink} +
  • + + + +
    • + {nativeAppDivider} + {nativeAppLink} + this.setState({showUserSettingsModal: false})} + /> + +     +     + ); + } +} \ No newline at end of file -- cgit v1.2.3-1-g7c22