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

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}
             >