Add option to trigger outgoing webhook if first word starts with trigger word (#3611)

2 files changed, 74 insertions, 0 deletions

diff --git a/webapp/components/integrations/components/add_outgoing_webhook.jsx b/webapp/components/integrations/components/add_outgoing_webhook.jsx
index d6c0242a5..6f9750a90 100644
--- a/webapp/components/integrations/components/add_outgoing_webhook.jsx
+++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx
@@ -29,6 +29,7 @@ export default class AddOutgoingWebhook extends React.Component {
         this.updateContentType = this.updateContentType.bind(this);
         this.updateChannelId = this.updateChannelId.bind(this);
         this.updateTriggerWords = this.updateTriggerWords.bind(this);
+        this.updateTriggerWhen = this.updateTriggerWhen.bind(this);
         this.updateCallbackUrls = this.updateCallbackUrls.bind(this);
 
         this.state = {
@@ -37,6 +38,7 @@ export default class AddOutgoingWebhook extends React.Component {
             contentType: 'application/x-www-form-urlencoded',
             channelId: '',
             triggerWords: '',
+            triggerWhen: 0,
             callbackUrls: '',
             saving: false,
             serverError: '',
@@ -108,6 +110,7 @@ export default class AddOutgoingWebhook extends React.Component {
         const hook = {
             channel_id: this.state.channelId,
             trigger_words: triggerWords,
+            trigger_when: parseInt(this.state.triggerWhen, 10),
             callback_urls: callbackUrls,
             display_name: this.state.displayName,
             content_type: this.state.contentType,
@@ -158,6 +161,12 @@ export default class AddOutgoingWebhook extends React.Component {
         });
     }
 
+    updateTriggerWhen(e) {
+        this.setState({
+            triggerWhen: e.target.value
+        });
+    }
+
     updateCallbackUrls(e) {
         this.setState({
             callbackUrls: e.target.value
@@ -300,6 +309,41 @@ export default class AddOutgoingWebhook extends React.Component {
                         <div className='form-group'>
                             <label
                                 className='control-label col-sm-4'
+                                htmlFor='triggerWords'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.triggerWordsTriggerWhen'
+                                    defaultMessage='Trigger When'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-8'>
+                                <select
+                                    className='form-control'
+                                    value={this.state.triggerWhen}
+                                    onChange={this.updateTriggerWhen}
+                                >
+                                    <option
+                                        value='0'
+                                    >
+                                        <FormattedMessage
+                                            id='add_outgoing_webhook.triggerWordsTriggerWhenFullWord'
+                                            defaultMessage='First word matches a trigger word exactly'
+                                        />
+                                    </option>
+                                    <option
+                                        value='1'
+                                    >
+                                        <FormattedMessage
+                                            id='add_outgoing_webhook.triggerWordsTriggerWhenStartsWith'
+                                            defaultMessage='First word starts with a trigger word'
+                                        />
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-4'
                                 htmlFor='callbackUrls'
                             >
                                 <FormattedMessage
diff --git a/webapp/components/integrations/components/installed_outgoing_webhook.jsx b/webapp/components/integrations/components/installed_outgoing_webhook.jsx
index 852231823..4b478255c 100644
--- a/webapp/components/integrations/components/installed_outgoing_webhook.jsx
+++ b/webapp/components/integrations/components/installed_outgoing_webhook.jsx
@@ -66,6 +66,8 @@ export default class InstalledOutgoingWebhook extends React.Component {
         const outgoingWebhook = this.props.outgoingWebhook;
         const channel = ChannelStore.get(outgoingWebhook.channel_id);
         const filter = this.props.filter ? this.props.filter.toLowerCase() : '';
+        const triggerWordsFull = 0;
+        const triggerWordsStartsWith = 1;
 
         if (!this.matchesFilter(outgoingWebhook, channel, filter)) {
             return null;
@@ -127,6 +129,23 @@ export default class InstalledOutgoingWebhook extends React.Component {
             </div>
         );
 
+        let triggerWhen;
+        if (outgoingWebhook.trigger_when === triggerWordsFull) {
+            triggerWhen = (
+                <FormattedMessage
+                    id='add_outgoing_webhook.triggerWordsTriggerWhenFullWord'
+                    defaultMessage='First word matches a trigger word exactly'
+                />
+            );
+        } else if (outgoingWebhook.trigger_when === triggerWordsStartsWith) {
+            triggerWhen = (
+                <FormattedMessage
+                    id='add_outgoing_webhook.triggerWordsTriggerWhenStartsWith'
+                    defaultMessage='First word starts with a trigger word'
+                />
+            );
+        }
+
         return (
             <div className='backstage-list__item'>
                 <div className='item-details'>
@@ -149,6 +168,17 @@ export default class InstalledOutgoingWebhook extends React.Component {
                     </div>
                     {triggerWords}
                     <div className='item-details__row'>
+                        <span className='item-details__trigger-when'>
+                            <FormattedMessage
+                                id='installed_integrations.triggerWhen'
+                                defaultMessage='Trigger When: {triggerWhen}'
+                                values={{
+                                    triggerWhen
+                                }}
+                            />
+                        </span>
+                    </div>
+                    <div className='item-details__row'>
                         <span className='item-details__token'>
                             <FormattedMessage
                                 id='installed_integrations.token'