Bug fixes for search and direct messages (#4986)

* PLT-5145 - Fixing search popover on mobile

* PLT-5093 - Fixing direct messages list height

webapp/components/channel_members_modal.jsx

@@ -168,7 +168,7 @@ export default class ChannelMembersModal extends React.Component {
         return (
             <div>
                 <Modal
-                    dialogClassName='more-modal'
+                    dialogClassName='more-modal more-modal--action'
                     show={this.state.show}
                     onHide={this.onHide}
                     onExited={this.props.onModalDismissed}
@@ -210,4 +210,4 @@ ChannelMembersModal.propTypes = {
     onModalDismissed: React.PropTypes.func.isRequired,
     showInviteModal: React.PropTypes.func.isRequired,
     channel: React.PropTypes.object.isRequired
-};
+};

webapp/components/more_channels.jsx

@@ -9,7 +9,6 @@ import TeamStore from 'stores/team_store.jsx';
 
 import Constants from 'utils/constants.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
-import * as ChannelUtils from 'utils/channel_utils.jsx';
 import {joinChannel, searchMoreChannels} from 'actions/channel_actions.jsx';
 
 import React from 'react';
@@ -152,14 +151,19 @@ export default class MoreChannels extends React.Component {
         const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
         const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
 
-        if (!ChannelUtils.showCreateOption(Constants.OPEN_CHANNEL, isAdmin, isSystemAdmin)) {
-            createNewChannelButton = null;
-            createChannelHelpText = null;
+        if (global.window.mm_license.IsLicensed === 'true') {
+            if (global.window.mm_config.RestrictPublicChannelManagement === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
+                createNewChannelButton = null;
+                createChannelHelpText = null;
+            } else if (global.window.mm_config.RestrictPublicChannelManagement === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
+                createNewChannelButton = null;
+                createChannelHelpText = null;
+            }
         }
 
         return (
             <Modal
-                dialogClassName='more-modal more-public-channels'
+                dialogClassName='more-modal more-modal--action'
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
@@ -192,4 +196,4 @@ export default class MoreChannels extends React.Component {
 MoreChannels.propTypes = {
     onModalDismissed: React.PropTypes.func,
     handleNewChannel: React.PropTypes.func
-};
+};

webapp/components/more_direct_channels.jsx

@@ -195,7 +195,9 @@ export default class MoreDirectChannels extends React.Component {
 
     render() {
         let teamToggle;
+        let memberClass = '';
         if (global.window.mm_config.RestrictDirectMessage === 'any') {
+            memberClass = 'more-system-members';
             teamToggle = (
                 <div className='member-select__container'>
                     <select
@@ -226,7 +228,7 @@ export default class MoreDirectChannels extends React.Component {
 
         return (
             <Modal
-                dialogClassName='more-modal more-direct-channels'
+                dialogClassName={'more-modal more-direct-channels ' + memberClass}
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
@@ -258,4 +260,4 @@ export default class MoreDirectChannels extends React.Component {
 
 MoreDirectChannels.propTypes = {
     onModalDismissed: React.PropTypes.func
-};
+};

webapp/components/search_bar.jsx

@@ -104,6 +104,7 @@ export default class SearchBar extends React.Component {
         SearchStore.storeSearchTerm(term);
         SearchStore.emitSearchTermChange(false);
         this.setState({searchTerm: term});
+        this.refs.searchOverlay.hide();
     }
 
     handleUserBlur() {
@@ -179,11 +180,6 @@ export default class SearchBar extends React.Component {
             isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
         }
 
-        let helpClass = 'search-help-popover';
-        if (!this.state.searchTerm && this.state.focused) {
-            helpClass += ' visible';
-        }
-
         const recentMentionsTooltip = (
             <Tooltip id='recentMentionsTooltip'>
                 <FormattedMessage
@@ -197,7 +193,7 @@ export default class SearchBar extends React.Component {
             <Popover
                 id='searchbar-help-popup'
                 placement='bottom'
-                className={helpClass}
+                className='search-help-popover'
             >
                 <FormattedHTMLMessage
                     id='search_bar.usage'
@@ -290,12 +286,12 @@ export default class SearchBar extends React.Component {
                 >
                     <span className='fa fa-search sidebar__search-icon'/>
                     <OverlayTrigger
+                        ref='searchOverlay'
                         delayShow={Constants.OVERLAY_TIME_DELAY_SMALL}
                         placement='bottom'
                         overlay={searchPopover}
-                        trigger='focus'
+                        trigger='click'
                         rootClose={true}
-                        className={helpClass}
                     >
                         <SuggestionBox
                             ref='search'

webapp/components/searchable_channel_list.jsx

@@ -180,7 +180,9 @@ export default class SearchableChannelList extends React.Component {
                     ref='channelList'
                     className='more-modal__list'
                 >
-                    {listContent}
+                    <div>
+                        {listContent}
+                    </div>
                 </div>
                 <div className='filter-controls'>
                     {previousButton}
@@ -202,4 +204,4 @@ SearchableChannelList.propTypes = {
     search: React.PropTypes.func.isRequired,
     handleJoin: React.PropTypes.func.isRequired,
     noResultsText: React.PropTypes.object
-};
+};