Added help text to integrations pages in backstage (#3513)

webapp/components/backstage/components/backstage_list.jsx

@@ -15,6 +15,7 @@ export default class BackstageList extends React.Component {
         addLink: React.PropTypes.string,
         addText: React.PropTypes.node,
         emptyText: React.PropTypes.node,
+        helpText: React.PropTypes.node,
         loading: React.PropTypes.bool.isRequired,
         searchPlaceholder: React.PropTypes.string
     }
@@ -99,6 +100,9 @@ export default class BackstageList extends React.Component {
                         />
                     </div>
                 </div>
+                <span className='backstage-list__help'>
+                    {this.props.helpText}
+                </span>
                 <div className='backstage-list'>
                     {children}
                 </div>

webapp/components/emoji/components/emoji_list.jsx

@@ -140,7 +140,7 @@ export default class EmojiList extends React.Component {
                         />
                     </div>
                 </div>
-                <span className='emoji-list__help'>
+                <span className='backstage-list__help'>
                     <FormattedMessage
                         id='emoji_list.help'
                         defaultMessage='Custom emoji are available to everyone on your server and will show up in the emoji autocomplete menu.'

webapp/components/integrations/components/installed_commands.jsx

@@ -97,6 +97,26 @@ export default class InstalledCommands extends React.Component {
                         defaultMessage='No slash commands found'
                     />
                 }
+                helpText={
+                    <FormattedMessage
+                        id='installed_commands.help'
+                        defaultMessage='Create slash commands for use in external integrations. Please see {link} to learn more.'
+                        values={{
+                            link: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='http://docs.mattermost.com/developer/slash-commands.html'
+                                >
+                                    <FormattedMessage
+                                        id='installed_commands.helpLink'
+                                        defaultMessage='documentation'
+                                    />
+                                </a>
+                            )
+                        }}
+                    />
+                }
                 searchPlaceholder={Utils.localizeMessage('installed_commands.search', 'Search Slash Commands')}
                 loading={this.state.loading}
             >

webapp/components/integrations/components/installed_incoming_webhooks.jsx

@@ -91,6 +91,26 @@ export default class InstalledIncomingWebhooks extends React.Component {
                         defaultMessage='No incoming webhooks found'
                     />
                 }
+                helpText={
+                    <FormattedMessage
+                        id='installed_incoming_webhooks.help'
+                        defaultMessage='Create incoming webhook URLs for use in external integrations. Please see {link} to learn more.'
+                        values={{
+                            link: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='http://docs.mattermost.com/developer/webhooks-incoming.html'
+                                >
+                                    <FormattedMessage
+                                        id='installed_incoming_webhooks.helpLink'
+                                        defaultMessage='documentation'
+                                    />
+                                </a>
+                            )
+                        }}
+                    />
+                }
                 searchPlaceholder={Utils.localizeMessage('installed_incoming_webhooks.search', 'Search Incoming Webhooks')}
                 loading={this.state.loading}
             >

webapp/components/integrations/components/installed_outgoing_webhooks.jsx

@@ -97,6 +97,26 @@ export default class InstalledOutgoingWebhooks extends React.Component {
                         defaultMessage='No outgoing webhooks found'
                     />
                 }
+                helpText={
+                    <FormattedMessage
+                        id='installed_outgoing_webhooks.help'
+                        defaultMessage='Create outgoing webhook URLs for use in external integrations. Please see {link} to learn more.'
+                        values={{
+                            link: (
+                                <a
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href='http://docs.mattermost.com/developer/webhooks-outgoing.html'
+                                >
+                                    <FormattedMessage
+                                        id='installed_outgoing_webhooks.helpLink'
+                                        defaultMessage='documentation'
+                                    />
+                                </a>
+                            )
+                        }}
+                    />
+                }
                 searchPlaceholder={Utils.localizeMessage('installed_outgoing_webhooks.search', 'Search Outgoing Webhooks')}
                 loading={this.state.loading}
             >

webapp/i18n/en.json

@@ -1060,11 +1060,15 @@
   "installed_commands.add": "Add Slash Command",
   "installed_commands.empty": "No commands found",
   "installed_commands.header": "Slash Commands",
+  "installed_commands.help": "Create slash commands for use in external integrations. Please see the {link} to learn more.",
+  "installed_commands.helpLink": "documentation",
   "installed_commands.search": "Search Slash Commands",
   "installed_commands.unnamed_command": "Unnamed Slash Command",
   "installed_incoming_webhooks.add": "Add Incoming Webhook",
   "installed_incoming_webhooks.empty": "No incoming webhooks found",
   "installed_incoming_webhooks.header": "Incoming Webhooks",
+  "installed_incoming_webhooks.help": "Create incoming webhook URLs for use in external integrations. Please see the {link} to learn more.",
+  "installed_incoming_webhooks.helpLink": "documentation",
   "installed_incoming_webhooks.search": "Search Incoming Webhooks",
   "installed_incoming_webhooks.unknown_channel": "A Private Webhook",
   "installed_integrations.callback_urls": "Callback URLs: {urls}",
@@ -1078,6 +1082,8 @@
   "installed_outgoing_webhooks.add": "Add Outgoing Webhook",
   "installed_outgoing_webhooks.empty": "No outgoing webhooks found",
   "installed_outgoing_webhooks.header": "Outgoing Webhooks",
+  "installed_outgoing_webhooks.help": "Create outgoing webhook URLs for use in external integrations. Please see the {link} to learn more.",
+  "installed_outgoing_webhooks.helpLink": "documentation",
   "installed_outgoing_webhooks.search": "Search Outgoing Webhooks",
   "installed_outgoing_webhooks.unknown_channel": "A Private Webhook",
   "integrations.command.description": "Slash commands send events to external integrations",

webapp/sass/routes/_backstage.scss

@@ -196,7 +196,6 @@
 
     input {
         background: $white;
-        border-bottom-width: 0;
         padding-left: 30px;
     }
 }
@@ -208,6 +207,11 @@
     min-height: 50px;
 }
 
+.backstage-list__help {
+    display: block;
+    padding: 1em 0;
+}
+
 .backstage-list__item {
     border-bottom: 1px solid $light-gray;
     display: flex;
@@ -353,15 +357,6 @@
     color: $dark-gray;
 }
 
-.emoji-list .backstage-filter__search input {
-    border-bottom-width: 1px;
-}
-
-.emoji-list__help {
-    display: block;
-    padding: 1em 0;
-}
-
 .emoji-list__table {
     width: 100%;