diff options
author | Ryan Wang <R-Wang97@users.noreply.github.com> | 2017-04-25 12:34:21 -0400 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-04-25 09:34:21 -0700 |
commit | f1668bad15d27e6e2b40e5079f0b878603b33684 (patch) | |
tree | 5a5852f301ae1f31238bd6f5d6a95322b001354f /webapp/components/navbar.jsx | |
parent | 6c4c706313eb765eb00c639f381646be74f27b69 (diff) | |
download | chat-f1668bad15d27e6e2b40e5079f0b878603b33684.tar.gz chat-f1668bad15d27e6e2b40e5079f0b878603b33684.tar.bz2 chat-f1668bad15d27e6e2b40e5079f0b878603b33684.zip |
Add confirm dialog before leaving private channel (#6206)
Diffstat (limited to 'webapp/components/navbar.jsx')
-rw-r--r-- | webapp/components/navbar.jsx | 66 |
1 files changed, 64 insertions, 2 deletions
diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx index 33df0b423..6a306dafd 100644 --- a/webapp/components/navbar.jsx +++ b/webapp/components/navbar.jsx @@ -12,6 +12,7 @@ import ChannelMembersModal from './channel_members_modal.jsx'; import ChannelNotificationsModal from './channel_notifications_modal.jsx'; import DeleteChannelModal from './delete_channel_modal.jsx'; import RenameChannelModal from './rename_channel_modal.jsx'; +import ConfirmModal from './confirm_modal.jsx'; import ToggleModalButton from './toggle_modal_button.jsx'; import StatusIcon from './status_icon.jsx'; @@ -67,6 +68,9 @@ export default class Navbar extends React.Component { this.openDirectMessageModal = this.openDirectMessageModal.bind(this); this.getPinnedPosts = this.getPinnedPosts.bind(this); + this.createLeaveChannelModal = this.createLeaveChannelModal.bind(this); + this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this); + const state = this.getStateFromStores(); state.showEditChannelPurposeModal = false; state.showEditChannelHeaderModal = false; @@ -85,7 +89,8 @@ export default class Navbar extends React.Component { users: [], userCount: ChannelStore.getCurrentStats().member_count, currentUser: UserStore.getCurrentUser(), - isFavorite: channel && ChannelUtils.isFavoriteChannel(channel) + isFavorite: channel && ChannelUtils.isFavoriteChannel(channel), + showLeaveChannelModal: false }; } @@ -117,7 +122,13 @@ export default class Navbar extends React.Component { } handleLeave() { - ChannelActions.leaveChannel(this.state.channel.id); + if (this.state.channel.type === Constants.PRIVATE_CHANNEL) { + this.setState({ + showLeaveChannelModal: true + }); + } else { + ChannelActions.leaveChannel(this.state.channel.id); + } } hideSidebars(e) { @@ -676,6 +687,54 @@ export default class Navbar extends React.Component { return buttons; } + hideLeaveChannelModal() { + this.setState({ + showLeaveChannelModal: false + }); + } + + createLeaveChannelModal() { + const title = ( + <FormattedMessage + id='leave_private_channel_modal.title' + defaultMessage='Leave Private Channel {channel}' + values={{ + channel: <b>{this.state.channel.display_name}</b> + }} + /> + ); + + const message = ( + <FormattedMessage + id='leave_private_channel_modal.message' + defaultMessage='Are you sure you wish to leave the private channel {channel}? You must be re-invited in order to re-join this channel in the future.' + values={{ + channel: <b>{this.state.channel.display_name}</b> + }} + /> + ); + + const buttonClass = 'btn btn-danger'; + const button = ( + <FormattedMessage + id='leave_private_channel_modal.leave' + defaultMessage='Yes, leave channel' + /> + ); + + return ( + <ConfirmModal + show={this.state.showLeaveChannelModal} + title={title} + message={message} + confirmButtonClass={buttonClass} + confirmButton={button} + onConfirm={() => ChannelActions.leaveChannel(this.state.channel.id)} + onCancel={this.hideLeaveChannelModal} + /> + ); + } + getTeammateStatus() { const channel = this.state.channel; @@ -844,6 +903,8 @@ export default class Navbar extends React.Component { var channelMenuDropdown = this.createDropdown(channel, channelTitle, isSystemAdmin, isTeamAdmin, isChannelAdmin, isDirect, isGroup, popoverContent); + const leaveChannelModal = this.createLeaveChannelModal(); + return ( <div> <nav @@ -860,6 +921,7 @@ export default class Navbar extends React.Component { </nav> {editChannelHeaderModal} {editChannelPurposeModal} + {leaveChannelModal} {renameChannelModal} {channelMembersModal} {channelSwitchModal} |