1 files changed, 180 insertions, 0 deletions
diff --git a/webapp/components/channel_members_dropdown.jsx b/webapp/components/channel_members_dropdown.jsx
new file mode 100644
index 000000000..82aaf0612
--- /dev/null
+++ b/webapp/components/channel_members_dropdown.jsx
@@ -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
+};