diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-07-06 16:40:40 -0400 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-07-06 12:40:40 -0800 |
commit | 3ebc259f63faddfd1d704037f5e84090fca82a7d (patch) | |
tree | 85047223e37953534dafb7d0b5a4c391d205332d /webapp | |
parent | b114062c1b8128fe650fce72454ba4f1fcbe5733 (diff) | |
download | chat-3ebc259f63faddfd1d704037f5e84090fca82a7d.tar.gz chat-3ebc259f63faddfd1d704037f5e84090fca82a7d.tar.bz2 chat-3ebc259f63faddfd1d704037f5e84090fca82a7d.zip |
Added help text to integrations pages in backstage (#3513)
Diffstat (limited to 'webapp')
7 files changed, 76 insertions, 11 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} > diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index b305e25bc..e47f68eb9 100644 --- a/webapp/i18n/en.json +++ b/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", diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index c74671231..5edba2660 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/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%; |