Added ChannelSelect component

3 files changed, 110 insertions, 54 deletions

diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx
index 962792ed0..cb7828698 100644
--- a/webapp/components/backstage/add_incoming_webhook.jsx
+++ b/webapp/components/backstage/add_incoming_webhook.jsx
@@ -5,9 +5,9 @@ import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import {browserHistory} from 'react-router';
-import ChannelStore from 'stores/channel_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
+import ChannelSelect from 'components/channel_select.jsx';
 import {FormattedMessage} from 'react-intl';
 import FormError from 'components/form_error.jsx';
 import {Link} from 'react-router';
@@ -22,13 +22,13 @@ export default class AddIncomingWebhook extends React.Component {
 
         this.updateName = this.updateName.bind(this);
         this.updateDescription = this.updateDescription.bind(this);
-        this.updateChannelName = this.updateChannelName.bind(this);
+        this.updateChannelId = this.updateChannelId.bind(this);
 
         this.state = {
             team: TeamStore.getCurrent(),
             name: '',
             description: '',
-            channelName: '',
+            channelId: '',
             saving: false,
             serverError: '',
             clientError: null
@@ -62,15 +62,13 @@ export default class AddIncomingWebhook extends React.Component {
             clientError: ''
         });
 
-        const channel = ChannelStore.getByName(this.state.channelName);
-
-        if (!channel) {
+        if (!this.state.channelId) {
             this.setState({
                 saving: false,
                 clientError: (
                     <FormattedMessage
-                        id='add_incoming_webhook.channel_name_required'
-                        defaultMessage='A valid channel name (eg. town-square) is required'
+                        id='add_incoming_webhook.channel_required'
+                        defaultMessage='A valid channel is required'
                     />
                 )
             });
@@ -79,7 +77,7 @@ export default class AddIncomingWebhook extends React.Component {
         }
 
         const hook = {
-            channel_id: channel.id
+            channel_id: this.state.channelId
         };
 
         AsyncClient.addIncomingHook(
@@ -107,9 +105,9 @@ export default class AddIncomingWebhook extends React.Component {
         });
     }
 
-    updateChannelName(e) {
+    updateChannelId(e) {
         this.setState({
-            channelName: e.target.value
+            channelId: e.target.value
         });
     }
 
@@ -170,18 +168,17 @@ export default class AddIncomingWebhook extends React.Component {
                     <div className='add-integration__row'>
                         <label
                             className='add-integration__label'
-                            htmlFor='channelName'
+                            htmlFor='channelId'
                         >
                             <FormattedMessage
-                                id='add-incoming-webhook.channelName'
-                                defaultMessage='Channel Name'
+                                id='add-incoming-webhook.channelId'
+                                defaultMessage='Channel'
                             />
                         </label>
-                        <input
-                            id='channelName'
-                            type='text'
-                            value={this.state.channelName}
-                            onChange={this.updateChannelName}
+                        <ChannelSelect
+                            id='channelId'
+                            value={this.state.channelId}
+                            onChange={this.updateChannelId}
                         />
                     </div>
                     <div className='add-integration__submit-row'>
diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index 6e2f749f8..808a7185d 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -5,9 +5,9 @@ import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import {browserHistory} from 'react-router';
-import ChannelStore from 'stores/channel_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
+import ChannelSelect from 'components/channel_select.jsx';
 import {FormattedMessage} from 'react-intl';
 import FormError from 'components/form_error.jsx';
 import {Link} from 'react-router';
@@ -22,7 +22,7 @@ export default class AddOutgoingWebhook extends React.Component {
 
         this.updateName = this.updateName.bind(this);
         this.updateDescription = this.updateDescription.bind(this);
-        this.updateChannelName = this.updateChannelName.bind(this);
+        this.updateChannelId = this.updateChannelId.bind(this);
         this.updateTriggerWords = this.updateTriggerWords.bind(this);
         this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
 
@@ -30,7 +30,7 @@ export default class AddOutgoingWebhook extends React.Component {
             team: TeamStore.getCurrent(),
             name: '',
             description: '',
-            channelName: '',
+            channelId: '',
             triggerWords: '',
             callbackUrls: '',
             saving: false,
@@ -66,32 +66,13 @@ export default class AddOutgoingWebhook extends React.Component {
             clientError: ''
         });
 
-        let channelId = '';
-        if (this.state.channelName) {
-            const channel = ChannelStore.getByName(this.state.channelName);
-
-            if (!channel) {
-                this.setState({
-                    saving: false,
-                    clientError: (
-                        <FormattedMessage
-                            id='add_outgoing_webhook.channel_name_required'
-                            defaultMessage='A valid channel name (eg. town-square) is required'
-                        />
-                    )
-                });
-
-                return;
-            }
-
-            channelId = channel.id;
-        } else if (!this.state.triggerWords) {
+        if (!this.state.channelId || !this.state.triggerWords) {
             this.setState({
                 saving: false,
                 clientError: (
                     <FormattedMessage
                         id='add_outgoing_webhook.trigger_words_required'
-                        defaultMessage='A valid channel name or a list of trigger words is required'
+                        defaultMessage='A valid channel or a list of trigger words is required'
                     />
                 )
             });
@@ -114,7 +95,7 @@ export default class AddOutgoingWebhook extends React.Component {
         }
 
         const hook = {
-            channel_id: channelId,
+            channel_id: this.state.channelId,
             trigger_words: this.state.triggerWords.split('\n').map((word) => word.trim()),
             callback_urls: this.state.callbackUrls.split('\n').map((url) => url.trim())
         };
@@ -144,9 +125,9 @@ export default class AddOutgoingWebhook extends React.Component {
         });
     }
 
-    updateChannelName(e) {
+    updateChannelId(e) {
         this.setState({
-            channelName: e.target.value
+            channelId: e.target.value
         });
     }
 
@@ -219,18 +200,17 @@ export default class AddOutgoingWebhook extends React.Component {
                     <div className='add-integration__row'>
                         <label
                             className='add-integration__label'
-                            htmlFor='channelName'
+                            htmlFor='channelId'
                         >
                             <FormattedMessage
-                                id='add-outgoing-webhook.channelName'
-                                defaultMessage='Channel Name'
+                                id='add-outgoing-webhook.channelId'
+                                defaultMessage='Channel'
                             />
                         </label>
-                        <input
-                            id='channelName'
-                            type='text'
-                            value={this.state.channelName}
-                            onChange={this.updateChannelName}
+                        <ChannelSelect
+                            id='channelId'
+                            value={this.state.channelId}
+                            onChange={this.updateChannelId}
                         />
                     </div>
                     <div className='add-integration__row'>
diff --git a/webapp/components/channel_select.jsx b/webapp/components/channel_select.jsx
new file mode 100644
index 000000000..b110b32da
--- /dev/null
+++ b/webapp/components/channel_select.jsx
@@ -0,0 +1,79 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import Constants from 'utils/constants.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+export default class ChannelSelect extends React.Component {
+    static get propTypes() {
+        return {
+            onChange: React.PropTypes.func,
+            value: React.PropTypes.string
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleChannelChange = this.handleChannelChange.bind(this);
+
+        this.state = {
+            channels: []
+        };
+    }
+
+    componentWillMount() {
+        this.setState({
+            channels: ChannelStore.getAll()
+        });
+
+        ChannelStore.addChangeListener(this.handleChannelChange);
+    }
+
+    componentWillUnmount() {
+        ChannelStore.removeChangeListener(this.handleChannelChange);
+    }
+
+    handleChannelChange() {
+        this.setState({
+            channels: ChannelStore.getAll()
+        });
+    }
+
+    render() {
+        const options = [
+            <option
+                key=''
+                value=''
+            >
+                {Utils.localizeMessage('channel-select.select', '--- Select a channel ---')}
+            </option>
+        ];
+
+        this.state.channels.forEach((channel) => {
+            if (channel.type !== Constants.DM_CHANNEL) {
+                options.push(
+                    <option
+                        key={channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
+            }
+        });
+
+        return (
+            <select
+                className='form-control'
+                value={this.props.value}
+                onChange={this.props.onChange}
+            >
+                {options}
+            </select>
+        );
+    }
+}