Merge pull request #1399 from mattermost/plt-1104

Fix channel invite button on channel intro message and fix empty channel invite modal.

4 files changed, 20 insertions, 17 deletions

diff --git a/web/react/components/posts_view_container.jsx b/web/react/components/posts_view_container.jsx
index 5037a86cd..8b92a26a7 100644
--- a/web/react/components/posts_view_container.jsx
+++ b/web/react/components/posts_view_container.jsx
@@ -3,6 +3,7 @@
 
 const PostsView = require('./posts_view.jsx');
 const LoadingScreen = require('./loading_screen.jsx');
+const ChannelInviteModal = require('./channel_invite_modal.jsx');
 
 const ChannelStore = require('../stores/channel_store.jsx');
 const PostStore = require('../stores/post_store.jsx');
@@ -50,6 +51,7 @@ export default class PostsViewContainer extends React.Component {
             });
         }
 
+        state.showInviteModal = false;
         this.state = state;
     }
     componentDidMount() {
@@ -248,7 +250,7 @@ export default class PostsViewContainer extends React.Component {
                     postViewScrolled={this.handlePostsViewScroll}
                     loadMorePostsTopClicked={this.loadMorePostsTop}
                     numPostsToDisplay={this.state.numPostsToDisplay}
-                    introText={channel ? createChannelIntroMessage(channel) : null}
+                    introText={channel ? createChannelIntroMessage(channel, () => this.setState({showInviteModal: true})) : null}
                     messageSeparatorTime={this.state.currentLastViewed}
                 />
             );
@@ -263,7 +265,13 @@ export default class PostsViewContainer extends React.Component {
         }
 
         return (
-            <div id='post-list'>{postListCtls}</div>
+            <div id='post-list'>
+                {postListCtls}
+                <ChannelInviteModal
+                    show={this.state.showInviteModal}
+                    onModalDismissed={() => this.setState({showInviteModal: false})}
+                />
+            </div>
         );
     }
 }
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index f5ce5c10e..0b1abe4fe 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -142,7 +142,7 @@ export default class Sidebar extends React.Component {
             }
         }
 
-        const hiddenDirectChannelCount = UserStore.getActiveOnlyProfileList().length - visibleDirectChannels.length;
+        const hiddenDirectChannelCount = UserStore.getActiveOnlyProfileList(true).length - visibleDirectChannels.length;
 
         visibleDirectChannels.sort(this.sortChannelsByDisplayName);
 
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index 6b7d671fc..b173c9ca0 100644
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -193,13 +193,13 @@ class UserStoreClass extends EventEmitter {
         return BrowserStore.getItem('profiles', {});
     }
 
-    getActiveOnlyProfiles() {
+    getActiveOnlyProfiles(skipCurrent) {
         const active = {};
         const profiles = this.getProfiles();
         const currentId = this.getCurrentId();
 
         for (var key in profiles) {
-            if (profiles[key].delete_at === 0 && profiles[key].id !== currentId) {
+            if (!(profiles[key].id === currentId && skipCurrent) && profiles[key].delete_at === 0) {
                 active[key] = profiles[key];
             }
         }
diff --git a/web/react/utils/channel_intro_mssages.jsx b/web/react/utils/channel_intro_mssages.jsx
index 161c79761..f27e23a82 100644
--- a/web/react/utils/channel_intro_mssages.jsx
+++ b/web/react/utils/channel_intro_mssages.jsx
@@ -9,15 +9,15 @@ const ChannelStore = require('../stores/channel_store.jsx');
 const Constants = require('../utils/constants.jsx');
 const TeamStore = require('../stores/team_store.jsx');
 
-export function createChannelIntroMessage(channel) {
+export function createChannelIntroMessage(channel, showInviteModal) {
     if (channel.type === 'D') {
         return createDMIntroMessage(channel);
     } else if (ChannelStore.isDefault(channel)) {
         return createDefaultIntroMessage(channel);
     } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
-        return createOffTopicIntroMessage(channel);
+        return createOffTopicIntroMessage(channel, showInviteModal);
     } else if (channel.type === 'O' || channel.type === 'P') {
-        return createStandardIntroMessage(channel);
+        return createStandardIntroMessage(channel, showInviteModal);
     }
 }
 
@@ -71,7 +71,7 @@ export function createDMIntroMessage(channel) {
     );
 }
 
-export function createOffTopicIntroMessage(channel) {
+export function createOffTopicIntroMessage(channel, showInviteModal) {
     return (
         <div className='channel-intro'>
             <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
@@ -91,10 +91,8 @@ export function createOffTopicIntroMessage(channel) {
                 <i className='fa fa-pencil'></i>{'Set a header'}
             </a>
             <a
-                className='intro-links'
                 href='#'
-                data-toggle='modal'
-                data-target='#channel_invite'
+                onClick={showInviteModal}
             >
                 <i className='fa fa-user-plus'></i>{'Invite others to this channel'}
             </a>
@@ -155,7 +153,7 @@ export function createDefaultIntroMessage(channel) {
     );
 }
 
-export function createStandardIntroMessage(channel) {
+export function createStandardIntroMessage(channel, showInviteModal) {
     var uiName = channel.display_name;
     var creatorName = '';
 
@@ -206,14 +204,11 @@ export function createStandardIntroMessage(channel) {
                 <i className='fa fa-pencil'></i>{'Set a header'}
             </a>
             <a
-                className='intro-links'
                 href='#'
-                data-toggle='modal'
-                data-target='#channel_invite'
+                onClick={showInviteModal}
             >
                 <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
             </a>
-
         </div>
     );
 }