From b0090214ef4e550b1e82c6f8cb5f717bfefe358b Mon Sep 17 00:00:00 2001
From: David Lu <david.lu@hotmail.com>
Date: Wed, 20 Jul 2016 17:00:22 -0400
Subject: 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        | 19 +++++++++++++++
 webapp/components/channel_members_modal.jsx | 10 ++++++--
 webapp/components/member_list_team.jsx      | 10 ++++++--
 webapp/components/navbar_dropdown.jsx       | 36 ++++++++++++++++++++---------
 webapp/components/team_members_modal.jsx    |  8 +++++--
 webapp/components/user_list_row.jsx         | 23 ++++++++++--------
 webapp/i18n/en.json                         |  2 ++
 7 files changed, 81 insertions(+), 27 deletions(-)

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 5757fd3b2..573949a5e 100644
--- a/webapp/components/channel_header.jsx
+++ b/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}
diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx
index 55250d5c5..d20c00623 100644
--- a/webapp/components/channel_members_modal.jsx
+++ b/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
 };
diff --git a/webapp/components/member_list_team.jsx b/webapp/components/member_list_team.jsx
index d0714e942..9f18fba33 100644
--- a/webapp/components/member_list_team.jsx
+++ b/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
 };
diff --git a/webapp/components/navbar_dropdown.jsx b/webapp/components/navbar_dropdown.jsx
index c660bc164..8eb0a93a9 100644
--- a/webapp/components/navbar_dropdown.jsx
+++ b/webapp/components/navbar_dropdown.jsx
@@ -158,18 +158,14 @@ export default class NavbarDropdown extends React.Component {
             }
         }
 
-        if (isAdmin) {
-            manageLink = (
-                <li>
-                    <ToggleModalButton dialogType={TeamMembersModal}>
-                        <FormattedMessage
-                            id='navbar_dropdown.manageMembers'
-                            defaultMessage='Manage Members'
-                        />
-                    </ToggleModalButton>
-                </li>
-            );
+        let membersName = (
+            <FormattedMessage
+                id='navbar_dropdown.manageMembers'
+                defaultMessage='Manage Members'
+            />
+        );
 
+        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' ||
diff --git a/webapp/components/team_members_modal.jsx b/webapp/components/team_members_modal.jsx
index 9b8729b3a..7f44ca85c 100644
--- a/webapp/components/team_members_modal.jsx
+++ b/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
 };
diff --git a/webapp/components/user_list_row.jsx b/webapp/components/user_list_row.jsx
index aae3d4dd8..6761206e0 100644
--- a/webapp/components/user_list_row.jsx
+++ b/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) => {
-        return (
-            <Action
-                key={index.toString()}
-                user={user}
-                teamMember={teamMember}
-                {...actionProps}
-            />
-        );
-    });
+    let buttons = null;
+    if (actions) {
+        buttons = actions.map((Action, index) => {
+            return (
+                <Action
+                    key={index.toString()}
+                    user={user}
+                    teamMember={teamMember}
+                    {...actionProps}
+                />
+            );
+        });
+    }
 
     return (
         <div
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 3a514d0b3..aee906818 100644
--- a/webapp/i18n/en.json
+++ b/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 ",
-- 
cgit v1.2.3-1-g7c22