This repository has been archived by the owner on Mar 13, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PLT-5049 (Webapp) New Channel Members UI. (#5036)
This replaces the existing Channel Members UI with one based on the Team Members UI, so that either a button, a role or a role with a menu can be displayed. Basic logic for which actions and roles are displayed is implemented, although this doesn't change behaviour or functionality at all, as that will come in later PRs. It does, however, add code to fetch the ChannelMember objects as that is necessary to provide the full set of actions and roles as intended.
- Loading branch information
1 parent
892a6b9
commit def9295
Showing
10 changed files
with
543 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,180 @@ | ||
// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved. | ||
// See License.txt for license information. | ||
|
||
import ChannelStore from 'stores/channel_store.jsx'; | ||
import TeamStore from 'stores/team_store.jsx'; | ||
import UserStore from 'stores/user_store.jsx'; | ||
|
||
import {removeUserFromChannel} from 'actions/channel_actions.jsx'; | ||
|
||
import * as AsyncClient from 'utils/async_client.jsx'; | ||
import * as Utils from 'utils/utils.jsx'; | ||
|
||
import React from 'react'; | ||
import {FormattedMessage} from 'react-intl'; | ||
|
||
export default class ChannelMembersDropdown extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
|
||
this.handleRemoveFromChannel = this.handleRemoveFromChannel.bind(this); | ||
|
||
this.state = { | ||
serverError: null, | ||
user: null, | ||
role: null | ||
}; | ||
} | ||
|
||
handleRemoveFromChannel() { | ||
removeUserFromChannel( | ||
this.props.channel.id, | ||
this.props.user.id, | ||
() => { | ||
AsyncClient.getChannelStats(this.props.channel.id); | ||
}, | ||
(err) => { | ||
this.setState({serverError: err.message}); | ||
} | ||
); | ||
} | ||
|
||
// Checks if the user this menu is for is a channel admin or not. | ||
isChannelAdmin() { | ||
if (Utils.isChannelAdmin(this.props.channelMember.roles)) { | ||
return true; | ||
} | ||
|
||
return false; | ||
} | ||
|
||
// Checks if the current user has the power to change the roles of this member. | ||
canChangeMemberRoles() { | ||
if (UserStore.isSystemAdminForCurrentUser()) { | ||
return true; | ||
} else if (TeamStore.isTeamAdminForCurrentTeam()) { | ||
return true; | ||
} else if (ChannelStore.isChannelAdminForCurrentChannel()) { | ||
return true; | ||
} | ||
|
||
return false; | ||
} | ||
|
||
// Checks if the current user has the power to remove this member from the channel. | ||
canRemoveMember() { | ||
// TODO: This will be implemented as part of PLT-5047. | ||
return true; | ||
} | ||
|
||
render() { | ||
let serverError = null; | ||
if (this.state.serverError) { | ||
serverError = ( | ||
<div className='has-error'> | ||
<label className='has-error control-label'>{this.state.serverError}</label> | ||
</div> | ||
); | ||
} | ||
|
||
if (this.props.user.id === UserStore.getCurrentId()) { | ||
return null; | ||
} | ||
|
||
if (this.canChangeMemberRoles()) { | ||
let role = ( | ||
<FormattedMessage | ||
id='channel_members_dropdown.channel_member' | ||
defaultMessage='Channel Member' | ||
/> | ||
); | ||
|
||
if (this.isChannelAdmin()) { | ||
role = ( | ||
<FormattedMessage | ||
id='channel_members_dropdown.channel_admin' | ||
defaultMessage='Channel Admin' | ||
/> | ||
); | ||
} | ||
|
||
let removeFromChannel = null; | ||
if (this.canRemoveMember()) { | ||
removeFromChannel = ( | ||
<li role='presentation'> | ||
<a | ||
role='menuitem' | ||
href='#' | ||
onClick={this.handleRemoveFromChannel} | ||
> | ||
<FormattedMessage | ||
id='channel_members_dropdown.remove_from_channel' | ||
defaultMessage='Remove From Channel' | ||
/> | ||
</a> | ||
</li> | ||
); | ||
} | ||
|
||
return ( | ||
<div className='dropdown member-drop'> | ||
<a | ||
href='#' | ||
className='dropdown-toggle theme' | ||
type='button' | ||
data-toggle='dropdown' | ||
aria-expanded='true' | ||
> | ||
<span>{role} </span> | ||
<span className='fa fa-chevron-down'/> | ||
</a> | ||
<ul | ||
className='dropdown-menu member-menu' | ||
role='menu' | ||
> | ||
{removeFromChannel} | ||
</ul> | ||
{serverError} | ||
</div> | ||
); | ||
} else if (this.canRemoveMember()) { | ||
return ( | ||
<button | ||
type='button' | ||
className='btn btn-danger btn-message' | ||
onClick={this.handleRemoveFromChannel} | ||
> | ||
<FormattedMessage | ||
id='channel_members_dropdown.remove_member' | ||
defaultMessage='Remove Member' | ||
/> | ||
</button> | ||
); | ||
} else if (this.isChannelAdmin()) { | ||
return ( | ||
<div> | ||
<FormattedMessage | ||
id='channel_members_dropdown.channel_admin' | ||
defaultMessage='Channel Admin' | ||
/> | ||
</div> | ||
); | ||
} | ||
|
||
return ( | ||
<div> | ||
<FormattedMessage | ||
id='channel_members_dropdown.channel_member' | ||
defaultMessage='Channel Member' | ||
/> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
ChannelMembersDropdown.propTypes = { | ||
channel: React.PropTypes.object.isRequired, | ||
user: React.PropTypes.object.isRequired, | ||
teamMember: React.PropTypes.object.isRequired, | ||
channelMember: React.PropTypes.object.isRequired | ||
}; |
Oops, something went wrong.