Add modified view members modal to Town Square (#5695)

webapp/components/channel_header.jsx

@@ -462,6 +462,27 @@ export default class ChannelHeader extends React.Component {
                 </li>
             );
 
+            if (ChannelStore.isDefault(channel)) {
+                dropdownContents.push(
+                    <li
+                        id='channelManageMembers'
+                        key='manage_members'
+                        role='presentation'
+                    >
+                        <a
+                            role='menuitem'
+                            href='#'
+                            onClick={() => this.setState({showMembersModal: true})}
+                        >
+                            <FormattedMessage
+                                id='channel_header.viewMembers'
+                                defaultMessage='View Members'
+                            />
+                        </a>
+                    </li>
+                );
+            }
+
             dropdownContents.push(
                 <li
                     id='channelNotificationPreferences'
@@ -723,7 +744,7 @@ export default class ChannelHeader extends React.Component {
         );
 
         let channelMembersModal;
-        if (this.state.showMembersModal && channel.name !== Constants.DEFAULT_CHANNEL) {
+        if (this.state.showMembersModal) {
             channelMembersModal = (
                 <ChannelMembersModal
                     onModalDismissed={() => this.setState({showMembersModal: false})}

webapp/components/channel_members_dropdown.jsx

@@ -10,6 +10,7 @@ import {removeUserFromChannel, makeUserChannelAdmin, makeUserChannelMember} from
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {canManageMembers} from 'utils/channel_utils.jsx';
+import {Constants} from 'utils/constants.jsx';
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
@@ -127,7 +128,7 @@ export default class ChannelMembersDropdown extends React.Component {
             }
 
             let removeFromChannel = null;
-            if (this.canRemoveMember()) {
+            if (this.canRemoveMember() && this.props.channel.name !== Constants.DEFAULT_CHANNEL) {
                 removeFromChannel = (
                     <li role='presentation'>
                         <a
@@ -207,7 +208,7 @@ export default class ChannelMembersDropdown extends React.Component {
                     {serverError}
                 </div>
             );
-        } else if (this.canRemoveMember()) {
+        } else if (this.canRemoveMember() && this.props.channel.name !== Constants.DEFAULT_CHANNEL) {
             return (
                 <button
                     id='removeMember'
@@ -222,6 +223,12 @@ export default class ChannelMembersDropdown extends React.Component {
                 </button>
             );
         } else if (this.isChannelAdmin()) {
+            if (this.props.channel.name === Constants.DEFAULT_CHANNEL) {
+                return (
+                    <div/>
+                );
+            }
+
             return (
                 <div>
                     <FormattedMessage
@@ -232,6 +239,12 @@ export default class ChannelMembersDropdown extends React.Component {
             );
         }
 
+        if (this.props.channel.name === Constants.DEFAULT_CHANNEL) {
+            return (
+                <div/>
+            );
+        }
+
         return (
             <div>
                 <FormattedMessage

webapp/components/channel_members_modal.jsx

@@ -8,6 +8,7 @@ import UserStore from 'stores/user_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 
 import {canManageMembers} from 'utils/channel_utils.jsx';
+import {Constants} from 'utils/constants.jsx';
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
@@ -35,7 +36,7 @@ export default class ChannelMembersModal extends React.Component {
         const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel();
 
         let addMembersButton = null;
-        if (canManageMembers(this.state.channel, isSystemAdmin, isTeamAdmin, isChannelAdmin)) {
+        if (canManageMembers(this.state.channel, isSystemAdmin, isTeamAdmin, isChannelAdmin) && this.state.channel.name !== Constants.DEFAULT_CHANNEL) {
             addMembersButton = (
                 <a
                     id='showInviteModal'

webapp/components/navbar.jsx

@@ -349,7 +349,25 @@ export default class Navbar extends React.Component {
                     </li>
                 );
 
-                if (!ChannelStore.isDefault(channel)) {
+                if (ChannelStore.isDefault(channel)) {
+                    manageMembersOption = (
+                        <li
+                            key='view_members'
+                            role='presentation'
+                        >
+                            <a
+                                role='menuitem'
+                                href='#'
+                                onClick={this.showMembersModal}
+                            >
+                                <FormattedMessage
+                                    id='channel_header.viewMembers'
+                                    defaultMessage='View Members'
+                                />
+                            </a>
+                        </li>
+                    );
+                } else {
                     addMembersOption = (
                         <li role='presentation'>
                             <ToggleModalButton

webapp/components/popover_list_members.jsx

@@ -70,17 +70,10 @@ export default class PopoverListMembers extends React.Component {
     showMembersModal(e) {
         e.preventDefault();
 
-        if (ChannelStore.isDefault(this.props.channel)) {
+        this.setState({
-            this.setState({
+            showPopover: false,
-                showPopover: false,
+            showChannelMembersModal: true
-                showTeamMembersModal: true
+        });
-            });
-        } else {
-            this.setState({
-                showPopover: false,
-                showChannelMembersModal: true
-            });
-        }
     }
 
     render() {
@@ -158,7 +151,11 @@ export default class PopoverListMembers extends React.Component {
                         defaultMessage='Manage Members'
                     />
                 );
-                if (!canManageMembers(this.props.channel, isSystemAdmin, isTeamAdmin, isChannelAdmin) && !ChannelStore.isDefault(this.props.channel)) {
+
+                const manageMembers = canManageMembers(this.props.channel, isSystemAdmin, isTeamAdmin, isChannelAdmin);
+                const isDefaultChannel = ChannelStore.isDefault(this.props.channel);
+
+                if ((manageMembers === false && isDefaultChannel === false) || isDefaultChannel) {
                     membersName = (
                         <FormattedMessage
                             id='members_popover.viewMembers'