PLT-2712 Added view members for non-admins in channel and team (#3618)

* Added view members for non-admins in channel and team

* changed variable name

webapp/components/channel_header.jsx

@@ -367,6 +367,24 @@ export default class ChannelHeader extends React.Component {
                             </a>
                         </li>
                     );
+                } else {
+                    dropdownContents.push(
+                        <li
+                            key='view_members'
+                            role='presentation'
+                        >
+                            <a
+                                role='menuitem'
+                                href='#'
+                                onClick={() => this.setState({showMembersModal: true})}
+                            >
+                                <FormattedMessage
+                                    id='channel_header.viewMembers'
+                                    defaultMessage='View Members'
+                                />
+                            </a>
+                        </li>
+                    );
                 }
             }
 
@@ -586,6 +604,7 @@ export default class ChannelHeader extends React.Component {
                     show={this.state.showMembersModal}
                     onModalDismissed={() => this.setState({showMembersModal: false})}
                     channel={channel}
+                    isAdmin={isAdmin}
                 />
                 <RenameChannelModal
                     show={this.state.showRenameChannelModal}

webapp/components/channel_members_modal.jsx

@@ -145,11 +145,16 @@ export default class ChannelMembersModal extends React.Component {
                 maxHeight = Utils.windowHeight() - 300;
             }
 
+            let removeButton = null;
+            if (this.props.isAdmin) {
+                removeButton = [this.createRemoveMemberButton];
+            }
+
             content = (
                 <FilteredUserList
                     style={{maxHeight}}
                     users={this.state.memberList}
-                    actions={[this.createRemoveMemberButton]}
+                    actions={removeButton}
                 />
             );
         }
@@ -218,5 +223,6 @@ ChannelMembersModal.defaultProps = {
 ChannelMembersModal.propTypes = {
     show: React.PropTypes.bool.isRequired,
     onModalDismissed: React.PropTypes.func.isRequired,
-    channel: React.PropTypes.object.isRequired
+    channel: React.PropTypes.object.isRequired,
+    isAdmin: React.PropTypes.bool.isRequired
 };

webapp/components/member_list_team.jsx

@@ -60,17 +60,23 @@ export default class MemberListTeam extends React.Component {
     }
 
     render() {
+        let teamMembersDropdown = null;
+        if (this.props.isAdmin) {
+            teamMembersDropdown = [TeamMembersDropdown];
+        }
+
         return (
             <FilteredUserList
                 style={this.props.style}
                 users={this.state.users}
                 teamMembers={this.state.teamMembers}
-                actions={[TeamMembersDropdown]}
+                actions={teamMembersDropdown}
             />
         );
     }
 }
 
 MemberListTeam.propTypes = {
-    style: React.PropTypes.object
+    style: React.PropTypes.object,
+    isAdmin: React.PropTypes.bool
 };

webapp/components/navbar_dropdown.jsx

@@ -158,18 +158,14 @@ export default class NavbarDropdown extends React.Component {
             }
         }
 
-        if (isAdmin) {
+        let membersName = (
-            manageLink = (
+            <FormattedMessage
-                <li>
+                id='navbar_dropdown.manageMembers'
-                    <ToggleModalButton dialogType={TeamMembersModal}>
+                defaultMessage='Manage Members'
-                        <FormattedMessage
+            />
-                            id='navbar_dropdown.manageMembers'
+        );
-                            defaultMessage='Manage Members'
-                        />
-                    </ToggleModalButton>
-                </li>
-            );
 
+        if (isAdmin) {
             teamSettings = (
                 <li>
                     <a
@@ -184,8 +180,26 @@ export default class NavbarDropdown extends React.Component {
                     </a>
                 </li>
             );
+        } else {
+            membersName = (
+                <FormattedMessage
+                    id='navbar_dropdown.viewMembers'
+                    defaultMessage='View Members'
+                />
+            );
         }
 
+        manageLink = (
+            <li>
+                <ToggleModalButton
+                    dialogType={TeamMembersModal}
+                    dialogProps={{isAdmin}}
+                >
+                    {membersName}
+                </ToggleModalButton>
+            </li>
+        );
+
         const integrationsEnabled =
             window.mm_config.EnableIncomingWebhooks === 'true' ||
             window.mm_config.EnableOutgoingWebhooks === 'true' ||

webapp/components/team_members_modal.jsx

@@ -66,7 +66,10 @@ export default class TeamMembersModal extends React.Component {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <MemberListTeam style={{maxHeight}}/>
+                    <MemberListTeam
+                        style={{maxHeight}}
+                        isAdmin={this.props.isAdmin}
+                    />
                 </Modal.Body>
                 <Modal.Footer>
                     <button
@@ -87,5 +90,6 @@ export default class TeamMembersModal extends React.Component {
 
 TeamMembersModal.propTypes = {
     show: React.PropTypes.bool.isRequired,
-    onHide: React.PropTypes.func.isRequired
+    onHide: React.PropTypes.func.isRequired,
+    isAdmin: React.PropTypes.bool.isRequired
 };

webapp/components/user_list_row.jsx

@@ -17,16 +17,19 @@ export default function UserListRow({user, teamMember, actions, actionProps}) {
         name = `${Utils.getFullName(user)} (@${user.username})`;
     }
 
-    const buttons = actions.map((Action, index) => {
+    let buttons = null;
-        return (
+    if (actions) {
-            <Action
+        buttons = actions.map((Action, index) => {
-                key={index.toString()}
+            return (
-                user={user}
+                <Action
-                teamMember={teamMember}
+                    key={index.toString()}
-                {...actionProps}
+                    user={user}
-            />
+                    teamMember={teamMember}
-        );
+                    {...actionProps}
-    });
+                />
+            );
+        });
+    }
 
     return (
         <div

webapp/i18n/en.json

@@ -834,6 +834,7 @@
   "channel_header.group": "Group",
   "channel_header.leave": "Leave {term}",
   "channel_header.manageMembers": "Manage Members",
+  "channel_header.viewMembers": "View Members",
   "channel_header.notificationPreferences": "Notification Preferences",
   "channel_header.recentMentions": "Recent Mentions",
   "channel_header.rename": "Rename {term}...",
@@ -1228,6 +1229,7 @@
   "navbar_dropdown.leave": "Leave Team",
   "navbar_dropdown.logout": "Logout",
   "navbar_dropdown.manageMembers": "Manage Members",
+  "navbar_dropdown.viewMembers": "View Members",
   "navbar_dropdown.report": "Report a Problem",
   "navbar_dropdown.switchTeam": "Switch to {team}",
   "navbar_dropdown.switchTo": "Switch to ",