PLT-2553 Additional backstage UI Improvements (#2673)

* Renamed Commands to Slash Commands in backstage UI

* Updated displayed info for listed commands and outgoing webhooks

* Disallowed empty outgoing webhook trigger words and improved client-side validation for them

4 files changed, 53 insertions, 27 deletions

diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index acdd98ba8..ff5e90e07 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -50,7 +50,18 @@ export default class AddOutgoingWebhook extends React.Component {
             clientError: ''
         });
 
-        if (!this.state.channelId && !this.state.triggerWords) {
+        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: (
@@ -64,7 +75,16 @@ export default class AddOutgoingWebhook extends React.Component {
             return;
         }
 
-        if (!this.state.callbackUrls) {
+        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: (
@@ -80,8 +100,8 @@ export default class AddOutgoingWebhook extends React.Component {
 
         const hook = {
             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()),
+            trigger_words: triggerWords,
+            callback_urls: callbackUrls,
             display_name: this.state.displayName,
             description: this.state.description
         };
diff --git a/webapp/components/backstage/installed_command.jsx b/webapp/components/backstage/installed_command.jsx
index 8b56ed595..c0c34bc78 100644
--- a/webapp/components/backstage/installed_command.jsx
+++ b/webapp/components/backstage/installed_command.jsx
@@ -78,6 +78,11 @@ export default class InstalledCommand extends React.Component {
             );
         }
 
+        let trigger = '- /' + command.trigger;
+        if (command.auto_complete && command.auto_complete_hint) {
+            trigger += ' ' + command.auto_complete_hint;
+        }
+
         return (
             <div className='backstage-list__item'>
                 <div className='item-details'>
@@ -86,7 +91,7 @@ export default class InstalledCommand extends React.Component {
                             {name}
                         </span>
                         <span className='item-details__trigger'>
-                            {'- /' + command.trigger}
+                            {trigger}
                         </span>
                     </div>
                     {description}
diff --git a/webapp/components/backstage/installed_commands.jsx b/webapp/components/backstage/installed_commands.jsx
index ead2f9850..3527a574b 100644
--- a/webapp/components/backstage/installed_commands.jsx
+++ b/webapp/components/backstage/installed_commands.jsx
@@ -74,14 +74,14 @@ export default class InstalledCommands extends React.Component {
             <InstalledIntegrations
                 header={
                     <FormattedMessage
-                        id='installed_integrations.commands'
-                        defaultMessage='Installed Commands'
+                        id='installed_commands.header'
+                        defaultMessage='Installed Slash Commands'
                     />
                 }
                 addText={
                     <FormattedMessage
-                        id='installed_integrations.add_command'
-                        defaultMessage='Add Command'
+                        id='installed_commands.add'
+                        defaultMessage='Add Slash Command'
                     />
                 }
                 addLink='/settings/integrations/commands/add'
diff --git a/webapp/components/backstage/installed_outgoing_webhook.jsx b/webapp/components/backstage/installed_outgoing_webhook.jsx
index b8704ccef..d27bd9029 100644
--- a/webapp/components/backstage/installed_outgoing_webhook.jsx
+++ b/webapp/components/backstage/installed_outgoing_webhook.jsx
@@ -95,6 +95,23 @@ export default class InstalledOutgoingWebhook extends React.Component {
             );
         }
 
+        let triggerWords = null;
+        if (outgoingWebhook.trigger_words && outgoingWebhook.trigger_words.length > 0) {
+            triggerWords = (
+                <div className='item-details__row'>
+                    <span className='item-details__trigger-words'>
+                        <FormattedMessage
+                            id='installed_integrations.triggerWords'
+                            defaultMessage='Trigger Words: {triggerWords}'
+                            values={{
+                                triggerWords: outgoingWebhook.trigger_words.join(', ')
+                            }}
+                        />
+                    </span>
+                </div>
+            );
+        }
+
         return (
             <div className='backstage-list__item'>
                 <div className='item-details'>
@@ -104,6 +121,7 @@ export default class InstalledOutgoingWebhook extends React.Component {
                         </span>
                     </div>
                     {description}
+                    {triggerWords}
                     <div className='item-details__row'>
                         <span className='item-details__token'>
                             <FormattedMessage
@@ -128,7 +146,7 @@ export default class InstalledOutgoingWebhook extends React.Component {
                         </span>
                     </div>
                 </div>
-                <div className='actions'>
+                <div className='item-actions'>
                     <a
                         href='#'
                         onClick={this.handleRegenToken}
@@ -152,21 +170,4 @@ export default class InstalledOutgoingWebhook extends React.Component {
             </div>
         );
     }
-
-    static matches(outgoingWebhook, filter) {
-        if (outgoingWebhook.display_name.toLowerCase().indexOf(filter) !== -1 ||
-            outgoingWebhook.description.toLowerCase().indexOf(filter) !== -1) {
-            return true;
-        }
-
-        if (outgoingWebhook.channel_id) {
-            const channel = ChannelStore.get(outgoingWebhook.channel_id);
-
-            if (channel && channel.name.toLowerCase().indexOf(filter) !== -1) {
-                return true;
-            }
-        }
-
-        return false;
-    }
 }