3 files changed, 45 insertions, 9 deletions

diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx
index 3d86fe7c0..f698f2b13 100644
--- a/webapp/components/backstage/add_incoming_webhook.jsx
+++ b/webapp/components/backstage/add_incoming_webhook.jsx
@@ -172,6 +172,8 @@ export default class AddIncomingWebhook extends React.Component {
                                     id='channelId'
                                     value={this.state.channelId}
                                     onChange={this.updateChannelId}
+                                    selectOpen={true}
+                                    selectPrivate={true}
                                 />
                             </div>
                         </div>
diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index 5f07217ab..2fefd5965 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -224,6 +224,7 @@ export default class AddOutgoingWebhook extends React.Component {
                                     id='channelId'
                                     value={this.state.channelId}
                                     onChange={this.updateChannelId}
+                                    selectOpen={true}
                                 />
                             </div>
                         </div>
diff --git a/webapp/components/channel_select.jsx b/webapp/components/channel_select.jsx
index 238cfa1ae..59bf2f15a 100644
--- a/webapp/components/channel_select.jsx
+++ b/webapp/components/channel_select.jsx
@@ -6,12 +6,24 @@ import React from 'react';
 import Constants from 'utils/constants.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import * as Utils from 'utils/utils.jsx';
+import * as AsyncClient from 'utils/async_client.jsx';
 
 export default class ChannelSelect extends React.Component {
     static get propTypes() {
         return {
             onChange: React.PropTypes.func,
-            value: React.PropTypes.string
+            value: React.PropTypes.string,
+            selectOpen: React.PropTypes.bool.isRequired,
+            selectPrivate: React.PropTypes.bool.isRequired,
+            selectDm: React.PropTypes.bool.isRequired
+        };
+    }
+
+    static get defaultProps() {
+        return {
+            selectOpen: false,
+            selectPrivate: false,
+            selectDm: false
         };
     }
 
@@ -19,17 +31,16 @@ export default class ChannelSelect extends React.Component {
         super(props);
 
         this.handleChannelChange = this.handleChannelChange.bind(this);
+        this.compareByDisplayName = this.compareByDisplayName.bind(this);
+
+        AsyncClient.getMoreChannels(true);
 
         this.state = {
-            channels: []
+            channels: ChannelStore.getAll().sort(this.compareByDisplayName)
         };
     }
 
-    componentWillMount() {
-        this.setState({
-            channels: ChannelStore.getAll()
-        });
-
+    componentDidMount() {
         ChannelStore.addChangeListener(this.handleChannelChange);
     }
 
@@ -39,10 +50,14 @@ export default class ChannelSelect extends React.Component {
 
     handleChannelChange() {
         this.setState({
-            channels: ChannelStore.getAll()
+            channels: ChannelStore.getAll().concat(ChannelStore.getMoreAll()).sort(this.compareByDisplayName)
         });
     }
 
+    compareByDisplayName(channelA, channelB) {
+        return channelA.display_name.localeCompare(channelB.display_name);
+    }
+
     render() {
         const options = [
             <option
@@ -54,7 +69,25 @@ export default class ChannelSelect extends React.Component {
         ];
 
         this.state.channels.forEach((channel) => {
-            if (channel.type === Constants.OPEN_CHANNEL) {
+            if (channel.type === Constants.OPEN_CHANNEL && this.props.selectOpen) {
+                options.push(
+                    <option
+                        key={channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
+            } else if (channel.type === Constants.PRIVATE_CHANNEL && this.props.selectPrivate) {
+                options.push(
+                    <option
+                        key={channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
+            } else if (channel.type === Constants.DM_CHANNEL && this.props.selectDm) {
                 options.push(
                     <option
                         key={channel.id}