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

6 files changed, 61 insertions, 29 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;
-    }
 }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 75280c5e6..023584e1d 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -619,7 +619,7 @@
   "backstage_sidebar.integrations": "Integrations",
   "backstage_sidebar.integrations.incoming_webhooks": "Incoming Webhooks",
   "backstage_sidebar.integrations.outgoing_webhooks": "Outgoing Webhooks",
-  "backstage_sidebar.integrations.commands": "Commands",
+  "backstage_sidebar.integrations.commands": "Slash Commands",
   "center_panel.recent": "Click here to jump to recent messages. ",
   "chanel_header.addMembers": "Add Members",
   "change_url.close": "Close",
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index f6e0a8ac0..3257f6582 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -192,6 +192,7 @@ body {
     }
 
     .item-details {
+        color: $dark-gray;
         flex-grow: 1;
         flex-shrink: 1;
         overflow: hidden;
@@ -204,6 +205,7 @@ body {
     }
 
     .item-details__name {
+        color: black;
         font-weight: 600;
     }
 
@@ -213,8 +215,8 @@ body {
 
     .item-details__description,
     .item-details__token,
+    .item-details__trigger-words,
     .item-details__creation {
-        color: $dark-gray;
         display: inline-block;
         margin-top: 10px;
         vertical-align: top;
@@ -224,6 +226,10 @@ body {
         }
     }
 
+    .item-details__trigger-words {
+        white-space: nowrap;
+    }
+
     .item-actions {
         flex-grow: 0;
         flex-shrink: 0;