summaryrefslogtreecommitdiffstats
path: root/webapp/components/integrations/components/add_outgoing_webhook.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components/integrations/components/add_outgoing_webhook.jsx')
-rw-r--r--webapp/components/integrations/components/add_outgoing_webhook.jsx349
1 files changed, 349 insertions, 0 deletions
diff --git a/webapp/components/integrations/components/add_outgoing_webhook.jsx b/webapp/components/integrations/components/add_outgoing_webhook.jsx
new file mode 100644
index 000000000..bd49fedc9
--- /dev/null
+++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx
@@ -0,0 +1,349 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+
+import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
+import ChannelSelect from 'components/channel_select.jsx';
+import {FormattedMessage} from 'react-intl';
+import FormError from 'components/form_error.jsx';
+import {browserHistory, Link} from 'react-router/es6';
+import SpinnerButton from 'components/spinner_button.jsx';
+
+export default class AddOutgoingWebhook extends React.Component {
+ static get propTypes() {
+ return {
+ team: React.propTypes.object.isRequired
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.handleSubmit = this.handleSubmit.bind(this);
+
+ this.updateDisplayName = this.updateDisplayName.bind(this);
+ this.updateDescription = this.updateDescription.bind(this);
+ this.updateContentType = this.updateContentType.bind(this);
+ this.updateChannelId = this.updateChannelId.bind(this);
+ this.updateTriggerWords = this.updateTriggerWords.bind(this);
+ this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
+
+ this.state = {
+ displayName: '',
+ description: '',
+ contentType: 'application/x-www-form-urlencoded',
+ channelId: '',
+ triggerWords: '',
+ callbackUrls: '',
+ saving: false,
+ serverError: '',
+ clientError: null
+ };
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+
+ if (this.state.saving) {
+ return;
+ }
+
+ this.setState({
+ saving: true,
+ serverError: '',
+ clientError: ''
+ });
+
+ const triggerWords = [];
+ if (this.state.triggerWords) {
+ for (let triggerWord of this.state.triggerWords.split('\n')) {
+ triggerWord = triggerWord.trim();
+
+ if (triggerWord.length > 0) {
+ triggerWords.push(triggerWord);
+ }
+ }
+ }
+
+ if (!this.state.channelId && triggerWords.length === 0) {
+ this.setState({
+ saving: false,
+ clientError: (
+ <FormattedMessage
+ id='add_outgoing_webhook.triggerWordsOrChannelRequired'
+ defaultMessage='A valid channel or a list of trigger words is required'
+ />
+ )
+ });
+
+ return;
+ }
+
+ const callbackUrls = [];
+ for (let callbackUrl of this.state.callbackUrls.split('\n')) {
+ callbackUrl = callbackUrl.trim();
+
+ if (callbackUrl.length > 0) {
+ callbackUrls.push(callbackUrl);
+ }
+ }
+
+ if (callbackUrls.length === 0) {
+ this.setState({
+ saving: false,
+ clientError: (
+ <FormattedMessage
+ id='add_outgoing_webhook.callbackUrlsRequired'
+ defaultMessage='One or more callback URLs are required'
+ />
+ )
+ });
+
+ return;
+ }
+
+ const hook = {
+ channel_id: this.state.channelId,
+ trigger_words: triggerWords,
+ callback_urls: callbackUrls,
+ display_name: this.state.displayName,
+ content_type: this.state.contentType,
+ description: this.state.description
+ };
+
+ AsyncClient.addOutgoingHook(
+ hook,
+ () => {
+ browserHistory.push('/' + this.props.team.name + '/integrations/outgoing_webhooks');
+ },
+ (err) => {
+ this.setState({
+ saving: false,
+ serverError: err.message
+ });
+ }
+ );
+ }
+
+ updateDisplayName(e) {
+ this.setState({
+ displayName: e.target.value
+ });
+ }
+
+ updateDescription(e) {
+ this.setState({
+ description: e.target.value
+ });
+ }
+
+ updateContentType(e) {
+ this.setState({
+ contentType: e.target.value
+ });
+ }
+
+ updateChannelId(e) {
+ this.setState({
+ channelId: e.target.value
+ });
+ }
+
+ updateTriggerWords(e) {
+ this.setState({
+ triggerWords: e.target.value
+ });
+ }
+
+ updateCallbackUrls(e) {
+ this.setState({
+ callbackUrls: e.target.value
+ });
+ }
+
+ render() {
+ const contentTypeOption1 = 'application/x-www-form-urlencoded';
+ const contentTypeOption2 = 'application/json';
+ return (
+ <div className='backstage-content'>
+ <BackstageHeader>
+ <Link to={'/' + this.props.team.name + '/integrations/outgoing_webhooks'}>
+ <FormattedMessage
+ id='installed_outgoing_webhooks.header'
+ defaultMessage='Outgoing Webhooks'
+ />
+ </Link>
+ <FormattedMessage
+ id='add_outgoing_webhook.header'
+ defaultMessage='Add'
+ />
+ </BackstageHeader>
+ <div className='backstage-form'>
+ <form
+ className='form-horizontal'
+ onSubmit={this.handleSubmit}
+ >
+ <div className='form-group'>
+ <label
+ className='control-label col-sm-4'
+ htmlFor='displayName'
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.displayName'
+ defaultMessage='Display Name'
+ />
+ </label>
+ <div className='col-md-5 col-sm-8'>
+ <input
+ id='displayName'
+ type='text'
+ maxLength='64'
+ className='form-control'
+ value={this.state.displayName}
+ onChange={this.updateDisplayName}
+ />
+ </div>
+ </div>
+ <div className='form-group'>
+ <label
+ className='control-label col-sm-4'
+ htmlFor='description'
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.description'
+ defaultMessage='Description'
+ />
+ </label>
+ <div className='col-md-5 col-sm-8'>
+ <input
+ id='description'
+ type='text'
+ maxLength='128'
+ className='form-control'
+ value={this.state.description}
+ onChange={this.updateDescription}
+ />
+ </div>
+ </div>
+ <div className='form-group'>
+ <label
+ className='control-label col-sm-4'
+ htmlFor='contentType'
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.content_Type'
+ defaultMessage='Content Type'
+ />
+ </label>
+ <div className='col-md-5 col-sm-8'>
+ <select
+ className='form-control'
+ value={this.state.contentType}
+ onChange={this.updateContentType}
+ >
+ <option
+ value={contentTypeOption1}
+ >
+ {contentTypeOption1}
+ </option>
+ <option
+ value={contentTypeOption2}
+ >
+ {contentTypeOption2}
+ </option>
+ </select>
+ </div>
+ </div>
+ <div className='form-group'>
+ <label
+ className='control-label col-sm-4'
+ htmlFor='channelId'
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.channel'
+ defaultMessage='Channel'
+ />
+ </label>
+ <div className='col-md-5 col-sm-8'>
+ <ChannelSelect
+ id='channelId'
+ value={this.state.channelId}
+ onChange={this.updateChannelId}
+ selectOpen={true}
+ />
+ </div>
+ </div>
+ <div className='form-group'>
+ <label
+ className='control-label col-sm-4'
+ htmlFor='triggerWords'
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.triggerWords'
+ defaultMessage='Trigger Words (One Per Line)'
+ />
+ </label>
+ <div className='col-md-5 col-sm-8'>
+ <textarea
+ id='triggerWords'
+ rows='3'
+ maxLength='1000'
+ className='form-control'
+ value={this.state.triggerWords}
+ onChange={this.updateTriggerWords}
+ />
+ </div>
+ </div>
+ <div className='form-group'>
+ <label
+ className='control-label col-sm-4'
+ htmlFor='callbackUrls'
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.callbackUrls'
+ defaultMessage='Callback URLs (One Per Line)'
+ />
+ </label>
+ <div className='col-md-5 col-sm-8'>
+ <textarea
+ id='callbackUrls'
+ rows='3'
+ maxLength='1000'
+ className='form-control'
+ value={this.state.callbackUrls}
+ onChange={this.updateCallbackUrls}
+ />
+ </div>
+ </div>
+ <div className='backstage-form__footer'>
+ <FormError errors={[this.state.serverError, this.state.clientError]}/>
+ <Link
+ className='btn btn-sm'
+ to={'/' + this.props.team.name + '/integrations/outgoing_webhooks'}
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.cancel'
+ defaultMessage='Cancel'
+ />
+ </Link>
+ <SpinnerButton
+ className='btn btn-primary'
+ type='submit'
+ spinning={this.state.saving}
+ onClick={this.handleSubmit}
+ >
+ <FormattedMessage
+ id='add_outgoing_webhook.save'
+ defaultMessage='Save'
+ />
+ </SpinnerButton>
+ </div>
+ </form>
+ </div>
+ </div>
+ );
+ }
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-28 10:58:33 +0000