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

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
@@ -297,6 +306,41 @@ export default class AddOutgoingWebhook extends React.Component {
                                 />
                             </div>
                         </div>
+                        <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'

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'>
@@ -148,6 +167,17 @@ export default class InstalledOutgoingWebhook extends React.Component {
                         </span>
                     </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

webapp/i18n/en.json

@@ -98,6 +98,9 @@
   "add_outgoing_webhook.save": "Save",
   "add_outgoing_webhook.triggerWords": "Trigger Words (One Per Line)",
   "add_outgoing_webhook.triggerWordsOrChannelRequired": "A valid channel or a list of trigger words is required",
+  "add_outgoing_webhook.triggerWordsTriggerWhen": "Trigger When",
+  "add_outgoing_webhook.triggerWordsTriggerWhenFullWord": "First word matches a trigger word exactly",
+  "add_outgoing_webhook.triggerWordsTriggerWhenStartsWith": "First word starts with a trigger word",
   "admin.audits.reload": "Reload User Activity Logs",
   "admin.audits.title": "User Activity Logs",
   "admin.authentication.email": "Email Auth",
@@ -1109,6 +1112,7 @@
   "installed_integrations.regenToken": "Regenerate Token",
   "installed_integrations.token": "Token: {token}",
   "installed_integrations.triggerWords": "Trigger Words: {triggerWords}",
+  "installed_integrations.triggerWhen": "Trigger When: {triggerWhen}",
   "installed_integrations.url": "URL: {url}",
   "installed_outgoing_webhooks.add": "Add Outgoing Webhook",
   "installed_outgoing_webhooks.empty": "No outgoing webhooks found",

webapp/sass/routes/_backstage.scss

@@ -247,6 +247,7 @@
     .item-details__content_type,
     .item-details__token,
     .item-details__trigger-words,
+    .item-details__trigger-when,
     .item-details__url,
     .item-details__creation {
         display: inline-block;