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

5 files changed, 65 insertions, 1 deletions

diff --git a/webapp/components/backstage/components/backstage_list.jsx b/webapp/components/backstage/components/backstage_list.jsx
index 81b8ec4d9..ecb8783b7 100644
--- a/webapp/components/backstage/components/backstage_list.jsx
+++ b/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>
diff --git a/webapp/components/emoji/components/emoji_list.jsx b/webapp/components/emoji/components/emoji_list.jsx
index 7f761fffd..b80615935 100644
--- a/webapp/components/emoji/components/emoji_list.jsx
+++ b/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.'
diff --git a/webapp/components/integrations/components/installed_commands.jsx b/webapp/components/integrations/components/installed_commands.jsx
index 597ba7005..f6429c33e 100644
--- a/webapp/components/integrations/components/installed_commands.jsx
+++ b/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}
             >
diff --git a/webapp/components/integrations/components/installed_incoming_webhooks.jsx b/webapp/components/integrations/components/installed_incoming_webhooks.jsx
index a3bcf904e..b14d1e3e8 100644
--- a/webapp/components/integrations/components/installed_incoming_webhooks.jsx
+++ b/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}
             >
diff --git a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
index ebc9a6fc1..214e60a48 100644
--- a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
+++ b/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}
             >