PLT-5050 (WebApp): Change channel member roles. (#5076)

Admins can now Promote/Demote channel members in the Channel Manage
Membersmodal.

webapp/components/channel_members_dropdown.jsx

@@ -5,7 +5,7 @@ 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 {removeUserFromChannel, makeUserChannelAdmin, makeUserChannelMember} from 'actions/channel_actions.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -18,6 +18,8 @@ export default class ChannelMembersDropdown extends React.Component {
         super(props);
 
         this.handleRemoveFromChannel = this.handleRemoveFromChannel.bind(this);
+        this.handleMakeChannelMember = this.handleMakeChannelMember.bind(this);
+        this.handleMakeChannelAdmin = this.handleMakeChannelAdmin.bind(this);
 
         this.state = {
             serverError: null,
@@ -39,6 +41,32 @@ export default class ChannelMembersDropdown extends React.Component {
         );
     }
 
+    handleMakeChannelMember() {
+        makeUserChannelMember(
+            this.props.channel.id,
+            this.props.user.id,
+            () => {
+                AsyncClient.getChannelStats(this.props.channel.id);
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+
+    handleMakeChannelAdmin() {
+        makeUserChannelAdmin(
+            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)) {
@@ -116,6 +144,42 @@ export default class ChannelMembersDropdown extends React.Component {
                 );
             }
 
+            let makeChannelMember = null;
+            if (this.isChannelAdmin()) {
+                makeChannelMember = (
+                    <li role='presentation'>
+                        <a
+                            role='menuitem'
+                            href='#'
+                            onClick={this.handleMakeChannelMember}
+                        >
+                            <FormattedMessage
+                                id='channel_members_dropdown.make_channel_member'
+                                defaultMessage='Make Channel Member'
+                            />
+                        </a>
+                    </li>
+                );
+            }
+
+            let makeChannelAdmin = null;
+            if (!this.isChannelAdmin()) {
+                makeChannelAdmin = (
+                    <li role='presentation'>
+                        <a
+                            role='menuitem'
+                            href='#'
+                            onClick={this.handleMakeChannelAdmin}
+                        >
+                            <FormattedMessage
+                                id='channel_members_dropdown.make_channel_admin'
+                                defaultMessage='Make Channel Admin'
+                            />
+                        </a>
+                    </li>
+                );
+            }
+
             return (
                 <div className='dropdown member-drop'>
                     <a
@@ -132,6 +196,8 @@ export default class ChannelMembersDropdown extends React.Component {
                         className='dropdown-menu member-menu'
                         role='menu'
                     >
+                        {makeChannelMember}
+                        {makeChannelAdmin}
                         {removeFromChannel}
                     </ul>
                     {serverError}