PLT-4532: added link to Members model in channel member list (#5065)

* PLT-4532: added link to Members model in channel member list

* PLT-4532: change modal behavior for team-modal in non-default channel and change link text

* PLT-4532: changed link text for regular members in non-default-channels

webapp/components/popover_list_members.jsx

@@ -5,6 +5,11 @@ import ProfilePicture from 'components/profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+
+import TeamMembersModal from './team_members_modal.jsx';
+import ChannelMembersModal from './channel_members_modal.jsx';
+import ChannelInviteModal from './channel_invite_modal.jsx';
 
 import {openDirectChannelToUser} from 'actions/channel_actions.jsx';
 
@@ -22,10 +27,17 @@ export default class PopoverListMembers extends React.Component {
     constructor(props) {
         super(props);
 
+        this.showMembersModal = this.showMembersModal.bind(this);
+
         this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
         this.closePopover = this.closePopover.bind(this);
 
-        this.state = {showPopover: false};
+        this.state = {
+            showPopover: false,
+            showTeamMembersModal: false,
+            showChannelMembersModal: false,
+            showChannelInviteModal: false
+        };
     }
 
     componentDidUpdate() {
@@ -53,12 +65,31 @@ export default class PopoverListMembers extends React.Component {
         this.setState({showPopover: false});
     }
 
+    showMembersModal(e) {
+        e.preventDefault();
+
+        if (ChannelStore.isDefault(this.props.channel)) {
+            this.setState({
+                showPopover: false,
+                showTeamMembersModal: true
+            });
+        } else {
+            this.setState({
+                showPopover: false,
+                showChannelMembersModal: true
+            });
+        }
+    }
+
     render() {
         const popoverHtml = [];
         const members = this.props.members;
         const teamMembers = UserStore.getProfilesUsernameMap();
+        let isAdmin = false;
         const currentUserId = UserStore.getCurrentId();
 
+        isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
+
         if (members && teamMembers) {
             members.sort((a, b) => {
                 const aName = Utils.displayUsername(a.id);
@@ -117,17 +148,37 @@ export default class PopoverListMembers extends React.Component {
                 }
             });
 
+            let membersName = (
+                <FormattedMessage
+                    id='members_popover.manageMembers'
+                    defaultMessage='Manage Members'
+                />
+            );
+            if (!isAdmin && ChannelStore.isDefault(this.props.channel)) {
+                membersName = (
+                    <FormattedMessage
+                        id='members_popover.viewMembers'
+                        defaultMessage='View Members'
+                    />
+                );
+            }
+
             popoverHtml.push(
                 <div
                     className='more-modal__row'
                     key={'popover-member-more'}
                 >
-                    <div className='col-sm-5'/>
+                    <div className='col-sm-3'/>
                     <div className='more-modal__details'>
                         <div
                             className='more-modal__name'
                         >
-                            {'...'}
+                            <a
+                                href='#'
+                                onClick={this.showMembersModal}
+                            >
+                                {membersName}
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -146,6 +197,38 @@ export default class PopoverListMembers extends React.Component {
                 defaultMessage='Members'
             />
         );
+
+        let channelMembersModal;
+        if (this.state.showChannelMembersModal) {
+            channelMembersModal = (
+                <ChannelMembersModal
+                    onModalDismissed={() => this.setState({showChannelMembersModal: false})}
+                    showInviteModal={() => this.setState({showChannelInviteModal: true})}
+                    channel={this.props.channel}
+                />
+            );
+        }
+
+        let teamMembersModal;
+        if (this.state.showTeamMembersModal) {
+            teamMembersModal = (
+                <TeamMembersModal
+                    onHide={() => this.setState({showTeamMembersModal: false})}
+                    isAdmin={isAdmin}
+                />
+            );
+        }
+
+        let channelInviteModal;
+        if (this.state.showChannelInviteModal) {
+            channelInviteModal = (
+                <ChannelInviteModal
+                    onHide={() => this.setState({showChannelInviteModal: false})}
+                    channel={this.props.channel}
+                />
+            );
+        }
+
         return (
             <div>
                 <div
@@ -181,6 +264,9 @@ export default class PopoverListMembers extends React.Component {
                         <div className='more-modal__list'>{popoverHtml}</div>
                     </Popover>
                 </Overlay>
+                {channelMembersModal}
+                {teamMembersModal}
+                {channelInviteModal}
             </div>
         );
     }

webapp/i18n/en.json

@@ -1581,8 +1581,10 @@
   "member_item.makeAdmin": "Make Admin",
   "member_item.member": "Member",
   "member_list.noUsersAdd": "No users to add.",
+  "members_popover.manageMembers": "Manage Members",
   "members_popover.msg": "Message",
   "members_popover.title": "Members",
+  "members_popover.viewMembers": "View Members",
   "mfa.confirm.complete": "<strong>Set up complete!</strong>",
   "mfa.confirm.okay": "Okay",
   "mfa.confirm.secure": "Your account is now secure. Next time you sign in, you will be asked to enter a code from the Google Authenticator app on your phone.",